From 41696f1417b859a3f8d4f52702af009395d295da Mon Sep 17 00:00:00 2001
From: Junyoung Choi <rokt33r.choi@gmail.com>
Date: Thu, 4 Jun 2020 10:44:49 +0900
Subject: [PATCH 1/9] Apply draggable region

---
 src/components/molecules/NoteDetailToolbar.tsx | 1 +
 src/components/organisms/Navigator.tsx         | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/components/molecules/NoteDetailToolbar.tsx b/src/components/molecules/NoteDetailToolbar.tsx
index 2a498c36e7..bd7e3f5c17 100644
--- a/src/components/molecules/NoteDetailToolbar.tsx
+++ b/src/components/molecules/NoteDetailToolbar.tsx
@@ -27,6 +27,7 @@ import { usePreviewStyle } from '../../lib/preview'
 const NoteDetailToolbarContainer = styled.div`
   display: flex;
   height: 40px;
+  -webkit-app-region: drag;
   padding: 0 8px;
   ${borderBottom}
   align-items: center;
diff --git a/src/components/organisms/Navigator.tsx b/src/components/organisms/Navigator.tsx
index 68c058c334..578d143c4e 100644
--- a/src/components/organisms/Navigator.tsx
+++ b/src/components/organisms/Navigator.tsx
@@ -25,6 +25,7 @@ const TopControl = styled.div`
   align-items: center;
   height: 40px;
   ${borderBottom}
+  -webkit-app-region: drag;
 `
 
 const Empty = styled.button`

From 930788992caa42933d5ea05239a356f3849e814f Mon Sep 17 00:00:00 2001
From: Junyoung Choi <rokt33r.choi@gmail.com>
Date: Thu, 4 Jun 2020 12:02:14 +0900
Subject: [PATCH 2/9] Extract IdleNoteDetail

---
 src/components/organisms/IdleNoteDetail.tsx | 100 ++++++++++++++++++++
 src/components/pages/NotePage.tsx           |  77 +--------------
 2 files changed, 102 insertions(+), 75 deletions(-)
 create mode 100644 src/components/organisms/IdleNoteDetail.tsx

