From ae967a7e2d904d5c893604d1fc24d7512ad70928 Mon Sep 17 00:00:00 2001
From: Petropoulos Evangelos <petr.vagelis@gmail.com>
Date: Wed, 2 Jul 2025 00:03:42 +0300
Subject: [PATCH] fix comments

---
 .../app/components/PageLinks/PageLinks.scss   | 39 +++++++++----------
 .../app/components/PageLinks/PageLinks.tsx    |  6 +--
 .../app/features/AccountIQ/AccountIQ.scss     |  4 +-
 .../app/features/AccountIQ/AccountIQ.tsx      |  4 +-
 .../DateRangePicker/DateRangePicker.scss      |  4 +-
 .../DateRangePicker/DateRangePicker.tsx       |  7 +++-
 .../features/Documentation/Documentation.scss |  4 +-
 .../features/Documentation/Documentation.tsx  |  6 ++-
 .../features/FetchReports/FetchReport.scss    |  2 +-
 .../features/FetchReports/FetchReports.tsx    |  2 +-
 .../GeneralHealthCard/GeneralHealthCard.scss  |  8 ++--
 .../GeneralHealthCard/GeneralHealthCard.tsx   |  8 ++--
 .../components/StatItem.scss                  |  4 +-
 .../GeneralHealthCard/components/StatItem.tsx |  4 +-
 .../app/features/PieCharts/PieCharts.scss     |  2 +-
 .../app/features/PieCharts/PieCharts.tsx      |  2 +-
 .../app/features/SectionCard/SectionCard.scss |  8 ++--
 .../app/features/SectionCard/SectionCard.tsx  |  8 ++--
 .../TransactionsOverView.scss                 |  6 +--
 .../components/TransactionsOverViewTable.scss |  6 +--
 .../components/TransactionsOverViewTable.tsx  |  9 ++---
 .../TransactionsOverview.tsx                  |  6 +--
 .../TransactionsWaitingApproval.scss          |  2 +-
 .../TransactionsWaitingApproval.tsx           |  6 +--
 .../app/features/WhatsNew/WhatsNew.scss       |  4 +-
 payment-iq/app/features/WhatsNew/WhatsNew.tsx |  4 +-
 .../app/features/dashboard/header/Header.scss | 30 +++++++-------
 .../app/features/dashboard/header/Header.tsx  |  9 +++--
 .../dashboard/header/dropDown/DropDown.scss   | 12 +++---
 .../dashboard/header/dropDown/DropDown.tsx    |  2 +-
 .../features/dashboard/sidebar/Sidebar.tsx    |  7 ++--
 .../features/dashboard/sidebar/sideBar.scss   | 24 ++++++------
 32 files changed, 123 insertions(+), 126 deletions(-)

diff --git a/payment-iq/app/components/PageLinks/PageLinks.scss b/payment-iq/app/components/PageLinks/PageLinks.scss
index 237f156..59baa21 100644
--- a/payment-iq/app/components/PageLinks/PageLinks.scss
+++ b/payment-iq/app/components/PageLinks/PageLinks.scss
@@ -1,23 +1,20 @@
-/* PageLinks.scss */
+.page-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;
 
