design upd

Author: maxchistt

src/App.css

@@ -50,3 +50,15 @@
     transform: rotate(360deg);
   }
 }
+
+.palitra-blackOnHover:hover {
+  color: black !important;
+}
+
+.palitra-blackOnHover {
+  border-color: lightgray !important;
+}
+
+.palitra-btn:focus {
+  box-shadow: 0 0 0 0.2rem rgb(216 217 219 / 50%) !important;
+}

src/Cards/AddCard.js

@@ -20,6 +20,19 @@ function AddCard({ onCreate, onDeleteAll }) {
 
   const defColor = colors[0]
   const [color, setColor] = React.useState(defColor)
+  const blackOnHover = () => {
+    switch (color) {
+      case colors[0]:
+      case colors[2]:
+      case colors[3]:
+      case colors[4]:
+      case colors[6]:
+      case colors[8]:
+        return true
+      default:
+        return false
+    }
+  }
 
   function submitHandler() {
     if (String(input.value()).trim() && String(color).trim()) {
@@ -33,7 +46,7 @@ function AddCard({ onCreate, onDeleteAll }) {
     <div className="container">
       <div className="row my-2 text-center">
 
-        <div className="col-lg-12 col-md-12 p-1">
+        <div className="col-lg-9 col-md-10 col-12 p-1">
           <TextareaAutosize type="text" className="form-control" placeholder="Card name" id="Text"
             {...input.bind}
             style={{ resize: "none" }}
@@ -43,16 +56,15 @@ function AddCard({ onCreate, onDeleteAll }) {
           />
         </div>
 
-        <div className="col-lg-8 col-md-6 col-sm-4 p-1">
-          <Palette setColor={setColor} className="btn btn-outline-secondary" style={{ width: "100%" }}></Palette>
-        </div>
-
-        <div className="col-lg-2 col-md-3 col-sm-4 col-6 p-1">
-          <button disabled={!input.value().trim()} className="btn btn-success btn-block" onClick={submitHandler}><i className="bi bi-clipboard-plus"></i> Add card</button>
+        <div className="col-lg-1 col-md-1 col-sm-3 col-4 p-1">
+          <Palette setColor={setColor} className={`btn btn-outline-secondary palitra-btn ${blackOnHover() ? "palitra-blackOnHover" : ""}`} style={{ width: "100%", background: color }}></Palette>
         </div>
 
-        <div className="col-lg-2 col-md-3 col-sm-4 col-6 p-1">
-          <button className="btn btn-danger btn-block" onClick={onDeleteAll}><i className="bi bi-x-square"></i> Delete All</button>
+        <div className="col-lg-2 col-md-1 col p-1">
+          <button disabled={!input.value().trim()} className="btn btn-success btn-block" onClick={submitHandler}>
+            <i className="bi bi-clipboard-plus"></i>
+            <span className='d-lg-inline d-none'> Add card</span>
+          </button>
         </div>
 
       </div>

src/Cards/palette.js

@@ -2,6 +2,7 @@ import React from "react";
 import PropTypes from 'prop-types'
 
 export const colors = [
+  "#f8f9fa",
   "#F38181",
   "#FCE38A",
   "#EAFFD0",