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 ( - - + + {Icon && } - {title} + {title} ); diff --git a/payment-iq/app/features/AccountIQ/AccountIQ.scss b/payment-iq/app/features/AccountIQ/AccountIQ.scss new file mode 100644 index 0000000..827351c --- /dev/null +++ b/payment-iq/app/features/AccountIQ/AccountIQ.scss @@ -0,0 +1,7 @@ +.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 b909bc9..c218a64 100644 --- a/payment-iq/app/features/AccountIQ/AccountIQ.tsx +++ b/payment-iq/app/features/AccountIQ/AccountIQ.tsx @@ -1,23 +1,20 @@ -import { styled } from "@mui/material"; +import { Box } from "@mui/material"; import { SectionCard } from "../SectionCard/SectionCard"; - -const AccountIQIcon = styled("div")(() => ({ - fontWeight: "bold", - color: "#4ecdc4", - marginTop: "4px", -})); +import "./AccountIQ.scss"; export const AccountIQ = () => { return ( - AIQ} - items={[ - { title: "Automatically reconcile your transactions" }, - { title: "Live wallet balances from providers" }, - { title: "Gaming provider financial overviews" }, - { title: "Learn more" }, - ]} - /> + + AIQ} + items={[ + { title: "Automatically reconcile your transactions" }, + { title: "Live wallet balances from providers" }, + { title: "Gaming provider financial overviews" }, + { title: "Learn more" }, + ]} + /> + ); }; diff --git a/payment-iq/app/features/DateRangePicker/DateRangePicker.scss b/payment-iq/app/features/DateRangePicker/DateRangePicker.scss new file mode 100644 index 0000000..1c00089 --- /dev/null +++ b/payment-iq/app/features/DateRangePicker/DateRangePicker.scss @@ -0,0 +1,12 @@ +.date-range-picker { + .date-range-picker__date-typo { + font-size: 0.875rem; + cursor: pointer; + padding: 8px; + border-radius: 4px; + + &:hover { + background-color: rgba(0, 0, 0, 0.04); + } + } +} diff --git a/payment-iq/app/features/DateRangePicker/DateRangePicker.tsx b/payment-iq/app/features/DateRangePicker/DateRangePicker.tsx index afb9fa8..e5e10e6 100644 --- a/payment-iq/app/features/DateRangePicker/DateRangePicker.tsx +++ b/payment-iq/app/features/DateRangePicker/DateRangePicker.tsx @@ -6,18 +6,20 @@ import { format } from "date-fns"; import "react-date-range/dist/styles.css"; import "react-date-range/dist/theme/default.css"; +import "./DateRangePicker.scss"; + export const DateRangePicker = () => { const [range, setRange] = useState([ { startDate: new Date(), endDate: new Date(), - key: "selection" - } + key: "selection", + }, ]); - + const [anchorEl, setAnchorEl] = useState(null); - const handleSelect: DateRangeProps['onChange'] = (ranges) => { + const handleSelect: DateRangeProps["onChange"] = (ranges) => { if (ranges.selection) { setRange([ranges.selection]); if (ranges.selection.endDate !== ranges.selection.startDate) { @@ -35,22 +37,22 @@ export const DateRangePicker = () => { }; const open = Boolean(anchorEl); - const id = open ? 'date-range-popover' : undefined; + const id = open ? "date-range-popover" : undefined; return ( - + @@ -64,21 +66,14 @@ export const DateRangePicker = () => { - - {format(range[0].startDate ?? new Date(), "PPP")} - {format(range[0].endDate ?? new Date(), "PPP")} + {format(range[0].startDate ?? new Date(), "PPP")} -{" "} + {format(range[0].endDate ?? new Date(), "PPP")} ); -} \ No newline at end of file +}; diff --git a/payment-iq/app/features/Documentation/Documentation.scss b/payment-iq/app/features/Documentation/Documentation.scss new file mode 100644 index 0000000..71e4659 --- /dev/null +++ b/payment-iq/app/features/Documentation/Documentation.scss @@ -0,0 +1,5 @@ +.documentation { + .documentation__icon { + height: auto; + } +} diff --git a/payment-iq/app/features/Documentation/Documentation.tsx b/payment-iq/app/features/Documentation/Documentation.tsx index 5932444..f45683d 100644 --- a/payment-iq/app/features/Documentation/Documentation.tsx +++ b/payment-iq/app/features/Documentation/Documentation.tsx @@ -1,18 +1,24 @@ import React from "react"; import DescriptionIcon from "@mui/icons-material/Description"; import { SectionCard } from "../SectionCard/SectionCard"; +import { Box } from "@mui/material"; +import "./Documentation.scss"; export const Documentation = () => { return ( - } - items={[ - { title: "Provider Integration Overview" }, - { title: "APIs Introduction" }, - { title: "Documentation Overview" }, - { title: "How-Tos" }, - ]} - /> + + + } + items={[ + { title: "Provider Integration Overview" }, + { title: "APIs Introduction" }, + { title: "Documentation Overview" }, + { title: "How-Tos" }, + ]} + /> + ); }; diff --git a/payment-iq/app/features/FetchReports/FetchReport.scss b/payment-iq/app/features/FetchReports/FetchReport.scss new file mode 100644 index 0000000..25398d2 --- /dev/null +++ b/payment-iq/app/features/FetchReports/FetchReport.scss @@ -0,0 +1,6 @@ +.fetch-report { + padding: 23px; + margin: 16px; + display: flex; + flex-direction: column; +} diff --git a/payment-iq/app/features/FetchReports/FetchReports.tsx b/payment-iq/app/features/FetchReports/FetchReports.tsx index e79f79b..fffcd60 100644 --- a/payment-iq/app/features/FetchReports/FetchReports.tsx +++ b/payment-iq/app/features/FetchReports/FetchReports.tsx @@ -16,6 +16,8 @@ import CalendarTodayIcon from "@mui/icons-material/CalendarToday"; import MoreVertIcon from "@mui/icons-material/MoreVert"; import { DateRangePicker } from "../DateRangePicker/DateRangePicker"; +import "./FetchReport.scss"; + export const FetchReport = () => { const [state, setState] = useState(""); const [psp, setPsp] = useState(""); @@ -29,15 +31,7 @@ export const FetchReport = () => { const isDownloadEnabled = state && psp && reportType; return ( - + Fetch Report diff --git a/payment-iq/app/features/GeneralHealthCard/GeneralHealthCard.scss b/payment-iq/app/features/GeneralHealthCard/GeneralHealthCard.scss new file mode 100644 index 0000000..389d05b --- /dev/null +++ b/payment-iq/app/features/GeneralHealthCard/GeneralHealthCard.scss @@ -0,0 +1,18 @@ +.general-health-card { + .general-health-card__header { + display: flex; + justify-content: space-between; + margin-bottom: 16px; + + .general-health-card__right-side { + display: flex; + align-items: center; + } + } + + .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 df4778c..2a6a0f8 100644 --- a/payment-iq/app/features/GeneralHealthCard/GeneralHealthCard.tsx +++ b/payment-iq/app/features/GeneralHealthCard/GeneralHealthCard.tsx @@ -1,8 +1,10 @@ import { Box, Card, CardContent, Typography, IconButton } from "@mui/material"; import MoreVertIcon from "@mui/icons-material/MoreVert"; import CalendarTodayIcon from "@mui/icons-material/CalendarToday"; -import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown"; + import { DateRangePicker } from "../DateRangePicker/DateRangePicker"; +import { StatItem } from "./components/StatItem"; +import "./GeneralHealthCard.scss"; const stats = [ { label: "TOTAL", value: 5, change: "-84.85%" }, @@ -12,46 +14,15 @@ const stats = [ { label: "ATV", value: "€0.00", change: "-100%" }, ]; -const StatItem = ({ - label, - value, - change, -}: { - label: string; - value: string | number; - change: string; -}) => ( - - - {label} - - - {value} - - - - {/* */} - {change} - - -); - export const GeneralHealthCard = () => { return ( - + - + General Health - + @@ -61,7 +32,7 @@ export const GeneralHealthCard = () => { - + {stats.map((item, i) => ( ))} diff --git a/payment-iq/app/features/GeneralHealthCard/components/StatItem.scss b/payment-iq/app/features/GeneralHealthCard/components/StatItem.scss new file mode 100644 index 0000000..71aaa1f --- /dev/null +++ b/payment-iq/app/features/GeneralHealthCard/components/StatItem.scss @@ -0,0 +1,12 @@ +.static-item { + text-align: center; + padding-left: 16px; + padding-right: 16px; + + .static-item__percentage { + display: flex; + align-items: center; + justify-content: center; + color: red; + } +} diff --git a/payment-iq/app/features/GeneralHealthCard/components/StatItem.tsx b/payment-iq/app/features/GeneralHealthCard/components/StatItem.tsx new file mode 100644 index 0000000..ccf619a --- /dev/null +++ b/payment-iq/app/features/GeneralHealthCard/components/StatItem.tsx @@ -0,0 +1,27 @@ +import { Box, Typography } from "@mui/material"; +import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown"; +import "./StatItem.scss"; + +export const StatItem = ({ + label, + value, + change, +}: { + label: string; + value: string | number; + change: string; +}) => ( + + + {label} + + + {value} + + + + {/* */} + {change} + + +); diff --git a/payment-iq/app/features/Pages/DashboardHomePage/DashboardHomePage.tsx b/payment-iq/app/features/Pages/DashboardHomePage/DashboardHomePage.tsx index 5b59237..cd2aede 100644 --- a/payment-iq/app/features/Pages/DashboardHomePage/DashboardHomePage.tsx +++ b/payment-iq/app/features/Pages/DashboardHomePage/DashboardHomePage.tsx @@ -1,11 +1,11 @@ -import { Box } from "@mui/material" -import { GeneralHealthCard } from "../../GeneralHealthCard/GeneralHealthCard" -import { TransactionsOverview } from "../../TransactionsOverview/TransactionsOverview" -import { TransactionsWaitingApproval } from "../../TransactionsWaitingApproval/TransactionsWaitingApproval" -import { FetchReport } from "../../FetchReports/FetchReports" -import { Documentation } from "../../Documentation/Documentation" -import { AccountIQ } from "../../AccountIQ/AccountIQ" -import { WhatsNew } from "../../WhatsNew/WhatsNew" +import { Box } from "@mui/material"; +import { GeneralHealthCard } from "../../GeneralHealthCard/GeneralHealthCard"; +import { TransactionsOverView } from "../../TransactionsOverView/TransactionsOverView"; +import { TransactionsWaitingApproval } from "../../TransactionsWaitingApproval/TransactionsWaitingApproval"; +import { FetchReport } from "../../FetchReports/FetchReports"; +import { Documentation } from "../../Documentation/Documentation"; +import { AccountIQ } from "../../AccountIQ/AccountIQ"; +import { WhatsNew } from "../../WhatsNew/WhatsNew"; export const DashboardHomePage = () => { return ( @@ -13,12 +13,12 @@ export const DashboardHomePage = () => { - + - ) -} + ); +}; diff --git a/payment-iq/app/features/PieCharts/PieCharts.scss b/payment-iq/app/features/PieCharts/PieCharts.scss new file mode 100644 index 0000000..aa280e7 --- /dev/null +++ b/payment-iq/app/features/PieCharts/PieCharts.scss @@ -0,0 +1,8 @@ +.pie-charts { + width: 100%; + height: 300px; + + @media (min-width: 960px) { + width: 60%; + } +} diff --git a/payment-iq/app/features/PieCharts/PieCharts.tsx b/payment-iq/app/features/PieCharts/PieCharts.tsx index 4b59f89..77a3ac8 100644 --- a/payment-iq/app/features/PieCharts/PieCharts.tsx +++ b/payment-iq/app/features/PieCharts/PieCharts.tsx @@ -1,12 +1,12 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ import { Box } from "@mui/material"; import { PieChart, Pie, Cell, ResponsiveContainer } from "recharts"; - +import "./PieCharts.scss"; const data = [ { name: "Group A", value: 100 }, { name: "Group B", value: 200 }, { name: "Group C", value: 400 }, - { name: "Group D", value: 300 } + { name: "Group D", value: 300 }, ]; const COLORS = ["#4caf50", "#ff9800", "#f44336", "#9e9e9e"]; @@ -19,7 +19,7 @@ const renderCustomizedLabel = ({ innerRadius, outerRadius, percent, -// index + // index }: any) => { const radius = innerRadius + (outerRadius - innerRadius) * 0.5; const x = cx + radius * Math.cos(-midAngle * RADIAN); @@ -39,12 +39,7 @@ const renderCustomizedLabel = ({ }; export const PieCharts = () => { return ( - + { cy="50%" labelLine={false} label={renderCustomizedLabel} - outerRadius="80%" // Percentage-based radius + outerRadius="80%" // Percentage-based radius fill="#8884d8" dataKey="value" > {data.map((entry, index) => ( - + ))} - + ); -} - +}; diff --git a/payment-iq/app/features/SectionCard/SectionCard.scss b/payment-iq/app/features/SectionCard/SectionCard.scss new file mode 100644 index 0000000..fd94cd7 --- /dev/null +++ b/payment-iq/app/features/SectionCard/SectionCard.scss @@ -0,0 +1,20 @@ +.section-card { + padding: 16px; + margin: 16px; + display: flex; + flex-direction: column; + .section-card__header { + display: flex; + justify-content: space-between; + margin-bottom: 16px; + .section-card__title { + display: flex; + gap: 16px; + } + .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 add14c1..546359f 100644 --- a/payment-iq/app/features/SectionCard/SectionCard.tsx +++ b/payment-iq/app/features/SectionCard/SectionCard.tsx @@ -13,20 +13,19 @@ import { import MoreVertIcon from "@mui/icons-material/MoreVert"; import { ISectionCardProps } from "./types"; +import "./SectionCard.scss"; + export const SectionCard = ({ title, icon, items }: ISectionCardProps) => ( - + - - + + {icon} {title} - + @@ -36,12 +35,7 @@ export const SectionCard = ({ title, icon, items }: ISectionCardProps) => ( {items.map((item, index) => ( - + ))} diff --git a/payment-iq/app/features/TransactionsOverView/TransactionsOverView.scss b/payment-iq/app/features/TransactionsOverView/TransactionsOverView.scss new file mode 100644 index 0000000..9494eec --- /dev/null +++ b/payment-iq/app/features/TransactionsOverView/TransactionsOverView.scss @@ -0,0 +1,28 @@ +.transaction-overview { + padding: 23px; + margin: 16px; + display: flex; + flex-direction: column; + + .transaction-overview__header { + display: flex; + justify-content: space-between; + align-items: center; + padding-left: 8px; + padding-right: 8px; + } + + .transaction-overview__chart-table { + padding: 16px; + margin: 16px; + display: flex; + flex-direction: row; + gap: 32px; + flex-wrap: wrap; + + @media (min-width: 960px) { + flex-wrap: nowrap; + gap: 0; + } + } +} diff --git a/payment-iq/app/features/TransactionsOverView/components/TransactionsOverViewTable.scss b/payment-iq/app/features/TransactionsOverView/components/TransactionsOverViewTable.scss new file mode 100644 index 0000000..b58bd2b --- /dev/null +++ b/payment-iq/app/features/TransactionsOverView/components/TransactionsOverViewTable.scss @@ -0,0 +1,17 @@ +.transactions-overview-table { + .transactions-overview-table__state-wrapper { + display: flex; + justify-content: flex-start; + align-items: center; + margin-left: auto; + margin-right: auto; + width: 73px; + + .transactions-overview-table__state { + width: 10px; + height: 10px; + border-radius: 50%; + margin-right: 8px; + } + } +} diff --git a/payment-iq/app/features/TransactionsOverview/TransactionsOverViewTable.tsx b/payment-iq/app/features/TransactionsOverView/components/TransactionsOverViewTable.tsx similarity index 72% rename from payment-iq/app/features/TransactionsOverview/TransactionsOverViewTable.tsx rename to payment-iq/app/features/TransactionsOverView/components/TransactionsOverViewTable.tsx index 7dac466..dd16547 100644 --- a/payment-iq/app/features/TransactionsOverview/TransactionsOverViewTable.tsx +++ b/payment-iq/app/features/TransactionsOverView/components/TransactionsOverViewTable.tsx @@ -10,6 +10,8 @@ import { Button, } from "@mui/material"; +import "./TransactionsOverViewTable.scss"; + const data1 = [ { state: "Success", count: 120, percentage: "60%", color: "green" }, { state: "Pending", count: 50, percentage: "25%", color: "orange" }, @@ -17,9 +19,9 @@ const data1 = [ { state: "Other", count: 10, percentage: "5%", color: "gray" }, ]; -export const TransactionsOverviewTable = () => { +export const TransactionsOverViewTable = () => { return ( - + @@ -33,22 +35,11 @@ export const TransactionsOverviewTable = () => { {data1.map((row, i) => ( - + {row.state} diff --git a/payment-iq/app/features/TransactionsOverview/TransactionsOverview.tsx b/payment-iq/app/features/TransactionsOverview/TransactionsOverview.tsx index 0c705c0..e5a8a21 100644 --- a/payment-iq/app/features/TransactionsOverview/TransactionsOverview.tsx +++ b/payment-iq/app/features/TransactionsOverview/TransactionsOverview.tsx @@ -3,29 +3,16 @@ import { Box, Button, IconButton, Paper, Typography } from "@mui/material"; import { PieCharts } from "../PieCharts/PieCharts"; import MoreVertIcon from "@mui/icons-material/MoreVert"; -import { TransactionsOverviewTable } from "./TransactionsOverViewTable"; +import { TransactionsOverViewTable } from "./components/TransactionsOverViewTable"; -export const TransactionsOverview = () => { +import "./TransactionsOverView.scss"; + +export const TransactionsOverView = () => { const router = useRouter(); return ( - + {/* Title and All Transactions Button */} - + Transactions Overview (Last 24h) @@ -44,24 +31,9 @@ export const TransactionsOverview = () => { {/* Chart and Table */} - + - + ); diff --git a/payment-iq/app/features/TransactionsWaitingApproval/TransactionsWaitingApproval.scss b/payment-iq/app/features/TransactionsWaitingApproval/TransactionsWaitingApproval.scss new file mode 100644 index 0000000..d59b128 --- /dev/null +++ b/payment-iq/app/features/TransactionsWaitingApproval/TransactionsWaitingApproval.scss @@ -0,0 +1,6 @@ +.transactions-waiting-approval { + padding: 16px; + margin: 16px; + display: flex; + flex-direction: column; +} diff --git a/payment-iq/app/features/TransactionsWaitingApproval/TransactionsWaitingApproval.tsx b/payment-iq/app/features/TransactionsWaitingApproval/TransactionsWaitingApproval.tsx index e3cfdb3..34ddc01 100644 --- a/payment-iq/app/features/TransactionsWaitingApproval/TransactionsWaitingApproval.tsx +++ b/payment-iq/app/features/TransactionsWaitingApproval/TransactionsWaitingApproval.tsx @@ -16,6 +16,7 @@ import CancelIcon from "@mui/icons-material/Cancel"; import MoreVertIcon from "@mui/icons-material/MoreVert"; +import "./TransactionsWaitingApproval.scss"; const transactions = [ { id: "1049078821", @@ -117,10 +118,7 @@ const transactions = [ export const TransactionsWaitingApproval = () => { return ( - + diff --git a/payment-iq/app/features/WhatsNew/WhatsNew.scss b/payment-iq/app/features/WhatsNew/WhatsNew.scss new file mode 100644 index 0000000..f90f636 --- /dev/null +++ b/payment-iq/app/features/WhatsNew/WhatsNew.scss @@ -0,0 +1,5 @@ +.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 1f3aed3..28584d1 100644 --- a/payment-iq/app/features/WhatsNew/WhatsNew.tsx +++ b/payment-iq/app/features/WhatsNew/WhatsNew.tsx @@ -1,27 +1,31 @@ +import { Box } from "@mui/material"; import { SectionCard } from "../SectionCard/SectionCard"; import WifiIcon from "@mui/icons-material/Wifi"; +import "./WhatsNew.scss"; export const WhatsNew = () => { return ( - } - items={[ - { - title: "Sneak Peek – Discover the New Rules Hub Feature", - date: "13 May 2025", - }, - { - title: - "New security measures for anonymizing sensitive configuration values, effective December 2nd", - date: "31 Oct 2024", - }, - { - title: "Introducing Our New Transactions and Rule Views", - date: "23 Oct 2024", - }, - { title: "Introducing Our New Status Page", date: "09 Sept 2024" }, - ]} - /> + + } + items={[ + { + title: "Sneak Peek – Discover the New Rules Hub Feature", + date: "13 May 2025", + }, + { + title: + "New security measures for anonymizing sensitive configuration values, effective December 2nd", + date: "31 Oct 2024", + }, + { + title: "Introducing Our New Transactions and Rule Views", + date: "23 Oct 2024", + }, + { title: "Introducing Our New Status Page", date: "09 Sept 2024" }, + ]} + /> + ); }; 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 ( - -
+ +
-
+
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) { > Select a page -
+
{PAGE_LINKS.map((link: ISidebarLink) => ( ))} 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 ( -