Styled NoteList and Note Detail when there is no note

BoostIO · Dec 12, 2019 · 7b60a51 · 7b60a51
1 parent 2f08426
commit 7b60a51
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 8 deletions.
diff --git a/src/components/NotePage/NoteList/NoteList.tsx b/src/components/NotePage/NoteList/NoteList.tsx
@@ -22,10 +22,6 @@ export const StyledNoteListContainer = styled.div`
     padding: 0;
     list-style: none;
     overflow-y: auto;
-
-    li.empty {
-      color: ${({ theme }) => theme.uiTextColor};
-    }
   }
 
   .control {
@@ -137,7 +133,7 @@ const NoteList = ({
             </li>
           )
         })}
-        {notes.length === 0 && <li className='empty'>No notes</li>}
+        {notes.length === 0 && ''}
       </ul>
     </StyledNoteListContainer>
   )

diff --git a/src/components/NotePage/NotePage.tsx b/src/components/NotePage/NotePage.tsx
@@ -1,5 +1,6 @@
 import React, { useMemo, useCallback } from 'react'
 import NoteList from './NoteList'
+import styled from '../../lib/styled'
 import NoteDetail from './NoteDetail'
 import {
   useRouteParams,
@@ -18,6 +19,11 @@ import { useDialog, DialogIconTypes } from '../../lib/dialog'
 import FileDropZone from '../atoms/FileDropZone'
 import { convertCSONFileToNote } from '../../lib/legacy-import'
 
+export const StyledNoteDetailNoNote = styled.div`
+  text-align: center;
+  margin-top: 300px;
+`
+
 function sortByUpdatedAt(a: NoteDoc, b: NoteDoc) {
   return b.updatedAt.localeCompare(a.updatedAt)
 }
@@ -155,8 +161,9 @@ export default () => {
         }
       })
     },
-    [messageBox, purgeNoteFromDb])
-
+    [messageBox, purgeNoteFromDb]
+  )
+
   const importDrop = useCallback(
     (files: File[]) => {
       files.forEach(async file => {
@@ -191,7 +198,12 @@ export default () => {
       }
       right={
         currentNote == null ? (
-          <div>No note selected</div>
+          <StyledNoteDetailNoNote>
+            <div>
+              <h1>Command(⌘) + N</h1>
+              <h2>to create a new note</h2>
+            </div>
+          </StyledNoteDetailNoNote>
         ) : (
           <NoteDetail
             storageId={storageId}