fix comments

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

@@ -1,6 +1,4 @@
-/* PageLinks.scss */
+.page-link__container {
-
-.link-container {
     display: flex;
     align-items: center;
     padding: 12px 1px;
@@ -14,10 +12,9 @@
         background-color: var(--hover-color);
         cursor: pointer;
     }
-}
+    .page-link__text {
-
-.link-text {
         color: var(--text-tertiary);
         margin-left: 12px;
         font-weight: 500;
     }
+}

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

@@ -15,10 +15,10 @@ export default function PageLinks({
   icon: Icon,
 }: IPageLinksProps) {
   return (
-    <Link href={path} passHref legacyBehavior>
+    <Link href={path} passHref legacyBehavior className="page-link">
-      <a className={clsx("link-container")}>
+      <a className={clsx("page-link__container")}>
         {Icon && <Icon />}
-        <span className="link-text">{title}</span>
+        <span className="page-link__text">{title}</span>
       </a>
     </Link>
   );

payment-iq/app/features/AccountIQ/AccountIQ.scss

@@ -1,5 +1,5 @@
-.account-iq-wrapper {
+.account-iq {
-    .icon {
+    .account-iq__icon {
         font-weight: bold;
         color: #4ecdc4;
         margin-top: 4px;

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" },

payment-iq/app/features/DateRangePicker/DateRangePicker.scss

@@ -1,5 +1,5 @@
-.date-range-picker-wrapper {
+.date-range-picker {
-    .date-typo {
+    .date-range-picker__date-typo {
         font-size: 0.875rem;
         cursor: pointer;
         padding: 8px;

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>

payment-iq/app/features/Documentation/Documentation.scss

@@ -1,5 +1,5 @@
-.documentation-wrapper {
+.documentation {
-    .icon {
+    .documentation__icon {
         height: auto;
     }
 }

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" },

payment-iq/app/features/FetchReports/FetchReport.scss

@@ -1,4 +1,4 @@
-.fetch-report-paper {
+.fetch-report {
     padding: 23px;
     margin: 16px;
     display: flex;

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

payment-iq/app/features/GeneralHealthCard/GeneralHealthCard.scss

@@ -1,16 +1,16 @@
-.general-health-card-wrapper {
+.general-health-card {
-    .header {
+    .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;

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} />
           ))}

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;

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>

payment-iq/app/features/PieCharts/PieCharts.scss

@@ -1,4 +1,4 @@
-.pie-charts-wrapper {
+.pie-charts {
     width: 100%;
     height: 300px;
 

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

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;

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="section-card__header">
-        <Box className="title">
+        <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>

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;

payment-iq/app/features/TransactionsOverView/components/TransactionsOverViewTable.scss

@@ -1,5 +1,5 @@
-.transactions-overview-table-wrapper {
+.transactions-overview-table {
-    .state-wrapper {
+    .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%;

payment-iq/app/features/TransactionsOverView/components/TransactionsOverViewTable.tsx

@@ -21,10 +21,7 @@ const data1 = [
 
 export const TransactionsOverViewTable = () => {
   return (
-    <TableContainer
+    <TableContainer className="transactions-overview-table" component={Paper}>
-      className="transactions-overview-table-wrapper"
-      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,
                     }}

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>

payment-iq/app/features/TransactionsWaitingApproval/TransactionsWaitingApproval.scss

@@ -1,4 +1,4 @@
-.transactions-waiting-approval-paper {
+.transactions-waiting-approval {
     padding: 16px;
     margin: 16px;
     display: flex;

payment-iq/app/features/TransactionsWaitingApproval/TransactionsWaitingApproval.tsx

@@ -118,11 +118,7 @@ const transactions = [
 
 export const TransactionsWaitingApproval = () => {
   return (
-    <Paper
+    <Paper elevation={3} className="transactions-waiting-approval">
-      elevation={3}
-      className="transactions-waiting-approval-paper"
-      // sx={{ padding: 2, margin: 2, display: "flex", flexDirection: "column" }}
-    >
       <Box sx={{ p: 3 }}>
         <Box sx={{ display: "flex", justifyContent: "space-between", mb: 2 }}>
           <Typography variant="h5" fontWeight="bold">

payment-iq/app/features/WhatsNew/WhatsNew.scss

@@ -1,5 +1,5 @@
-.whats-new-wrapper {
+.whats-new {
-    .icon {
+    .whats-new__wifi-icon {
         height: auto;
     }
 }

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",

payment-iq/app/features/dashboard/header/Header.scss

@@ -1,17 +1,19 @@
-.header-toolbar {
+.header {
+    .header__toolbar {
         display: flex;
         align-items: center;
 
-  .left-group {
+        .header__left-group {
             width: 100px;
             display: flex;
             align-items: center;
             gap: 12px; // optional spacing between menu and dropdown
         }
 
-  .right-group {
+        .header__right-group {
             margin-left: auto; // pushes it to the far right
             display: flex;
             align-items: center;
         }
     }
+}

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">
+      <Toolbar className="header__toolbar">
-        <div className="left-group">
+        <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>

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

@@ -1,7 +1,7 @@
-.dropdown-container {
+.sidebar-dropdown__container {
-  .link-container {
+    .page-link__container {
         color: var(--text-secondary);
-    .link-text {
+        .page-link__text {
             color: var(--text-primary);
         }
     }

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} />
           ))}

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">
+    <aside className="sidebar">
-      <div className="sidebar-header">
+      <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) => (

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 {
+    .sidebar__header {
         font-size: 20px;
         font-weight: 600;
         margin-bottom: 24px;
         display: flex;
         align-items: center;
         color: white;
-}
 
-.sidebar-icon-spacing {
+        .sidebar__icon-spacing {
             margin-left: 8px;
         }
+    }
+}