Styled the SideNavigator

src/components/SideNavigator/ControlButton.tsx

@@ -11,6 +11,7 @@ const StyledButton = styled.button`
   background-color: transparent;
   border-radius: 2px;
   top: 2px;
+  font-size: 20px;
   cursor: pointer;
   ${uiTextColor}
   &:focus {

src/components/SideNavigator/SideNavigator.tsx

@@ -16,14 +16,26 @@ import Icon from '../atoms/Icon'
 import { useDialog, DialogIconTypes } from '../../lib/dialog'
 import { useContextMenu, MenuTypes } from '../../lib/contextMenu'
 import { usePreferences } from '../../lib/preferences'
-import { backgroundColor, iconColor } from '../../lib/styled/styleFunctions'
+import {
+  backgroundColor,
+  iconColor,
+  textColor
+} from '../../lib/styled/styleFunctions'
 import SideNavigatorItem from './SideNavigatorItem'
 import { useGeneralStatus } from '../../lib/generalStatus'
 import ControlButton from './ControlButton'
 import FolderListFragment from './FolderListFragment'
 import TagListFragment from './TagListFragment'
 import TutorialsNavigator from '../Tutorials/TutorialsNavigator'
 import { useUsers } from '../../lib/accounts'
+import MdiIcon from '@mdi/react'
+
+const Description = styled.nav`
+  margin-left: 5px;
+  margin-bottom: 10px;
+  font-size: 18px;
+  color: ${textColor};
+`
 
 const StyledSideNavContainer = styled.nav`
   display: flex;
@@ -86,6 +98,14 @@ const StyledSideNavContainer = styled.nav`
   }
 `
 
+const CreateStorageButton = styled.button`
+  position: absolute;
+  right: 0px;
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+`
+
 const Spacer = styled.div`
   flex: 1;
 `
@@ -150,6 +170,14 @@ export default () => {
           <Icon path={mdiTuneVertical} />
         </button>
       </div>
+
+      <Description>
+        Storages
+        <CreateStorageButton onClick={() => push('/app/storages')}>
+          <MdiIcon path={mdiPlusCircleOutline} size='2em' color='gray' />
+        </CreateStorageButton>
+      </Description>
+
       <div className='storageList'>
         {storageEntries.map(([, storage]) => {
           const itemId = `storage:${storage.id}`
@@ -313,12 +341,6 @@ export default () => {
         )}
         <Spacer onContextMenu={openSideNavContextMenu} />
       </div>
-      <SideNavigatorItem
-        depth={0}
-        iconPath={mdiPlusCircleOutline}
-        label='Add Storage'
-        onClick={() => push('/app/storages')}
-      />
     </StyledSideNavContainer>
   )
 }

src/components/SideNavigator/SideNavigatorItem.tsx

@@ -7,6 +7,7 @@ import {
   uiTextColor,
   activeBackgroundColor
 } from '../../lib/styled/styleFunctions'
+import MdiIcon from '@mdi/react'
 
 const Container = styled.div`
   position: relative;
@@ -117,13 +118,18 @@ const SideNaviagtorItem = ({
           onClick={onFoldButtonClick}
           style={{ left: `${10 * depth}px` }}
         >
-          <Icon path={folded ? mdiChevronRight : mdiChevronDown} />
+          <MdiIcon
+            path={folded ? mdiChevronRight : mdiChevronDown}
+            size='2em'
+            color='currentColor'
+          />
         </FoldButton>
       )}
       <ClickableContainer
         style={{
           paddingLeft: `${10 * depth + 26}px`,
-          cursor: onClick ? 'pointer' : 'initial'
+          cursor: onClick ? 'pointer' : 'initial',
+          fontSize: '15px'
         }}
         onClick={onClick}
       >