fix(folder_menu): remove all @tabler/icons, replace by lucide, wrap i…

…cons in buttons for accessibility
usebruno · Jan 11, 2024 · 5a98432 · 5a98432
1 parent bfca5eb
commit 5a98432
Show file tree

Hide file tree

Showing 27 changed files with 269 additions and 453 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,12 +18,12 @@
     "@faker-js/faker": "^7.6.0",
     "@jest/globals": "^29.2.0",
     "@playwright/test": "^1.27.1",
+    "fs-extra": "^11.1.1",
     "husky": "^8.0.3",
     "jest": "^29.2.0",
     "pretty-quick": "^3.1.3",
     "randomstring": "^1.2.2",
-    "ts-jest": "^29.0.5",
-    "fs-extra": "^11.1.1"
+    "ts-jest": "^29.0.5"
   },
   "scripts": {
     "dev:web": "npm run dev --workspace=packages/bruno-app",

diff --git a/packages/bruno-app/package.json b/packages/bruno-app/package.json
@@ -16,7 +16,6 @@
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/react-fontawesome": "^0.1.16",
     "@reduxjs/toolkit": "^1.8.0",
-    "@tabler/icons": "^1.46.0",
     "@tippyjs/react": "^4.2.6",
     "@usebruno/graphql-docs": "0.1.0",
     "@usebruno/schema": "0.6.0",

diff --git a/packages/bruno-app/src/components/Cookies/index.js b/packages/bruno-app/src/components/Cookies/index.js
@@ -1,11 +1,11 @@
 import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import Modal from 'components/Modal';
-import { IconTrash } from '@tabler/icons';
 import { deleteCookiesForDomain } from 'providers/ReduxStore/slices/app';
 import toast from 'react-hot-toast';
 
 import StyledWrapper from './StyledWrapper';
+import { Trash2 } from 'lucide-react';
 
 const CollectionProperties = ({ onClose }) => {
   const dispatch = useDispatch();
@@ -38,8 +38,11 @@ const CollectionProperties = ({ onClose }) => {
                 <td className="py-2 px-2">{cookie.domain}</td>
                 <td className="py-2 px-2 break-all">{cookie.cookieString}</td>
                 <td className="text-center">
-                  <button tabIndex="-1" onClick={() => handleDeleteDomain(cookie.domain)}>
-                    <IconTrash strokeWidth={1.5} size={20} />
+                  <button
+                    className="p-1 rounded hover:bg-red-100 dark:hover:bg-red-400/10 hover:text-red-600"
+                    onClick={() => handleDeleteDomain(cookie.domain)}
+                  >
+                    <Trash2 size={16} />
                   </button>
                 </td>
               </tr>

diff --git a/packages/bruno-app/src/components/Dropdown/DropdownItem/dropdown_item.jsx b/packages/bruno-app/src/components/Dropdown/DropdownItem/dropdown_item.jsx
@@ -1,12 +1,22 @@
 import React from 'react';
+import classnames from 'classnames';
 
-export const DropdownItem = ({ children, className, onClick }) => {
+export const DropdownItem = ({ children, className, onClick, isTitle, active, warning }) => {
+  const baseClasses = 'flex items-center px-2 group leading-5';
+  const activeClasses = 'font-medium !text-green-600 dark:!text-green-500 bg-green-100 dark:bg-green-400/10 my-0.75';
+  const warningClasses = '!text-amber-500 bg-amber-400/10 my-0.75';
+  const conditionalClasses = isTitle
+    ? 'cursor-default bg-slate-700 rounded-none -mx-1 py-1 my-0.75'
+    : 'py-1.5 rounded hover:bg-slate-200 dark:hover:bg-slate-700 focus:outline-none focus:bg-zinc-200 dark:focus:bg-zinc-700';
   return (
     <button
-      className={`
-      flex items-center py-1.5 px-2 rounded group leading-5 hover:bg-slate-200 
-      dark:hover:bg-slate-700 focus:outline-none focus:bg-zinc-200 dark:focus:bg-zinc-700
-      ${className}`}
+      className={classnames(
+        baseClasses,
+        conditionalClasses,
+        { [activeClasses]: active },
+        { [warningClasses]: warning },
+        className
+      )}
       onClick={onClick}
     >
       {children}

diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js b/packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js
@@ -52,15 +52,15 @@ const EnvironmentSelector = ({ collection }) => {
                       onSelect(e);
                       dropdownTippyRef.current.hide();
                     }}
-                    className={activeEnvironmentUid === e.uid && '!text-green-500 bg-green-400/10'}
+                    active={activeEnvironmentUid === e.uid}
                   >
                     <Database size={16} />
                     <span className="ml-2">{e.name}</span>
                   </DropdownItem>
                 ))
               : null}
             <DropdownItem
-              className={!activeEnvironmentUid && '!text-amber-500 bg-amber-400/10'}
+              warning={!activeEnvironmentUid}
               onClick={() => {
                 dropdownTippyRef.current.hide();
                 onSelect(null);

diff --git a/...c/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/index.js b/...c/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/index.js
@@ -51,7 +51,6 @@ const EnvironmentDetails = ({ environment, collection }) => {
           </button>
         </div>
       </div>
-
       <div>
         <EnvironmentVariables key={environment.uid} environment={environment} collection={collection} />
       </div>

diff --git a/packages/bruno-app/src/components/Navbar/StyledWrapper.js b/packages/bruno-app/src/components/Navbar/StyledWrapper.js
diff --git a/packages/bruno-app/src/components/Navbar/index.js b/packages/bruno-app/src/components/Navbar/index.js
diff --git a/packages/bruno-app/src/components/Preferences/General/index.js b/packages/bruno-app/src/components/Preferences/General/index.js
@@ -8,7 +8,7 @@ import * as Yup from 'yup';
 import toast from 'react-hot-toast';
 import path from 'path';
 import slash from 'utils/common/slash';
-import { IconTrash } from '@tabler/icons';
+import { Trash2 } from 'lucide-react';
 
 const General = ({ close }) => {
   const preferences = useSelector((state) => state.app.preferences);
@@ -130,7 +130,7 @@ const General = ({ close }) => {
                 disabled={formik.values.customCaCertificate.enabled ? false : true}
                 onClick={deleteCaCertificate}
               >
-                <IconTrash strokeWidth={1.5} size={14} />
+                <Trash2 strokeWidth={1.5} size={16} />
               </button>
             </span>
           </div>

diff --git a/packages/bruno-app/src/components/RequestPane/Auth/AuthMode/index.js b/packages/bruno-app/src/components/RequestPane/Auth/AuthMode/index.js
@@ -1,11 +1,12 @@
 import React, { useRef, forwardRef } from 'react';
 import get from 'lodash/get';
-import { IconCaretDown } from '@tabler/icons';
 import Dropdown from 'components/Dropdown';
 import { useDispatch } from 'react-redux';
 import { updateRequestAuthMode } from 'providers/ReduxStore/slices/collections';
 import { humanizeRequestAuthMode } from 'utils/collections';
 import StyledWrapper from './StyledWrapper';
+import { ChevronDown } from 'lucide-react';
+import { DropdownItem } from 'components/Dropdown/DropdownItem/dropdown_item';
 
 const AuthMode = ({ item, collection }) => {
   const dispatch = useDispatch();
@@ -16,7 +17,7 @@ const AuthMode = ({ item, collection }) => {
   const Icon = forwardRef((props, ref) => {
     return (
       <div ref={ref} className="flex items-center justify-center auth-mode-label select-none">
-        {humanizeRequestAuthMode(authMode)} <IconCaretDown className="caret ml-1 mr-1" size={14} strokeWidth={2} />
+        {humanizeRequestAuthMode(authMode)} <ChevronDown className="caret ml-1 mr-1" size={14} strokeWidth={2} />
       </div>
     );
   });
@@ -35,50 +36,52 @@ const AuthMode = ({ item, collection }) => {
     <StyledWrapper>
       <div className="inline-flex items-center cursor-pointer auth-mode-selector">
         <Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement="bottom-end">
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              onModeChange('awsv4');
-            }}
-          >
-            AWS Sig v4
-          </div>
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              onModeChange('basic');
-            }}
-          >
-            Basic Auth
-          </div>
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              onModeChange('bearer');
-            }}
-          >
-            Bearer Token
-          </div>
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              onModeChange('digest');
-            }}
-          >
-            Digest Auth
-          </div>
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              onModeChange('none');
-            }}
-          >
-            No Auth
+          <div className="flex flex-col px-1">
+            <DropdownItem
+              active={authMode === 'awsv4'}
+              onClick={() => {
+                dropdownTippyRef.current.hide();
+                onModeChange('awsv4');
+              }}
+            >
+              AWS Sig v4
+            </DropdownItem>
+            <DropdownItem
+              active={authMode === 'basic'}
+              onClick={() => {
+                dropdownTippyRef.current.hide();
+                onModeChange('basic');
+              }}
+            >
+              Basic Auth
+            </DropdownItem>
+            <DropdownItem
+              active={authMode === 'bearer'}
+              onClick={() => {
+                dropdownTippyRef.current.hide();
+                onModeChange('bearer');
+              }}
+            >
+              Bearer Token
+            </DropdownItem>
+            <DropdownItem
+              active={authMode === 'digest'}
+              onClick={() => {
+                dropdownTippyRef.current.hide();
+                onModeChange('digest');
+              }}
+            >
+              Digest Auth
+            </DropdownItem>
+            <DropdownItem
+              warning={authMode === 'none'}
+              onClick={() => {
+                dropdownTippyRef.current.hide();
+                onModeChange('none');
+              }}
+            >
+              No Auth
+            </DropdownItem>
           </div>
         </Dropdown>
       </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -51,7 +51,6 @@ const EnvironmentDetails = ({ environment, collection }) => { @@
               </button>
             </div>
           </div>
           <div>
             <EnvironmentVariables key={environment.uid} environment={environment} collection={collection} />
           </div>
@@ Expand Down @@