diff --git a/src/components/organisms/IdleNoteDetail.tsx b/src/components/organisms/IdleNoteDetail.tsx
new file mode 100644
index 0000000000..1e378f83b0
--- /dev/null
+++ b/src/components/organisms/IdleNoteDetail.tsx
@@ -0,0 +1,100 @@
+import React from 'react'
+import Image from '../atoms/Image'
+import styled from '../../lib/styled'
+import { useTranslation } from 'react-i18next'
+import { borderBottom } from '../../lib/styled/styleFunctions'
+
+const Container = styled.div`
+  user-select: none;
+  position: relative;
+`
+
+const DraggableArea = styled.div`
+  height: 40px;
+  ${borderBottom}
+  -webkit-app-region: drag;
+`
+
+const Content = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  img {
+    width: 310px;
+    max-width: 100%;
+    padding: 10px 40px;
+  }
+
+  section {
+    margin: auto;
+    display: flex;
+    width: 70%;
+    text-align: center;
+
+    div {
+      text-align: center;
+      margin: 0 auto;
+      display: block;
+    }
+  }
+
+  h2 {
+    font-weight: normal;
+
+    span {
+      margin: 5px auto;
+      padding: 5px 10px;
+      width: max-content;
+      background: #333;
+      border-radius: 8px;
+      box-shadow: 0 4px #404040;
+    }
+  }
+  h3 {
+    margin: 20px auto;
+    font-weight: normal;
+  }
+  h4 {
+    margin: 0;
+    font-weight: normal;
+  }
+
+  @media only screen and (max-width: 970px) {
+    section {
+      width: 100%;
+      display: block;
+    }
+  }
+`
+
+const IdleNoteDetail = () => {
+  const { t } = useTranslation()
+  return (
+    <Container>
+      <DraggableArea />
+      <Content>
+        <Image src={'/app/static/logo_index.svg'} />
+        <h3>{t('note.createkeymessage1')}</h3>
+        <section>
+          <div>
+            <h2>
+              <span>Ctrl</span> + <span>{t('note.createKey')}</span>
+            </h2>
+            <h4>{t('note.createKeyWinLin')}</h4>
+          </div>
+          <h3>{t('note.createKeyOr')}</h3>
+          <div>
+            <h2>
+              <span>⌘</span> + <span>{t('note.createKey')}</span>
+            </h2>
+            <h4>{t('note.createKeyMac')}</h4>
+          </div>
+        </section>
+      </Content>
+    </Container>
+  )
+}
+
+export default IdleNoteDetail
diff --git a/src/components/pages/NotePage.tsx b/src/components/pages/NotePage.tsx
index f3d7186958..6f170a9967 100644
--- a/src/components/pages/NotePage.tsx
+++ b/src/components/pages/NotePage.tsx
@@ -13,7 +13,6 @@ import {
 } from '../../lib/router'
 import { useDb } from '../../lib/db'
 import TwoPaneLayout from '../atoms/TwoPaneLayout'
-import Image from '../atoms/Image'
 import { NoteDoc, NoteStorage } from '../../lib/db/types'
 import { useGeneralStatus, ViewModeType } from '../../lib/generalStatus'
 import { useDialog, DialogIconTypes } from '../../lib/dialog'
@@ -30,59 +29,7 @@ import {
   NoteSortingOptions,
 } from '../../lib/sort'
 import { values } from '../../lib/db/utils'
-
-export const StyledNoteDetailNoNote = styled.div`
-  text-align: center;
-  margin-top: 13%;
-  color: #a9a9a9;
-
-  img {
-    width: 310px;
-    max-width: 100%;
-    padding: 10px 40px;
-  }
-
-  section {
-    margin: auto;
-    display: flex;
-    width: 70%;
-    text-align: center;
-
-    div {
-      text-align: center;
-      margin: 0 auto;
-      display: block;
-    }
-  }
-
-  h2 {
-    font-weight: normal;
-
-    span {
-      margin: 5px auto;
-      padding: 5px 10px;
-      width: max-content;
-      background: #333;
-      border-radius: 8px;
-      box-shadow: 0 4px #404040;
-    }
-  }
-  h3 {
-    margin: 20px auto;
-    font-weight: normal;
-  }
-  h4 {
-    margin: 0;
-    font-weight: normal;
-  }
-
-  @media only screen and (max-width: 970px) {
-    section {
-      width: 100%;
-      display: block;
-    }
-  }
-`
+import IdleNoteDetail from '../organisms/IdleNoteDetail'
 
 interface NotePageProps {
   storage: NoteStorage
@@ -343,27 +290,7 @@ const NotePage = ({ storage }: NotePageProps) => {
       }
       right={
         currentNote == null ? (
-          <StyledNoteDetailNoNote>
-            <Image src={'/app/static/logo_index.svg'} />
-            <h3>{t('note.createkeymessage1')}</h3>
-            {/* Might need to be changed if custom keybinds is implemented */}
-            <section>
-              <div>
-                {/* 'note.createKey' differs in locales: N/Enter */}
-                <h2>
-                  <span>Ctrl</span> + <span>{t('note.createKey')}</span>
-                </h2>
-                <h4>{t('note.createKeyWinLin')}</h4>
-              </div>
-              <h3>{t('note.createKeyOr')}</h3>
-              <div>
-                <h2>
-                  <span>⌘</span> + <span>{t('note.createKey')}</span>
-                </h2>
-                <h4>{t('note.createKeyMac')}</h4>
-              </div>
-            </section>
-          </StyledNoteDetailNoNote>
+          <IdleNoteDetail />
         ) : (
           <NoteDetail
             storage={storage}

From 02e0d6b21e3b8b12eb4c57ea679eaf2226307bae Mon Sep 17 00:00:00 2001
From: Junyoung Choi <rokt33r.choi@gmail.com>
Date: Thu, 4 Jun 2020 12:02:55 +0900
Subject: [PATCH 3/9] Add draggable region to attachments page

---
 src/components/pages/AttachmentsPage.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/pages/AttachmentsPage.tsx b/src/components/pages/AttachmentsPage.tsx
index fda6f6b4ab..c73241397a 100644
--- a/src/components/pages/AttachmentsPage.tsx
+++ b/src/components/pages/AttachmentsPage.tsx
@@ -15,6 +15,7 @@ const Header = styled.div`
   padding: 10px;
   width: 100%;
   ${borderBottom}
