diff --git a/src/App.css b/src/App.css index 5cda637..74600ad 100644 --- a/src/App.css +++ b/src/App.css @@ -1,4 +1,20 @@ - .App { +::-webkit-scrollbar { + width: 15px; +} + +::-webkit-scrollbar-track { + background-color: #141421; +} + +::-webkit-scrollbar-thumb { + border-radius: 100px; + border: 5px solid transparent; + background-clip: padding-box; + background-color: tomato; +} + + +.App { justify-content: center; align-items: flex-start; } @@ -38,29 +54,4 @@ .toggle-button { top: 15px; } -} - - - -body { - --sb-track-color: #232E33; - --sb-thumb-color: linear-gradient(to right, #260843, #553d7a); - --sb-size: 8px; - - scrollbar-color: var(--sb-thumb-color) - var(--sb-track-color); -} - -body::-webkit-scrollbar { - width: var(--sb-size) -} - -body::-webkit-scrollbar-track { - background: var(--sb-track-color); -} - -body::-webkit-scrollbar-thumb { - background: var(--sb-thumb-color); - border-radius: 10px; - border: 1px solid #25035c; - } +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index c845c8d..9f5b5f7 100644 --- a/src/App.js +++ b/src/App.js @@ -5,8 +5,6 @@ import Sidebar from './Components/Sidebar/Sidebar'; import HomePage from './Pages/HomePage/HomePage'; import { FiChevronsRight, FiChevronsLeft } from "react-icons/fi"; - - function App() { const [isSidebarOpen, setIsSidebarOpen] = useState(false); const [buttonIcon, setButtonIcon] = useState(); @@ -25,12 +23,14 @@ function App() { }; const closeSidebar = (event) => { - if (newRef.current && !newRef.current.contains(event.target)) { + console.log('Close sidebar called'); + if (newRef.current && event && !newRef.current.contains(event.target)) { setIsSidebarOpen(false); setButtonIcon(); } }; + return (
@@ -41,11 +41,9 @@ function App() { } /> - -
); } -export default App; +export default App; \ No newline at end of file diff --git a/src/Components/CustomComp/Button/Button.css b/src/Components/CustomComp/Button/Button.css index a8f85bd..b316ec0 100644 --- a/src/Components/CustomComp/Button/Button.css +++ b/src/Components/CustomComp/Button/Button.css @@ -1,5 +1,5 @@ .submit-btn { - padding: 10px 20px; + padding: 12px 25px; border-radius: 10px; background-color: #181828; color: white; @@ -8,16 +8,17 @@ border-style: solid; border-color: rgba(255, 255, 255, 0.2); cursor: pointer; - font-size: 18px; + font-size: 15px; font-weight: bold; + transition: all 0.3s ease; } -.submit-btn:hover{ +.submit-btn:hover { background-color: grey; - border:2px solid rgb(255, 255, 255); + /* border: 1px solid rgb(255, 255, 255); */ } -.submit-btn:active{ +.submit-btn:active { background-color: rgb(247, 247, 247); - color:black; -} + color: black; +} \ No newline at end of file diff --git a/src/Components/Footer/Footer.css b/src/Components/Footer/Footer.css deleted file mode 100644 index 5ecec84..0000000 --- a/src/Components/Footer/Footer.css +++ /dev/null @@ -1,68 +0,0 @@ -/* footer.css */ - -footer { - background-color: #181828; - color: #fff; - padding: 20px 0; - width: 100%; - bottom: 0; -} - -.container { - max-width: 1200px; - width: 100%; - margin: 0 auto; - padding: 0 20px; - box-sizing: border-box; - display: flex; - flex-wrap: wrap; /* Allow elements to wrap to next line if needed */ - justify-content: space-between; /* Distribute space between elements */ -} - -/* Style each section of the footer */ -.quick-links, -.Contribute, -.Community, -.Developer-Resources { - flex: 0 0 calc(25% - 30px); /* Each section takes 25% of the container width minus padding */ - padding: 0 15px; /* Add some padding to each section */ - margin-bottom: 20px; /* Add some spacing between sections */ -} - -/* On smaller screens, make each section take 100% width */ -@media (max-width: 768px) { - .quick-links, - .Contribute, - .Community, - .Developer-Resources { - flex: 0 0 calc(50% - 30px); /* Each section takes 50% of the container width minus padding */ - } -} - -h3 { - margin-top: 0; /* Remove default margin for h3 */ -} - -ul { - list-style-type: none; /* Remove default bullet points */ - padding: 0; /* Remove default padding */ -} - -ul li { - margin-bottom: 8px; /* Add some spacing between list items */ -} - -ul li a { - color: #fff; /* Link color */ - text-decoration: none; /* Remove default underline */ -} - -ul li a:hover { - text-decoration: underline; /* Add underline on hover */ -} - -/* Align copyright text */ -.footer-content { - flex-basis: 100%; /* Make it take full width */ - text-align: center; /* Center-align the text */ -} diff --git a/src/Components/Footer/Footer.jsx b/src/Components/Footer/Footer.jsx deleted file mode 100644 index 99f0da4..0000000 --- a/src/Components/Footer/Footer.jsx +++ /dev/null @@ -1,46 +0,0 @@ -import React from "react"; -import "./Footer.css"; // Corrected import path - -const Footer = () => { - return ( - - ); -}; - -export default Footer; \ No newline at end of file diff --git a/src/Components/Sidebar/Sidebar.css b/src/Components/Sidebar/Sidebar.css index 3ca95c1..4596e51 100644 --- a/src/Components/Sidebar/Sidebar.css +++ b/src/Components/Sidebar/Sidebar.css @@ -38,7 +38,7 @@ nav ul { display: block; width: 100%; padding: 15px; - font-size: 18px; + font-weight: bold; transition: background-color 0.3s ease; background-color: rgba(0, 0, 0, 0.2); border-radius: 5px; diff --git a/src/Components/Sidebar/Sidebar.jsx b/src/Components/Sidebar/Sidebar.jsx index 98e8fbe..ce80ade 100644 --- a/src/Components/Sidebar/Sidebar.jsx +++ b/src/Components/Sidebar/Sidebar.jsx @@ -4,6 +4,7 @@ import './Sidebar.css' export default function Sidebar({ isOpen, closeSidebar }) { const handleLinkClick = () => { + console.log("Link Clicked"); closeSidebar(); }; return ( diff --git a/src/Pages/HomePage/HomePage.css b/src/Pages/HomePage/HomePage.css index 8f802d5..1e9431b 100644 --- a/src/Pages/HomePage/HomePage.css +++ b/src/Pages/HomePage/HomePage.css @@ -4,15 +4,15 @@ flex-direction: column; align-items: center; justify-content: center; -/* background-color: #181828; */ -background-color: var(--body_background); + /* background-color: #181828; */ + background-color: var(--body_background); } .home-page-title { padding: 20px; /* color: white; - */ - color: var(--home-page-title-color); + */ + color: var(--home-page-title-color); text-shadow: 1px 1px 3px red; } @@ -28,10 +28,11 @@ background-color: var(--body_background); gap: 30px; border: 1px solid #2e2e4c; } + .drop-const-title { /* color: white; - */ - color: var(--home-page-title-color); + */ + color: var(--home-page-title-color); } #row-count { @@ -39,7 +40,7 @@ background-color: var(--body_background); height: fit-content; /* background-color: #141421; */ - background-color: var(--body_background); + background-color: var(--body_background); width: 100%; display: flex; flex-direction: column; @@ -53,7 +54,7 @@ background-color: var(--body_background); height: fit-content; /* background-color: #141421; */ - background-color: var(--body_background); + background-color: var(--body_background); width: 100%; display: flex; flex-direction: column; @@ -61,12 +62,13 @@ background-color: var(--body_background); gap: 30px; border: 1px solid #2e2e4c; } -#nth-highest { + +#nth-highest { width: 100%; height: fit-content; /* background-color: #141421; */ - background-color: var(--body_background); + background-color: var(--body_background); width: 100%; display: flex; flex-direction: column; @@ -74,12 +76,13 @@ background-color: var(--body_background); gap: 30px; border: 1px solid #2e2e4c; } -#nth-minimum { + +#nth-minimum { width: 100%; height: fit-content; /* background-color: #141421; */ - background-color: var(--body_background); + background-color: var(--body_background); width: 100%; display: flex; flex-direction: column; @@ -87,12 +90,13 @@ background-color: var(--body_background); gap: 30px; border: 1px solid #2e2e4c; } + #section-6 { width: 100%; height: fit-content; /* background-color: #141421; */ - background-color: var(--body_background); + background-color: var(--body_background); width: 100%; display: flex; flex-direction: column; @@ -112,12 +116,13 @@ background-color: var(--body_background); .section-2-title, .section-3-title, .section-4-title, -.section-5-title -{ +.section-5-title, +.section-6-title { /* color: white; - */ - color: var(--home-page-title-color); + */ + color: var(--home-page-title-color); } + /* Add this style to your HomePage.css or create a new CSS file */ .scroll-up-button { position: fixed; @@ -133,12 +138,12 @@ background-color: var(--body_background); border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; - } - - .scroll-up-button:hover { +} + +.scroll-up-button:hover { background-color: #0056b3; - } - +} + @media only screen and (max-width: 600px) { .home-page-title { font-size: 22px; @@ -147,4 +152,4 @@ background-color: var(--body_background); #drop-constraint { height: auto; } -} +} \ No newline at end of file diff --git a/src/Pages/HomePage/HomePage.jsx b/src/Pages/HomePage/HomePage.jsx index aa68bd9..64be0d5 100644 --- a/src/Pages/HomePage/HomePage.jsx +++ b/src/Pages/HomePage/HomePage.jsx @@ -5,8 +5,9 @@ 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 { FaArrowUp } from "react-icons/fa"; -import Footer from "../../Components/Footer/Footer"; +// import Footer from "../../Components/Footer/Footer"; import Lightmode from "../../Components/Lightmode/Lightmode"; @@ -38,7 +39,7 @@ export default function HomePage() { return (

SQL Tools for Developers

-

+

Drop Constraint

@@ -64,13 +65,9 @@ export default function HomePage() {
{showScrollUpButton && ( - - ) - - } -
); } \ No newline at end of file diff --git a/src/index.css b/src/index.css index d9cfc55..1116315 100644 --- a/src/index.css +++ b/src/index.css @@ -1,33 +1,24 @@ +@import url(https://fonts.googleapis.com/css?family=Poppins:100,100italic,200,200italic,300,300italic,regular,italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic); + * { box-sizing: border-box; padding: 0; margin: 0; scroll-behavior: smooth; + font-family: "Poppins", sans-serif; } -body { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; -} - -:root{ +:root { --body_background: white; --text_color: black; --home-page-title-color: rgb(58, 38, 38); --sidebar-background: white; - + } -[data-theme= "dark"]{ + +[data-theme="dark"] { --body_background: #141421; --text_color: white; --home-page-title-color: white; --sidebar-background: linear-gradient(to bottom, #303154, #2e2e4c); -} +} \ No newline at end of file