From e8f6324f8492d55d800d1638409da9c7ab2acdd2 Mon Sep 17 00:00:00 2001 From: Mitchell Magro Date: Sun, 29 Jun 2025 21:28:37 +0200 Subject: [PATCH] Added to default global.scss --- .../app/components/PageLinks/PageLinks.scss | 23 ++++++++++++ .../app/components/PageLinks/PageLinks.tsx | 35 ++++--------------- .../dashboard/header/dropDown/DropDown.tsx | 1 - .../features/dashboard/sidebar/sideBar.scss | 4 +-- payment-iq/app/layout.tsx | 15 +++++--- .../{app/globals.css => styles/globals.scss} | 6 ++-- payment-iq/styles/variables.scss | 21 +++++++++++ 7 files changed, 65 insertions(+), 40 deletions(-) create mode 100644 payment-iq/app/components/PageLinks/PageLinks.scss rename payment-iq/{app/globals.css => styles/globals.scss} (88%) create mode 100644 payment-iq/styles/variables.scss diff --git a/payment-iq/app/components/PageLinks/PageLinks.scss b/payment-iq/app/components/PageLinks/PageLinks.scss new file mode 100644 index 0000000..237f156 --- /dev/null +++ b/payment-iq/app/components/PageLinks/PageLinks.scss @@ -0,0 +1,23 @@ +/* PageLinks.scss */ + +.link-container { + display: flex; + align-items: center; + padding: 12px 1px; + border-radius: 4px; + color: var(--text-tertiary); + text-decoration: none; + transition: background 0.2s ease-in-out; + + &:hover { + color: #fff; + background-color: var(--hover-color); + cursor: pointer; + } +} + +.link-text { + color: var(--text-tertiary); + margin-left: 12px; + font-weight: 500; +} diff --git a/payment-iq/app/components/PageLinks/PageLinks.tsx b/payment-iq/app/components/PageLinks/PageLinks.tsx index 4f8f670..95196a6 100644 --- a/payment-iq/app/components/PageLinks/PageLinks.tsx +++ b/payment-iq/app/components/PageLinks/PageLinks.tsx @@ -1,40 +1,17 @@ +// PageLinks.tsx + "use client"; import Link from "next/link"; -import { styled } from "@mui/system"; import { ISidebarLink } from "@/app/features/dashboard/sidebar/SidebarLink.interfaces"; - -const LinkContainer = styled("div")(({ theme }) => ({ - display: "flex", - alignItems: "center", - padding: "12px 1px", - borderRadius: "4px", - color: theme.palette.text.tertiary, - textDecoration: "none", - transition: "background 0.2s ease-in-out", - - "&:hover": { - color: "rgb(255, 255, 255)", - background: "rgba(255, 255, 255, 0.08)", - backgroundColor: theme.palette.action.hover, - cursor: "pointer", - }, -})); - -const LinkText = styled("span")(({ theme }) => ({ - color: theme.palette.text.tertiary, - marginLeft: "12px", - fontWeight: 500, -})); +import "./PageLinks.scss"; export default function PageLinks({ title, path, icon: Icon }: ISidebarLink) { return ( - - - {Icon && } - {title} - + + {Icon && } + {title} ); diff --git a/payment-iq/app/features/dashboard/header/dropDown/DropDown.tsx b/payment-iq/app/features/dashboard/header/dropDown/DropDown.tsx index baecdd4..6cf4784 100644 --- a/payment-iq/app/features/dashboard/header/dropDown/DropDown.tsx +++ b/payment-iq/app/features/dashboard/header/dropDown/DropDown.tsx @@ -35,7 +35,6 @@ export default function SidebarDropdown({ onChange }: Props) { MenuProps={{ PaperProps: { style: { - backgroundColor: "rgba(30, 30, 30, 0.7)", // 0.9 opacity maxHeight: 200, }, }, diff --git a/payment-iq/app/features/dashboard/sidebar/sideBar.scss b/payment-iq/app/features/dashboard/sidebar/sideBar.scss index 9649e9d..6f500ae 100644 --- a/payment-iq/app/features/dashboard/sidebar/sideBar.scss +++ b/payment-iq/app/features/dashboard/sidebar/sideBar.scss @@ -1,12 +1,10 @@ -/* styles/sidebar.scss */ - .sidebar-container { position: fixed; top: 0; left: 0; width: 240px; height: 100vh; - background-color: #121212; // or your theme color + background-color: var(--background-primary); color: white; display: flex; flex-direction: column; diff --git a/payment-iq/app/layout.tsx b/payment-iq/app/layout.tsx index e7709d0..2a6d7a1 100644 --- a/payment-iq/app/layout.tsx +++ b/payment-iq/app/layout.tsx @@ -1,12 +1,17 @@ -import ThemeRegistry from '@/config/ThemeRegistry'; -import type { Metadata } from 'next'; +import ThemeRegistry from "@/config/ThemeRegistry"; +import type { Metadata } from "next"; +import "../styles/globals.scss"; export const metadata: Metadata = { - title: 'Your App', - description: 'Generated by Next.js', + title: "Your App", + description: "Generated by Next.js", }; -export default function RootLayout({ children }: { children: React.ReactNode }) { +export default function RootLayout({ + children, +}: { + children: React.ReactNode; +}) { return ( diff --git a/payment-iq/app/globals.css b/payment-iq/styles/globals.scss similarity index 88% rename from payment-iq/app/globals.css rename to payment-iq/styles/globals.scss index e3734be..84ca7b5 100644 --- a/payment-iq/app/globals.css +++ b/payment-iq/styles/globals.scss @@ -1,6 +1,8 @@ +@import "./variables"; + :root { - --background: #ffffff; - --foreground: #171717; + --background: #0a0a0a; + --foreground: #ededed; } @media (prefers-color-scheme: dark) { diff --git a/payment-iq/styles/variables.scss b/payment-iq/styles/variables.scss new file mode 100644 index 0000000..44569de --- /dev/null +++ b/payment-iq/styles/variables.scss @@ -0,0 +1,21 @@ +// Declare SCSS variables +$primary-color: #1976d2; +$secondary-color: #d32f2f; +$background-primary: rgb(69, 190, 171); +$text-primary: #000000; +$text-secondary: #555555; +$text-tertiary: #ffffff; +$hover-color: rgba(0, 0, 0, 0.08); + +$font-family-base: "Roboto", "Helvetica", "Arial", sans-serif; + +:root { + --primary-color: #{$primary-color}; + --secondary-color: #{$secondary-color}; + --background-primary: #{$background-primary}; + --text-primary: #{$text-primary}; + --text-secondary: #{$text-secondary}; + --text-tertiary: #{$text-tertiary}; + --hover-color: #{$hover-color}; + --font-family-base: #{$font-family-base}; +}