From 5a9843208c32fa21f2b90b945fffe6bb99d174eb Mon Sep 17 00:00:00 2001 From: Baptiste POULAIN Date: Thu, 11 Jan 2024 19:20:20 +0100 Subject: [PATCH] fix(folder_menu): remove all @tabler/icons, replace by lucide, wrap icons in buttons for accessibility --- package-lock.json | 26 ---- package.json | 4 +- packages/bruno-app/package.json | 1 - .../bruno-app/src/components/Cookies/index.js | 9 +- .../Dropdown/DropdownItem/dropdown_item.jsx | 20 ++- .../Environments/EnvironmentSelector/index.js | 4 +- .../EnvironmentDetails/index.js | 1 - .../src/components/Navbar/StyledWrapper.js | 19 --- .../bruno-app/src/components/Navbar/index.js | 60 -------- .../components/Preferences/General/index.js | 4 +- .../RequestPane/Auth/AuthMode/index.js | 95 ++++++------ .../RequestPane/GraphQLSchemaActions/index.js | 59 ++++---- .../QueryUrl/HttpMethodSelector/index.js | 4 +- .../RequestBody/RequestBodyMode/index.js | 139 +++++++++--------- .../RequestPane/Vars/VarsTable/index.js | 10 +- .../QueryResult/QueryResultFilter/index.js | 10 +- .../ResponsePane/ResponseClear/index.js | 6 +- .../src/components/RunnerResults/index.jsx | 44 +++--- .../GenerateCodeItem/CodeView/index.js | 6 +- .../SelectCollection/StyledWrapper.js | 18 --- .../Collections/SelectCollection/index.js | 29 ---- .../components/Sidebar/Collections/index.js | 29 ++-- .../components/Sidebar/GoldenEdition/index.js | 46 +----- .../src/components/Sidebar/TitleBar/index.js | 9 +- .../bruno-app/src/components/Sidebar/index.js | 50 +++---- .../bruno-app/src/components/Welcome/index.js | 16 +- .../App/ConfirmAppClose/SaveRequestsModal.js | 4 +- 27 files changed, 269 insertions(+), 453 deletions(-) delete mode 100644 packages/bruno-app/src/components/Navbar/StyledWrapper.js delete mode 100644 packages/bruno-app/src/components/Navbar/index.js delete mode 100644 packages/bruno-app/src/components/Sidebar/Collections/SelectCollection/StyledWrapper.js delete mode 100644 packages/bruno-app/src/components/Sidebar/Collections/SelectCollection/index.js diff --git a/package-lock.json b/package-lock.json index 0be080dc47..d34083b4c2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5139,26 +5139,6 @@ "node": ">=6" } }, - "node_modules/@tabler/icons": { - "version": "1.119.0", - "license": "MIT", - "funding": { - "type": "github", - "url": "https://github.com/sponsors/codecalm" - }, - "peerDependencies": { - "react": "^16.x || 17.x || 18.x", - "react-dom": "^16.x || 17.x || 18.x" - }, - "peerDependenciesMeta": { - "react": { - "optional": true - }, - "react-dom": { - "optional": true - } - } - }, "node_modules/@tippyjs/react": { "version": "4.2.6", "license": "MIT", @@ -17903,7 +17883,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", @@ -22508,10 +22487,6 @@ "defer-to-connect": "^1.0.1" } }, - "@tabler/icons": { - "version": "1.119.0", - "requires": {} - }, "@tippyjs/react": { "version": "4.2.6", "requires": { @@ -22759,7 +22734,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/package.json b/package.json index 7ba991b56b..a2b75311c8 100644 --- 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 index 17681bc8c4..6ccd297303 100644 --- 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 index f7420bed87..915113a6ba 100644 --- 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 }) => { {cookie.domain} {cookie.cookieString} - diff --git a/packages/bruno-app/src/components/Dropdown/DropdownItem/dropdown_item.jsx b/packages/bruno-app/src/components/Dropdown/DropdownItem/dropdown_item.jsx index 311806e438..ca23b3dad4 100644 --- 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 ( -
diff --git a/packages/bruno-app/src/components/Navbar/StyledWrapper.js b/packages/bruno-app/src/components/Navbar/StyledWrapper.js deleted file mode 100644 index 8336ce6726..0000000000 --- a/packages/bruno-app/src/components/Navbar/StyledWrapper.js +++ /dev/null @@ -1,19 +0,0 @@ -import styled from 'styled-components'; - -const StyledWrapper = styled.div` - .collection-dropdown { - color: rgb(110 110 110); - - &:hover { - color: inherit; - } - - .tippy-box { - top: -0.5rem; - position: relative; - user-select: none; - } - } -`; - -export default StyledWrapper; diff --git a/packages/bruno-app/src/components/Navbar/index.js b/packages/bruno-app/src/components/Navbar/index.js deleted file mode 100644 index 7f723b5ce8..0000000000 --- a/packages/bruno-app/src/components/Navbar/index.js +++ /dev/null @@ -1,60 +0,0 @@ -import React, { useState, forwardRef, useRef } from 'react'; -import Dropdown from '../Dropdown'; -import { faCaretDown } from '@fortawesome/free-solid-svg-icons'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { IconBox, IconSearch, IconDots } from '@tabler/icons'; -import StyledWrapper from './StyledWrapper'; - -const Navbar = () => { - const [modalOpen, setModalOpen] = useState(false); - - const menuDropdownTippyRef = useRef(); - const onMenuDropdownCreate = (ref) => (menuDropdownTippyRef.current = ref); - const MenuIcon = forwardRef((props, ref) => { - return ( -
- -
- ); - }); - - return ( - -
- Collections - {/* */} -
-
- } placement="bottom-start"> -
{ - menuDropdownTippyRef.current.hide(); - setModalOpen(true); - }} - > - Create Collection -
-
{ - menuDropdownTippyRef.current.hide(); - }} - > - Import Collection -
-
{ - menuDropdownTippyRef.current.hide(); - }} - > - Settings -
- -
- - ); -}; - -export default Navbar; diff --git a/packages/bruno-app/src/components/Preferences/General/index.js b/packages/bruno-app/src/components/Preferences/General/index.js index bfdbbb3b4b..c9bb6db47e 100644 --- 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} > - + diff --git a/packages/bruno-app/src/components/RequestPane/Auth/AuthMode/index.js b/packages/bruno-app/src/components/RequestPane/Auth/AuthMode/index.js index 8eb4fee90f..9f75028ead 100644 --- 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 (
- {humanizeRequestAuthMode(authMode)} + {humanizeRequestAuthMode(authMode)}
); }); @@ -35,50 +36,52 @@ const AuthMode = ({ item, collection }) => {
} placement="bottom-end"> -
{ - dropdownTippyRef.current.hide(); - onModeChange('awsv4'); - }} - > - AWS Sig v4 -
-
{ - dropdownTippyRef.current.hide(); - onModeChange('basic'); - }} - > - Basic Auth -
-
{ - dropdownTippyRef.current.hide(); - onModeChange('bearer'); - }} - > - Bearer Token -
-
{ - dropdownTippyRef.current.hide(); - onModeChange('digest'); - }} - > - Digest Auth -
-
{ - dropdownTippyRef.current.hide(); - onModeChange('none'); - }} - > - No Auth +
+ { + dropdownTippyRef.current.hide(); + onModeChange('awsv4'); + }} + > + AWS Sig v4 + + { + dropdownTippyRef.current.hide(); + onModeChange('basic'); + }} + > + Basic Auth + + { + dropdownTippyRef.current.hide(); + onModeChange('bearer'); + }} + > + Bearer Token + + { + dropdownTippyRef.current.hide(); + onModeChange('digest'); + }} + > + Digest Auth + + { + dropdownTippyRef.current.hide(); + onModeChange('none'); + }} + > + No Auth +
diff --git a/packages/bruno-app/src/components/RequestPane/GraphQLSchemaActions/index.js b/packages/bruno-app/src/components/RequestPane/GraphQLSchemaActions/index.js index 01ce6f3202..036cdc280c 100644 --- a/packages/bruno-app/src/components/RequestPane/GraphQLSchemaActions/index.js +++ b/packages/bruno-app/src/components/RequestPane/GraphQLSchemaActions/index.js @@ -1,9 +1,10 @@ import React, { useEffect, useRef, forwardRef } from 'react'; import useGraphqlSchema from './useGraphqlSchema'; -import { IconBook, IconDownload, IconLoader2, IconRefresh } from '@tabler/icons'; import get from 'lodash/get'; import { findEnvironmentInCollection } from 'utils/collections'; import Dropdown from '../../Dropdown'; +import { BookOpen, Download, Loader2, RefreshCw } from 'lucide-react'; +import { DropdownItem } from 'components/Dropdown/DropdownItem/dropdown_item'; const GraphQLSchemaActions = ({ item, collection, onSchemaLoad, toggleDocs }) => { const url = item.draft ? get(item, 'draft.request.url') : get(item, 'request.url'); @@ -28,39 +29,45 @@ const GraphQLSchemaActions = ({ item, collection, onSchemaLoad, toggleDocs }) => const MenuIcon = forwardRef((props, ref) => { return ( -
- {isSchemaLoading && } - {!isSchemaLoading && schema && } - {!isSchemaLoading && !schema && } +
+ ); }); return (
-
- +
+ } placement="bottom-start"> -
{ - schemaDropdownTippyRef.current.hide(); - loadSchema('introspection'); - }} - > - {schema && schemaSource === 'introspection' ? 'Refresh from Introspection' : 'Load from Introspection'} -
-
{ - schemaDropdownTippyRef.current.hide(); - loadSchema('file'); - }} - > - Load from File +
+ { + schemaDropdownTippyRef.current.hide(); + loadSchema('introspection'); + }} + > + {schema && schemaSource === 'introspection' ? 'Refresh from Introspection' : 'Load from Introspection'} + + { + schemaDropdownTippyRef.current.hide(); + loadSchema('file'); + }} + > + Load from File +
diff --git a/packages/bruno-app/src/components/RequestPane/QueryUrl/HttpMethodSelector/index.js b/packages/bruno-app/src/components/RequestPane/QueryUrl/HttpMethodSelector/index.js index e52facbfcf..02e72bbdb1 100644 --- a/packages/bruno-app/src/components/RequestPane/QueryUrl/HttpMethodSelector/index.js +++ b/packages/bruno-app/src/components/RequestPane/QueryUrl/HttpMethodSelector/index.js @@ -30,9 +30,7 @@ const HttpMethodSelector = ({ method, onMethodSelect }) => { dropdownTippyRef.current.hide(); handleMethodSelect(verb); }} - className={ - method === verb && 'font-medium !text-green-600 dark:!text-green-500 bg-green-100 dark:bg-green-400/10' - } + active={method === verb} > {verb} diff --git a/packages/bruno-app/src/components/RequestPane/RequestBody/RequestBodyMode/index.js b/packages/bruno-app/src/components/RequestPane/RequestBody/RequestBodyMode/index.js index ef000431fe..a0b05dd51b 100644 --- a/packages/bruno-app/src/components/RequestPane/RequestBody/RequestBodyMode/index.js +++ b/packages/bruno-app/src/components/RequestPane/RequestBody/RequestBodyMode/index.js @@ -1,6 +1,5 @@ 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 { updateRequestBodyMode } from 'providers/ReduxStore/slices/collections'; @@ -8,6 +7,8 @@ import { humanizeRequestBodyMode } from 'utils/collections'; import StyledWrapper from './StyledWrapper'; import { updateRequestBody } from 'providers/ReduxStore/slices/collections/index'; import { toastError } from 'utils/common/error'; +import { ChevronDown } from 'lucide-react'; +import { DropdownItem } from 'components/Dropdown/DropdownItem/dropdown_item'; const RequestBodyMode = ({ item, collection }) => { const dispatch = useDispatch(); @@ -15,11 +16,10 @@ const RequestBodyMode = ({ item, collection }) => { const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref); const body = item.draft ? get(item, 'draft.request.body') : get(item, 'request.body'); const bodyMode = body?.mode; - const Icon = forwardRef((props, ref) => { return (
- {humanizeRequestBodyMode(bodyMode)} + {humanizeRequestBodyMode(bodyMode)}
); }); @@ -51,76 +51,77 @@ const RequestBodyMode = ({ item, collection }) => { } } }; - return (
} placement="bottom-end"> -
Form
-
{ - dropdownTippyRef.current.hide(); - onModeChange('multipartForm'); - }} - > - Multipart Form -
-
{ - dropdownTippyRef.current.hide(); - onModeChange('formUrlEncoded'); - }} - > - Form URL Encoded -
-
Raw
-
{ - dropdownTippyRef.current.hide(); - onModeChange('json'); - }} - > - JSON -
-
{ - dropdownTippyRef.current.hide(); - onModeChange('xml'); - }} - > - XML -
-
{ - dropdownTippyRef.current.hide(); - onModeChange('text'); - }} - > - TEXT -
-
{ - dropdownTippyRef.current.hide(); - onModeChange('sparql'); - }} - > - SPARQL -
-
Other
-
{ - dropdownTippyRef.current.hide(); - onModeChange('none'); - }} - > - No Body +
+ Form + { + dropdownTippyRef.current.hide(); + onModeChange('multipartForm'); + }} + > + Multipart Form + + { + dropdownTippyRef.current.hide(); + onModeChange('formUrlEncoded'); + }} + > + Form URL Encoded + + Raw + { + dropdownTippyRef.current.hide(); + onModeChange('json'); + }} + > + JSON + + { + dropdownTippyRef.current.hide(); + onModeChange('xml'); + }} + > + XML + + { + dropdownTippyRef.current.hide(); + onModeChange('text'); + }} + > + TEXT + + { + dropdownTippyRef.current.hide(); + onModeChange('sparql'); + }} + > + SPARQL + + Other + { + dropdownTippyRef.current.hide(); + onModeChange('none'); + }} + > + No Body +
diff --git a/packages/bruno-app/src/components/RequestPane/Vars/VarsTable/index.js b/packages/bruno-app/src/components/RequestPane/Vars/VarsTable/index.js index 01cf0f340c..cf00d9c4d8 100644 --- a/packages/bruno-app/src/components/RequestPane/Vars/VarsTable/index.js +++ b/packages/bruno-app/src/components/RequestPane/Vars/VarsTable/index.js @@ -1,6 +1,5 @@ import React from 'react'; import cloneDeep from 'lodash/cloneDeep'; -import { IconTrash } from '@tabler/icons'; import { useDispatch } from 'react-redux'; import { useTheme } from 'providers/Theme'; import { addVar, updateVar, deleteVar } from 'providers/ReduxStore/slices/collections'; @@ -10,6 +9,7 @@ import Tooltip from 'components/Tooltip'; import StyledWrapper from './StyledWrapper'; import toast from 'react-hot-toast'; import { variableNameRegex } from 'utils/common/regex'; +import { Trash2 } from 'lucide-react'; const VarsTable = ({ item, collection, vars, varType }) => { const dispatch = useDispatch(); @@ -139,12 +139,14 @@ const VarsTable = ({ item, collection, vars, varType }) => { handleVarChange(e, _var, 'enabled')} /> -
diff --git a/packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultFilter/index.js b/packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultFilter/index.js index 250610865a..f8f94d7662 100644 --- a/packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultFilter/index.js +++ b/packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultFilter/index.js @@ -1,17 +1,15 @@ -import { IconFilter } from '@tabler/icons'; import React, { useMemo } from 'react'; import { Tooltip as ReactTooltip } from 'react-tooltip'; +import { Filter } from 'lucide-react'; const QueryResultFilter = ({ onChange, mode }) => { const tooltipText = useMemo(() => { if (mode.includes('json')) { return 'Filter with JSONPath'; } - if (mode.includes('xml')) { return 'Filter with XPath'; } - return null; }, [mode]); @@ -19,12 +17,10 @@ const QueryResultFilter = ({ onChange, mode }) => {
- +
- {tooltipText && } - { autoCorrect="off" autoCapitalize="off" spellCheck="false" - className="block w-full pl-10 py-1 sm:text-sm" + className="block w-full pl-10 py-1 sm:text-sm !rounded" onChange={onChange} />
diff --git a/packages/bruno-app/src/components/ResponsePane/ResponseClear/index.js b/packages/bruno-app/src/components/ResponsePane/ResponseClear/index.js index 747543347f..8ef0b76ee1 100644 --- a/packages/bruno-app/src/components/ResponsePane/ResponseClear/index.js +++ b/packages/bruno-app/src/components/ResponsePane/ResponseClear/index.js @@ -1,8 +1,8 @@ import React from 'react'; -import { IconEraser } from '@tabler/icons'; import { useDispatch } from 'react-redux'; import StyledWrapper from './StyledWrapper'; import { responseCleared } from 'providers/ReduxStore/slices/collections/index'; +import { Eraser } from 'lucide-react'; const ResponseClear = ({ collection, item }) => { const dispatch = useDispatch(); @@ -18,8 +18,8 @@ const ResponseClear = ({ collection, item }) => { return ( - ); diff --git a/packages/bruno-app/src/components/RunnerResults/index.jsx b/packages/bruno-app/src/components/RunnerResults/index.jsx index 496710ea28..81268f5938 100644 --- a/packages/bruno-app/src/components/RunnerResults/index.jsx +++ b/packages/bruno-app/src/components/RunnerResults/index.jsx @@ -5,10 +5,11 @@ import { get, cloneDeep } from 'lodash'; import { runCollectionFolder } from 'providers/ReduxStore/slices/collections/actions'; import { resetCollectionRunner } from 'providers/ReduxStore/slices/collections'; import { findItemInCollection, getTotalRequestCountInCollection } from 'utils/collections'; -import { IconRefresh, IconCircleCheck, IconCircleX, IconCheck, IconX, IconRun } from '@tabler/icons'; import slash from 'utils/common/slash'; import ResponsePane from './ResponsePane'; import StyledWrapper from './StyledWrapper'; +import { Check, CheckCircle2, RefreshCw, X, XCircle } from 'lucide-react'; +import { Runner } from 'components/Icons/Runner'; const getRelativePath = (fullPath, pathname) => { // convert to unix style path @@ -94,7 +95,7 @@ export default function RunnerResults({ collection }) {
Runner - +
@@ -116,7 +117,7 @@ export default function RunnerResults({ collection }) {
Runner - +
@@ -130,40 +131,43 @@ export default function RunnerResults({ collection }) {
{item.status !== 'error' && item.testStatus === 'pass' ? ( - + ) : ( - + )} {item.relativePath} {item.status !== 'error' && item.status !== 'completed' ? ( - + ) : ( - setSelectedItem(item)}> + )}
- {item.status == 'error' ?
{item.error}
: null} - + {item.status == 'error' && item.error ? ( +
{item.error}
+ ) : null}
    {item.testResults ? item.testResults.map((result) => (
  • {result.status === 'pass' ? ( - + {result.description} ) : ( <> - + {result.description} {result.error} @@ -176,13 +180,13 @@ export default function RunnerResults({ collection }) {
  • {result.status === 'pass' ? ( - + {result.lhsExpr}: {result.rhsExpr} ) : ( <> - + {result.lhsExpr}: {result.rhsExpr} {result.error} @@ -210,23 +214,23 @@ export default function RunnerResults({ collection }) {
) : null}
-
- {selectedItem ? ( +
+ {selectedItem && (
{selectedItem.relativePath} {selectedItem.testStatus === 'pass' ? ( - + ) : ( - + )}
{/*
{selectedItem.relativePath}
*/}
- ) : null} + )}
diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/CodeView/index.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/CodeView/index.js index d76aadc395..c94011c40d 100644 --- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/CodeView/index.js +++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/CodeView/index.js @@ -7,8 +7,8 @@ import { buildHarRequest } from 'utils/codegenerator/har'; import { useSelector } from 'react-redux'; import { CopyToClipboard } from 'react-copy-to-clipboard'; import toast from 'react-hot-toast'; -import { IconCopy } from '@tabler/icons'; import { findCollectionByItemUid } from '../../../../../../../utils/collections/index'; +import { Copy } from 'lucide-react'; const CodeView = ({ language, item }) => { const { storedTheme } = useTheme(); @@ -35,11 +35,11 @@ const CodeView = ({ language, item }) => { <> toast.success('Copied to clipboard!')} > - + props.theme.plainGrid.hoverBg}; - } - } -`; - -export default StyledWrapper; diff --git a/packages/bruno-app/src/components/Sidebar/Collections/SelectCollection/index.js b/packages/bruno-app/src/components/Sidebar/Collections/SelectCollection/index.js deleted file mode 100644 index 525109b370..0000000000 --- a/packages/bruno-app/src/components/Sidebar/Collections/SelectCollection/index.js +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react'; -import Modal from 'components/Modal/index'; -import { IconFiles } from '@tabler/icons'; -import { useSelector } from 'react-redux'; -import StyledWrapper from './StyledWrapper'; - -const SelectCollection = ({ onClose, onSelect, title }) => { - const { collections } = useSelector((state) => state.collections); - - return ( - - -
    - {collections && collections.length ? ( - collections.map((c) => ( -
    onSelect(c.uid)}> - {c.name} -
    - )) - ) : ( -
    No collections found
    - )} -
- - - ); -}; - -export default SelectCollection; diff --git a/packages/bruno-app/src/components/Sidebar/Collections/index.js b/packages/bruno-app/src/components/Sidebar/Collections/index.js index e5a657ef95..86722e230d 100644 --- a/packages/bruno-app/src/components/Sidebar/Collections/index.js +++ b/packages/bruno-app/src/components/Sidebar/Collections/index.js @@ -1,13 +1,5 @@ import React, { useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; -import { - IconSearch, - IconFolders, - IconArrowsSort, - IconSortAscendingLetters, - IconSortDescendingLetters, - IconX -} from '@tabler/icons'; import Collection from '../Collections/Collection'; import CreateCollection from '../CreateCollection'; import StyledWrapper from './StyledWrapper'; @@ -15,6 +7,7 @@ import CreateOrOpenCollection from './CreateOrOpenCollection'; import { DndProvider } from 'react-dnd'; import { HTML5Backend } from 'react-dnd-html5-backend'; import { sortCollections } from 'providers/ReduxStore/slices/collections/actions'; +import { ArrowDownAz, ArrowDownZa, ArrowUpDown, Layers, Search, X } from 'lucide-react'; // todo: move this to a separate folder // the coding convention is to keep all the components in a folder named after the component @@ -40,20 +33,20 @@ const CollectionsBadge = () => { return (
-
+
- + Collections
{collections.length >= 1 && ( - )} @@ -84,8 +77,8 @@ const Collections = () => {
- - + +
{ autoCorrect="off" autoCapitalize="off" spellCheck="false" - className="block w-full pl-7 py-1 sm:text-sm" + className="block w-full pl-7 py-1 sm:text-sm !rounded" placeholder="search" value={searchText} onChange={(e) => setSearchText(e.target.value.toLowerCase())} @@ -109,7 +102,7 @@ const Collections = () => { setSearchText(''); }} > - +
)} diff --git a/packages/bruno-app/src/components/Sidebar/GoldenEdition/index.js b/packages/bruno-app/src/components/Sidebar/GoldenEdition/index.js index 5886f2a007..a07bc85b1c 100644 --- a/packages/bruno-app/src/components/Sidebar/GoldenEdition/index.js +++ b/packages/bruno-app/src/components/Sidebar/GoldenEdition/index.js @@ -2,10 +2,10 @@ import React, { useState, useEffect } from 'react'; import Modal from 'components/Modal/index'; import { PostHog } from 'posthog-node'; import { uuid } from 'utils/common'; -import { IconHeart, IconUser, IconUsers } from '@tabler/icons'; import platformLib from 'platform'; import StyledWrapper from './StyledWrapper'; import { useTheme } from 'providers/Theme/index'; +import { Check, Heart, User, Users } from 'lucide-react'; let posthogClient = null; const posthogApiKey = 'phc_7gtqSrrdZRohiozPMLIacjzgHbUlhalW1Bu16uYijMR'; @@ -28,36 +28,6 @@ const getAnonymousTrackingId = () => { return id; }; -const HeartIcon = () => { - return ( - - - - ); -}; - -const CheckIcon = () => { - return ( - - - - ); -}; - const GoldenEdition = ({ onClose }) => { const { storedTheme } = useTheme(); @@ -123,7 +93,7 @@ const GoldenEdition = ({ onClose }) => { target="_blank" className="flex text-white bg-yellow-600 hover:bg-yellow-700 font-medium rounded-lg text-sm px-4 py-2 text-center cursor-pointer" > - {' '} + {pricingOption === 'individuals' ? 'Buy' : 'Subscribe'}
@@ -149,29 +119,29 @@ const GoldenEdition = ({ onClose }) => { >
handlePricingOptionChange('individuals')} > - Individuals + Individuals
handlePricingOptionChange('organizations')} > - Organizations + Organizations
  • - + Support Bruno's Development
    • {goldenEditon.map((item, index) => (
  • - + {item}
    • ))} diff --git a/packages/bruno-app/src/components/Sidebar/TitleBar/index.js b/packages/bruno-app/src/components/Sidebar/TitleBar/index.js index 2d9e8da3c4..29bcc037e9 100644 --- a/packages/bruno-app/src/components/Sidebar/TitleBar/index.js +++ b/packages/bruno-app/src/components/Sidebar/TitleBar/index.js @@ -5,14 +5,13 @@ import CreateCollection from '../CreateCollection'; import ImportCollection from 'components/Sidebar/ImportCollection'; import ImportCollectionLocation from 'components/Sidebar/ImportCollectionLocation'; -import { IconDots } from '@tabler/icons'; import { useState, forwardRef, useRef } from 'react'; import { useDispatch } from 'react-redux'; import { showHomePage } from 'providers/ReduxStore/slices/app'; import { openCollection, importCollection } from 'providers/ReduxStore/slices/collections/actions'; import StyledWrapper from './StyledWrapper'; import { DropdownItem } from 'components/Dropdown/DropdownItem/dropdown_item'; -import { BadgePlus, Bolt, FolderSymlink, Import } from 'lucide-react'; +import { BadgePlus, Bolt, FolderSymlink, Import, MoreHorizontal } from 'lucide-react'; const TitleBar = () => { const [importedCollection, setImportedCollection] = useState(null); @@ -39,9 +38,9 @@ const TitleBar = () => { const onMenuDropdownCreate = (ref) => (menuDropdownTippyRef.current = ref); const MenuIcon = forwardRef((props, ref) => { return ( -
    - -
    + ); }); diff --git a/packages/bruno-app/src/components/Sidebar/index.js b/packages/bruno-app/src/components/Sidebar/index.js index 58bcb82572..bbc988828a 100644 --- a/packages/bruno-app/src/components/Sidebar/index.js +++ b/packages/bruno-app/src/components/Sidebar/index.js @@ -1,16 +1,15 @@ import TitleBar from './TitleBar'; import Collections from './Collections'; import StyledWrapper from './StyledWrapper'; -import GitHubButton from 'react-github-btn'; import Preferences from 'components/Preferences'; import Cookies from 'components/Cookies'; import GoldenEdition from './GoldenEdition'; import { useState, useEffect } from 'react'; import { useSelector, useDispatch } from 'react-redux'; -import { IconSettings, IconCookie, IconHeart } from '@tabler/icons'; import { updateLeftSidebarWidth, updateIsDragging, showPreferences } from 'providers/ReduxStore/slices/app'; import { useTheme } from 'providers/Theme'; +import { Settings, Cookie, Heart } from 'lucide-react'; const MIN_LEFT_SIDEBAR_WIDTH = 221; const MAX_LEFT_SIDEBAR_WIDTH = 600; @@ -23,8 +22,6 @@ const Sidebar = () => { const [asideWidth, setAsideWidth] = useState(leftSidebarWidth); const [cookiesOpen, setCookiesOpen] = useState(false); - const { storedTheme } = useTheme(); - const dispatch = useDispatch(); const [dragging, setDragging] = useState(false); @@ -85,46 +82,33 @@ const Sidebar = () => {
    {preferencesOpen && dispatch(showPreferences(false))} />} {cookiesOpen && setCookiesOpen(false)} />} -
    - -
    +
    - dispatch(showPreferences(true))} - /> - + + + +
    -
    - {/* This will get moved to home page */} - {/* - Star - */} + +
    -
    v1.6.1
    +
    v1.6.1
    diff --git a/packages/bruno-app/src/components/Welcome/index.js b/packages/bruno-app/src/components/Welcome/index.js index adfce3dd88..e5c793005a 100644 --- a/packages/bruno-app/src/components/Welcome/index.js +++ b/packages/bruno-app/src/components/Welcome/index.js @@ -2,13 +2,13 @@ import { useState } from 'react'; import toast from 'react-hot-toast'; import { useDispatch } from 'react-redux'; import { openCollection, importCollection } from 'providers/ReduxStore/slices/collections/actions'; -import { IconBrandGithub, IconPlus, IconDownload, IconFolders, IconSpeakerphone, IconBook } from '@tabler/icons'; import Bruno from 'components/Bruno'; import CreateCollection from 'components/Sidebar/CreateCollection'; import ImportCollection from 'components/Sidebar/ImportCollection'; import ImportCollectionLocation from 'components/Sidebar/ImportCollectionLocation'; import StyledWrapper from './StyledWrapper'; +import { BookOpen, Folders, Github, Import, Megaphone, Plus } from 'lucide-react'; const Welcome = () => { const dispatch = useDispatch(); @@ -59,17 +59,17 @@ const Welcome = () => {
    Collections
    setCreateCollectionModalOpen(true)}> - + Create Collection
    - + Open Collection
    setImportCollectionModalOpen(true)}> - + Import Collection @@ -80,19 +80,19 @@ const Welcome = () => {
    diff --git a/packages/bruno-app/src/providers/App/ConfirmAppClose/SaveRequestsModal.js b/packages/bruno-app/src/providers/App/ConfirmAppClose/SaveRequestsModal.js index cb04256bdc..31c2033a5f 100644 --- a/packages/bruno-app/src/providers/App/ConfirmAppClose/SaveRequestsModal.js +++ b/packages/bruno-app/src/providers/App/ConfirmAppClose/SaveRequestsModal.js @@ -8,8 +8,8 @@ import { findCollectionByUid, flattenItems, isItemARequest } from 'utils/collect import { pluralizeWord } from 'utils/common'; import { completeQuitFlow } from 'providers/ReduxStore/slices/app'; import { saveMultipleRequests } from 'providers/ReduxStore/slices/collections/actions'; -import { IconAlertTriangle } from '@tabler/icons'; import Modal from 'components/Modal'; +import { AlertTriangle } from 'lucide-react'; const SaveRequestsModal = ({ onClose }) => { const MAX_UNSAVED_REQUESTS_TO_SHOW = 5; @@ -67,7 +67,7 @@ const SaveRequestsModal = ({ onClose }) => { hideFooter={true} >
    - +

    Hold on..