diff --git a/src/App.js b/src/App.js
index 3592b3e..6ca6822 100644
--- a/src/App.js
+++ b/src/App.js
@@ -111,7 +111,7 @@ function App() {
@@ -67,7 +67,7 @@ const AddItem = ({
diff --git a/src/componets/CollectionSelection.js b/src/componets/CollectionSelection.js
index 148aeb7..bab0ebe 100644
--- a/src/componets/CollectionSelection.js
+++ b/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",
- borderRadius: "0px",
- boxShadow: state.isFocused
- ? "rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px"
- : "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",
+ borderWidth: "2px",
+ borderColor: lightMode ? "#1e88e5": "#e7f4ff",
+ borderRadius: "50px",
+ boxShadow: lightMode ? "0px 2px 0px #354c7d, 0px 3px 1px #363636" : "0px 2px 0px #c6e4ff, 0px 3px 1px #363636",
}),
};
diff --git a/src/componets/EditItem.js b/src/componets/EditItem.js
index 09ab412..3e6bffc 100644
--- a/src/componets/EditItem.js
+++ b/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 = ({
{
) : 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 }) => {
{i + 1}
- {e.name}
+ {e.name + " "}
({
+ control: (provided) => ({
...provided,
background: lightMode ? "#e0e0e0" : "#273949",
- border: "none",
- borderRadius: "0px",
- boxShadow: state.isFocused
- ? "rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px"
- : "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",
+ borderWidth: "2px",
+ borderColor: lightMode ? "#1e88e5": "#e7f4ff",
+ borderRadius: "50px",
+ boxShadow: lightMode ? "0px 2px 0px #354c7d, 0px 3px 1px #363636" : "0px 2px 0px #c6e4ff, 0px 3px 1px #363636",
}),
};
diff --git a/src/styles/SendItem.css b/src/styles/AddItem.css
similarity index 69%
rename from src/styles/SendItem.css
rename to src/styles/AddItem.css
index 4f57322..a456290 100644
--- a/src/styles/SendItem.css
+++ b/src/styles/AddItem.css
@@ -60,20 +60,8 @@
.AddItem-input {
font-size: 1rem;
padding: 10px;
- border: none;
width: 100%;
- color: white;
- 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;
+ border-radius: 50px;
}
@keyframes fadein {
diff --git a/src/styles/App.css b/src/styles/App.css
index 9ddc089..8ca0884 100644
--- a/src/styles/App.css
+++ b/src/styles/App.css
@@ -45,22 +45,9 @@
font-family: "Font Awesome 5 Free";
padding-left: 10px;
font-size: 1rem;
- border: none;
- 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;
-}
-
-.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;
+ border: solid;
+ border-radius: 50px;
+ border-width: 2px;
}
.select {
diff --git a/src/styles/index.css b/src/styles/index.css
index 5063568..de9ed08 100644
--- a/src/styles/index.css
+++ b/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;