Merge branch 'develop' of https://github.com/bluewave-labs/verifywise into rb-sept-15-slack-integration

Author: rachanabasnet

Clients/src/presentation/assets/icons/search.svg

@@ -1,7 +1,7 @@
 // New component file: ProjectList.tsx
 import { useState, useMemo } from "react";
 import { Box, Typography, InputBase, IconButton } from "@mui/material";
-import SearchIcon from "@mui/icons-material/Search";
+import { ReactComponent as SearchIcon } from "../../assets/icons/search.svg";
 import ProjectCard from "../Cards/ProjectCard";
 import ProjectTableView from "./ProjectTableView";
 import NoProject from "../NoProject/NoProject";

Clients/src/presentation/assets/icons/setting-small.svg

@@ -0,0 +1,64 @@
+import React from "react";
+import { Box, InputBase, SxProps, Theme } from "@mui/material";
+import { ReactComponent as SearchIcon } from "../../../assets/icons/search.svg";
+
+export interface SearchBoxProps {
+  placeholder?: string;
+  value: string;
+  onChange: (value: string) => void;
+  sx?: SxProps<Theme>;
+  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+  disabled?: boolean;
+  fullWidth?: boolean;
+}
+
+const SearchBox: React.FC<SearchBoxProps> = ({
+  placeholder = "Search...",
+  value,
+  onChange,
+  sx = {},
+  inputProps = {},
+  disabled = false,
+  fullWidth = true,
+}) => {
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    onChange(event.target.value);
+  };
+
+  const searchBoxStyle: SxProps<Theme> = {
+    display: "flex",
+    alignItems: "center",
+    border: "1px solid #eaecf0",
+    borderRadius: 1,
+    p: "4px 6px",
+    bgcolor: "#fff",
+    height: "34px",
+    ...(fullWidth && { flex: 1 }),
+    ...sx,
+  };
+
+  const searchInputStyle: SxProps<Theme> = {
+    flex: 1,
+    fontSize: "13px",
+    fontFamily: "inherit",
+  };
+
+  return (
+    <Box sx={searchBoxStyle}>
+      <SearchIcon style={{ color: "#6b7280", marginRight: "8px" }} />
+      <InputBase
+        placeholder={placeholder}
+        value={value}
+        onChange={handleChange}
+        sx={searchInputStyle}
+        inputProps={{
+          "aria-label": "Search",
+          ...inputProps,
+        }}
+        disabled={disabled}
+      />
+    </Box>
+  );
+};
+
+export default SearchBox;

Clients/src/presentation/components/ProjectsList/ProjectsList.tsx

@@ -0,0 +1,2 @@
+export { default as SearchBox } from "./SearchBox";
+export type { SearchBoxProps } from "./SearchBox";

Clients/src/presentation/components/Search/SearchBox/index.tsx

@@ -269,7 +269,7 @@ const Sidebar = () => {
       component="aside"
       className={`sidebar-menu ${collapsed ? "collapsed" : "expanded"}`}
       py={theme.spacing(6)}
-      gap={theme.spacing(6)}
+      gap={theme.spacing(2)}
       sx={{
         height: "100vh",
         border: 1,
@@ -946,7 +946,7 @@ const Sidebar = () => {
           <MenuItem
             onClick={() => {
               window.open(
-                "https://github.com/bluewave-labs/verifywise/discussions",
+                "https://verifywise.ai/contact",
                 "_blank",
                 "noreferrer"
               );

Clients/src/presentation/components/Search/index.tsx

@@ -1,6 +1,6 @@
 import { Box, Chip, Stack, Tooltip, Typography, Dialog, useTheme } from "@mui/material";
 import { Question } from "../../../domain/types/Question";
-import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
+import { ReactComponent as GreyCircleInfoIcon } from "../../assets/icons/info-circle-grey.svg";
 import {
   priorities,
   PriorityLevel,
@@ -262,7 +262,7 @@ const QuestionFrame = ({
                   },
                 }}
               >
-                <InfoOutlinedIcon fontSize="inherit" />
+                <GreyCircleInfoIcon fontSize="inherit" />
               </Tooltip>
             </Box>
           )}

Clients/src/presentation/components/Sidebar/index.tsx

@@ -13,8 +13,7 @@ import {
 import Alert from "../../../components/Alert";
 import VisibilityIcon from "@mui/icons-material/Visibility";
 import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
-import AddIcon from "@mui/icons-material/Add";
-
+import { ReactComponent as AddCircleOutlineIcon } from "../../../assets/icons/plus-circle-white.svg";
 import { ReactComponent as CloseGreyIcon } from "../../../assets/icons/close-grey.svg";
 import Toggle from "../../../components/Inputs/Toggle";
 import { useStyles } from "./styles";
@@ -503,7 +502,7 @@ const TrustCenterResources: React.FC = () => {
             onClick={handleOpenAddModal}
             isDisabled={!formData?.info?.resources_visible}
             text="Add new resource"
-            icon={<AddIcon />}
+            icon={<AddCircleOutlineIcon />}
           />
           <Box sx={styles.toggleRow}>
             <Typography sx={styles.toggleLabel}>Enabled and visible</Typography>

Clients/src/presentation/components/VWQuestion/index.tsx

@@ -15,7 +15,7 @@ import Field from "../../../components/Inputs/Field";
 import CustomizableButton from "../../../components/Button/CustomizableButton";
 import { Modal, IconButton } from "@mui/material";
 import { ReactComponent as CloseGreyIcon } from "../../../assets/icons/close-grey.svg";
-import AddIcon from "@mui/icons-material/Add";
+import { ReactComponent as AddCircleOutlineIcon } from "../../../assets/icons/plus-circle-white.svg";
 import { useTheme } from "@mui/material/styles";
 import AITrustCenterTable from "../../../components/Table/AITrustCenterTable";
 import Alert from "../../../components/Alert";
@@ -428,7 +428,7 @@ const AITrustCenterSubprocessors: React.FC = () => {
               onClick={handleOpenAddModal}
               isDisabled={!formData?.info?.subprocessor_visible}
               text="Add new subprocessor"
-              icon={<AddIcon />}
+              icon={<AddCircleOutlineIcon />}
             />
             <Box sx={styles.toggleRow}>
               <Typography sx={styles.toggleLabel}>

Clients/src/presentation/pages/AITrustCenter/Resources/index.tsx

@@ -11,7 +11,7 @@ import {
   Typography,
   useTheme,
 } from "@mui/material";
-import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
+import { ReactComponent as GreyCircleInfoIcon } from "../../assets/icons/info-circle-grey.svg";
 import RichTextEditor from "../../../../components/RichTextEditor";
 import { priorities, PriorityLevel } from "../priorities";
 import { Topic } from "../../../../../application/hooks/useAssessmentAnswers";
@@ -104,7 +104,7 @@ const AssessmentQuestions = ({
                           },
                         }}
                       >
-                        <InfoOutlinedIcon fontSize="inherit" />
+                        <GreyCircleInfoIcon fontSize="inherit" />
                       </Tooltip>
                     </Box>
                   )}