UI Redesign!

2022-06-29 23:32:19 +04:30 · 2022-06-29 23:32:19 +04:30 · ffdc0e566a
parent 2dfe405f34
commit ffdc0e566a
17 changed files with 200 additions and 254 deletions
--- a/README.md
+++ b/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.

--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",
--- a/src/App.js
+++ b/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
-            className="sidebar-btn btn"
-            style={{ marginRight: "10px" }}
-            onClick={handleToggleSidebar}
-          >
-            &#xf0c9;
-          </button>
+          <div className="sidebar-btn">
+            <AwesomeButton
+              size="icon"
+              type="primary"
+              action={handleToggleSidebar}
+              style={{ marginRight: "10px" }}
+            >
+              &#xf0c9;
+            </AwesomeButton>
+          </div>
+
          <input
            className="search"
            type="search"
@ -122,20 +127,32 @@ function App() {
            onChange={search}
          />

-          <button
-            className="btn"
+          <AwesomeButton
+            size="icon"
+            type="primary"
+            action={() => setFilterBox(true)}
            style={{ marginLeft: "10px" }}
-            onClick={() => setFilterBox(true)}
          >
            &#xf160;
-          </button>
-          <button className="add-btn btn" onClick={() => setNewBox(true)}>
+          </AwesomeButton>
+
+          <AwesomeButton
+            size="icon"
+            type="primary"
+            action={() => setNewBox(true)}
+            style={{ marginLeft: "auto" }}
+          >
            &#xf067;
-          </button>
-          <button
-            className="dark-light-btn btn"
-            onClick={() => setLightMode(!lightMode)}
-          ></button>
+          </AwesomeButton>
+
+          <AwesomeButton
+            size="icon"
+            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>

--- a/src/componets/AddItem.js
+++ b/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">
-              Add &#xf067;
-            </button>
+            <div>
+              <AwesomeButton
+                size="medium"
+                action={newItem}
+                style={{
+                  marginTop: "20px",
+                  display: "block",
+                  marginLeft: "auto",
+                  marginRight: "auto",
+                }}
+              >
+                Add &#xf067;
+              </AwesomeButton>
+            </div>
          </div>
        </div>
      </div>
--- a/src/componets/CollectionSelection.js
+++ b/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
--- a/src/componets/EditItem.js
+++ b/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>
-          <button className="delete" onClick={deleteItem}>
-            &#xf2ed;
-          </button>
+            <h2 className="edit-title">Edit Link</h2>
+            <AwesomeButton
+              className="delete"
+              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>
--- a/src/componets/Filters.js
+++ b/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}>
-            Apply
-          </button>
+          <AwesomeButton
+            size="medium"
+            action={applyChanges}
+            style={{
+              marginTop: "20px",
+              display: "block",
+              marginLeft: "auto",
+              marginRight: "auto",
+            }}
+          >
+            Apply &#xf00c;
+          </AwesomeButton>
        </div>
      </div>
    </>
--- a/src/componets/List.js
+++ b/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>
--- a/src/componets/NoResults.js
+++ b/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>
--- a/src/componets/TagSelection.js
+++ b/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
--- a/src/index.js
+++ b/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>
-      <App />
-    </BrowserRouter>
-  </React.StrictMode>
+  <BrowserRouter>
+    <App />
+  </BrowserRouter>
 );
--- a/src/styles/App.css
+++ b/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";
 }
--- a/src/styles/Filters.css
+++ b/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%;
--- a/src/styles/List.css
+++ b/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,
-    rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
-  margin-top: 10px;
+  margin-top: 20px;
 }

 .edit-title {
@ -227,6 +178,7 @@

 .title-delete-group {
  text-align: center;
+  margin-top: 10px;
 }

 .list-collection-label {
--- a/src/styles/SendItem.css
+++ b/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%;
--- a/src/styles/index.css
+++ b/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 {
-  background-color: #1f2c38;
-}
-
-.send-btn,
-.apply-btn {
-  background-color: #273949;
-  color: #ffffffb6;
-}
-
-.btn:hover,
-.send-btn:hover,
-.apply-btn:hover {
-  background-color: rgb(76, 117, 170);
+.App .aws-btn {
+  font-family: "Font Awesome 5 Free";
+  --button-default-height: 51px;
+  --button-default-font-size: 14px;
+  --button-default-border-radius: 25px;
+  --button-horizontal-padding: 20px;
+  --button-raise-level: 3px;
+  --button-hover-pressure: 0;
+  --transform-speed: 0.025s;
+  --button-primary-color: #273949;
+  --button-primary-color-dark: #c6e4ff;
+  --button-primary-color-light: #c6e4ff;
+  --button-primary-color-hover: #0d4a7f;
+  --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 {
-  background-color: #1f2c38;
-}
-
-.section > label {
+.filter, .box {
  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 .edit-btn {
-  background-color: rgb(233, 220, 179);
+.light .box, .light .filter {
+  background-color: #e0e0e0;
 }

 .light .link {
  color: rgb(102, 102, 102);
 }

-.light .filter {
-  background-color: rgb(233, 220, 179);
-}
-
-.light .section > label {
-  background-color: lightyellow;
-  color: #4b4b4bb6;
-}
-
-.light .send-btn,
-.light .apply-btn {
-  background-color: lightyellow;
-  color: #717171b6;
-}
-
-.light .btn:hover,
-.light .send-btn:hover,
-.light .apply-btn:hover {
-  background-color: rgb(55, 131, 237);
-  color: #d8d8d8;
-}
-
-.light .no-results {
-  background-color: lightyellow;
+.light .aws-btn {
+  font-family: "Font Awesome 5 Free";
+  --button-default-height: 51px;
+  --button-default-font-size: 14px;
+  --button-default-border-radius: 25px;
+  --button-horizontal-padding: 20px;
+  --button-raise-level: 3px;
+  --button-hover-pressure: 0;
+  --transform-speed: 0.025s;
+  --button-primary-color: #e0e0e0;
+  --button-primary-color-dark: #354c7d;
+  --button-primary-color-light: #354c7d;
+  --button-primary-color-hover: #e1eaf1;
+  --button-primary-color-active: #e2e2e2;
+  --button-primary-border: none;
+  z-index: 0;
 }