Merge pull request #2243 from bluewave-labs/ks-027-Sep-29-figma-icons-2047

MuhammadKhalilzadeh · web-flow · commit 5d31e552dad9 · 2025-09-29T19:58:14.000+03:30
Ks 027 sep 29 figma icons 2047
diff --git a/Clients/src/presentation/assets/icons/contentCopy.svg b/Clients/src/presentation/assets/icons/contentCopy.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.5 3H14.6C16.8402 3 17.9603 3 18.816 3.43597C19.5686 3.81947 20.1805 4.43139 20.564 5.18404C21 6.03969 21 7.15979 21 9.4V16.5M6.2 21H14.3C15.4201 21 15.9802 21 16.408 20.782C16.7843 20.5903 17.0903 20.2843 17.282 19.908C17.5 19.4802 17.5 18.9201 17.5 17.8V9.7C17.5 8.57989 17.5 8.01984 17.282 7.59202C17.0903 7.21569 16.7843 6.90973 16.408 6.71799C15.9802 6.5 15.4201 6.5 14.3 6.5H6.2C5.0799 6.5 4.51984 6.5 4.09202 6.71799C3.71569 6.90973 3.40973 7.21569 3.21799 7.59202C3 8.01984 3 8.57989 3 9.7V17.8C3 18.9201 3 19.4802 3.21799 19.908C3.40973 20.2843 3.71569 20.5903 4.09202 20.782C4.51984 21 5.0799 21 6.2 21Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/Clients/src/presentation/assets/icons/group.svg b/Clients/src/presentation/assets/icons/group.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M22 21V19C22 17.1362 20.7252 15.5701 19 15.126M15.5 3.29076C16.9659 3.88415 18 5.32131 18 7C18 8.67869 16.9659 10.1159 15.5 10.7092M17 21C17 19.1362 17 18.2044 16.6955 17.4693C16.2895 16.4892 15.5108 15.7105 14.5307 15.3045C13.7956 15 12.8638 15 11 15H8C6.13623 15 5.20435 15 4.46927 15.3045C3.48915 15.7105 2.71046 16.4892 2.30448 17.4693C2 18.2044 2 19.1362 2 21M13.5 7C13.5 9.20914 11.7091 11 9.5 11C7.29086 11 5.5 9.20914 5.5 7C5.5 4.79086 7.29086 3 9.5 3C11.7091 3 13.5 4.79086 13.5 7Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/Clients/src/presentation/assets/icons/questionMark.svg b/Clients/src/presentation/assets/icons/questionMark.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M10 8.50224C10.1762 8.00136 10.524 7.579 10.9817 7.30998C11.4395 7.04095 11.9777 6.9426 12.501 7.03237C13.0243 7.12213 13.499 7.39421 13.8409 7.80041C14.1829 8.20661 14.37 8.72072 14.3692 9.25168C14.3692 10.7506 12.1209 11.5 12.1209 11.5M12.1499 14.5H12.1599M9.9 19.2L11.36 21.1467C11.5771 21.4362 11.6857 21.5809 11.8188 21.6327C11.9353 21.678 12.0647 21.678 12.1812 21.6327C12.3143 21.5809 12.4229 21.4362 12.64 21.1467L14.1 19.2C14.3931 18.8091 14.5397 18.6137 14.7185 18.4645C14.9569 18.2656 15.2383 18.1248 15.5405 18.0535C15.7671 18 16.0114 18 16.5 18C17.8978 18 18.5967 18 19.1481 17.7716C19.8831 17.4672 20.4672 16.8831 20.7716 16.1481C21 15.5967 21 14.8978 21 13.5V7.8C21 6.11984 21 5.27976 20.673 4.63803C20.3854 4.07354 19.9265 3.6146 19.362 3.32698C18.7202 3 17.8802 3 16.2 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V13.5C3 14.8978 3 15.5967 3.22836 16.1481C3.53284 16.8831 4.11687 17.4672 4.85195 17.7716C5.40326 18 6.10218 18 7.5 18C7.98858 18 8.23287 18 8.45951 18.0535C8.76169 18.1248 9.04312 18.2656 9.2815 18.4645C9.46028 18.6137 9.60685 18.8091 9.9 19.2Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/Clients/src/presentation/assets/icons/refresh.svg b/Clients/src/presentation/assets/icons/refresh.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M20.453 12.893C20.1752 15.5029 18.6964 17.9487 16.2494 19.3614C12.1839 21.7086 6.98539 20.3157 4.63818 16.2502L4.38818 15.8172M3.54613 11.107C3.82393 8.49711 5.30272 6.05138 7.74971 4.63862C11.8152 2.29141 17.0137 3.68434 19.3609 7.74983L19.6109 8.18285M3.49316 18.0661L4.22521 15.334L6.95727 16.0661M17.0424 7.93401L19.7744 8.66606L20.5065 5.93401" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/Clients/src/presentation/assets/icons/tableRows.svg b/Clients/src/presentation/assets/icons/tableRows.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M21 10H3M21 18H3M21 6H3M21 14H3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/Clients/src/presentation/assets/icons/viewModule.svg b/Clients/src/presentation/assets/icons/viewModule.svg
@@ -0,0 +1,13 @@
+<svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill="currentColor"
+>
+    <rect x="3" y="3" width="8" height="8" rx="1" />
+    <rect x="13" y="3" width="8" height="8" rx="1" />
+    <rect x="3" y="13" width="8" height="8" rx="1" />
+    <rect x="13" y="13" width="8" height="8" rx="1" />
+</svg>
+
diff --git a/Clients/src/presentation/components/Alert/AlertBody.tsx b/Clients/src/presentation/components/Alert/AlertBody.tsx
@@ -1,7 +1,7 @@
 // AlertBody.tsx
 import React, { useState } from "react";
 import { Box, IconButton, Typography } from "@mui/material";
