From 0f0871f7ad7341eb86df093e5a2a826bbc723de7 Mon Sep 17 00:00:00 2001 From: Daniel Date: Thu, 30 Jun 2022 08:01:14 +0430 Subject: [PATCH] Small changes. --- src/App.js | 2 +- src/componets/AddItem.js | 6 +++--- src/componets/CollectionSelection.js | 11 +++++------ src/componets/EditItem.js | 4 ++-- src/componets/List.js | 4 ++-- src/componets/TagSelection.js | 11 +++++------ src/styles/{SendItem.css => AddItem.css} | 14 +------------- src/styles/App.css | 19 +++---------------- src/styles/index.css | 23 ++++++++++++++++++++--- 9 files changed, 42 insertions(+), 52 deletions(-) rename src/styles/{SendItem.css => AddItem.css} (69%) 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;