Mitchell/payment-backoffice
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Added to default global.scss

Browse Source
This commit is contained in:
Mitchell Magro 2025-06-29 21:28:37 +02:00
parent 76b9d78bd5
commit e8f6324f84
7 changed files with 65 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
payment-iq/app/components/PageLinks/PageLinks.scss Normal file
View File

@ -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;
}

35
payment-iq/app/components/PageLinks/PageLinks.tsx
View File

@ -1,40 +1,17 @@
// PageLinks.tsx
"use client"; "use client";
import Link from "next/link"; import Link from "next/link";
import { styled } from "@mui/system";
import { ISidebarLink } from "@/app/features/dashboard/sidebar/SidebarLink.interfaces"; import { ISidebarLink } from "@/app/features/dashboard/sidebar/SidebarLink.interfaces";
import "./PageLinks.scss";
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,
}));
export default function PageLinks({ title, path, icon: Icon }: ISidebarLink) { export default function PageLinks({ title, path, icon: Icon }: ISidebarLink) {
return ( return (
<Link href={path} passHref legacyBehavior> <Link href={path} passHref legacyBehavior>
<a style={{ textDecoration: "none" }}> <a className="link-container">
<LinkContainer> {Icon && <Icon />}
{Icon && <Icon />} <span className="link-text">{title}</span>
<LinkText>{title}</LinkText>
</LinkContainer>
</a> </a>
</Link> </Link>
); );

1
payment-iq/app/features/dashboard/header/dropDown/DropDown.tsx
View File

@ -35,7 +35,6 @@ export default function SidebarDropdown({ onChange }: Props) {
MenuProps={{ MenuProps={{
PaperProps: { PaperProps: {
style: { style: {
backgroundColor: "rgba(30, 30, 30, 0.7)", // 0.9 opacity
maxHeight: 200, maxHeight: 200,
}, },
}, },

4
payment-iq/app/features/dashboard/sidebar/sideBar.scss
View File

@ -1,12 +1,10 @@
/* styles/sidebar.scss */
.sidebar-container { .sidebar-container {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
width: 240px; width: 240px;
height: 100vh; height: 100vh;
background-color: #121212; // or your theme color background-color: var(--background-primary);
color: white; color: white;
display: flex; display: flex;
flex-direction: column; flex-direction: column;

15
payment-iq/app/layout.tsx
View File

@ -1,12 +1,17 @@
import ThemeRegistry from '@/config/ThemeRegistry'; import ThemeRegistry from "@/config/ThemeRegistry";
import type { Metadata } from 'next'; import type { Metadata } from "next";
import "../styles/globals.scss";
export const metadata: Metadata = { export const metadata: Metadata = {
title: 'Your App', title: "Your App",
description: 'Generated by Next.js', description: "Generated by Next.js",
}; };
export default function RootLayout({ children }: { children: React.ReactNode }) { export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return ( return (
<html lang="en"> <html lang="en">
<body> <body>

6
payment-iq/app/globals.css → payment-iq/styles/globals.scss
View File

@ -1,6 +1,8 @@
@import "./variables";
:root { :root {
--background: #ffffff; --background: #0a0a0a;
--foreground: #171717; --foreground: #ededed;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {

21
payment-iq/styles/variables.scss Normal file
View File

@ -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};
}