WIP icons

Author: salimkanoun

src/admin/labels/LabelTable.tsx

@@ -1,11 +1,10 @@
 import React, { useMemo } from "react";
-import { RiAdminFill as AdminIcon } from "react-icons/ri";
 import ToggleChevron from "../../ui/menu/ToogleChevron";
 import { Table, Button, Label, Popover } from "../../ui";
 import { Colors } from "../../utils/enums";
 import { Label as LabelType } from "../../utils/types";
 import LabelsRoles from "./LabelsRoles";
-import { Trash } from "../../icons";
+import { Admin, Trash } from "../../icons";
 
 interface LabelsTableProps {
   data: LabelType[];
@@ -37,7 +36,7 @@ const LabelsTable: React.FC<LabelsTableProps> = ({
               placement="bottom"
             >
               <Button color={Colors.secondary} className="flex items-center gap-1.5">
-                <AdminIcon size="1.3rem" />
+                <Admin size="1.3rem" />
                 <ToggleChevron isOpen={false} />
               </Button>
             </Popover>

src/content/ContentRoot.tsx

@@ -26,9 +26,7 @@ import {
 } from "../utils/actionsUtils";
 import { Colors } from "../utils";
 import AnonIcon from "../assets/Anon.svg?react";
-import { FaFileExport as ExportIcon } from "react-icons/fa";
-import { MdNewLabel as LabelIcon } from "react-icons/md"; 
-import { Trash } from "../icons";
+import { Export, Label as LabelIcon, Trash } from "../icons";
 
 const ContentRoot: React.FC = () => {
     const { confirm } = useConfirm();
@@ -171,7 +169,7 @@ const ContentRoot: React.FC = () => {
                         className="flex items-center text-sm transition-transform duration-200 hover:scale-105"
                         onClick={handleSendExportList}
                     >
-                        <ExportIcon className="text-xl" />
+                        <Export className="text-xl" />
                         <span className="ml-2">Send to Export</span>
                     </Button>
 

src/content/studies/StudyActions.tsx

@@ -1,11 +1,10 @@
 // StudyActions.tsx
 import React from 'react';
-import { GiBrain as BrainIcon } from 'react-icons/gi'
 import { StudyMainDicomTags } from "../../utils/types";
 import DropdownButton from '../../ui/menu/DropDownButton';
 import OhifViewerLink from '../OhifViewerLink';
 import StoneViewerLink from '../StoneViewerLink';
-import { Download, Edit, Eye, Trash } from '../../icons';
+import { Brain, Download, Edit, Eye, Trash } from '../../icons';
 
 type StudyActionsProps = {
     study: StudyMainDicomTags & { id: string };
@@ -34,7 +33,7 @@ const StudyActions: React.FC<StudyActionsProps> = ({ study, onActionClick }) =>
         },
         {
             label: 'AI',
-            icon: <BrainIcon />,
+            icon: <Brain />,
             color: 'green',
             action: () => onActionClick('ai', study.id)
         },

src/icons/Add.tsx

@@ -0,0 +1,10 @@
+
+import { FaPlus } from 'react-icons/fa';
+
+const Add = (props) => {
+    return (
+        <FaPlus {...props} />
+    )
+}
+
+export default Add

src/icons/Admin.tsx

@@ -0,0 +1,9 @@
+import { RiAdminFill } from "react-icons/ri";
+
+const Admin = (props) => {
+    return (
+        <RiAdminFill {...props} />
+    )
+}
+
+export default Admin

src/icons/Brain.tsx

@@ -0,0 +1,10 @@
+
+import { GiBrain } from 'react-icons/gi'
+
+const Brain = (props) => {
+    return (
+        <GiBrain {...props} />
+    )
+}
+
+export default Brain

src/icons/Cloud.tsx

@@ -0,0 +1,9 @@
+import { BsFillCloudArrowUpFill } from 'react-icons/bs';
+
+const Cloud = (props) => {
+    return (
+        <BsFillCloudArrowUpFill {...props} />
+    )
+}
+
+export default Cloud

src/icons/Empty.tsx

@@ -1,5 +1,6 @@
 import { MdCleaningServices } from "react-icons/md"; 
-import { GiAvoidance } from "react-icons/gi";const Empty = (props) => {
+
+const Empty = (props) => {
     return (
         <MdCleaningServices  {...props} />
     )

src/icons/Export.tsx

@@ -0,0 +1,10 @@
+
+import { FaFileExport } from "react-icons/fa";
+
+const Export = (props) => {
+    return (
+        <FaFileExport  {...props} />
+    )
+}
+
+export default Export

src/icons/Maximize.tsx

@@ -0,0 +1,9 @@
+import { FaWindowMaximize } from "react-icons/fa";
+
+const Maximize = (props) => {
+    return (
+        <FaWindowMaximize {...props} />
+    )
+}
+
+export default Maximize

src/icons/Minimize.tsx

@@ -0,0 +1,9 @@
+import { FaWindowMinimize } from "react-icons/fa";
+
+const Maximize = (props) => {
+    return (
+        <FaWindowMinimize {...props} />
+    )
+}
+
+export default Maximize

src/icons/Search.tsx

@@ -0,0 +1,10 @@
+
+import { FaSearch } from "react-icons/fa";
+
+const Search = (props) => {
+    return (
+        <FaSearch {...props} />
+    )
+}
+
+export default Search

src/icons/SortAz.tsx

@@ -0,0 +1,9 @@
+import { FcAlphabeticalSortingAz } from 'react-icons/fc';
+
+const SortAz = (props) => {
+    return (
+        <FcAlphabeticalSortingAz {...props} />
+    )
+}
+
+export default SortAz

src/icons/SortZa.tsx

@@ -0,0 +1,9 @@
+import { FcAlphabeticalSortingZa } from 'react-icons/fc';
+
+const SortZa = (props) => {
+    return (
+        <FcAlphabeticalSortingZa {...props} />
+    )
+}
+
+export default SortZa

src/icons/index.ts

@@ -1,42 +1,64 @@
+import Add from './Add'
+import Admin from './Admin'
+import Brain from './Brain'
 import Cancel from './Cancel'
 import Check from './Check'
 import Close from './Close'
+import Cloud from './Cloud'
 import Download from './Download'
 import Edit from './Edit'
+import Empty from './Empty'
+import Export from './Export'
 import Eye from './Eye'
 import EyeSlash from './EyeSlash'
 import Gear from './Gear'
 import Info from './Info'
 import Label from './Label'
+import Maximize from './Maximize'
+import Minimize from './Minimize'
 import More from './More'
 import Pause from './Pause'
 import Play from './Play'
 import Question from './Question'
 import Restart from './Restart'
 import Resume from './Resume'
+import Search from './Search'
 import Send from './Send'
+import SortAz from './SortAz'
+import SortZa from './SortZa'
 import SubmitUser from './SubmitUser'
 import Trash from './Trash'
 import Wifi from './Wifi'
 
 export {
+    Add,
+    Admin,
+    Brain,
     Cancel,
     Check,
     Close,
+    Cloud,
     Download,
     Edit,
+    Empty,
+    Export,
     Eye,
     EyeSlash,
     Gear,
     Info,
     Label,
+    Maximize,
+    Minimize,
     More,
     Pause,
     Play,
     Question,
     Restart,
     Resume,
+    Search,
     Send,
+    SortAz,
+    SortZa,
     SubmitUser,
     Trash,
     Wifi

src/import/create/CreateDrop.tsx

@@ -1,8 +1,7 @@
 import React, { useCallback } from "react";
-import { BsFillCloudArrowUpFill as CloudIcon } from 'react-icons/bs';
 import { useDropzone } from "react-dropzone";
 import { useCustomToast } from "../../utils";
-import { Check } from "../../icons";
+import { Check, Cloud } from "../../icons";
 
 interface CreateDropProps {
     files: File[],
@@ -48,7 +47,7 @@ const CreateDrop: React.FC<CreateDropProps> = ({ files, onDrop }) => {
                     size={40}
                     className="text-success" />
             ) : (
-                <CloudIcon
+                <Cloud
                     size={40}
                     className={`text-primary`} />
             )}

src/import/create/CreateForm.tsx

@@ -1,8 +1,8 @@
 import { useState, ChangeEvent, FormEvent } from 'react';
 import { useCustomToast } from '../../utils';
 import { FormCard, Input, Label, Button } from '../../ui';
-import { FaPlus as AddIcon } from 'react-icons/fa';
 import { Colors } from "../../utils/enums";
+import { Add } from '../../icons';
 
 interface TagFormProps {
   title: string;
@@ -59,7 +59,7 @@ const CreateForm = ({ title, className, onAddTag }: TagFormProps) => {
             onClick={handleAddTag}
             className="flex items-center h-10 px-4 space-x-2"
           >
-            <AddIcon />
+            <Add />
             Add Tag
           </Button>
         </div>

src/import/import/ImportDrop.tsx

@@ -1,14 +1,13 @@
 import React, { useState, useMemo } from 'react';
 import { useDropzone } from 'react-dropzone';
-import { BsFillCloudArrowUpFill as CloudIcon} from 'react-icons/bs';
 
 import { ProgressBar } from '../../ui';
 
 import { sendDicom } from '../../services/instances';
 import Model from '../../model/Model';
 import { useCustomMutation } from '../../utils';
 import { OrthancImportDicom } from '../../utils/types';
-import { Check } from '../../icons';
+import { Check, Cloud } from '../../icons';
 
 
 type ImportDropProps = {
@@ -85,7 +84,7 @@ const ImportDrop: React.FC<ImportDropProps> = ({ model, onError, onFilesUploaded
                         size={40}
                         className="text-success" />
                 ) : (
-                    <CloudIcon
+                    <Cloud
                         size={40} 
                         className={`${isUploading ? 'text-gray-400 animate-spin' : 'text-primary'}`} />
                 )}

src/index.css

@@ -2,8 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-
-
 @layer utilities {
     .custom-scrollbar {
       scrollbar-width: thin;

src/query/RetrieveButton.tsx

@@ -1,8 +1,8 @@
-import { BiDownload } from 'react-icons/bi';
 import { Colors, useCustomMutation } from '../utils';
 import { MouseEvent, useState } from 'react';
 import ProgressJobs from './ProgressJobs';
 import { makeRetrieve } from '../services';
+import { Download } from '../icons';
 
 
 /**
@@ -41,7 +41,7 @@ const RetrieveButton = ({ answerId, answerNumber }: RetrieveButtonProps) => {
       {jobId ?
         <ProgressJobs jobId={jobId} />
         :
-        <BiDownload
+        <Download
           color={Colors.warning}
           onClick={handleClick}
           size="2.5em"

src/query/SearchForm.tsx

@@ -1,9 +1,9 @@
 import React, { useState, ChangeEvent, FormEvent } from "react";
 import moment from "moment";
-import { FaSearch } from "react-icons/fa";
 import { Option, QueryPayload, useCustomToast } from "../utils";
 import { FormButton, Input, Label, SelectInput } from "../ui";
 import SelectModalities from "./SelectModalities";
+import { Search } from "../icons";
 
 type SearchFormProps = {
   aets?: Option[];
@@ -241,7 +241,7 @@ const SearchForm: React.FC<SearchFormProps> = ({
       )}
       <div className="flex justify-center col-span-2 lg:w-1/2 lg:mx-auto lg:gap-11">
         <div className={`${withAets && aets.length > 0 ? "w-1/2 mt-5" : "w-full"} flex justify-center items-center`}>
-          <FormButton text={"Query"} icon={<FaSearch size="1.3rem" />} />
+          <FormButton text={"Query"} icon={<Search size="1.3rem" />} />
         </div>
       </div>
     </form>

src/root/SideBar.tsx

@@ -7,14 +7,14 @@ import { MdOutlineImageSearch as OrthancContentIcon, MdOutlineRestorePage as Ret
 import { IoMdHelpCircleOutline as HelpIcon } from "react-icons/io";
 import { SlDirections } from "react-icons/sl";
 import { TbZoomQuestion as QueryIcon } from "react-icons/tb";
-import { RiUserSettingsLine as AdministratorIcon } from "react-icons/ri";
 
 import { useNavigate, useLocation } from "react-router-dom";
 import MenuItem from "../ui/menu/MenuItem";
 import MenuItemsCollapse from "../ui/menu/MenuItemsCollapse";
 
 import LogoSideBar from "../assets/logoGaeloFlow-white3.svg?react";
 import { Item } from "../ui/menu/Items";
+import { Admin } from "../icons";
 type SideBarProps = {
   onLogout: () => void;
   openItem: string | null;
@@ -82,7 +82,7 @@ const SideBar = ({ onLogout, openItem, setOpenItem }: SideBarProps) => {
         </div>
         <div className="flex h-69% flex-col gap-3 overflow-y-auto custom-scrollbar">
           <MenuItemsCollapse
-            icon={<AdministratorIcon className="w-6 h-6" />}
+            icon={<Admin className="w-6 h-6" />}
             title="Administration"
             elements={adminItems}
             isOpen={openItem === "Administration"}