From c76099dd3d848d12b0b8f8574fca4cc6c08e0bcb Mon Sep 17 00:00:00 2001 From: Petropoulos Evangelos Date: Mon, 30 Jun 2025 19:21:27 +0300 Subject: [PATCH] refactor scss --- .../app/features/AccountIQ/AccountIQ.scss | 7 +++ .../app/features/AccountIQ/AccountIQ.tsx | 31 ++++++------- .../DateRangePicker/DateRangePicker.scss | 12 +++++ .../DateRangePicker/DateRangePicker.tsx | 40 +++++++---------- .../features/Documentation/Documentation.scss | 5 +++ .../features/Documentation/Documentation.tsx | 24 +++++----- .../features/FetchReports/FetchReport.scss | 6 +++ .../features/FetchReports/FetchReports.tsx | 12 ++--- .../GeneralHealthCard/GeneralHealthCard.scss | 18 ++++++++ .../GeneralHealthCard/GeneralHealthCard.tsx | 43 +++--------------- .../components/StatItem.scss | 12 +++++ .../GeneralHealthCard/components/StatItem.tsx | 27 ++++++++++++ .../DashboardHomePage/DashboardHomePage.tsx | 22 +++++----- .../app/features/PieCharts/PieCharts.scss | 8 ++++ .../app/features/PieCharts/PieCharts.tsx | 25 +++++------ .../app/features/SectionCard/SectionCard.scss | 20 +++++++++ .../app/features/SectionCard/SectionCard.tsx | 20 +++------ .../TransactionsOverView.scss | 28 ++++++++++++ .../components/TransactionsOverViewTable.scss | 17 +++++++ .../components}/TransactionsOverViewTable.tsx | 24 ++++------ .../TransactionsOverview.tsx | 44 ++++--------------- .../TransactionsWaitingApproval.scss | 6 +++ .../TransactionsWaitingApproval.tsx | 4 +- .../app/features/WhatsNew/WhatsNew.scss | 5 +++ payment-iq/app/features/WhatsNew/WhatsNew.tsx | 44 ++++++++++--------- .../sidebar/SidebarLink.interfaces.ts | 2 +- .../features/dashboard/sidebar/sideBar.scss | 38 ++++++++-------- 27 files changed, 318 insertions(+), 226 deletions(-) create mode 100644 payment-iq/app/features/AccountIQ/AccountIQ.scss create mode 100644 payment-iq/app/features/DateRangePicker/DateRangePicker.scss create mode 100644 payment-iq/app/features/Documentation/Documentation.scss create mode 100644 payment-iq/app/features/FetchReports/FetchReport.scss create mode 100644 payment-iq/app/features/GeneralHealthCard/GeneralHealthCard.scss create mode 100644 payment-iq/app/features/GeneralHealthCard/components/StatItem.scss create mode 100644 payment-iq/app/features/GeneralHealthCard/components/StatItem.tsx create mode 100644 payment-iq/app/features/PieCharts/PieCharts.scss create mode 100644 payment-iq/app/features/SectionCard/SectionCard.scss create mode 100644 payment-iq/app/features/TransactionsOverView/TransactionsOverView.scss create mode 100644 payment-iq/app/features/TransactionsOverView/components/TransactionsOverViewTable.scss rename payment-iq/app/features/{TransactionsOverview => TransactionsOverView/components}/TransactionsOverViewTable.tsx (72%) create mode 100644 payment-iq/app/features/TransactionsWaitingApproval/TransactionsWaitingApproval.scss create mode 100644 payment-iq/app/features/WhatsNew/WhatsNew.scss diff --git a/payment-iq/app/features/AccountIQ/AccountIQ.scss b/payment-iq/app/features/AccountIQ/AccountIQ.scss new file mode 100644 index 0000000..8033663 --- /dev/null +++ b/payment-iq/app/features/AccountIQ/AccountIQ.scss @@ -0,0 +1,7 @@ +.account-iq-wrapper { + .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..93fcff4 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..2b67dcc --- /dev/null +++ b/payment-iq/app/features/DateRangePicker/DateRangePicker.scss @@ -0,0 +1,12 @@ +.date-range-picker-wrapper { + .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..fda7ca1 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,11 @@ 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..e35f626 --- /dev/null +++ b/payment-iq/app/features/Documentation/Documentation.scss @@ -0,0 +1,5 @@ +.documentation-wrapper { + .icon { + height: auto; + } +} diff --git a/payment-iq/app/features/Documentation/Documentation.tsx b/payment-iq/app/features/Documentation/Documentation.tsx index 5932444..c8bc994 100644 --- a/payment-iq/app/features/Documentation/Documentation.tsx +++ b/payment-iq/app/features/Documentation/Documentation.tsx @@ -1,18 +1,22 @@ 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..90601ab --- /dev/null +++ b/payment-iq/app/features/FetchReports/FetchReport.scss @@ -0,0 +1,6 @@ +.fetch-report-paper { + 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..54cd7dc 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..742315e --- /dev/null +++ b/payment-iq/app/features/GeneralHealthCard/GeneralHealthCard.scss @@ -0,0 +1,18 @@ +.general-health-card-wrapper { + .header { + display: flex; + justify-content: space-between; + margin-bottom: 16px; + + .right-side { + display: flex; + align-items: center; + } + } + + .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..223183e 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..3282b07 --- /dev/null +++ b/payment-iq/app/features/GeneralHealthCard/components/StatItem.scss @@ -0,0 +1,12 @@ +.static-item-wrapper { + text-align: center; + padding-left: 16px; + padding-right: 16px; + + .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..6e176a1 --- /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..13ddf83 --- /dev/null +++ b/payment-iq/app/features/PieCharts/PieCharts.scss @@ -0,0 +1,8 @@ +.pie-charts-wrapper { + 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..93d57b6 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..d4743c4 --- /dev/null +++ b/payment-iq/app/features/SectionCard/SectionCard.scss @@ -0,0 +1,20 @@ +.section-card-paper { + padding: 16px; + margin: 16px; + display: flex; + flex-direction: column; + .header { + display: flex; + justify-content: space-between; + margin-bottom: 16px; + .title { + display: flex; + gap: 16px; + } + .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..c67040a 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..94c08e5 --- /dev/null +++ b/payment-iq/app/features/TransactionsOverView/TransactionsOverView.scss @@ -0,0 +1,28 @@ +.transaction-overview-paper { + padding: 23px; + margin: 16px; + display: flex; + flex-direction: column; + + .header { + display: flex; + justify-content: space-between; + align-items: center; + padding-left: 8px; + padding-right: 8px; + } + + .chart-table-wrapper { + 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..0cddcae --- /dev/null +++ b/payment-iq/app/features/TransactionsOverView/components/TransactionsOverViewTable.scss @@ -0,0 +1,17 @@ +.transactions-overview-table-wrapper { + .state-wrapper { + display: flex; + justify-content: flex-start; + align-items: center; + margin-left: auto; + margin-right: auto; + width: 73px; + + .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..c45bfc1 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,12 @@ const data1 = [ { state: "Other", count: 10, percentage: "5%", color: "gray" }, ]; -export const TransactionsOverviewTable = () => { +export const TransactionsOverViewTable = () => { return ( - + @@ -33,22 +38,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..a737657 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..6e68250 --- /dev/null +++ b/payment-iq/app/features/TransactionsWaitingApproval/TransactionsWaitingApproval.scss @@ -0,0 +1,6 @@ +.transactions-waiting-approval-paper { + 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..925e103 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", @@ -119,7 +120,8 @@ 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..6125718 --- /dev/null +++ b/payment-iq/app/features/WhatsNew/WhatsNew.scss @@ -0,0 +1,5 @@ +.whats-new-wrapper { + .icon { + height: auto; + } +} diff --git a/payment-iq/app/features/WhatsNew/WhatsNew.tsx b/payment-iq/app/features/WhatsNew/WhatsNew.tsx index 1f3aed3..d775d59 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/sidebar/SidebarLink.interfaces.ts b/payment-iq/app/features/dashboard/sidebar/SidebarLink.interfaces.ts index 498ff08..8de910e 100644 --- a/payment-iq/app/features/dashboard/sidebar/SidebarLink.interfaces.ts +++ b/payment-iq/app/features/dashboard/sidebar/SidebarLink.interfaces.ts @@ -4,4 +4,4 @@ export interface ISidebarLink { title: string; path: string; icon?: ElementType; -} \ No newline at end of file +} diff --git a/payment-iq/app/features/dashboard/sidebar/sideBar.scss b/payment-iq/app/features/dashboard/sidebar/sideBar.scss index 6f500ae..7fd02c4 100644 --- a/payment-iq/app/features/dashboard/sidebar/sideBar.scss +++ b/payment-iq/app/features/dashboard/sidebar/sideBar.scss @@ -1,27 +1,27 @@ .sidebar-container { - position: fixed; - top: 0; - left: 0; - width: 240px; - height: 100vh; - background-color: var(--background-primary); - color: white; - display: flex; - flex-direction: column; - padding: 16px; - z-index: 1100; - border-right: 1px solid #333; + position: fixed; + top: 0; + left: 0; + width: 240px; + height: 100vh; + background-color: var(--background-primary); + color: white; + display: flex; + flex-direction: column; + 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; + font-size: 20px; + font-weight: 600; + margin-bottom: 24px; + display: flex; + align-items: center; + color: white; } .sidebar-icon-spacing { - margin-left: 8px; + margin-left: 8px; }