-.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;
+    &:hover {
+        color: #fff;
+        background-color: var(--hover-color);
+        cursor: pointer;
+    }
+    .page-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 a9785d7..d90e5f9 100644
--- a/payment-iq/app/components/PageLinks/PageLinks.tsx
+++ b/payment-iq/app/components/PageLinks/PageLinks.tsx
@@ -15,10 +15,10 @@ export default function PageLinks({
   icon: Icon,
 }: IPageLinksProps) {
   return (
-    <Link href={path} passHref legacyBehavior>
-      <a className={clsx("link-container")}>
+    <Link href={path} passHref legacyBehavior className="page-link">
+      <a className={clsx("page-link__container")}>
         {Icon && <Icon />}
-        <span className="link-text">{title}</span>
+        <span className="page-link__text">{title}</span>
       </a>
     </Link>
   );
diff --git a/payment-iq/app/features/AccountIQ/AccountIQ.scss b/payment-iq/app/features/AccountIQ/AccountIQ.scss
index 8033663..827351c 100644
--- a/payment-iq/app/features/AccountIQ/AccountIQ.scss
+++ b/payment-iq/app/features/AccountIQ/AccountIQ.scss
@@ -1,5 +1,5 @@
-.account-iq-wrapper {
-    .icon {
+.account-iq {
+    .account-iq__icon {
         font-weight: bold;
         color: #4ecdc4;
         margin-top: 4px;
diff --git a/payment-iq/app/features/AccountIQ/AccountIQ.tsx b/payment-iq/app/features/AccountIQ/AccountIQ.tsx
index 93fcff4..c218a64 100644
--- a/payment-iq/app/features/AccountIQ/AccountIQ.tsx
+++ b/payment-iq/app/features/AccountIQ/AccountIQ.tsx
@@ -4,10 +4,10 @@ import "./AccountIQ.scss";
 
 export const AccountIQ = () => {
   return (
-    <Box className="account-iq-wrapper">
+    <Box className="account-iq">
       <SectionCard
         title="AccountIQ"
-        icon={<div className="icon">AIQ</div>}
+        icon={<div className="account-iq__icon">AIQ</div>}
         items={[
           { title: "Automatically reconcile your transactions" },
           { title: "Live wallet balances from providers" },
diff --git a/payment-iq/app/features/DateRangePicker/DateRangePicker.scss b/payment-iq/app/features/DateRangePicker/DateRangePicker.scss
index 2b67dcc..1c00089 100644
--- a/payment-iq/app/features/DateRangePicker/DateRangePicker.scss
+++ b/payment-iq/app/features/DateRangePicker/DateRangePicker.scss
@@ -1,5 +1,5 @@
-.date-range-picker-wrapper {
-    .date-typo {
+.date-range-picker {
+    .date-range-picker__date-typo {
         font-size: 0.875rem;
         cursor: pointer;
         padding: 8px;
diff --git a/payment-iq/app/features/DateRangePicker/DateRangePicker.tsx b/payment-iq/app/features/DateRangePicker/DateRangePicker.tsx
index fda7ca1..e5e10e6 100644
--- a/payment-iq/app/features/DateRangePicker/DateRangePicker.tsx
+++ b/payment-iq/app/features/DateRangePicker/DateRangePicker.tsx
@@ -40,7 +40,7 @@ export const DateRangePicker = () => {
   const id = open ? "date-range-popover" : undefined;
 
   return (
-    <Box className="date-range-picker-wrapper">
+    <Box className="date-range-picker">
       <Popover
         id={id}
         open={open}
@@ -66,7 +66,10 @@ export const DateRangePicker = () => {
       </Popover>
 
       <Box>
-        <Typography onClick={handleClick} className="date-typo">
+        <Typography
+          onClick={handleClick}
+          className="date-range-picker__date-typo"
+        >
           {format(range[0].startDate ?? new Date(), "PPP")} -{" "}
           {format(range[0].endDate ?? new Date(), "PPP")}
         </Typography>
diff --git a/payment-iq/app/features/Documentation/Documentation.scss b/payment-iq/app/features/Documentation/Documentation.scss
index e35f626..71e4659 100644
--- a/payment-iq/app/features/Documentation/Documentation.scss
+++ b/payment-iq/app/features/Documentation/Documentation.scss
@@ -1,5 +1,5 @@
-.documentation-wrapper {
-    .icon {
+.documentation {
+    .documentation__icon {
         height: auto;
     }
 }
diff --git a/payment-iq/app/features/Documentation/Documentation.tsx b/payment-iq/app/features/Documentation/Documentation.tsx
index c8bc994..f45683d 100644
--- a/payment-iq/app/features/Documentation/Documentation.tsx
+++ b/payment-iq/app/features/Documentation/Documentation.tsx
@@ -6,10 +6,12 @@ import "./Documentation.scss";
 
 export const Documentation = () => {
   return (
-    <Box className="documentation-wrapper">
+    <Box className="documentation">
       <SectionCard
         title="Documentation"
-        icon={<DescriptionIcon className="icon" fontSize="small" />}
+        icon={
+          <DescriptionIcon className="documentation__icon" fontSize="small" />
+        }
         items={[
           { title: "Provider Integration Overview" },
           { title: "APIs Introduction" },
diff --git a/payment-iq/app/features/FetchReports/FetchReport.scss b/payment-iq/app/features/FetchReports/FetchReport.scss
index 90601ab..25398d2 100644
--- a/payment-iq/app/features/FetchReports/FetchReport.scss
+++ b/payment-iq/app/features/FetchReports/FetchReport.scss
@@ -1,4 +1,4 @@
-.fetch-report-paper {
+.fetch-report {
     padding: 23px;
     margin: 16px;
     display: flex;
diff --git a/payment-iq/app/features/FetchReports/FetchReports.tsx b/payment-iq/app/features/FetchReports/FetchReports.tsx
index 54cd7dc..fffcd60 100644
--- a/payment-iq/app/features/FetchReports/FetchReports.tsx
+++ b/payment-iq/app/features/FetchReports/FetchReports.tsx
@@ -31,7 +31,7 @@ export const FetchReport = () => {
   const isDownloadEnabled = state && psp && reportType;
 
   return (
-    <Paper className="fetch-report-paper" elevation={3}>
+    <Paper className="fetch-report" elevation={3}>
       <Box sx={{ display: "flex", justifyContent: "space-between", mb: 2 }}>
         <Typography variant="h6" fontWeight="bold">
           Fetch Report
diff --git a/payment-iq/app/features/GeneralHealthCard/GeneralHealthCard.scss b/payment-iq/app/features/GeneralHealthCard/GeneralHealthCard.scss
index 742315e..389d05b 100644
--- a/payment-iq/app/features/GeneralHealthCard/GeneralHealthCard.scss
+++ b/payment-iq/app/features/GeneralHealthCard/GeneralHealthCard.scss
@@ -1,16 +1,16 @@
-.general-health-card-wrapper {
-    .header {
+.general-health-card {
+    .general-health-card__header {
         display: flex;
         justify-content: space-between;
         margin-bottom: 16px;
 
-        .right-side {
+        .general-health-card__right-side {
             display: flex;
             align-items: center;
         }
     }
 
-    .stat-items {
+    .general-health-card__stat-items {
         display: flex;
         justify-content: space-around;
         margin-top: 16px;
diff --git a/payment-iq/app/features/GeneralHealthCard/GeneralHealthCard.tsx b/payment-iq/app/features/GeneralHealthCard/GeneralHealthCard.tsx
index 223183e..2a6a0f8 100644
--- a/payment-iq/app/features/GeneralHealthCard/GeneralHealthCard.tsx
+++ b/payment-iq/app/features/GeneralHealthCard/GeneralHealthCard.tsx
@@ -16,13 +16,13 @@ const stats = [
 
 export const GeneralHealthCard = () => {
   return (
-    <Card className="general-health-card-wrapper">
+    <Card className="general-health-card">
       <CardContent>
-        <Box className="header">
+        <Box className="general-health-card__header">
           <Typography variant="h5" fontWeight="bold">
             General Health
           </Typography>
-          <Box className="right-side">
+          <Box className="general-health-card__right-side">
             <CalendarTodayIcon fontSize="small" />
             <Typography variant="body2">
               <DateRangePicker />
@@ -32,7 +32,7 @@ export const GeneralHealthCard = () => {
             </IconButton>
           </Box>
         </Box>
-        <Box className="stat-items">
+        <Box className="general-health-card__stat-items">
           {stats.map((item, i) => (
             <StatItem key={item.label + i} {...item} />
           ))}
diff --git a/payment-iq/app/features/GeneralHealthCard/components/StatItem.scss b/payment-iq/app/features/GeneralHealthCard/components/StatItem.scss
index 3282b07..71aaa1f 100644
--- a/payment-iq/app/features/GeneralHealthCard/components/StatItem.scss
+++ b/payment-iq/app/features/GeneralHealthCard/components/StatItem.scss
@@ -1,9 +1,9 @@
-.static-item-wrapper {
+.static-item {
     text-align: center;
     padding-left: 16px;
     padding-right: 16px;
 
-    .percentage {
+    .static-item__percentage {
         display: flex;
         align-items: center;
         justify-content: center;
diff --git a/payment-iq/app/features/GeneralHealthCard/components/StatItem.tsx b/payment-iq/app/features/GeneralHealthCard/components/StatItem.tsx
index 6e176a1..ccf619a 100644
--- a/payment-iq/app/features/GeneralHealthCard/components/StatItem.tsx
+++ b/payment-iq/app/features/GeneralHealthCard/components/StatItem.tsx
@@ -11,14 +11,14 @@ export const StatItem = ({
   value: string | number;
   change: string;
 }) => (
-  <Box className="static-item-wrapper">
+  <Box className="static-item">
     <Typography variant="body2" fontWeight="bold" color="text.secondary">
       {label}
     </Typography>
     <Typography variant="h6" fontWeight="bold" mt={0.5}>
       {value}
     </Typography>
-    <Box className="percentage">
+    <Box className="static-item__percentage">
       <ArrowDropDownIcon fontSize="small" />
       {/* <ArrowDropUp fontSize='small' /> */}
       <Typography variant="caption">{change}</Typography>
diff --git a/payment-iq/app/features/PieCharts/PieCharts.scss b/payment-iq/app/features/PieCharts/PieCharts.scss
index 13ddf83..aa280e7 100644
--- a/payment-iq/app/features/PieCharts/PieCharts.scss
+++ b/payment-iq/app/features/PieCharts/PieCharts.scss
@@ -1,4 +1,4 @@
-.pie-charts-wrapper {
+.pie-charts {
     width: 100%;
     height: 300px;
 
diff --git a/payment-iq/app/features/PieCharts/PieCharts.tsx b/payment-iq/app/features/PieCharts/PieCharts.tsx
index 93d57b6..77a3ac8 100644
--- a/payment-iq/app/features/PieCharts/PieCharts.tsx
+++ b/payment-iq/app/features/PieCharts/PieCharts.tsx
@@ -39,7 +39,7 @@ const renderCustomizedLabel = ({
 };
 export const PieCharts = () => {
   return (
-    <Box className="pie-charts-wrapper">
+    <Box className="pie-charts">
       <ResponsiveContainer width="100%" height="100%">
         <PieChart>
           <Pie
diff --git a/payment-iq/app/features/SectionCard/SectionCard.scss b/payment-iq/app/features/SectionCard/SectionCard.scss
index d4743c4..fd94cd7 100644
--- a/payment-iq/app/features/SectionCard/SectionCard.scss
+++ b/payment-iq/app/features/SectionCard/SectionCard.scss
@@ -1,17 +1,17 @@
-.section-card-paper {
+.section-card {
     padding: 16px;
     margin: 16px;
     display: flex;
     flex-direction: column;
-    .header {
+    .section-card__header {
         display: flex;
         justify-content: space-between;
         margin-bottom: 16px;
-        .title {
+        .section-card__title {
             display: flex;
             gap: 16px;
         }
-        .icon-wrapper {
+        .section-card__icon-wrapper {
             display: flex;
             align-items: center;
             gap: 16px;
diff --git a/payment-iq/app/features/SectionCard/SectionCard.tsx b/payment-iq/app/features/SectionCard/SectionCard.tsx
index c67040a..546359f 100644
--- a/payment-iq/app/features/SectionCard/SectionCard.tsx
+++ b/payment-iq/app/features/SectionCard/SectionCard.tsx
@@ -16,16 +16,16 @@ import { ISectionCardProps } from "./types";
 import "./SectionCard.scss";
 
 export const SectionCard = ({ title, icon, items }: ISectionCardProps) => (
-  <Paper className="section-card-paper" elevation={3}>
+  <Paper className="section-card" elevation={3}>
     <CardContent>
-      <Box className="header">
-        <Box className="title">
+      <Box className="section-card__header">
+        <Box className="section-card__title">
           {icon}
           <Typography variant="h6" fontWeight="bold">
             {title}
           </Typography>
         </Box>
-        <Box className="icon-wrapper">
+        <Box className="section-card__icon-wrapper">
           <IconButton size="small">
             <MoreVertIcon fontSize="small" />
           </IconButton>
diff --git a/payment-iq/app/features/TransactionsOverView/TransactionsOverView.scss b/payment-iq/app/features/TransactionsOverView/TransactionsOverView.scss
index 94c08e5..9494eec 100644
--- a/payment-iq/app/features/TransactionsOverView/TransactionsOverView.scss
+++ b/payment-iq/app/features/TransactionsOverView/TransactionsOverView.scss
@@ -1,10 +1,10 @@
-.transaction-overview-paper {
+.transaction-overview {
     padding: 23px;
     margin: 16px;
     display: flex;
     flex-direction: column;
 
-    .header {
+    .transaction-overview__header {
         display: flex;
         justify-content: space-between;
         align-items: center;
@@ -12,7 +12,7 @@
         padding-right: 8px;
     }
 
-    .chart-table-wrapper {
+    .transaction-overview__chart-table {
         padding: 16px;
         margin: 16px;
         display: flex;
diff --git a/payment-iq/app/features/TransactionsOverView/components/TransactionsOverViewTable.scss b/payment-iq/app/features/TransactionsOverView/components/TransactionsOverViewTable.scss
index 0cddcae..b58bd2b 100644
--- a/payment-iq/app/features/TransactionsOverView/components/TransactionsOverViewTable.scss
+++ b/payment-iq/app/features/TransactionsOverView/components/TransactionsOverViewTable.scss
@@ -1,5 +1,5 @@
-.transactions-overview-table-wrapper {
-    .state-wrapper {
+.transactions-overview-table {
+    .transactions-overview-table__state-wrapper {
         display: flex;
         justify-content: flex-start;
         align-items: center;
@@ -7,7 +7,7 @@
         margin-right: auto;
         width: 73px;
 
-        .state {
+        .transactions-overview-table__state {
             width: 10px;
             height: 10px;
             border-radius: 50%;
diff --git a/payment-iq/app/features/TransactionsOverView/components/TransactionsOverViewTable.tsx b/payment-iq/app/features/TransactionsOverView/components/TransactionsOverViewTable.tsx
index c45bfc1..dd16547 100644
--- a/payment-iq/app/features/TransactionsOverView/components/TransactionsOverViewTable.tsx
+++ b/payment-iq/app/features/TransactionsOverView/components/TransactionsOverViewTable.tsx
@@ -21,10 +21,7 @@ const data1 = [
 
 export const TransactionsOverViewTable = () => {
   return (
-    <TableContainer
-      className="transactions-overview-table-wrapper"
-      component={Paper}
-    >
+    <TableContainer className="transactions-overview-table" component={Paper}>
       <Table>
         <TableHead>
           <TableRow>
@@ -38,9 +35,9 @@ export const TransactionsOverViewTable = () => {
           {data1.map((row, i) => (
             <TableRow key={row.state + i}>
               <TableCell align="center">
-                <Box className="state-wrapper">
+                <Box className="transactions-overview-table__state-wrapper">
                   <Box
-                    className="state"
+                    className="transactions-overview-table__state"
                     sx={{
                       bgcolor: row.color,
                     }}
diff --git a/payment-iq/app/features/TransactionsOverview/TransactionsOverview.tsx b/payment-iq/app/features/TransactionsOverview/TransactionsOverview.tsx
index a737657..e5a8a21 100644
--- a/payment-iq/app/features/TransactionsOverview/TransactionsOverview.tsx
+++ b/payment-iq/app/features/TransactionsOverview/TransactionsOverview.tsx
@@ -10,9 +10,9 @@ import "./TransactionsOverView.scss";
 export const TransactionsOverView = () => {
   const router = useRouter();
   return (
-    <Paper className="transaction-overview-paper" elevation={3}>
+    <Paper className="transaction-overview" elevation={3}>
       {/* Title and All Transactions Button */}
-      <Box className="header">
+      <Box className="transaction-overview__header">
         <Typography variant="h5" fontWeight="bold">
           Transactions Overview (Last 24h)
         </Typography>
@@ -31,7 +31,7 @@ export const TransactionsOverView = () => {
       </Box>
 
       {/* Chart and Table */}
-      <Box className="chart-table-wrapper">
+      <Box className="transaction-overview__chart-table">
         <PieCharts />
         <TransactionsOverViewTable />
       </Box>
diff --git a/payment-iq/app/features/TransactionsWaitingApproval/TransactionsWaitingApproval.scss b/payment-iq/app/features/TransactionsWaitingApproval/TransactionsWaitingApproval.scss
index 6e68250..d59b128 100644
--- a/payment-iq/app/features/TransactionsWaitingApproval/TransactionsWaitingApproval.scss
+++ b/payment-iq/app/features/TransactionsWaitingApproval/TransactionsWaitingApproval.scss
@@ -1,4 +1,4 @@
-.transactions-waiting-approval-paper {
+.transactions-waiting-approval {
     padding: 16px;
     margin: 16px;
     display: flex;
diff --git a/payment-iq/app/features/TransactionsWaitingApproval/TransactionsWaitingApproval.tsx b/payment-iq/app/features/TransactionsWaitingApproval/TransactionsWaitingApproval.tsx
index 925e103..34ddc01 100644
--- a/payment-iq/app/features/TransactionsWaitingApproval/TransactionsWaitingApproval.tsx
+++ b/payment-iq/app/features/TransactionsWaitingApproval/TransactionsWaitingApproval.tsx
@@ -118,11 +118,7 @@ const transactions = [
 
 export const TransactionsWaitingApproval = () => {
   return (
-    <Paper
-      elevation={3}
-      className="transactions-waiting-approval-paper"
-      // sx={{ padding: 2, margin: 2, display: "flex", flexDirection: "column" }}
-    >
+    <Paper elevation={3} className="transactions-waiting-approval">
       <Box sx={{ p: 3 }}>
         <Box sx={{ display: "flex", justifyContent: "space-between", mb: 2 }}>
           <Typography variant="h5" fontWeight="bold">
diff --git a/payment-iq/app/features/WhatsNew/WhatsNew.scss b/payment-iq/app/features/WhatsNew/WhatsNew.scss
index 6125718..f90f636 100644
--- a/payment-iq/app/features/WhatsNew/WhatsNew.scss
+++ b/payment-iq/app/features/WhatsNew/WhatsNew.scss
@@ -1,5 +1,5 @@
-.whats-new-wrapper {
-    .icon {
+.whats-new {
+    .whats-new__wifi-icon {
         height: auto;
     }
 }
diff --git a/payment-iq/app/features/WhatsNew/WhatsNew.tsx b/payment-iq/app/features/WhatsNew/WhatsNew.tsx
index d775d59..28584d1 100644
--- a/payment-iq/app/features/WhatsNew/WhatsNew.tsx
+++ b/payment-iq/app/features/WhatsNew/WhatsNew.tsx
@@ -5,10 +5,10 @@ import "./WhatsNew.scss";
 
 export const WhatsNew = () => {
   return (
-    <Box className="whats-new-wrapper">
+    <Box className="whats-new">
       <SectionCard
         title="What’s New"
-        icon={<WifiIcon className="icon" fontSize="small" />}
+        icon={<WifiIcon className="whats-new__wifi-icon" fontSize="small" />}
         items={[
           {
             title: "Sneak Peek – Discover the New Rules Hub Feature",
diff --git a/payment-iq/app/features/dashboard/header/Header.scss b/payment-iq/app/features/dashboard/header/Header.scss
index 68bc362..f6ba43f 100644
--- a/payment-iq/app/features/dashboard/header/Header.scss
+++ b/payment-iq/app/features/dashboard/header/Header.scss
@@ -1,17 +1,19 @@
-.header-toolbar {
-  display: flex;
-  align-items: center;
+.header {
+    .header__toolbar {
+        display: flex;
+        align-items: center;
 
-  .left-group {
-    width: 100px;
-    display: flex;
-    align-items: center;
-    gap: 12px; // optional spacing between menu and dropdown
-  }
+        .header__left-group {
+            width: 100px;
+            display: flex;
+            align-items: center;
+            gap: 12px; // optional spacing between menu and dropdown
+        }
 
-  .right-group {
-    margin-left: auto; // pushes it to the far right
-    display: flex;
-    align-items: center;
-  }
+        .header__right-group {
+            margin-left: auto; // pushes it to the far right
+            display: flex;
+            align-items: center;
+        }
+    }
 }
diff --git a/payment-iq/app/features/dashboard/header/Header.tsx b/payment-iq/app/features/dashboard/header/Header.tsx
index 6c2778f..2da283a 100644
--- a/payment-iq/app/features/dashboard/header/Header.tsx
+++ b/payment-iq/app/features/dashboard/header/Header.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { AppBar, Toolbar, IconButton, Menu, MenuItem } from "@mui/material";
+import { AppBar, Toolbar, IconButton } from "@mui/material";
 import MenuIcon from "@mui/icons-material/Menu";
 import Dropdown from "./dropDown/DropDown";
 import AccountMenu from "./accountMenu/AccountMenu";
@@ -22,20 +22,21 @@ const Header = () => {
 
   return (
     <AppBar
+      className="header"
       position="sticky"
       color="transparent"
       elevation={0}
       sx={{ borderBottom: "1px solid #22242626" }}
     >
-      <Toolbar className="header-toolbar">
-        <div className="left-group">
+      <Toolbar className="header__toolbar">
+        <div className="header__left-group">
           <IconButton edge="start" color="inherit" aria-label="menu">
             <MenuIcon />
           </IconButton>
           <Dropdown onChange={handleChange} />
         </div>
 
-        <div className="right-group">
+        <div className="header__right-group">
           <AccountMenu />
         </div>
       </Toolbar>
diff --git a/payment-iq/app/features/dashboard/header/dropDown/DropDown.scss b/payment-iq/app/features/dashboard/header/dropDown/DropDown.scss
index e5f6908..447899b 100644
--- a/payment-iq/app/features/dashboard/header/dropDown/DropDown.scss
+++ b/payment-iq/app/features/dashboard/header/dropDown/DropDown.scss
@@ -1,8 +1,8 @@
-.dropdown-container {
-  .link-container {
-    color: var(--text-secondary);
-    .link-text {
-      color: var(--text-primary);
+.sidebar-dropdown__container {
+    .page-link__container {
+        color: var(--text-secondary);
+        .page-link__text {
+            color: var(--text-primary);
+        }
     }
-  }
 }
diff --git a/payment-iq/app/features/dashboard/header/dropDown/DropDown.tsx b/payment-iq/app/features/dashboard/header/dropDown/DropDown.tsx
index b1f4596..0e1c793 100644
--- a/payment-iq/app/features/dashboard/header/dropDown/DropDown.tsx
+++ b/payment-iq/app/features/dashboard/header/dropDown/DropDown.tsx
@@ -41,7 +41,7 @@ export default function SidebarDropdown({ onChange }: Props) {
       >
         <em className="em">Select a page</em>
         <MenuItem value="" disabled></MenuItem>
-        <div className="dropdown-container">
+        <div className="sidebar-dropdown__container">
           {PAGE_LINKS.map((link: ISidebarLink) => (
             <PageLinks key={link.path} title={link.title} path={link.path} />
           ))}
diff --git a/payment-iq/app/features/dashboard/sidebar/Sidebar.tsx b/payment-iq/app/features/dashboard/sidebar/Sidebar.tsx
index 5c43b0f..381003f 100644
--- a/payment-iq/app/features/dashboard/sidebar/Sidebar.tsx
+++ b/payment-iq/app/features/dashboard/sidebar/Sidebar.tsx
@@ -1,6 +1,5 @@
 "use client";
 
-import React from "react";
 import DashboardIcon from "@mui/icons-material/Dashboard";
 import { PAGE_LINKS } from "@/app/features/dashboard/sidebar/SidebarLink.constants";
 import PageLinks from "../../../components/PageLinks/PageLinks";
@@ -8,11 +7,11 @@ import "./sideBar.scss";
 
 const SideBar = () => {
   return (
-    <aside className="sidebar-container">
-      <div className="sidebar-header">
+    <aside className="sidebar">
+      <div className="sidebar__header">
         <span>
           Betrise cashir{" "}
-          <DashboardIcon fontSize="small" className="sidebar-icon-spacing" />
+          <DashboardIcon fontSize="small" className="sidebar__icon-spacing" />
         </span>
       </div>
       {PAGE_LINKS.map((link) => (
diff --git a/payment-iq/app/features/dashboard/sidebar/sideBar.scss b/payment-iq/app/features/dashboard/sidebar/sideBar.scss
index 7fd02c4..04d49db 100644
--- a/payment-iq/app/features/dashboard/sidebar/sideBar.scss
+++ b/payment-iq/app/features/dashboard/sidebar/sideBar.scss
@@ -1,4 +1,4 @@
-.sidebar-container {
+.sidebar {
     position: fixed;
     top: 0;
     left: 0;
@@ -11,17 +11,17 @@
     padding: 16px;
     z-index: 1100;
     border-right: 1px solid #333;
-}
 
-.sidebar-header {
-    font-size: 20px;
-    font-weight: 600;
-    margin-bottom: 24px;
-    display: flex;
-    align-items: center;
-    color: white;
-}
+    .sidebar__header {
+        font-size: 20px;
+        font-weight: 600;
+        margin-bottom: 24px;
+        display: flex;
+        align-items: center;
+        color: white;
 
-.sidebar-icon-spacing {
-    margin-left: 8px;
+        .sidebar__icon-spacing {
+            margin-left: 8px;
+        }
+    }
 }