-import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+import {ReactComponent as ContentCopyIcon} from "../../assets/icons/contentCopy.svg";
 
 interface AlertBodyProps {
   body: string;
@@ -61,7 +61,7 @@ const AlertBody: React.FC<AlertBodyProps> = ({ body, textColor }) => {
                   </Typography>
                 ) : (
                   <ContentCopyIcon
-                    sx={{ fontSize: "13px", color: textColor }}
+                     style={{ width: "13px", height:"13px" , color: textColor }}
                   />
                 )}
               </Box>
diff --git a/Clients/src/presentation/components/Helpers/Guider/index.tsx b/Clients/src/presentation/components/Helpers/Guider/index.tsx
@@ -1,5 +1,5 @@
 import { Link, Stack, Tooltip, Typography } from "@mui/material";
-import QuestionMarkIcon from "@mui/icons-material/QuestionMark";
+import {ReactComponent as QuestionMarkIcon} from "../../../assets/icons/questionMark.svg";
 import { GuiderStyler } from "./style";
 
 const Guider = ({
diff --git a/Clients/src/presentation/components/RiskVisualization/RiskCategories.tsx b/Clients/src/presentation/components/RiskVisualization/RiskCategories.tsx
@@ -9,10 +9,8 @@ import {
   Button,
   Collapse,
 } from "@mui/material";
-import {
-  ExpandMore as ExpandMoreIcon,
-  ExpandLess as ExpandLessIcon,
-} from "@mui/icons-material";
+import { ReactComponent as ExpandLessIcon } from "../../assets/icons/expand-up.svg";
+import { ReactComponent as ExpandMoreIcon } from "../../assets/icons/expand-down.svg";
 import { ProjectRisk } from "../../../domain/types/ProjectRisk";
 import { getAllUsers } from "../../../application/repository/user.repository";
 
@@ -248,7 +246,7 @@ const RiskCategories: React.FC<RiskCategoriesProps> = ({
                       </Typography>
                     </Box>
                     
-                    {isExpanded ? <ExpandLessIcon sx={{ color: '#6B7280' }} /> : <ExpandMoreIcon sx={{ color: '#6B7280' }} />}
+                    {isExpanded ? <ExpandLessIcon style={{ color: '#6B7280' }} /> : <ExpandMoreIcon style={{ color: '#6B7280' }} />}
                   </Box>
 
                   <Stack direction="row" spacing={1} flexWrap="wrap" useFlexGap>
diff --git a/Clients/src/presentation/components/RiskVisualization/RiskFilters.tsx b/Clients/src/presentation/components/RiskVisualization/RiskFilters.tsx
@@ -9,12 +9,10 @@ import {
   Collapse,
   IconButton,
 } from "@mui/material";
-import {
-  FilterList as FilterIcon,
-  Clear as ClearIcon,
-  ExpandMore as ExpandMoreIcon,
-  ExpandLess as ExpandLessIcon,
-} from "@mui/icons-material";
+import { ReactComponent as FilterIcon } from "../../assets/icons/filter.svg";
+import { ReactComponent as ClearIcon } from "../../assets/icons/clear.svg";
+import { ReactComponent as ExpandMoreIcon } from "../../assets/icons/expand-down.svg";
+import { ReactComponent as ExpandLessIcon } from "../../assets/icons/expand-up.svg";
 import { ProjectRisk } from "../../../domain/types/ProjectRisk";
 import Select from "../Inputs/Select";
 import { getAllUsers } from "../../../application/repository/user.repository";
@@ -307,7 +305,7 @@ const RiskFilters: React.FC<RiskFiltersProps> = ({
         onClick={() => handleExpandedChange(!expanded)}
       >
         <Stack direction="row" alignItems="center" spacing={1}>
-          <FilterIcon sx={{ color: "#13715B", fontSize: 20 }} />
+          <FilterIcon style={{ color: "#13715B", height: "20px", width:"20px" }} />
           <Typography variant="subtitle2" sx={{ fontWeight: 600, color: "#1A1919" }}>
             Filters
           </Typography>
diff --git a/Clients/src/presentation/components/ViewToggle/index.tsx b/Clients/src/presentation/components/ViewToggle/index.tsx
@@ -1,8 +1,8 @@
 import React from "react";
 import { ToggleButton, ToggleButtonGroup, useTheme } from "@mui/material";
 import { SxProps, Theme } from "@mui/material/styles";
-import ViewModuleIcon from "@mui/icons-material/ViewModule";
-import TableRowsIcon from "@mui/icons-material/TableRows";
+import {ReactComponent as ViewModuleIcon} from "../../assets/icons/viewModule.svg";
+import {ReactComponent as TableRowsIcon} from "../../assets/icons/tableRows.svg";
 
 export type ViewMode = "card" | "table";
 
@@ -92,10 +92,10 @@ const ViewToggle: React.FC<ViewToggleProps> = ({
       ]}
     >
       <ToggleButton value="card" aria-label="card view" disableRipple>
-        <ViewModuleIcon sx={{ fontSize: "16px" }} />
+        <ViewModuleIcon/>
       </ToggleButton>
       <ToggleButton value="table" aria-label="table view" disableRipple>
-        <TableRowsIcon sx={{ fontSize: "16px" }} />
+        <TableRowsIcon />
       </ToggleButton>
     </ToggleButtonGroup>
   );
diff --git a/Clients/src/presentation/pages/AITrustCentrePublic/Overview/index.tsx b/Clients/src/presentation/pages/AITrustCentrePublic/Overview/index.tsx
@@ -1,6 +1,6 @@
 import { Box, Paper, Typography, Stack, Button } from "@mui/material";
 import CustomTextField from "../Components/CustomTextField/CustomTextField";
-import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
+import {ReactComponent as CheckCircleOutlineIcon} from '../../../assets/icons/check-circle-green.svg';
 import { downloadResource } from "../../../../application/tools/downloadResource";
 
 const Overview = ({
@@ -154,7 +154,7 @@ const Overview = ({
                 >
                   <Box display="flex" alignItems="center" gap={1}>
                     <CheckCircleOutlineIcon
-                      sx={{ color: "#28A745", fontSize: 28 }}
+                      style={{ height: "24px", width: "24px" }}
                     />
                     <Typography variant="body2">{resource.name}</Typography>
                   </Box>
diff --git a/Clients/src/presentation/pages/AITrustCentrePublic/Resources/index.tsx b/Clients/src/presentation/pages/AITrustCentrePublic/Resources/index.tsx
@@ -10,7 +10,7 @@ import {
   Typography,
   Box
 } from '@mui/material';
-import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
+import {ReactComponent as CheckCircleOutlineIcon} from '../../../assets/icons/check-circle-green.svg';
 import { downloadResource } from '../../../../application/tools/downloadResource';
 import { aiTrustCenterTableCell } from '../style';
 
@@ -44,7 +44,7 @@ const Resources = ({ data, loading, error, hash }: { data: any; loading: boolean
               <TableRow key={idx}>
                 <TableCell sx={aiTrustCenterTableCell}>
                   <Box display="flex" alignItems="center" gap={1}>
-                    <CheckCircleOutlineIcon sx={{ color: '#28A745', fontSize: 24 }} />
+                    <CheckCircleOutlineIcon style={{ width: "24px", height:"24px" }} />
                     <Typography  color="#344054" sx={{ fontSize: 13 }}>{resource.name}</Typography>
                   </Box>
                 </TableCell>
diff --git a/Clients/src/presentation/pages/FairnessDashboard/FairnessResultsPage.tsx b/Clients/src/presentation/pages/FairnessDashboard/FairnessResultsPage.tsx
@@ -8,7 +8,7 @@ import {
   CircularProgress,
   Tooltip,
 } from "@mui/material";
-import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import {ReactComponent as ArrowBackIcon} from "../../assets/icons/left-arrow-long.svg";
 import { ReactComponent as GreyCircleInfoIcon } from "../../assets/icons/info-circle-grey.svg";
 import { BarChart } from "@mui/x-charts";
 import { fairnessService } from "../../../infrastructure/api/fairnessService";
diff --git a/Clients/src/presentation/pages/SettingsPage/Team/index.tsx b/Clients/src/presentation/pages/SettingsPage/Team/index.tsx
@@ -24,7 +24,7 @@ import {
   TablePagination,
   TableFooter,
 } from "@mui/material";
-import GroupsIcon from "@mui/icons-material/Groups";
+import {ReactComponent as GroupsIcon} from "../../../assets/icons/group.svg";
 import { ReactComponent as SelectorVertical } from "../../../assets/icons/selector-vertical.svg";
 import TablePaginationActions from "../../../components/TablePagination";
 import InviteUserModal from "../../../components/Modals/InviteUser";
diff --git a/Clients/src/presentation/pages/WatchTower/Loggings/index.tsx b/Clients/src/presentation/pages/WatchTower/Loggings/index.tsx
@@ -11,7 +11,7 @@ import { useState, useEffect } from "react";
 import { getAllLogs } from "../../../../application/repository/logs.repository";
 import LogLine from "../../../components/LogLine";
 import Placeholder from "../../../assets/imgs/empty-state.svg";
-import RefreshIcon from "@mui/icons-material/Refresh";
+import {ReactComponent as RefreshIcon} from "../../../assets/icons/refresh.svg";
 
 const WatchTowerLogs = () => {
   const theme = useTheme();
