Small changes.

src/App.js

@@ -111,7 +111,7 @@ function App() {
           </div>
 
           <input
-            className="search"
+            className="search text-field"
             type="search"
             placeholder=" Search"
             onChange={search}

src/componets/AddItem.js

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import "../styles/SendItem.css";
+import "../styles/AddItem.css";
 import TagSelection from "./TagSelection";
 import addItem from "../modules/send";
 import CollectionSelection from "./CollectionSelection";
@@ -58,7 +58,7 @@ const AddItem = ({
             </h3>
             <input
               onChange={SetLink}
-              className="AddItem-input"
+              className="text-field AddItem-input"
               type="search"
               placeholder="e.g. https://example.com/"
             />
@@ -67,7 +67,7 @@ const AddItem = ({
             </h3>
             <input
               onChange={SetName}
-              className="AddItem-input"
+              className="text-field AddItem-input"
               type="search"
               placeholder="e.g. Example Tutorial"
             />

src/componets/CollectionSelection.js

@@ -53,14 +53,13 @@ export default function CollectionSelection({
       color: lightMode ? "rgb(64, 64, 64)" : "white",
     }),
 
-    control: (provided, state) => ({
+    control: (provided) => ({
       ...provided,
       background: lightMode ? "#e0e0e0" : "#273949",
-      border: "none",
+      borderWidth: "2px",
-      borderRadius: "0px",
+      borderColor: lightMode ? "#1e88e5": "#e7f4ff",
-      boxShadow: state.isFocused
+      borderRadius: "50px",
-        ? "rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px"
+      boxShadow: lightMode ? "0px 2px 0px #354c7d, 0px 3px 1px #363636" : "0px 2px 0px #c6e4ff, 0px 3px 1px #363636",
-        : "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",
     }),
   };
 

src/componets/EditItem.js

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import deleteEntity from "../modules/deleteEntity";
-import "../styles/SendItem.css";
+import "../styles/AddItem.css";
 import TagSelection from "./TagSelection";
 import editItem from "../modules/send";
 import CollectionSelection from "./CollectionSelection";
@@ -99,7 +99,7 @@ const EditItem = ({
             </h3>
             <input
               onChange={SetName}
-              className="AddItem-input"
+              className="text-field AddItem-input"
               type="search"
               value={name}
               placeholder={"e.g. Example Tutorial"}

src/componets/List.js

@@ -54,7 +54,7 @@ const List = ({ data, tags, collections, reFetch, SetLoader, lightMode }) => {
       ) : null}
 
       {/* eslint-disable-next-line */}
-      {data.map((e, i, array) => {
+      {data.map((e, i) => {
         try {
           const url = new URL(e.link);
           const favicon =
@@ -67,7 +67,7 @@ const List = ({ data, tags, collections, reFetch, SetLoader, lightMode }) => {
                   <div className="list-entity-content">
                     <div className="row-name">
                       <span className="num">{i + 1}</span>
-                      {e.name}
+                      {e.name + " "}
                       <a
                         className="link"
                         target="_blank"

src/componets/TagSelection.js

@@ -51,14 +51,13 @@ export default function TagSelection({ setTags, tags, tag = [], lightMode }) {
       },
     }),
 
-    control: (provided, state) => ({
+    control: (provided) => ({
       ...provided,
       background: lightMode ? "#e0e0e0" : "#273949",
-      border: "none",
+      borderWidth: "2px",
-      borderRadius: "0px",
+      borderColor: lightMode ? "#1e88e5": "#e7f4ff",
-      boxShadow: state.isFocused
+      borderRadius: "50px",
-        ? "rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px"
+      boxShadow: lightMode ? "0px 2px 0px #354c7d, 0px 3px 1px #363636" : "0px 2px 0px #c6e4ff, 0px 3px 1px #363636",
-        : "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",
     }),
   };
 

src/styles/AddItem.css

@@ -60,20 +60,8 @@
 .AddItem-input {
   font-size: 1rem;
   padding: 10px;
-  border: none;
   width: 100%;
-  color: white;
+  border-radius: 50px;
-  background-color: #273949;
-  border-radius: 0;
-  -webkit-appearance: none;
-  -webkit-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;
-  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;
-}
-
-.AddItem-input:focus {
-  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
 }
 
 @keyframes fadein {

src/styles/App.css

@@ -45,22 +45,9 @@
   font-family: "Font Awesome 5 Free";
   padding-left: 10px;
   font-size: 1rem;
-  border: none;
+  border: solid;
-  border-radius: 0;
+  border-radius: 50px;
-  -webkit-appearance: none;
+  border-width: 2px;
-  -webkit-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;
-  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;
-}
-
-.search:focus {
-  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
-}
-
-textarea:focus,
-input:focus {
-  outline: none;
 }
 
 .select {

src/styles/index.css

@@ -26,6 +26,17 @@ body {
                -5px -5px 10px #3e5b75;
 }
 
+.text-field {
+  background-color: #273949;
+  border: solid;
+  border-width: 2px;
+  color: White;
+  border-color: #e7f4ff;
+  box-shadow: 0px 2px 0px #c6e4ff, 0px 3px 1px #363636;
+  -webkit-appearance: none;
+  -webkit-box-shadow: 0px 2px 0px #c6e4ff, 0px 3px 1px #363636;
+}
+
 .dark-light::before {
   content: "";
 }
@@ -39,7 +50,7 @@ body {
   --button-raise-level: 3px;
   --button-hover-pressure: 0;
   --transform-speed: 0.025s;
-  --button-primary-color: rgba(39, 57, 73, 0.9);
+  --button-primary-color: #273949;
   --button-primary-color-dark: #c6e4ff;
   --button-primary-color-light: #c6e4ff;
   --button-primary-color-hover: #0d4a7f;
@@ -89,9 +100,15 @@ body {
   color: rgb(0, 0, 0);
 }
 
-.light input {
+.light .text-field {
   background-color: #e0e0e0;
+  border: solid;
+  border-width: 2px;
   color: black;
+  border-color: #1e88e5;
+  box-shadow: 0px 2px 0px #354c7d, 0px 3px 1px #363636;
+  -webkit-appearance: none;
+  -webkit-box-shadow: 0px 2px 0px #354c7d, 0px 3px 1px #363636;
 }
 
 .light .box, .light .filter {
@@ -111,7 +128,7 @@ body {
   --button-raise-level: 3px;
   --button-hover-pressure: 0;
   --transform-speed: 0.025s;
-  --button-primary-color: rgba(224, 224, 224, 0.9);
+  --button-primary-color: #e0e0e0;
   --button-primary-color-dark: #354c7d;
   --button-primary-color-light: #354c7d;
   --button-primary-color-hover: #e1eaf1;