+  -webkit-app-region: drag;
 `
 
 const AttachmentsPage = () => {

From fea22523b3a4250344ed8724755d2e07407321c9 Mon Sep 17 00:00:00 2001
From: Junyoung Choi <rokt33r.choi@gmail.com>
Date: Thu, 4 Jun 2020 12:07:03 +0900
Subject: [PATCH 4/9] Discard unused import

---
 src/components/pages/NotePage.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/pages/NotePage.tsx b/src/components/pages/NotePage.tsx
index 6f170a9967..e41e8b3657 100644
--- a/src/components/pages/NotePage.tsx
+++ b/src/components/pages/NotePage.tsx
@@ -1,6 +1,5 @@
 import React, { useMemo, useCallback, useState, useEffect } from 'react'
 import NoteNavigator from '../organisms/NoteNavigator'
-import styled from '../../lib/styled'
 import NoteDetail from '../organisms/NoteDetail'
 import {
   useRouteParams,

From 5ef33f44bebb23c56b2274598056b7ee4f1cae3a Mon Sep 17 00:00:00 2001
From: Junyoung Choi <rokt33r.choi@gmail.com>
Date: Thu, 4 Jun 2020 13:30:37 +0900
Subject: [PATCH 5/9] Extract PageDraggableHeader from AttachmentPage

---
 src/components/atoms/PageDraggableHeader.tsx | 43 ++++++++++++++++++++
 src/components/pages/AttachmentsPage.tsx     | 17 ++++----
 2 files changed, 50 insertions(+), 10 deletions(-)
 create mode 100644 src/components/atoms/PageDraggableHeader.tsx

diff --git a/src/components/atoms/PageDraggableHeader.tsx b/src/components/atoms/PageDraggableHeader.tsx
new file mode 100644
index 0000000000..58aa188ffc
--- /dev/null
+++ b/src/components/atoms/PageDraggableHeader.tsx
@@ -0,0 +1,43 @@
+import React from 'react'
+import styled from '../../lib/styled'
+import Icon from './Icon'
+import { borderBottom } from '../../lib/styled/styleFunctions'
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 0 10px;
+  -webkit-app-region: drag;
+  ${borderBottom}
+  height: 40px;
+
+  color: ${({ theme }) => theme.uiTextColor};
+`
+
+const IconContainer = styled.div`
+  font-size: 18px;
+`
+
+const Label = styled.div`
+  font-weight: bold;
+`
+
+interface PageDraggableHeaderProps {
+  iconPath?: string
+  label: string
+}
+
+const PageDraggableHeader = ({ iconPath, label }: PageDraggableHeaderProps) => {
+  return (
+    <Container>
+      {iconPath != null && (
+        <IconContainer>
+          <Icon path={iconPath} />
+        </IconContainer>
+      )}
+      <Label>{label}</Label>
+    </Container>
+  )
+}
+
+export default PageDraggableHeader
diff --git a/src/components/pages/AttachmentsPage.tsx b/src/components/pages/AttachmentsPage.tsx
index c73241397a..2f244c738e 100644
--- a/src/components/pages/AttachmentsPage.tsx
+++ b/src/components/pages/AttachmentsPage.tsx
@@ -3,21 +3,14 @@ import { StorageAttachmentsRouteParams, useRouteParams } from '../../lib/router'
 import { useDb } from '../../lib/db'
 import styled from '../../lib/styled'
 import { getFileList } from '../../lib/dnd'
-import { borderBottom } from '../../lib/styled/styleFunctions'
 import AttachmentList from '../organisms/AttachmentList'
+import { mdiPaperclip } from '@mdi/js'
+import PageDraggableHeader from '../atoms/PageDraggableHeader'
 
 const Container = styled.div`
   height: 100%;
 `
 
-const Header = styled.div`
-  height: 40px;
-  padding: 10px;
-  width: 100%;
-  ${borderBottom}
-  -webkit-app-region: drag;
-`
-
 const AttachmentsPage = () => {
   const routeParams = useRouteParams() as StorageAttachmentsRouteParams
   const { storageId } = routeParams
@@ -40,7 +33,11 @@ const AttachmentsPage = () => {
         addAttachments(storageId, files)
       }}
     >
