🌟 update some themes

LuciLua · LuciLua · commit 81c0d472d53c · 2023-01-02T00:44:03.000-03:00
diff --git a/public/themes/dark.scss b/public/themes/dark.scss
@@ -1,5 +1,6 @@
 :root{
-    --primaryColor: #ff9f19;
+    --primaryColor: #ff3019;
+    // --primaryColor: #ff9f19;
     --secondaryColor: #1f1f1e;
 
     --primaryColorPastelDark25opacity: #715e438a;
diff --git a/public/themes/light.scss b/public/themes/light.scss
diff --git a/src/components/Form/Buttons/Buttons.module.scss b/src/components/Form/Buttons/Buttons.module.scss
@@ -51,19 +51,24 @@
             pointer-events: all;
 
             &:focus {
-                background-color: var(--primaryColorPastel);
-                outline: 1px solid var(--primaryColor);
+                background-color: var(--buttonFocusBG);
+                outline: 1px solid var(--buttonFocusColor);
+                color: var(--buttonFocusCOLOR);
+            }
+
+            &:active{
+                background-color: var(--buttonActiveBG);
             }
 
             a {
                 user-select: none;
                 pointer-events: all;
-                color: var(--grayDarkPrimary);
+                // color: var(--grayDarkPrimary);
                 cursor: pointer;
 
-                &:hover {
-                    background-color: var(--yellowPastel);
-                }
+                // &:hover {
+                //     background-color: var(--primaryColorPastelDark25opacity);
+                // }
             }
         }
     }
diff --git a/src/components/Form/Input/Input.module.scss b/src/components/Form/Input/Input.module.scss
@@ -28,7 +28,7 @@
     }
 
     input {
-        border: 1px solid var(--labelColor);
+        border: 1px solid var(--borderNOTSelected);
         color: var(--h1Color);
         padding: 10px 28px;
         border-radius: 4px;
@@ -39,19 +39,15 @@
         -webkit-box-shadow: 0 0 0px 1000px var(--secondaryColor) inset;
         -webkit-text-fill-color: var(--labelColor);
 
-        &:focus{
-            border: 1px solid var(--primaryColor);
+        &:focus {
+            border: 1px solid var(--borderSelected);
             outline: none;
 
             box-shadow: 0 0 0px 1000px var(--secondaryColor) inset;
             -webkit-box-shadow: 0 0 0px 1000px var(--secondaryColor) inset;
             -webkit-text-fill-color: var(--labelColor);
         }
 
-        &:not(:focus) {
-            -webkit-text-fill-color: var(--labelColor);
-        }
-
         &:not(:placeholder-shown) {
             -webkit-text-fill-color: var(--h1Color);
         }
diff --git a/src/components/Menu/Menu.module.scss b/src/components/Menu/Menu.module.scss
@@ -1,5 +1,5 @@
 .c_menu {
-    background-color: var(--secondaryColor);
+    background-color: var(--menuBG);
     width: var(--menuWidth);
 
     max-height: calc(100vh);
@@ -27,7 +27,7 @@
 
         .c_menu_logo_span,
         .c_menu_logo_icon {
-            color: var(--primaryColor);
+            color: var(--yellowDefault);
             font-size: 25px;
             font-weight: 700;
 
diff --git a/src/components/MyNotes/MyNotes.module.scss b/src/components/MyNotes/MyNotes.module.scss
@@ -76,7 +76,7 @@
             justify-content: center;
             align-items: center;
 
-            box-shadow: 5px 9px 12px #945d10;
+            box-shadow: 5px 9px 12px #945d1027;
 
             position: relative;
 
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -10,11 +10,7 @@ function App({ Component, pageProps }) {
     const [theme, setTheme] = useState('light')
 
     function onClickToggle() {
-        if (theme == 'dark') {
-            setTheme('light')
-        } else {
-            setTheme('dark')
-        }
+        theme == 'dark' ? setTheme('light') : setTheme('dark')
     }
 
     return (
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -7,7 +7,7 @@ import Form from '../components/Form/Form'
 // next components
 import Head from 'next/head'
 // react hooks
-import { useEffect, useState } from "react"
+import { useState } from "react"
 
 function Home() {
     const [state, setState] = useState('signIn')
diff --git a/src/styles/globals.scss b/src/styles/globals.scss
@@ -20,7 +20,7 @@ body {
     max-width: 100vw;
     overflow-x: hidden;
 
-    background-color: var(--primaryColor);
+    background-color: var(--notesBG);
 }
 
 :root {
diff --git a/src/styles/themes/dark.tsx b/src/styles/themes/dark.tsx
@@ -12,11 +12,24 @@ export default createGlobalStyle`
 
     --primaryColorPastel: #f8b557;
 
-
     --primaryColorVivid: #ff9500;
 
     --labelColor: #8e8e8e;
     --h1Color: #f3f3f3;
     --h2Color: #8e8d8d;
+
+    --borderSelected: #ff9f19;
+    --borderNOTSelected: #464645;
+
+    --buttonFocusBG: #f8b557;
+    --buttonFocusCOLOR: #20201e;
+
+    --buttonActiveBG: #b26f11;
+
+
+    --yellowDefault:  #e38d16;
+
+    --menuBG: #1f1f1e;
+    --notesBG: #ff9f19;
 }
 `;
diff --git a/src/styles/themes/light.tsx b/src/styles/themes/light.tsx
@@ -2,10 +2,10 @@ import { createGlobalStyle } from "styled-components";
 
 export default createGlobalStyle`
 :root{
-    --primaryColor: #f4a73a;
+    --primaryColor: #e0e0e0;
     --secondaryColor: #ffffff;
 
-    --primaryColorPastelDark25opacity: #e19c3b8a;
+    --primaryColorPastelDark25opacity: #e0e0e0;
 
     --primaryColorPastelDark: #877762;
     --primaryColorPastelLight: #c4a67d;
@@ -18,4 +18,18 @@ export default createGlobalStyle`
     --labelColor: #8e8e8e;
     --h1Color: #202020;
     --h2Color: #555555;
+
+
+    --borderSelected: #797979;
+    --borderNOTSelected: #e0e0e0;
+
+    --buttonFocusBG: #484848;
+    --buttonFocusCOLOR: #e0e0e0;
+
+    --buttonActiveBG: #161616;
+
+    --yellowDefault:  #e38d16;
+
+    --menuBG: #ececec;
+    --notesBG: #eadfd0;
 `;

Original file line number	Diff line number	Diff line change
`@@ -20,7 +20,7 @@ body {`
`20`	`20`	`max-width: 100vw;`
`21`	`21`	`overflow-x: hidden;`
`22`	`22`
`23`		`- background-color: var(--primaryColor);`
	`23`	`+ background-color: var(--notesBG);`
`24`	`24`	`}`
`25`	`25`
`26`	`26`	`:root {`