fix: visual alignment of icons

The-Commit-Company · Apr 26, 2024 · 69aab49 · 69aab49
1 parent f437218
commit 69aab49
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 8 deletions.
diff --git a/raven-app/src/components/feature/channels/ChannelList.tsx b/raven-app/src/components/feature/channels/ChannelList.tsx
@@ -62,7 +62,7 @@ export const ChannelList = ({ unread_count }: { unread_count?: UnreadCountData }
     return (
         <SidebarGroup>
             <SidebarGroupItem className={'gap-1 pl-1'}>
-                <Flex width='100%' justify='between' align='center' gap='2' className="group">
+                <Flex width='100%' justify='between' align='center' gap='2' pr='2' className="group">
                     <Flex align='center' gap='2' width='100%' onClick={toggle} className="cursor-default select-none">
                         <SidebarGroupLabel>Channels</SidebarGroupLabel>
                         <Box className={clsx('transition-opacity ease-in-out duration-200',
@@ -72,7 +72,7 @@ export const ChannelList = ({ unread_count }: { unread_count?: UnreadCountData }
                             </SidebarBadge>
                         </Box>
                     </Flex>
-                    <Flex gap='2'>
+                    <Flex align='center' gap='1'>
                         <CreateChannelButton updateChannelList={mutate} />
                         <SidebarViewMoreButton onClick={toggle} expanded={showData} />
                     </Flex>

diff --git a/raven-app/src/components/feature/channels/CreateChannelModal.tsx b/raven-app/src/components/feature/channels/CreateChannelModal.tsx
@@ -94,8 +94,8 @@ export const CreateChannelButton = ({ updateChannelList }: { updateChannelList:
     return <Dialog.Root open={isOpen} onOpenChange={onOpenChange}>
         <Dialog.Trigger>
             <IconButton variant='soft' size='1' radius='large' color='gray' aria-label='Create Channel' title='Create Channel'
-                className='group-hover:visible invisible bg-transparent hover:bg-gray-3 transition-all ease-in-out text-gray-10 dark:text-gray-300'>
-                <FiPlus size='18' />
+                className='group-hover:visible invisible transition-all ease-in-out text-gray-10 dark:text-gray-300 bg-transparent hover:bg-gray-3'>
+                <FiPlus size='16' />
                 {/* <BiPlus className='text-gray-10 dark:text-gray-300' /> */}
             </IconButton>
         </Dialog.Trigger>

diff --git a/raven-app/src/components/feature/direct-messages/DirectMessageList.tsx b/raven-app/src/components/feature/direct-messages/DirectMessageList.tsx
@@ -35,7 +35,7 @@ export const DirectMessageList = ({ unread_count }: { unread_count?: UnreadCount
             <SidebarGroupItem className={'gap-1 pl-1'}>
                 <Flex width='100%' justify='between' align='center' gap='2' pr='2' className="group">
                     <Flex align='center' gap='2' width='100%' onClick={toggle} className="cursor-default select-none">
-                        <SidebarGroupLabel>Members</SidebarGroupLabel>
+                        <SidebarGroupLabel className="pt-0.5">Members</SidebarGroupLabel>
                         <Box className={clsx('transition-opacity ease-in-out duration-200', !showData && unread_count && unread_count?.total_unread_count_in_dms > 0 ? 'opacity-100' : 'opacity-0')}>
                             <SidebarBadge>{unread_count?.total_unread_count_in_dms}</SidebarBadge>
                         </Box>

diff --git a/raven-app/src/components/layout/Sidebar/SidebarBody.tsx b/raven-app/src/components/layout/Sidebar/SidebarBody.tsx
@@ -12,8 +12,8 @@ export const SidebarBody = () => {
 
     return (
         <ScrollArea type="hover" scrollbars="vertical" className='h-[calc(100vh-7rem)]'>
-            <Flex direction='column' gap='3' className='overflow-x-hidden' px='2'>
-                <Flex direction='column' gap='2'>
+            <Flex direction='column' gap='2' className='overflow-x-hidden' px='2'>
+                <Flex direction='column' gap='2' className='pb-0.5'>
                     <Box>
                         <SidebarItem to={'saved-messages'} className='py-1 px-0.5'>
                             <AccessibleIcon label='Saved Messages'>

diff --git a/raven-app/src/components/layout/Sidebar/SidebarComp.tsx b/raven-app/src/components/layout/Sidebar/SidebarComp.tsx
@@ -149,7 +149,7 @@ export const SidebarViewMoreButton = ({ expanded, onClick, ...props }: SidebarVi
             {...props}
             className={clsx('cursor-pointer transition-all text-gray-10 dark:text-gray-300 bg-transparent hover:bg-gray-3 invisible group-hover:visible ease-in-out')}
         >
-            {expanded ? <FiChevronDown /> : <FiChevronRight />}
+            {expanded ? <FiChevronDown size='16' /> : <FiChevronRight size='16' />}
         </IconButton>
     )
 }