-      <Header>Attachments in {storage.name}</Header>
+      <PageDraggableHeader
+        iconPath={mdiPaperclip}
+        label={`Attachments in ${storage.name}`}
+      />
+
       <AttachmentList storage={storage} />
     </Container>
   )

From 8b431b7861bfe91e08d09360d70d9f8584cb1689 Mon Sep 17 00:00:00 2001
From: Junyoung Choi <rokt33r.choi@gmail.com>
Date: Thu, 4 Jun 2020 13:37:19 +0900
Subject: [PATCH 6/9] Adjust icon padding of PageDraggableHeader

---
 src/components/atoms/PageDraggableHeader.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/atoms/PageDraggableHeader.tsx b/src/components/atoms/PageDraggableHeader.tsx
index 58aa188ffc..b7a5eec5eb 100644
--- a/src/components/atoms/PageDraggableHeader.tsx
+++ b/src/components/atoms/PageDraggableHeader.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import styled from '../../lib/styled'
 import Icon from './Icon'
-import { borderBottom } from '../../lib/styled/styleFunctions'
+import { borderBottom, flexCenter } from '../../lib/styled/styleFunctions'
 
 const Container = styled.div`
   display: flex;
@@ -16,6 +16,9 @@ const Container = styled.div`
 
 const IconContainer = styled.div`
   font-size: 18px;
+  width: 24px;
+  height: 24px;
+  ${flexCenter}
 `
 
 const Label = styled.div`

From f61f0b703632f5cb7800bb85a177b6d9667e5bdc Mon Sep 17 00:00:00 2001
From: Junyoung Choi <rokt33r.choi@gmail.com>
Date: Thu, 4 Jun 2020 13:37:43 +0900
Subject: [PATCH 7/9] Restructure StorageCreatePage layout

---
 src/components/atoms/PageContainer.tsx        |  6 +-
 .../atoms/PageScrollableContent.tsx           |  9 +++
 src/components/pages/StorageCreatePage.tsx    | 71 +++++++++++--------
 3 files changed, 52 insertions(+), 34 deletions(-)
 create mode 100644 src/components/atoms/PageScrollableContent.tsx

diff --git a/src/components/atoms/PageContainer.tsx b/src/components/atoms/PageContainer.tsx
index cd852f4727..3c5f756b49 100644
--- a/src/components/atoms/PageContainer.tsx
+++ b/src/components/atoms/PageContainer.tsx
@@ -1,9 +1,9 @@
 import styled from '../../lib/styled'
 
 const PageContainer = styled.div`
