From 56fbd2784fe0a21ab3b74b55ecf8985d9dce117c Mon Sep 17 00:00:00 2001 From: Civolilah Date: Sun, 26 Jan 2025 19:49:48 +0100 Subject: [PATCH 01/11] Adjusting company switcher with new design --- src/common/colors.ts | 4 ++ src/components/CompanySwitcher.tsx | 40 ++++++++++++------ src/components/icons/CloseNavbarArrow.tsx | 32 +++++++++++++++ .../icons/ExpandCollapseChevron.tsx | 41 +++++++++++++++++++ src/components/layouts/Default.tsx | 11 +++-- .../layouts/components/DesktopSidebar.tsx | 15 ++++--- 6 files changed, 118 insertions(+), 25 deletions(-) create mode 100644 src/components/icons/CloseNavbarArrow.tsx create mode 100644 src/components/icons/ExpandCollapseChevron.tsx diff --git a/src/common/colors.ts b/src/common/colors.ts index 0d023e717d..fb8a677231 100644 --- a/src/common/colors.ts +++ b/src/common/colors.ts @@ -43,6 +43,8 @@ export const $1 = { $11: 0.6, // Medium emphasis text $12: 0.38, // Disabled text $13: '#E5E7EB', // Navbar right icon hover + $14: 'rgba(255, 255, 255, 0.1)', // Navbar logo border color + $15: '#FAFAFA', // Navbar company name title color }; export const $2 = { @@ -61,6 +63,8 @@ export const $2 = { $11: 0.8, // Secondary text opacity $12: 0.5, // Disabled text opacity $13: '#E5E7EB', // Navbar right icon hover + $14: 'rgba(255, 255, 255, 0.1)', // Navbar logo border color + $15: '#FAFAFA', // Navbar company name title color }; export const colorSchemeAtom = atomWithStorage('colorScheme', $2); diff --git a/src/components/CompanySwitcher.tsx b/src/components/CompanySwitcher.tsx index 4451d0b0fe..f3af53445e 100644 --- a/src/components/CompanySwitcher.tsx +++ b/src/components/CompanySwitcher.tsx @@ -14,7 +14,7 @@ import { useCurrentUser } from '$app/common/hooks/useCurrentUser'; import { authenticate } from '$app/common/stores/slices/user'; import { RootState } from '$app/common/stores/store'; import { Fragment, useEffect, useState } from 'react'; -import { Check, ChevronDown } from 'react-feather'; +import { Check } from 'react-feather'; import { useTranslation } from 'react-i18next'; import { useQueryClient } from 'react-query'; import { useDispatch, useSelector } from 'react-redux'; @@ -31,6 +31,8 @@ import { BiPlusCircle } from 'react-icons/bi'; import { useColorScheme } from '$app/common/colors'; import { useAdmin } from '$app/common/hooks/permissions/useHasPermission'; import { useLocation, useNavigate, useParams } from 'react-router-dom'; +import { ExpandCollapseChevron } from './icons/ExpandCollapseChevron'; +import { CloseNavbarArrow } from './icons/CloseNavbarArrow'; export function CompanySwitcher() { const [t] = useTranslation(); @@ -109,22 +111,34 @@ export function CompanySwitcher() { className="relative inline-block text-left w-full" data-cy="companyDropdown" > - -
- Company logo -
- +
+ +
+ Company logo + + {companyName} - {(user?.first_name || user?.last_name) && ( - - {user.first_name} {user.last_name} - - )} + +
+ + +
+
- - +
+ + + ); +} diff --git a/src/components/icons/ExpandCollapseChevron.tsx b/src/components/icons/ExpandCollapseChevron.tsx new file mode 100644 index 0000000000..f623a03927 --- /dev/null +++ b/src/components/icons/ExpandCollapseChevron.tsx @@ -0,0 +1,41 @@ +/** + * Invoice Ninja (https://invoiceninja.com). + * + * @link https://github.com/invoiceninja/invoiceninja source repository + * + * @copyright Copyright (c) 2022. Invoice Ninja LLC (https://invoiceninja.com) + * + * @license https://www.elastic.co/licensing/elastic-license + */ + +export function ExpandCollapseChevron() { + return ( + + + + + ); +} diff --git a/src/components/layouts/Default.tsx b/src/components/layouts/Default.tsx index 1bd4d9a567..5c2dd46b6c 100644 --- a/src/components/layouts/Default.tsx +++ b/src/components/layouts/Default.tsx @@ -62,6 +62,7 @@ import { useSocketEvent } from '$app/common/queries/sockets'; import { Invoice } from '$app/common/interfaces/invoice'; import toast from 'react-hot-toast'; import { EInvoiceCredits } from '../banners/EInvoiceCredits'; +import classNames from 'classnames'; export interface SaveOption { label: string; @@ -422,12 +423,13 @@ export function Default(props: Props) {
+
{isMiniSidebar ? ( Company logo @@ -82,7 +81,7 @@ export function DesktopSidebar(props: Props) { )}
-
+
); diff --git a/src/components/icons/CloseNavbarArrow.tsx b/src/components/icons/CloseNavbarArrow.tsx index 4604af36e7..5742c1ef40 100644 --- a/src/components/icons/CloseNavbarArrow.tsx +++ b/src/components/icons/CloseNavbarArrow.tsx @@ -8,15 +8,19 @@ * @license https://www.elastic.co/licensing/elastic-license */ -export function CloseNavbarArrow() { +interface Props { + color?: string; +} + +export function CloseNavbarArrow({ color = '#A1A1AA' }: Props) { return ( + + + + + ); +} diff --git a/src/components/layouts/Default.tsx b/src/components/layouts/Default.tsx index 5c2dd46b6c..72bc753d4b 100644 --- a/src/components/layouts/Default.tsx +++ b/src/components/layouts/Default.tsx @@ -63,6 +63,8 @@ import { Invoice } from '$app/common/interfaces/invoice'; import toast from 'react-hot-toast'; import { EInvoiceCredits } from '../banners/EInvoiceCredits'; import classNames from 'classnames'; +import { OpenNavbarArrow } from '../icons/OpenNavbarArrow'; +import { useHandleCurrentUserChangeProperty } from '$app/common/hooks/useHandleCurrentUserChange'; export interface SaveOption { label: string; @@ -94,6 +96,7 @@ export function Default(props: Props) { const enabled = useEnabled(); const hasPermission = useHasPermission(); const preventNavigation = usePreventNavigation(); + const handleUserChange = useHandleCurrentUserChangeProperty(); const user = useInjectUserChanges(); const company = useCurrentCompany(); @@ -446,12 +449,28 @@ export function Default(props: Props) { data-cy="topNavbar" >
-

- {props.title} -

+
+ {user?.company_user?.react_settings.show_mini_sidebar && ( +
+ handleUserChange( + 'company_user.react_settings.show_mini_sidebar', + false + ) + } + > + +
+ )} + +

+ {props.title} +

+
diff --git a/src/components/layouts/components/DesktopSidebar.tsx b/src/components/layouts/components/DesktopSidebar.tsx index 924dc38b33..7f4b8f85dc 100644 --- a/src/components/layouts/components/DesktopSidebar.tsx +++ b/src/components/layouts/components/DesktopSidebar.tsx @@ -8,7 +8,6 @@ * @license https://www.elastic.co/licensing/elastic-license */ -import { useLogo } from '$app/common/hooks/useLogo'; import { CompanySwitcher } from '$app/components/CompanySwitcher'; import { HelpSidebarIcons } from '$app/components/HelpSidebarIcons'; import { Icon } from 'react-feather'; @@ -44,7 +43,6 @@ export function DesktopSidebar(props: Props) { user?.company_user?.react_settings.show_mini_sidebar ); - const logo = useLogo(); const colors = useColorScheme(); return ( @@ -74,11 +72,7 @@ export function DesktopSidebar(props: Props) { color: colors.$3, }} > - {isMiniSidebar ? ( - Company logo - ) : ( - - )} +
From 4d5c084704f08f3a7b0a5c2cef7efeabbd77a8ca Mon Sep 17 00:00:00 2001 From: Civolilah Date: Wed, 29 Jan 2025 01:21:57 +0100 Subject: [PATCH 05/11] Changed border color --- src/components/layouts/components/DesktopSidebar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/layouts/components/DesktopSidebar.tsx b/src/components/layouts/components/DesktopSidebar.tsx index 7f4b8f85dc..68e587afa8 100644 --- a/src/components/layouts/components/DesktopSidebar.tsx +++ b/src/components/layouts/components/DesktopSidebar.tsx @@ -68,7 +68,7 @@ export function DesktopSidebar(props: Props) { } )} style={{ - borderColor: colors.$5, + borderColor: '#FFFFFF13', color: colors.$3, }} > From 0f04cbdbe1a13e7aa17f7014c232b9055d10350e Mon Sep 17 00:00:00 2001 From: Civolilah Date: Wed, 29 Jan 2025 19:05:21 +0100 Subject: [PATCH 06/11] Cleanup --- src/components/CompanySwitcher.tsx | 87 +++++++------------ src/components/icons/Check.tsx | 12 ++- .../icons/ExpandCollapseChevron.tsx | 10 ++- src/components/layouts/Default.tsx | 4 +- .../layouts/components/DesktopSidebar.tsx | 2 +- .../layouts/components/MobileSidebar.tsx | 17 ++-- 6 files changed, 55 insertions(+), 77 deletions(-) diff --git a/src/components/CompanySwitcher.tsx b/src/components/CompanySwitcher.tsx index 7a583dd0bc..83a925603b 100644 --- a/src/components/CompanySwitcher.tsx +++ b/src/components/CompanySwitcher.tsx @@ -37,6 +37,7 @@ import { useHandleCurrentUserChangeProperty } from '$app/common/hooks/useHandleC import { useCurrentUser } from '$app/common/hooks/useCurrentUser'; import { useUpdateCompanyUser } from '$app/pages/settings/user/common/hooks/useUpdateCompanyUser'; import { useInjectUserChanges } from '$app/common/hooks/useInjectUserChanges'; +import { useColorScheme } from '$app/common/colors'; const SwitcherDiv = styled.div` &:hover { @@ -57,6 +58,7 @@ export function CompanySwitcher() { const logo = useLogo(); const location = useLocation(); + const colors = useColorScheme(); const companyName = useCompanyName(); const queryClient = useQueryClient(); const { isAdmin, isOwner } = useAdmin(); @@ -141,8 +143,8 @@ export function CompanySwitcher() { src={logo} alt="Company logo" style={{ - borderColor: '#FFFFFF19', - width: '1.5rem', + borderColor: '#e5e7eb', + width: '1.66rem', }} /> @@ -163,29 +165,23 @@ export function CompanySwitcher() { >
- +
Company logo - + {companyName} - - + +
- +
@@ -211,23 +207,19 @@ export function CompanySwitcher() { leaveTo="transform opacity-0 scale-95" > -
+
-

- {t('signed_in_as')} -

+

{t('signed_in_as')}

-

+

{currentUser?.email}

@@ -236,24 +228,21 @@ export function CompanySwitcher() {
{state?.api?.length >= 1 && state?.api?.map((record: any, index: number) => (
{index === 0 && ( -

+

{t('company')}

)} preventNavigation({ fn: () => switchCompany(index), @@ -268,7 +257,7 @@ export function CompanySwitcher() { src={record.company.settings.company_logo} alt="Company logo" style={{ - borderColor: '#FFFFFF19', + borderColor: colors.$4, width: '1.5rem', }} /> @@ -283,16 +272,15 @@ export function CompanySwitcher() { /> )} -
+
{record.company.settings.name || t('untitled_company')}
- {state.currentIndex === index && } + {state.currentIndex === index && ( + + )}
@@ -307,17 +295,12 @@ export function CompanySwitcher() {
setIsCompanyCreateModalOpened(true)} > - - {t('add_company')} - + {t('add_company')}
@@ -328,7 +311,7 @@ export function CompanySwitcher() {
preventNavigation({ url: '/settings/account_management', @@ -337,12 +320,7 @@ export function CompanySwitcher() { > - - {t('account_management')} - + {t('account_management')}
@@ -352,7 +330,7 @@ export function CompanySwitcher() {
preventNavigation({ url: '/logout', @@ -361,12 +339,7 @@ export function CompanySwitcher() { > - - {t('logout')} - + {t('logout')}
diff --git a/src/components/icons/Check.tsx b/src/components/icons/Check.tsx index cf259e1ea3..f16c301b31 100644 --- a/src/components/icons/Check.tsx +++ b/src/components/icons/Check.tsx @@ -8,21 +8,25 @@ * @license https://www.elastic.co/licensing/elastic-license */ -export function Check() { +type Props = { + color?: string; +}; + +export function Check({ color = '#18181B' }: Props) { return ( setSidebarOpen(true)} > Open sidebar - +
- +
)} diff --git a/src/components/layouts/components/DesktopSidebar.tsx b/src/components/layouts/components/DesktopSidebar.tsx index 68e587afa8..866e278086 100644 --- a/src/components/layouts/components/DesktopSidebar.tsx +++ b/src/components/layouts/components/DesktopSidebar.tsx @@ -68,7 +68,7 @@ export function DesktopSidebar(props: Props) { } )} style={{ - borderColor: '#FFFFFF13', + borderColor: 'white', color: colors.$3, }} > diff --git a/src/components/layouts/components/MobileSidebar.tsx b/src/components/layouts/components/MobileSidebar.tsx index 0c66d97a0b..a98a3334bd 100644 --- a/src/components/layouts/components/MobileSidebar.tsx +++ b/src/components/layouts/components/MobileSidebar.tsx @@ -16,7 +16,6 @@ import { NavigationItem } from './DesktopSidebar'; import { SidebarItem } from './SidebarItem'; import { useColorScheme } from '$app/common/colors'; import { useInjectUserChanges } from '$app/common/hooks/useInjectUserChanges'; -import { useLogo } from '$app/common/hooks/useLogo'; import { HelpSidebarIcons } from '$app/components/HelpSidebarIcons'; interface Props { @@ -26,7 +25,6 @@ interface Props { } export function MobileSidebar(props: Props) { - const logo = useLogo(); const colors = useColorScheme(); const user = useInjectUserChanges(); @@ -62,7 +60,10 @@ export function MobileSidebar(props: Props) { leaveFrom="translate-x-0" leaveTo="-translate-x-full" > -
+
- {isMiniSidebar ? ( - Company logo - ) : ( - - )} +
From f0ef346942eb6feee131f67cf1231098f0f55524 Mon Sep 17 00:00:00 2001 From: Civolilah Date: Thu, 30 Jan 2025 02:18:06 +0100 Subject: [PATCH 07/11] Adjusted solution --- .../hooks/useHandleCollapseExpandSidebar.ts | 37 +++++++++++++++++++ src/common/hooks/useInjectUserChanges.ts | 2 +- src/components/CompanySwitcher.tsx | 28 ++------------ src/components/HelpSidebarIcons.tsx | 12 ++++++ src/components/layouts/Default.tsx | 31 +++------------- 5 files changed, 59 insertions(+), 51 deletions(-) create mode 100644 src/common/hooks/useHandleCollapseExpandSidebar.ts diff --git a/src/common/hooks/useHandleCollapseExpandSidebar.ts b/src/common/hooks/useHandleCollapseExpandSidebar.ts new file mode 100644 index 0000000000..4bdadba196 --- /dev/null +++ b/src/common/hooks/useHandleCollapseExpandSidebar.ts @@ -0,0 +1,37 @@ +/** + * Invoice Ninja (https://invoiceninja.com). + * + * @link https://github.com/invoiceninja/invoiceninja source repository + * + * @copyright Copyright (c) 2022. Invoice Ninja LLC (https://invoiceninja.com) + * + * @license https://www.elastic.co/licensing/elastic-license + */ + +import { useUpdateCompanyUser } from '$app/pages/settings/user/common/hooks/useUpdateCompanyUser'; +import { cloneDeep, set } from 'lodash'; +import { useHandleCurrentUserChangeProperty } from './useHandleCurrentUserChange'; +import { useInjectUserChanges } from './useInjectUserChanges'; + +export function useHandleCollapseExpandSidebar() { + const userChanges = useInjectUserChanges(); + + const updateCompanyUser = useUpdateCompanyUser(); + const handleUserChange = useHandleCurrentUserChangeProperty(); + + return (value: boolean) => { + handleUserChange('company_user.react_settings.show_mini_sidebar', value); + + if (userChanges) { + const updatedUserChanges = cloneDeep(userChanges); + + set( + updatedUserChanges, + 'company_user.react_settings.show_mini_sidebar', + value + ); + + updateCompanyUser(updatedUserChanges); + } + }; +} diff --git a/src/common/hooks/useInjectUserChanges.ts b/src/common/hooks/useInjectUserChanges.ts index 2f83cb710d..1bb3ab841e 100644 --- a/src/common/hooks/useInjectUserChanges.ts +++ b/src/common/hooks/useInjectUserChanges.ts @@ -31,7 +31,7 @@ export function useInjectUserChanges(options?: Options) { const changes = useUserChanges(); useEffect(() => { - if (changes && options?.overwrite === false) { + if (Object.keys(changes || {}).length && !options?.overwrite) { // We don't want to overwrite existing changes, // so let's just not inject anything if we already have a value, // and relative argument. diff --git a/src/components/CompanySwitcher.tsx b/src/components/CompanySwitcher.tsx index 83a925603b..9e268218db 100644 --- a/src/components/CompanySwitcher.tsx +++ b/src/components/CompanySwitcher.tsx @@ -33,11 +33,10 @@ import Avatar from 'react-avatar'; import { Plus } from './icons/Plus'; import { Person } from './icons/Person'; import { Exit } from './icons/Exit'; -import { useHandleCurrentUserChangeProperty } from '$app/common/hooks/useHandleCurrentUserChange'; import { useCurrentUser } from '$app/common/hooks/useCurrentUser'; -import { useUpdateCompanyUser } from '$app/pages/settings/user/common/hooks/useUpdateCompanyUser'; import { useInjectUserChanges } from '$app/common/hooks/useInjectUserChanges'; import { useColorScheme } from '$app/common/colors'; +import { useHandleCollapseExpandSidebar } from '$app/common/hooks/useHandleCollapseExpandSidebar'; const SwitcherDiv = styled.div` &:hover { @@ -71,10 +70,8 @@ export function CompanySwitcher() { userChanges?.company_user?.react_settings?.show_mini_sidebar ); - const updateCompanyUser = useUpdateCompanyUser(); - const handleUserChange = useHandleCurrentUserChangeProperty(); - const preventNavigation = usePreventNavigation(); + const handleCollapseExpandSidebar = useHandleCollapseExpandSidebar(); const [shouldShowAddCompany, setShouldShowAddCompany] = useState(false); @@ -121,20 +118,6 @@ export function CompanySwitcher() { } }, [currentCompany]); - useEffect(() => { - const showMiniSidebar = - userChanges?.company_user?.react_settings?.show_mini_sidebar; - - if ( - userChanges && - typeof showMiniSidebar !== 'undefined' && - currentUser?.company_user?.react_settings?.show_mini_sidebar !== - showMiniSidebar - ) { - updateCompanyUser(userChanges); - } - }, [userChanges?.company_user?.react_settings.show_mini_sidebar]); - if (isMiniSidebar) { return ( <> @@ -186,12 +169,7 @@ export function CompanySwitcher() {
- handleUserChange( - 'company_user.react_settings.show_mini_sidebar', - true - ) - } + onClick={() => handleCollapseExpandSidebar(true)} >
diff --git a/src/components/HelpSidebarIcons.tsx b/src/components/HelpSidebarIcons.tsx index 8fd50705a0..3771686d66 100644 --- a/src/components/HelpSidebarIcons.tsx +++ b/src/components/HelpSidebarIcons.tsx @@ -38,6 +38,8 @@ import { useQuery } from 'react-query'; import axios from 'axios'; import { MdWarning } from 'react-icons/md'; import { UpdateAppModal } from './UpdateAppModal'; +import { OpenNavbarArrow } from './icons/OpenNavbarArrow'; +import { useHandleCollapseExpandSidebar } from '$app/common/hooks/useHandleCollapseExpandSidebar'; interface Props { docsLink?: string; @@ -54,6 +56,7 @@ export function HelpSidebarIcons(props: Props) { const { mobileNavbar } = props; const dispatch = useDispatch(); + const handleCollapseExpandSidebar = useHandleCollapseExpandSidebar(); const { data: latestVersion } = useQuery({ queryKey: ['/pdf.invoicing.co/api/version'], @@ -313,6 +316,15 @@ export function HelpSidebarIcons(props: Props) { )} + + {isMiniSidebar && ( +
handleCollapseExpandSidebar(false)} + > + +
+ )} ); diff --git a/src/components/layouts/Default.tsx b/src/components/layouts/Default.tsx index 8f3f0c048a..be77600970 100644 --- a/src/components/layouts/Default.tsx +++ b/src/components/layouts/Default.tsx @@ -63,8 +63,6 @@ import { Invoice } from '$app/common/interfaces/invoice'; import toast from 'react-hot-toast'; import { EInvoiceCredits } from '../banners/EInvoiceCredits'; import classNames from 'classnames'; -import { OpenNavbarArrow } from '../icons/OpenNavbarArrow'; -import { useHandleCurrentUserChangeProperty } from '$app/common/hooks/useHandleCurrentUserChange'; export interface SaveOption { label: string; @@ -96,7 +94,6 @@ export function Default(props: Props) { const enabled = useEnabled(); const hasPermission = useHasPermission(); const preventNavigation = usePreventNavigation(); - const handleUserChange = useHandleCurrentUserChangeProperty(); const user = useInjectUserChanges(); const company = useCurrentCompany(); @@ -449,28 +446,12 @@ export function Default(props: Props) { data-cy="topNavbar" >
-
- {user?.company_user?.react_settings.show_mini_sidebar && ( -
- handleUserChange( - 'company_user.react_settings.show_mini_sidebar', - false - ) - } - > - -
- )} - -

- {props.title} -

-
+

+ {props.title} +

From 7f2f9c3a1363af9f09ce9c73edb29165fa4b5969 Mon Sep 17 00:00:00 2001 From: Civolilah Date: Fri, 31 Jan 2025 02:14:01 +0100 Subject: [PATCH 08/11] Changed position of icons --- src/components/CompanySwitcher.tsx | 48 +++++++++-------------- src/components/HelpSidebarIcons.tsx | 29 ++++++++++---- src/components/icons/CloseNavbarArrow.tsx | 10 +++-- src/components/icons/OpenNavbarArrow.tsx | 7 ++-- 4 files changed, 51 insertions(+), 43 deletions(-) diff --git a/src/components/CompanySwitcher.tsx b/src/components/CompanySwitcher.tsx index 9e268218db..80c245902b 100644 --- a/src/components/CompanySwitcher.tsx +++ b/src/components/CompanySwitcher.tsx @@ -25,7 +25,6 @@ import { freePlan } from '$app/common/guards/guards/free-plan'; import { useAdmin } from '$app/common/hooks/permissions/useHasPermission'; import { useLocation, useNavigate, useParams } from 'react-router-dom'; import { ExpandCollapseChevron } from './icons/ExpandCollapseChevron'; -import { CloseNavbarArrow } from './icons/CloseNavbarArrow'; import { styled } from 'styled-components'; import { usePreventNavigation } from '$app/common/hooks/usePreventNavigation'; import { Check } from './icons/Check'; @@ -36,7 +35,6 @@ import { Exit } from './icons/Exit'; import { useCurrentUser } from '$app/common/hooks/useCurrentUser'; import { useInjectUserChanges } from '$app/common/hooks/useInjectUserChanges'; import { useColorScheme } from '$app/common/colors'; -import { useHandleCollapseExpandSidebar } from '$app/common/hooks/useHandleCollapseExpandSidebar'; const SwitcherDiv = styled.div` &:hover { @@ -71,7 +69,6 @@ export function CompanySwitcher() { ); const preventNavigation = usePreventNavigation(); - const handleCollapseExpandSidebar = useHandleCollapseExpandSidebar(); const [shouldShowAddCompany, setShouldShowAddCompany] = useState(false); @@ -146,34 +143,25 @@ export function CompanySwitcher() { className="relative inline-block text-left w-full" data-cy="companyDropdown" > -
- -
- Company logo - - - {companyName} - - - -
- - -
handleCollapseExpandSidebar(true)} - > - + +
+ Company logo + + + {companyName} + + +
-
+ )} - {isMiniSidebar && ( -
handleCollapseExpandSidebar(false)} +
handleCollapseExpandSidebar(!isMiniSidebar)} + > + + {isMiniSidebar ? t('show_menu') : t('hide_menu')} + + } + className="text-white rounded text-xs mb-2" > - -
- )} +
+ {isMiniSidebar ? ( + + ) : ( + + )} +
+ +
); diff --git a/src/components/icons/CloseNavbarArrow.tsx b/src/components/icons/CloseNavbarArrow.tsx index 5742c1ef40..7aa73e66a0 100644 --- a/src/components/icons/CloseNavbarArrow.tsx +++ b/src/components/icons/CloseNavbarArrow.tsx @@ -10,17 +10,21 @@ interface Props { color?: string; + size?: string; } -export function CloseNavbarArrow({ color = '#A1A1AA' }: Props) { +export function CloseNavbarArrow({ + color = '#A1A1AA', + size = '1.3rem', +}: Props) { return ( Date: Fri, 31 Jan 2025 18:37:13 +0100 Subject: [PATCH 09/11] Increased text size in company avatar --- src/components/CompanySwitcher.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/CompanySwitcher.tsx b/src/components/CompanySwitcher.tsx index 80c245902b..520eac9d38 100644 --- a/src/components/CompanySwitcher.tsx +++ b/src/components/CompanySwitcher.tsx @@ -234,6 +234,7 @@ export function CompanySwitcher() { t('untitled_company'))?.[0] } round={true} + textSizeRatio={1.9} size="1.5rem" /> )} From 428ea65a708f33fad9cbdf9948266013142182bb Mon Sep 17 00:00:00 2001 From: Civolilah Date: Fri, 31 Jan 2025 18:39:39 +0100 Subject: [PATCH 10/11] Cleanup --- src/components/CompanySwitcher.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/CompanySwitcher.tsx b/src/components/CompanySwitcher.tsx index 520eac9d38..c6709fedd2 100644 --- a/src/components/CompanySwitcher.tsx +++ b/src/components/CompanySwitcher.tsx @@ -234,7 +234,7 @@ export function CompanySwitcher() { t('untitled_company'))?.[0] } round={true} - textSizeRatio={1.9} + textSizeRatio={2} size="1.5rem" /> )} From 93bd5feb09b17adb97be019a6221d44acb77404b Mon Sep 17 00:00:00 2001 From: Civolilah Date: Thu, 6 Feb 2025 00:44:32 +0100 Subject: [PATCH 11/11] Changed size of icons --- src/components/HelpSidebarIcons.tsx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/components/HelpSidebarIcons.tsx b/src/components/HelpSidebarIcons.tsx index 9ebc0ded7a..517aa1cc35 100644 --- a/src/components/HelpSidebarIcons.tsx +++ b/src/components/HelpSidebarIcons.tsx @@ -203,7 +203,7 @@ export function HelpSidebarIcons(props: Props) {
- +
@@ -238,7 +238,7 @@ export function HelpSidebarIcons(props: Props) { content={t('error')} className="text-white rounded text-xs mb-2" > - + )} @@ -254,7 +254,7 @@ export function HelpSidebarIcons(props: Props) { className="cursor-pointer" onClick={() => setIsContactVisible(true)} > - +
) : (
- +
)} @@ -280,7 +280,7 @@ export function HelpSidebarIcons(props: Props) { content={t('support_forum')} className="text-white rounded text-xs mb-2" > - + @@ -299,7 +299,7 @@ export function HelpSidebarIcons(props: Props) { content={t('user_guide')} className="text-white rounded text-xs mb-2" > - + @@ -312,7 +312,7 @@ export function HelpSidebarIcons(props: Props) { content={t('about')} className="text-white rounded text-xs mb-2" > - + @@ -335,7 +335,7 @@ export function HelpSidebarIcons(props: Props) { {isMiniSidebar ? ( ) : ( - + )}