diff --git a/package-lock.json b/package-lock.json index 1cbaa86..80d9484 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3590,6 +3590,104 @@ "url": "https://github.com/sponsors/gregberge" } }, + "node_modules/@testing-library/dom": { + "version": "9.3.4", + "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.4.tgz", + "integrity": "sha512-FlS4ZWlp97iiNWig0Muq8p+3rVDjRiYE+YKGbAqXOu9nwJFFOdL00kFpz42M+4huzYi86vAK1sOOfyOG45muIQ==", + "peer": true, + "dependencies": { + "@babel/code-frame": "^7.10.4", + "@babel/runtime": "^7.12.5", + "@types/aria-query": "^5.0.1", + "aria-query": "5.1.3", + "chalk": "^4.1.0", + "dom-accessibility-api": "^0.5.9", + "lz-string": "^1.5.0", + "pretty-format": "^27.0.2" + }, + "engines": { + "node": ">=14" + } + }, + "node_modules/@testing-library/dom/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "peer": true, + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/@testing-library/dom/node_modules/aria-query": { + "version": "5.1.3", + "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.3.tgz", + "integrity": "sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==", + "peer": true, + "dependencies": { + "deep-equal": "^2.0.5" + } + }, + "node_modules/@testing-library/dom/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "peer": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/@testing-library/dom/node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "peer": true, + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/@testing-library/dom/node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "peer": true + }, + "node_modules/@testing-library/dom/node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "peer": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/@testing-library/dom/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "peer": true, + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/@testing-library/jest-dom": { "version": "5.17.0", "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz", @@ -16698,6 +16796,19 @@ "is-typedarray": "^1.0.0" } }, + "node_modules/typescript": { + "version": "4.9.5", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", + "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", + "peer": true, + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=4.2.0" + } + }, "node_modules/unbox-primitive": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz", diff --git a/src/Components/CustomComp/InputBox/InputBox.css b/src/Components/CustomComp/InputBox/InputBox.css index 9e24ca0..4e4ae5d 100644 --- a/src/Components/CustomComp/InputBox/InputBox.css +++ b/src/Components/CustomComp/InputBox/InputBox.css @@ -7,7 +7,9 @@ } .input-box-title { - color: white; + /* color: white; +*/ +color: var(--text_color); font-size: 20px; } diff --git a/src/Components/CustomComp/InputBox/InputBox.jsx b/src/Components/CustomComp/InputBox/InputBox.jsx index 8a34b72..5d88201 100644 --- a/src/Components/CustomComp/InputBox/InputBox.jsx +++ b/src/Components/CustomComp/InputBox/InputBox.jsx @@ -20,9 +20,14 @@ export default function InputBox({ input_title, value, onchange, error }) { setBorderError(true); } } - + /* + const inputStyle = { + border: borderError ? '2px solid red' : '1px solid white', + }; + */ + const inputStyle = { - border: borderError ? '2px solid red' : '1px solid white', + border: '2px solid red', }; const handleClearInput = () => { diff --git a/src/Components/CustomComp/OutputBox/OutputBox.css b/src/Components/CustomComp/OutputBox/OutputBox.css index e1cde3c..07f5c2e 100644 --- a/src/Components/CustomComp/OutputBox/OutputBox.css +++ b/src/Components/CustomComp/OutputBox/OutputBox.css @@ -15,7 +15,9 @@ outline: none; padding: 10px; font-size: 20px; - color: white; + /* color: white; + */ + color: var(--text_color); } @media only screen and (max-width: 600px) { diff --git a/src/Components/CustomComp/TextBox/TextBox.css b/src/Components/CustomComp/TextBox/TextBox.css index 780742f..33b54f7 100644 --- a/src/Components/CustomComp/TextBox/TextBox.css +++ b/src/Components/CustomComp/TextBox/TextBox.css @@ -20,8 +20,10 @@ font-size: 15px; font-weight: bold; line-height: 1.5; - /* overflow: auto; */ - background-color: #141421; + /* overflow: auto; + background-color: #141421; +*/ +background-color: var(--body_background); color: gray; border: 1px solid #2e2e4c; box-shadow: 3px 9px 16px rgb(0, 0, 0, 0.4), -3px -3px 10px rgba(255, 255, 255, 0.06), inset 14px 14px 26px rgb(0, 0, 0, 0.3), inset -3px -3px 15px rgba(255, 255, 255, 0.05); diff --git a/src/Components/Lightmode/Lightmode.css b/src/Components/Lightmode/Lightmode.css new file mode 100644 index 0000000..82e5a02 --- /dev/null +++ b/src/Components/Lightmode/Lightmode.css @@ -0,0 +1,68 @@ +.dark_mode { + margin-top: -20px; + margin-left: 10px; +} + +.dark_mode_label { + width: 65px; + height: 30px; + position: relative; + display: block; + background: #ebebeb; + border-radius: 200px; + box-shadow: inset 0px 5px 15px rgba(0, 0, 0, 0.4), + inset 0px -5px 15px rgba(255, 255, 255, 0.4); + cursor: pointer; + transition: 0.3s; +} +.dark_mode_label:after { + content: ""; + width: 25px; + height: 25px; + position: absolute; + top: 3px; + left: 3px; + background: linear-gradient(180deg, #ffcc89, #d8860b); + border-radius: 180px; + box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2); + transition: 0.3s; +} +.dark_mode_input { + width: 0; + height: 0; + visibility: hidden; +} +.dark_mode_input:checked + .dark_mode_label { + background: #242424; +} +.dark_mode_input:checked + .dark_mode_label:after { + left: 62px; + transform: translateX(-100%); + background: linear-gradient(180deg, #777, #3a3a3a); +} +.dark_mode_label:active:after { + width: 30px; +} + +.dark_mode_label svg { + position: absolute; + width: 20px; + top: 5px; + z-index: 100; +} +.dark_mode_label svg.sun { + left: 5px; + fill: #fff; + transition: 0.3s; +} +.dark_mode_label svg.moon { + left: 40px; + fill: #7e7e7e; + transition: 0.3s; +} +.dark_mode_input:checked + .dark_mode_label svg.sun { + fill: #7e7e7e; +} +.dark_mode_input:checked + .dark_mode_label svg.moon { + fill: #fff; +} diff --git a/src/Components/Lightmode/Lightmode.jsx b/src/Components/Lightmode/Lightmode.jsx new file mode 100644 index 0000000..42ee9ca --- /dev/null +++ b/src/Components/Lightmode/Lightmode.jsx @@ -0,0 +1,59 @@ +import React, { useEffect, useState } from "react"; +import { ReactComponent as Sun } from "./Sun.svg"; +import { ReactComponent as Moon } from "./Moon.svg"; +import "./Lightmode.css" + +const Lightmode = () => { + const [darkmode, setDarkMode] = useState(false); + + const setDarkModePreference = () => { + document.querySelector("body").setAttribute('data-theme', 'dark'); + localStorage.setItem('theme', 'dark'); + setDarkMode(true); + } + const setLightModePreference = () => { + document.querySelector("body").setAttribute('data-theme', 'light'); + localStorage.setItem('theme', 'light'); + setDarkMode(false); + } + + useEffect(() => { + const savedTheme = localStorage.getItem('theme'); + if (savedTheme === 'dark') { + setDarkModePreference(); + + } else { + setLightModePreference(); + } + }, []); + + const toggletheme = () => { + if(darkmode) + { + setLightModePreference(); + localStorage.setItem('theme', 'light'); + } + else{ + setDarkModePreference(); + localStorage.setItem('theme', 'dark'); + } + } + + return ( +
+ + +
+ ); +}; + +export default Lightmode; \ No newline at end of file diff --git a/src/Components/Lightmode/Moon.svg b/src/Components/Lightmode/Moon.svg new file mode 100644 index 0000000..ee5184f --- /dev/null +++ b/src/Components/Lightmode/Moon.svg @@ -0,0 +1,8 @@ + + \ No newline at end of file diff --git a/src/Components/Lightmode/Sun.svg b/src/Components/Lightmode/Sun.svg new file mode 100644 index 0000000..d466dc8 --- /dev/null +++ b/src/Components/Lightmode/Sun.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/Components/Sidebar/Sidebar.css b/src/Components/Sidebar/Sidebar.css index 65434f5..3ca95c1 100644 --- a/src/Components/Sidebar/Sidebar.css +++ b/src/Components/Sidebar/Sidebar.css @@ -7,7 +7,8 @@ a { .sidebar { width: 300px; height: 100vh; - background: linear-gradient(to bottom, #303154, #2e2e4c); + /* background: linear-gradient(to bottom, #303154, #2e2e4c); +*/background: var(--sidebar-background); box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); position: fixed; top: 0; diff --git a/src/Pages/HomePage/HomePage.css b/src/Pages/HomePage/HomePage.css index f0fce81..8f802d5 100644 --- a/src/Pages/HomePage/HomePage.css +++ b/src/Pages/HomePage/HomePage.css @@ -4,19 +4,23 @@ flex-direction: column; align-items: center; justify-content: center; - background-color: #181828; +/* background-color: #181828; */ +background-color: var(--body_background); } .home-page-title { padding: 20px; - color: white; + /* color: white; + */ + color: var(--home-page-title-color); text-shadow: 1px 1px 3px red; } #drop-constraint { width: 100%; height: fit-content; - background-color: #141421; + /* background-color: #181828; */ + background-color: var(--body_background); width: 100%; display: flex; flex-direction: column; @@ -25,13 +29,17 @@ border: 1px solid #2e2e4c; } .drop-const-title { - color: white; + /* color: white; + */ + color: var(--home-page-title-color); } #row-count { width: 100%; height: fit-content; - background-color: #141421; + /* background-color: #141421; + */ + background-color: var(--body_background); width: 100%; display: flex; flex-direction: column; @@ -43,7 +51,9 @@ #select-statement { width: 100%; height: fit-content; - background-color: #141421; + /* background-color: #141421; + */ + background-color: var(--body_background); width: 100%; display: flex; flex-direction: column; @@ -54,7 +64,9 @@ #nth-highest { width: 100%; height: fit-content; - background-color: #141421; + /* background-color: #141421; + */ + background-color: var(--body_background); width: 100%; display: flex; flex-direction: column; @@ -65,7 +77,9 @@ #nth-minimum { width: 100%; height: fit-content; - background-color: #141421; + /* background-color: #141421; + */ + background-color: var(--body_background); width: 100%; display: flex; flex-direction: column; @@ -76,7 +90,9 @@ #section-6 { width: 100%; height: fit-content; - background-color: #141421; + /* background-color: #141421; + */ + background-color: var(--body_background); width: 100%; display: flex; flex-direction: column; @@ -98,7 +114,9 @@ .section-4-title, .section-5-title { - color: white; + /* color: white; + */ + color: var(--home-page-title-color); } /* Add this style to your HomePage.css or create a new CSS file */ .scroll-up-button { diff --git a/src/Pages/HomePage/HomePage.jsx b/src/Pages/HomePage/HomePage.jsx index 3db53a5..138192e 100644 --- a/src/Pages/HomePage/HomePage.jsx +++ b/src/Pages/HomePage/HomePage.jsx @@ -5,6 +5,7 @@ import CountOfRows from "../../Sections/CountOfRows/CountOfRows"; import SelectStatement from "../../Sections/SelectStatement/SelectStatement"; import NthHighest from "../../Sections/NthHighest/NthHighest"; import NthMinimum from "../../Sections/NthMinimum/NthMinimum"; +import Lightmode from "../../Components/Lightmode/Lightmode"; export default function HomePage() { const [showScrollUpButton, setShowScrollUpButton] = useState(false); @@ -33,6 +34,7 @@ export default function HomePage() { return (

SQL Tools for Developers

+

Drop Constraint

diff --git a/src/Sections/CountOfRows/CountOfRows.css b/src/Sections/CountOfRows/CountOfRows.css index e953f35..61e2895 100644 --- a/src/Sections/CountOfRows/CountOfRows.css +++ b/src/Sections/CountOfRows/CountOfRows.css @@ -4,6 +4,8 @@ align-items: center; justify-content: center; gap: 30px; - background-color: #141421; + /* background-color: #141421; +*/ +background-color: var(--body_background); width: 100%; } \ No newline at end of file diff --git a/src/Sections/DropConstraintSec/DropConstraintSec.css b/src/Sections/DropConstraintSec/DropConstraintSec.css index 548df54..a63c255 100644 --- a/src/Sections/DropConstraintSec/DropConstraintSec.css +++ b/src/Sections/DropConstraintSec/DropConstraintSec.css @@ -4,6 +4,8 @@ align-items: center; justify-content: center; gap: 30px; - background-color: #141421; + /* background-color: #141421; +*/ +background-color: var(--body_background); width: 100%; } \ No newline at end of file diff --git a/src/Sections/NthHighest/NthHighest.css b/src/Sections/NthHighest/NthHighest.css index f3d713c..f54076a 100644 --- a/src/Sections/NthHighest/NthHighest.css +++ b/src/Sections/NthHighest/NthHighest.css @@ -4,6 +4,8 @@ align-items: center; justify-content: center; gap: 30px; - background-color: #141421; + /* background-color: #141421; +*/ +background-color: var(--body_background); width: 100%; } diff --git a/src/Sections/NthMinimum/NthMinimum.css b/src/Sections/NthMinimum/NthMinimum.css index 1cc1986..626be70 100644 --- a/src/Sections/NthMinimum/NthMinimum.css +++ b/src/Sections/NthMinimum/NthMinimum.css @@ -4,6 +4,8 @@ align-items: center; justify-content: center; gap: 30px; - background-color: #141421; + /* background-color: #141421; +*/ +background-color: var(--body_background); width: 100%; } diff --git a/src/Sections/SelectStatement/SelectStatement.css b/src/Sections/SelectStatement/SelectStatement.css index fa4e03d..2a8fe99 100644 --- a/src/Sections/SelectStatement/SelectStatement.css +++ b/src/Sections/SelectStatement/SelectStatement.css @@ -4,7 +4,9 @@ align-items: center; justify-content: center; gap: 30px; - background-color: #141421; + /* background-color: #141421; +*/ +background-color: var(--body_background); width: 100%; } diff --git a/src/index.css b/src/index.css index c52882a..d9cfc55 100644 --- a/src/index.css +++ b/src/index.css @@ -16,4 +16,18 @@ body { code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; -} \ No newline at end of file +} + +:root{ + --body_background: white; + --text_color: black; + --home-page-title-color: rgb(58, 38, 38); + --sidebar-background: white; + +} +[data-theme= "dark"]{ + --body_background: #141421; + --text_color: white; + --home-page-title-color: white; + --sidebar-background: linear-gradient(to bottom, #303154, #2e2e4c); +}