-  padding: 1em;
-  height: 100%;
-  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 `
 
 export default PageContainer
diff --git a/src/components/atoms/PageScrollableContent.tsx b/src/components/atoms/PageScrollableContent.tsx
new file mode 100644
index 0000000000..fd806a6649
--- /dev/null
+++ b/src/components/atoms/PageScrollableContent.tsx
@@ -0,0 +1,9 @@
+import styled from '../../lib/styled'
+
+const PageScrollableContent = styled.div`
+  flex: 1;
+  overflow: auto;
+  padding: 1em;
+`
+
+export default PageScrollableContent
diff --git a/src/components/pages/StorageCreatePage.tsx b/src/components/pages/StorageCreatePage.tsx
index 62fe87d0f2..7b1f311e65 100644
--- a/src/components/pages/StorageCreatePage.tsx
+++ b/src/components/pages/StorageCreatePage.tsx
@@ -2,7 +2,6 @@ import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import PageContainer from '../atoms/PageContainer'
 import {
-  FormHeading,
   FormGroup,
   FormCheckInlineItem,
   FormCheckList,
@@ -10,43 +9,53 @@ import {
 } from '../atoms/form'
 import LocalStorageCreateForm from '../organisms/LocalStorageCreateForm'
 import CloudStorageCreateForm from '../organisms/CloudStorageCreateForm'
+import PageDraggableHeader from '../atoms/PageDraggableHeader'
+import { mdiBookPlusMultiple } from '@mdi/js'
+import PageScrollableContent from '../atoms/PageScrollableContent'
 
-export default () => {
+const StorageCreatePage = () => {
   const { t } = useTranslation()
   const [storageType, setStorageType] = useState<'cloud' | 'local'>('cloud')
 
   return (
     <PageContainer>
-      <FormHeading depth={1}>{t('Create new storage')}</FormHeading>
-      <FormGroup>
-        <FormLabel>Storage Type</FormLabel>
-        <FormCheckList>
-          <FormCheckInlineItem
-            id='radio-cloudStorageType'
-            type='radio'
-            checked={storageType === 'cloud'}
-            onChange={() => {
-              setStorageType('cloud')
-            }}
-          >
-            {t('storage.typeCloud')}
-          </FormCheckInlineItem>
-          <FormCheckInlineItem
-            id='radio-localStorageType'
-            type='radio'
-            checked={storageType === 'local'}
-            onChange={() => setStorageType('local')}
-          >
-            {t('storage.typeLocal')}
-          </FormCheckInlineItem>
-        </FormCheckList>
-      </FormGroup>
+      <PageDraggableHeader
+        iconPath={mdiBookPlusMultiple}
+        label={t('Create new storage')}
+      />
+      <PageScrollableContent>
+        <FormGroup>
+          <FormLabel>Storage Type</FormLabel>
+          <FormCheckList>
+            <FormCheckInlineItem
+              id='radio-cloudStorageType'
+              type='radio'
+              checked={storageType === 'cloud'}
+              onChange={() => {
+                setStorageType('cloud')
+              }}
+            >
+              {t('storage.typeCloud')}
+            </FormCheckInlineItem>
+            <FormCheckInlineItem
+              id='radio-localStorageType'
+              type='radio'
+              checked={storageType === 'local'}
+              onChange={() => setStorageType('local')}
+            >
+              {t('storage.typeLocal')}
+            </FormCheckInlineItem>
+          </FormCheckList>
+        </FormGroup>
 
-      {storageType === 'local' ? (
-        <LocalStorageCreateForm />
-      ) : (
-        <CloudStorageCreateForm />
-      )}
+        {storageType === 'local' ? (
+          <LocalStorageCreateForm />
+        ) : (
+          <CloudStorageCreateForm />
+        )}
+      </PageScrollableContent>
     </PageContainer>
   )
 }
+
+export default StorageCreatePage

From b347c62b2abea1cec3f1e1c9b68d4d38d6068985 Mon Sep 17 00:00:00 2001
From: Junyoung Choi <rokt33r.choi@gmail.com>
Date: Thu, 4 Jun 2020 14:00:36 +0900
Subject: [PATCH 8/9] Restructure StorageEditPage

---
 src/components/pages/StorageEditPage.tsx | 83 +++++++++++++-----------
 1 file changed, 45 insertions(+), 38 deletions(-)

diff --git a/src/components/pages/StorageEditPage.tsx b/src/components/pages/StorageEditPage.tsx
index 97f5ae4c92..438bdf45db 100644
--- a/src/components/pages/StorageEditPage.tsx
+++ b/src/components/pages/StorageEditPage.tsx
@@ -17,12 +17,15 @@ import {
 } from '../atoms/form'
 import LinkCloudStorageForm from '../organisms/LinkCloudStorageForm'
 import ManageCloudStorageForm from '../organisms/ManageCloudStorageForm'
+import { mdiBook } from '@mdi/js'
+import PageDraggableHeader from '../atoms/PageDraggableHeader'
+import PageScrollableContent from '../atoms/PageScrollableContent'
 
-interface StorageEditProps {
+interface StorageEditPageProps {
   storage: NoteStorage
 }
 
-export default ({ storage }: StorageEditProps) => {
+const StorageEditPage = ({ storage }: StorageEditPageProps) => {
   const db = useDb()
   const router = useRouter()
   const { t } = useTranslation()
@@ -60,43 +63,47 @@ export default ({ storage }: StorageEditProps) => {
 
   return (
     <PageContainer>
-      <FormHeading depth={1}>Storage Settings</FormHeading>
-      <FormGroup>
-        <FormLabel>{t('storage.name')}</FormLabel>
-        <FormTextInput
-          type='text'
-          value={name}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-            setName(e.target.value)
-          }
-        />
-      </FormGroup>
-      <FormGroup>
-        <FormPrimaryButton onClick={updateStorageName}>
-          Update storage name
-        </FormPrimaryButton>
-      </FormGroup>
-      <hr />
-      <FormHeading depth={2}>Remove Storage</FormHeading>
-      {storage.cloudStorage != null && (
-        <FormBlockquote>
-          Your cloud storage will not be deleted by clicking this button. To
-          delete cloud storage too, check cloud storage info section.
-        </FormBlockquote>
-      )}
-      <FormGroup>
-        <FormSecondaryButton onClick={removeCallback}>
-          Remove Storage
-        </FormSecondaryButton>
-      </FormGroup>
-      <hr />
+      <PageDraggableHeader iconPath={mdiBook} label='Storage Settings' />
+      <PageScrollableContent>
+        <FormGroup>
+          <FormLabel>{t('storage.name')}</FormLabel>
+          <FormTextInput
+            type='text'
+            value={name}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+              setName(e.target.value)
+            }
+          />
+        </FormGroup>
+        <FormGroup>
+          <FormPrimaryButton onClick={updateStorageName}>
+            Update storage name
+          </FormPrimaryButton>
+        </FormGroup>
+        <hr />
+        <FormHeading depth={2}>Remove Storage</FormHeading>
+        {storage.cloudStorage != null && (
+          <FormBlockquote>
+            Your cloud storage will not be deleted by clicking this button. To
+            delete cloud storage too, check cloud storage info section.
+          </FormBlockquote>
+        )}
+        <FormGroup>
+          <FormSecondaryButton onClick={removeCallback}>
+            Remove Storage
+          </FormSecondaryButton>
+        </FormGroup>
+        <hr />
 
-      <FormHeading depth={2}>Cloud Storage info</FormHeading>
-      {storage.cloudStorage == null ? (
-        <LinkCloudStorageForm storage={storage} />
-      ) : (
-        <ManageCloudStorageForm storage={storage} />
-      )}
+        <FormHeading depth={2}>Cloud Storage info</FormHeading>
+        {storage.cloudStorage == null ? (
+          <LinkCloudStorageForm storage={storage} />
+        ) : (
+          <ManageCloudStorageForm storage={storage} />
+        )}
+      </PageScrollableContent>
     </PageContainer>
   )
 }
+
+export default StorageEditPage

From 5a2d259905ae9ae2d5b258d84b2b770238b65923 Mon Sep 17 00:00:00 2001
From: Junyoung Choi <rokt33r.choi@gmail.com>
Date: Thu, 4 Jun 2020 14:16:07 +0900
Subject: [PATCH 9/9] Replace new storage icon

---
 src/components/organisms/Navigator.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/organisms/Navigator.tsx b/src/components/organisms/Navigator.tsx
index 578d143c4e..b4b3b88c73 100644
--- a/src/components/organisms/Navigator.tsx
+++ b/src/components/organisms/Navigator.tsx
@@ -7,7 +7,7 @@ import { useDialog, DialogIconTypes } from '../../lib/dialog'
 import { useContextMenu, MenuTypes } from '../../lib/contextMenu'
 import { usePreferences } from '../../lib/preferences'
 import StorageNavigatorFragment from '../molecules/StorageNavigatorFragment'
-import { mdiPlus, mdiHammerWrench } from '@mdi/js'
+import { mdiPlus, mdiHammerWrench, mdiBookPlusMultiple } from '@mdi/js'
 import NavigatorButton from '../atoms/NavigatorButton'
 import Spacer from '../atoms/Spacer'
 import { usePathnameWithoutNoteId } from '../../lib/router'
@@ -97,7 +97,7 @@ const Navigator = () => {
       <TopControl onContextMenu={openSideNavContextMenu}>
         <Spacer />
         <NavigatorButton
-          iconPath={mdiPlus}
+          iconPath={mdiBookPlusMultiple}
           title='New Storage'
           active={pathname === '/app/storages'}
           onClick={() => push('/app/storages')}