Managed to style dynamically

payment-iq/app/components/PageLinks/PageLinks.tsx

@@ -1,15 +1,23 @@
-// PageLinks.tsx
-
 "use client";
 
 import Link from "next/link";
 import { ISidebarLink } from "@/app/features/dashboard/sidebar/SidebarLink.interfaces";
+import clsx from "clsx"; // Utility to merge class names
 import "./PageLinks.scss";
 
-export default function PageLinks({ title, path, icon: Icon }: ISidebarLink) {
+interface PageLinksProps extends ISidebarLink {
+  className?: string;
+}
+
+export default function PageLinks({
+  title,
+  path,
+  icon: Icon,
+  className,
+}: PageLinksProps) {
   return (
     <Link href={path} passHref legacyBehavior>
-      <a className="link-container">
+      <a className={clsx("link-container", className)}>
         {Icon && <Icon />}
         <span className="link-text">{title}</span>
       </a>

payment-iq/app/features/dashboard/header/dropDown/DropDown.scss

@@ -0,0 +1,8 @@
+/* DropDown.scss */
+
+.link-container-text {
+  color: var(--text-primary);
+  span {
+    color: var(--text-primary);
+  }
+}

payment-iq/app/features/dashboard/header/dropDown/DropDown.styled.ts

@@ -1,9 +0,0 @@
-import { styled } from "@mui/system";
-
-export const Em = styled("em")(() => ({
-  display: "flex",
-  alignItems: "center",
-  opacity: 0.7,
-  fontStyle: "normal",
-  color: "white",
-}));

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

@@ -9,8 +9,9 @@ import {
 import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 import { SIDEBAR_LINKS } from "@/app/features/dashboard/sidebar/SidebarLink.constants";
 import { ISidebarLink } from "@/app/features/dashboard/sidebar/SidebarLink.interfaces";
-import { Em } from "./DropDown.styled";
+import { Em } from "./Em"; // If you still want to create a component for the <em> tag
 import PageLinks from "../../../../components/PageLinks/PageLinks";
+import "./DropDown.scss"; // Import the SCSS file
 
 interface Props {
   onChange?: (event: SelectChangeEvent<string>) => void;
@@ -41,10 +42,10 @@ export default function SidebarDropdown({ onChange }: Props) {
         }}
       >
         <MenuItem value="" disabled>
-          <Em>
+          {/* <Em className="em">
             Select a page
             <ChevronRightIcon fontSize="small" sx={{ ml: 1 }} />
-          </Em>
+          </Em> */}
         </MenuItem>
         {SIDEBAR_LINKS.map((link: ISidebarLink) => (
           <PageLinks
@@ -52,6 +53,7 @@ export default function SidebarDropdown({ onChange }: Props) {
             title={link.title}
             path={link.path}
             icon={link.icon}
+            className="link-container-text"
           />
         ))}
       </Select>

payment-iq/package.json

@@ -15,6 +15,7 @@
     "@mui/material": "^7.1.2",
     "@mui/x-data-grid": "^8.5.2",
     "@mui/x-date-pickers": "^8.5.3",
+    "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "dayjs": "^1.11.13",
     "file-saver": "^2.0.5",

payment-iq/styles/globals.scss

@@ -3,6 +3,14 @@
 :root {
   --background: #0a0a0a;
   --foreground: #ededed;
+  --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};
 }
 
 @media (prefers-color-scheme: dark) {

payment-iq/styles/variables.scss

@@ -8,14 +8,3 @@ $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};
-}