UI Redesign!

README.md

@@ -46,7 +46,7 @@ The objective is to have a self-hosted place to keep useful links in one place,
 
 ### Using Docker Compose (Recommended)
 
-1. Make sure Docker docker is installed.
+1. Make sure docker is installed.
 
 2. Clone this repository.
 

package-lock.json

@@ -13,6 +13,7 @@
         "@testing-library/user-event": "^13.5.0",
         "nanoid": "^3.3.4",
         "react": "^18.0.0",
+        "react-awesome-button": "^6.5.1",
         "react-dom": "^18.0.0",
         "react-lazyload": "^3.2.0",
         "react-loader-spinner": "^6.0.0-0",
@@ -13265,6 +13266,14 @@
         "node": ">=14"
       }
     },
+    "node_modules/react-awesome-button": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/react-awesome-button/-/react-awesome-button-6.5.1.tgz",
+      "integrity": "sha512-94AS4BSIgRCMSHq8wcy3ztostjLK8cqjUX6DT5oWiYNs3uxLv5uk4yFMlzXBjo0I4TERLOZGn66q0xwb+xw5qw==",
+      "dependencies": {
+        "web-animation-club": "^0.6.0"
+      }
+    },
     "node_modules/react-dev-utils": {
       "version": "12.0.0",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.0.tgz",
@@ -15536,6 +15545,11 @@
         "minimalistic-assert": "^1.0.0"
       }
     },
+    "node_modules/web-animation-club": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/web-animation-club/-/web-animation-club-0.6.0.tgz",
+      "integrity": "sha512-9W+EQu1HiaPLe/7WZlhJ2ULqQ4VL80RPDYW+ZcjfTKp6ayOuT1k3SVO6+tu0VBRmOqueJ/mrG+rjjInIv8Aglg=="
+    },
     "node_modules/web-vitals": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-2.1.4.tgz",
@@ -25762,6 +25776,14 @@
         "whatwg-fetch": "^3.6.2"
       }
     },
+    "react-awesome-button": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/react-awesome-button/-/react-awesome-button-6.5.1.tgz",
+      "integrity": "sha512-94AS4BSIgRCMSHq8wcy3ztostjLK8cqjUX6DT5oWiYNs3uxLv5uk4yFMlzXBjo0I4TERLOZGn66q0xwb+xw5qw==",
+      "requires": {
+        "web-animation-club": "^0.6.0"
+      }
+    },
     "react-dev-utils": {
       "version": "12.0.0",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.0.tgz",
@@ -27444,6 +27466,11 @@
         "minimalistic-assert": "^1.0.0"
       }
     },
+    "web-animation-club": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/web-animation-club/-/web-animation-club-0.6.0.tgz",
+      "integrity": "sha512-9W+EQu1HiaPLe/7WZlhJ2ULqQ4VL80RPDYW+ZcjfTKp6ayOuT1k3SVO6+tu0VBRmOqueJ/mrG+rjjInIv8Aglg=="
+    },
     "web-vitals": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-2.1.4.tgz",

package.json

@@ -9,6 +9,7 @@
     "@testing-library/user-event": "^13.5.0",
     "nanoid": "^3.3.4",
     "react": "^18.0.0",
+    "react-awesome-button": "^6.5.1",
     "react-dom": "^18.0.0",
     "react-lazyload": "^3.2.0",
     "react-loader-spinner": "^6.0.0-0",

src/App.js

@@ -13,6 +13,8 @@ import SideBar from "./componets/SideBar";
 import Tags from "./routes/Tags.js";
 import Collections from "./routes/Collections.js";
 import { Route, Routes } from "react-router-dom";
+import { AwesomeButton } from "react-awesome-button";
+import "react-awesome-button/dist/themes/theme-blue.css";
 
 function App() {
   const [data, setData] = useState([]),
@@ -58,7 +60,6 @@ function App() {
 
   function SetPath(pathname) {
     setPath(pathname);
-    console.log(path)
   }
 
   const filteredData = filter(data, searchQuery, filterCheckbox);
@@ -80,7 +81,7 @@ function App() {
   useEffect(() => {
     const currentURL = new URL(window.location.href);
     SetPath(currentURL.pathname);
-  }, [path])
+  }, [path]);
 
   useEffect(() => {
     fetchData();
@@ -108,13 +109,17 @@ function App() {
 
       <div className="content">
         <div className="head">
-          <button
+          <div className="sidebar-btn">
-            className="sidebar-btn btn"
+            <AwesomeButton
-            style={{ marginRight: "10px" }}
+              size="icon"
-            onClick={handleToggleSidebar}
+              type="primary"
-          >
+              action={handleToggleSidebar}
-            &#xf0c9;
+              style={{ marginRight: "10px" }}
-          </button>
+            >
+              &#xf0c9;
+            </AwesomeButton>
+          </div>
+
           <input
             className="search"
             type="search"
@@ -122,20 +127,32 @@ function App() {
             onChange={search}
           />
 
-          <button
+          <AwesomeButton
-            className="btn"
+            size="icon"
+            type="primary"
+            action={() => setFilterBox(true)}
             style={{ marginLeft: "10px" }}
-            onClick={() => setFilterBox(true)}
           >
             &#xf160;
-          </button>
+          </AwesomeButton>
-          <button className="add-btn btn" onClick={() => setNewBox(true)}>
+
+          <AwesomeButton
+            size="icon"
+            type="primary"
+            action={() => setNewBox(true)}
+            style={{ marginLeft: "auto" }}
+          >
             &#xf067;
-          </button>
+          </AwesomeButton>
-          <button
+
-            className="dark-light-btn btn"
+          <AwesomeButton
-            onClick={() => setLightMode(!lightMode)}
+            size="icon"
-          ></button>
+            type="primary"
+            action={() => setLightMode(!lightMode)}
+            style={{ marginLeft: "10px" }}
+          >
+            <div className="dark-light"></div>
+          </AwesomeButton>
         </div>
 
         {filterBox ? (
@@ -159,8 +176,6 @@ function App() {
           />
         ) : null}
 
-        
-
         {loader ? <Loader lightMode={lightMode} /> : null}
       </div>
 

src/componets/AddItem.js

@@ -3,6 +3,8 @@ import "../styles/SendItem.css";
 import TagSelection from "./TagSelection";
 import addItem from "../modules/send";
 import CollectionSelection from "./CollectionSelection";
+import { AwesomeButton } from "react-awesome-button";
+import "react-awesome-button/dist/themes/theme-blue.css";
 
 const AddItem = ({
   onExit,
@@ -81,9 +83,20 @@ const AddItem = ({
               collections={collections}
               lightMode={lightMode}
             />
-            <button onClick={newItem} className="send-btn">
+            <div>
-              Add &#xf067;
+              <AwesomeButton
-            </button>
+                size="medium"
+                action={newItem}
+                style={{
+                  marginTop: "20px",
+                  display: "block",
+                  marginLeft: "auto",
+                  marginRight: "auto",
+                }}
+              >
+                Add &#xf067;
+              </AwesomeButton>
+            </div>
           </div>
         </div>
       </div>

src/componets/CollectionSelection.js

@@ -33,7 +33,7 @@ export default function CollectionSelection({
       borderColor: "rgb(141, 141, 141)",
       opacity: "90%",
       color: "gray",
-      background: lightMode ? "lightyellow" : "#273949",
+      background: lightMode ? "#e0e0e0" : "#273949",
       boxShadow:
         "rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px",
     }),
@@ -55,7 +55,7 @@ export default function CollectionSelection({
 
     control: (provided, state) => ({
       ...provided,
-      background: lightMode ? "lightyellow" : "#273949",
+      background: lightMode ? "#e0e0e0" : "#273949",
       border: "none",
       borderRadius: "0px",
       boxShadow: state.isFocused

src/componets/EditItem.js

@@ -4,6 +4,8 @@ import "../styles/SendItem.css";
 import TagSelection from "./TagSelection";
 import editItem from "../modules/send";
 import CollectionSelection from "./CollectionSelection";
+import { AwesomeButton } from "react-awesome-button";
+import "react-awesome-button/dist/themes/theme-blue.css";
 
 const EditItem = ({
   tags,
@@ -66,10 +68,15 @@ const EditItem = ({
       <div className="send-box">
         <div className="box">
           <div className="title-delete-group">
-          <h2 className="edit-title">Edit Link</h2>
+            <h2 className="edit-title">Edit Link</h2>
-          <button className="delete" onClick={deleteItem}>
+            <AwesomeButton
-            &#xf2ed;
+              className="delete"
-          </button>
+              size="icon"
+              action={deleteItem}
+              style={{ marginLeft: "10px" }}
+            >
+              &#xf2ed;
+            </AwesomeButton>
           </div>
           <div className="AddItem-content">
             <h3>
@@ -107,7 +114,7 @@ const EditItem = ({
               lightMode={lightMode}
             />
             <h3>
-             Collection: <span className="optional">(Optional)</span>
+              Collection: <span className="optional">(Optional)</span>
             </h3>
             <CollectionSelection
               setCollection={SetCollection}
@@ -115,9 +122,18 @@ const EditItem = ({
               collection={collection}
               lightMode={lightMode}
             />
-            <button onClick={EditItem} className="send-btn">
+            <AwesomeButton
+              size="medium"
+              action={EditItem}
+              style={{
+                marginTop: "20px",
+                display: "block",
+                marginLeft: "auto",
+                marginRight: "auto",
+              }}
+            >
               Update &#xf303;
-            </button>
+            </AwesomeButton>
           </div>
         </div>
       </div>

src/componets/Filters.js

@@ -1,5 +1,7 @@
 import "../styles/Filters.css";
 import { useState } from "react";
+import { AwesomeButton } from "react-awesome-button";
+import "react-awesome-button/dist/themes/theme-blue.css";
 
 const Filters = ({
   filterCheckbox,
@@ -41,7 +43,7 @@ const Filters = ({
               <label>
                 <input
                   name="sort"
-                  checked={radio.toString() === '1'}
+                  checked={radio.toString() === "1"}
                   onChange={handleRadio}
                   type="radio"
                   value={1}
@@ -51,7 +53,7 @@ const Filters = ({
               <label>
                 <input
                   name="sort"
-                  checked={radio.toString() === '2'}
+                  checked={radio.toString() === "2"}
                   onChange={handleRadio}
                   type="radio"
                   value={2}
@@ -61,7 +63,7 @@ const Filters = ({
               <label>
                 <input
                   name="sort"
-                  checked={radio.toString() === '3'}
+                  checked={radio.toString() === "3"}
                   onChange={handleRadio}
                   type="radio"
                   value={3}
@@ -71,7 +73,7 @@ const Filters = ({
               <label>
                 <input
                   name="sort"
-                  checked={radio.toString() === '4'}
+                  checked={radio.toString() === "4"}
                   onChange={handleRadio}
                   type="radio"
                   value={4}
@@ -81,7 +83,7 @@ const Filters = ({
               <label>
                 <input
                   name="sort"
-                  checked={radio.toString() === '5'}
+                  checked={radio.toString() === "5"}
                   onChange={handleRadio}
                   type="radio"
                   value={5}
@@ -91,7 +93,7 @@ const Filters = ({
               <label>
                 <input
                   name="sort"
-                  checked={radio.toString() === '6'}
+                  checked={radio.toString() === "6"}
                   onChange={handleRadio}
                   type="radio"
                   value={6}
@@ -129,9 +131,18 @@ const Filters = ({
             </div>
           </div>
 
-          <button className="apply-btn" onClick={applyChanges}>
+          <AwesomeButton
-            Apply
+            size="medium"
-          </button>
+            action={applyChanges}
+            style={{
+              marginTop: "20px",
+              display: "block",
+              marginLeft: "auto",
+              marginRight: "auto",
+            }}
+          >
+            Apply &#xf00c;
+          </AwesomeButton>
         </div>
       </div>
     </>

src/componets/List.js

@@ -5,6 +5,10 @@ import EditItem from "./EditItem";
 import { useState, useEffect } from "react";
 import { Link } from "react-router-dom";
 import NoResults from "./NoResults";
+import {
+  AwesomeButton
+} from 'react-awesome-button';
+import 'react-awesome-button/dist/themes/theme-blue.css';
 
 const List = ({ SetPath, data, tags, collections, reFetch, SetLoader, lightMode }) => {
   const [editBox, setEditBox] = useState(false),
@@ -62,7 +66,7 @@ const List = ({ SetPath, data, tags, collections, reFetch, SetLoader, lightMode
             "https://www.google.com/s2/favicons?domain=" + url.hostname;
           return (
             <LazyLoad key={i} height={200} offset={200}>
-              <div className="list-row">
+              <div className="list-row neomorphisim">
                 <div className="img-content-grp">
                   <img alt="" src={favicon} />
                   <div className="list-entity-content">
@@ -101,9 +105,13 @@ const List = ({ SetPath, data, tags, collections, reFetch, SetLoader, lightMode
                 </div>
                 <div className="etc">
                   <ViewArchived className="view-archived" id={e._id} />
-                  <button className="btn edit-btn" onClick={() => edit(i)}>
+                  <AwesomeButton
+                    size="icon"
+                    action={() => edit(i)}
+                    style={{ margin: "20px 20px 20px 0px" }}
+                  >
                     &#xf303;
-                  </button>
+                  </AwesomeButton>
                 </div>
               </div>
             </LazyLoad>

src/componets/NoResults.js

@@ -2,7 +2,7 @@ import React from "react";
 
 const NoResults = () => {
   return (
-    <div className="no-results">
+    <div className="no-results neomorphisim">
       <h1>¯\_(ツ)_/¯</h1>
       <p>Nothing found.</p>
     </div>

src/componets/TagSelection.js

@@ -33,7 +33,7 @@ export default function TagSelection({ setTags, tags, tag = [], lightMode }) {
       borderColor: "rgb(141, 141, 141)",
       opacity: "90%",
       color: "gray",
-      background: lightMode ? "lightyellow" : "#273949",
+      background: lightMode ? "#e0e0e0" : "#273949",
       boxShadow:
         "rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px",
     }),
@@ -53,7 +53,7 @@ export default function TagSelection({ setTags, tags, tag = [], lightMode }) {
 
     control: (provided, state) => ({
       ...provided,
-      background: lightMode ? "lightyellow" : "#273949",
+      background: lightMode ? "#e0e0e0" : "#273949",
       border: "none",
       borderRadius: "0px",
       boxShadow: state.isFocused

src/index.js

@@ -6,9 +6,7 @@ import { BrowserRouter } from "react-router-dom";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
-  <React.StrictMode>
+  <BrowserRouter>
-    <BrowserRouter>
+    <App />
-      <App />
+  </BrowserRouter>
-    </BrowserRouter>
-  </React.StrictMode>
 );

src/styles/App.css

@@ -60,39 +60,11 @@
   box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
 }
 
-.btn {
-  position: relative;
-  border-radius: 100%;
-  font-family: "Font Awesome 5 Free";
-  width: 40px;
-  height: 40px;
-  padding: 10px;
-  font-size: 1.1rem;
-  cursor: pointer;
-  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
-    rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
-  border: none;
-  transition: background-color 0.1s;
-}
-
-.btn:active {
-  box-shadow: 0px 0px 10px rgb(83, 143, 255);
-}
-
-.add-btn {
-  margin-left: auto;
-}
-
 textarea:focus,
 input:focus {
   outline: none;
 }
 
-.dark-light-btn {
-  margin-left: 10px;
-  font-size: 1.2em;
-}
-
 .select {
-  font-family: "Font Awesome 5 Free"
+  font-family: "Font Awesome 5 Free";
 }

src/styles/Filters.css

@@ -69,34 +69,9 @@
   padding: 10px;
   font-size: 1.1rem;
   cursor: pointer;
-  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
-    rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
   border: none;
 }
 
-.filter label:active {
-  box-shadow: 0px 0px 10px rgb(83, 143, 255);
-}
-
-.apply-btn {
-  font-family: "Font Awesome 5 Free";
-  font-size: 1.2rem;
-  padding: 10px;
-  cursor: pointer;
-  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
-    rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
-  border: none;
-  margin-top: 20px;
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-  transition: background-color 0.1s;
-}
-
-.apply-btn:active {
-  box-shadow: 0px 0px 10px rgb(83, 143, 255);
-}
-
 @keyframes fadein {
   from {
     opacity: 0%;

src/styles/List.css

@@ -24,9 +24,6 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
-      rgba(0, 0, 0, 0.3) 0px 7px 13px -3px,
-      rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
   }
 
   .list-row:hover img {
@@ -58,9 +55,6 @@
     justify-content: space-between;
     align-items: center;
     text-align: center;
-    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
-      rgba(0, 0, 0, 0.3) 0px 7px 13px -3px,
-      rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
   }
   .etc {
     display: flex;
@@ -131,21 +125,6 @@
   opacity: 100%;
 }
 
-.edit-btn {
-  margin: 20px 20px 20px 0px;
-  width: 50px;
-  height: 50px;
-  font-size: 1.5rem;
-}
-
-.edit-btn:hover {
-  background-color: rgb(76, 117, 170);
-}
-
-.edit-btn:active {
-  box-shadow: 0px 0px 10px rgb(83, 143, 255);
-}
-
 .row-name {
   font-size: 2rem;
   word-break: break-word;
@@ -178,32 +157,6 @@
   display: inline;
 }
 
-.delete {
-  margin-top: 20px;
-  margin-left: 10px;
-  font-size: 1.1rem;
-  width: 40px;
-  height: 40px;
-  position: relative;
-  border-radius: 100%;
-  font-family: "Font Awesome 5 Free";
-  width: 40px;
-  height: 40px;
-  padding: 10px;
-  font-size: 1.1rem;
-  cursor: pointer;
-  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
-    rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
-  background-color: rgba(255, 75, 75, 0.8);
-  color: white;
-  border: none;
-  transition: box-shadow 0.1s;
-}
-
-.delete:hover {
-  box-shadow: 0px 0px 10px rgb(255, 83, 140);
-}
-
 .date {
   font-weight: 500;
   font-size: 0.7rem;
@@ -216,9 +169,7 @@
   text-align: center;
   padding-top: 5%;
   padding-bottom: 5%;
-  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
+  margin-top: 20px;
-    rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
-  margin-top: 10px;
 }
 
 .edit-title {
@@ -227,6 +178,7 @@
 
 .title-delete-group {
   text-align: center;
+  margin-top: 10px;
 }
 
 .list-collection-label {

src/styles/SendItem.css

@@ -38,7 +38,6 @@
   box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
   position: absolute;
   z-index: 2;
-  background-color: #1f2c38;
   overflow-x: hidden;
   overflow-y: auto;
 }
@@ -76,25 +75,6 @@
   box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
 }
 
-.send-btn {
-  font-family: "Font Awesome 5 Free";
-  font-size: 1.2rem;
-  padding: 10px;
-  cursor: pointer;
-  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
-    rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
-  border: none;
-  margin-top: 20px;
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-  transition: background-color 0.1s;
-}
-
-.send-btn:active {
-  box-shadow: 0px 0px 10px rgb(83, 143, 255);
-}
-
 @keyframes fadein {
   from {
     opacity: 0%;

src/styles/index.css

@@ -5,7 +5,7 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background-color: #1f2c38;
+  background-color: #273949;
   text-shadow: 0px 1px 2px #000000;
   color: white;
   transition: background-color 0.1s;
@@ -19,24 +19,33 @@ body {
 
 /* Dark Mode settings (Default) */
 
-.dark-light-btn::before {
+.neomorphisim {
+  border-radius: 50px;
+  background: #273949;
+  box-shadow:  5px 5px 10px #21303e,
+              -5px -5px 10px #2d4254;
+}
+
+.dark-light::before {
   content: "";
 }
 
-.no-results {
+.App .aws-btn {
-  background-color: #1f2c38;
+  font-family: "Font Awesome 5 Free";
-}
+  --button-default-height: 51px;
-
+  --button-default-font-size: 14px;
-.send-btn,
+  --button-default-border-radius: 25px;
-.apply-btn {
+  --button-horizontal-padding: 20px;
-  background-color: #273949;
+  --button-raise-level: 3px;
-  color: #ffffffb6;
+  --button-hover-pressure: 0;
-}
+  --transform-speed: 0.025s;
-
+  --button-primary-color: #273949;
-.btn:hover,
+  --button-primary-color-dark: #c6e4ff;
-.send-btn:hover,
+  --button-primary-color-light: #c6e4ff;
-.apply-btn:hover {
+  --button-primary-color-hover: #0d4a7f;
-  background-color: rgb(76, 117, 170);
+  --button-primary-color-active: #0f5ca0;
+  --button-primary-border: none;
+  z-index: 0;
 }
 
 .title {
@@ -47,97 +56,66 @@ body {
   color: rgb(194, 193, 193);
 }
 
-.btn {
-  color: #ffffffb6;
-  background-color: #273949;
-}
-
-.edit-btn {
-  background-color: #1f2c38;
-}
-
-.no-results,
-.list-row {
-  transition: background-color 0.1s;
-  background-color: #273949;
-}
-
 .search {
   transition: background-color 0.1s;
   background-color: #273949;
   color: white;
 }
 
-.filter {
+.filter, .box {
-  background-color: #1f2c38;
-}
-
-.section > label {
   background-color: #273949;
-  color: #ffffffb6;
 }
 
 /* Light Mode settings */
 
-.light .dark-light-btn::before {
+.light .dark-light::before {
   content: "";
 }
 
 .light {
   text-shadow: 0px 1px 2px #ffffff;
-  background-color: rgb(233, 220, 179);
+  background-color: #e0e0e0;
   color: rgb(64, 64, 64);
 }
 
+.light .neomorphisim {
+  border-radius: 50px;
+  background: #e0e0e0;
+  box-shadow:  5px 5px 10px #bebebe,
+              -5px -5px 10px #ffffff;
+}
+
 .light .title {
   color: rgb(0, 0, 0);
 }
 
-.light .list-row {
-  background-color: lightyellow;
-}
-
-.light .btn {
-  background-color: lightyellow;
-  color: gray;
-}
-
 .light input {
-  background-color: lightyellow;
+  background-color: #e0e0e0;
   color: black;
 }
 
-.light .box,
+.light .box, .light .filter {
-.light .edit-btn {
+  background-color: #e0e0e0;
-  background-color: rgb(233, 220, 179);
 }
 
 .light .link {
   color: rgb(102, 102, 102);
 }
 
-.light .filter {
+.light .aws-btn {
-  background-color: rgb(233, 220, 179);
+  font-family: "Font Awesome 5 Free";
-}
+  --button-default-height: 51px;
-
+  --button-default-font-size: 14px;
-.light .section > label {
+  --button-default-border-radius: 25px;
-  background-color: lightyellow;
+  --button-horizontal-padding: 20px;
-  color: #4b4b4bb6;
+  --button-raise-level: 3px;
-}
+  --button-hover-pressure: 0;
-
+  --transform-speed: 0.025s;
-.light .send-btn,
+  --button-primary-color: #e0e0e0;
-.light .apply-btn {
+  --button-primary-color-dark: #354c7d;
-  background-color: lightyellow;
+  --button-primary-color-light: #354c7d;
-  color: #717171b6;
+  --button-primary-color-hover: #e1eaf1;
-}
+  --button-primary-color-active: #e2e2e2;
-
+  --button-primary-border: none;
-.light .btn:hover,
+  z-index: 0;
-.light .send-btn:hover,
-.light .apply-btn:hover {
-  background-color: rgb(55, 131, 237);
-  color: #d8d8d8;
-}
-
-.light .no-results {
-  background-color: lightyellow;
 }