diff --git a/public/index.html b/public/index.html index bae4362..f1f8a51 100644 --- a/public/index.html +++ b/public/index.html @@ -25,11 +25,6 @@ overflow: hidden; margin: 0; } - - b, - strong { - font-weight: 900; - } diff --git a/src/config/theme.ts b/src/config/theme.ts index c8b1a31..7b6f7c9 100644 --- a/src/config/theme.ts +++ b/src/config/theme.ts @@ -13,7 +13,7 @@ export const THEME: ThemeOptions = { }, background: { default: '#fff', - paper: grey[50], + paper: grey[100], }, divider: grey[200], }, diff --git a/src/views/MainApp/Sidebar/Files/FilterFiles.tsx b/src/views/MainApp/Sidebar/Files/FilterFiles.tsx index f66fd4f..33c0fcc 100644 --- a/src/views/MainApp/Sidebar/Files/FilterFiles.tsx +++ b/src/views/MainApp/Sidebar/Files/FilterFiles.tsx @@ -24,7 +24,8 @@ const FilterFiles = (props: Props) => { const useStyles = makeStyles((theme) => ({ formControl: { display: 'flex', - padding: `${theme.spacing(3)}px ${theme.spacing(2)}px ${theme.spacing(2)}px`, + marginTop: `-${theme.spacing(3)}px`, + marginBottom: `${theme.spacing(3)}px`, }, })); diff --git a/src/views/MainApp/Sidebar/Files/index.tsx b/src/views/MainApp/Sidebar/Files/index.tsx index 26f747d..75d4ee9 100644 --- a/src/views/MainApp/Sidebar/Files/index.tsx +++ b/src/views/MainApp/Sidebar/Files/index.tsx @@ -1,11 +1,11 @@ -import { List, ListItem, ListItemText, makeStyles, Typography, useTheme } from '@material-ui/core'; +import { Box, List, ListItem, ListItemText, makeStyles, useTheme } from '@material-ui/core'; import { grey } from '@material-ui/core/colors'; import moment from 'moment'; import React, { useMemo } from 'react'; import { NoteItem } from '@slater-notes/core'; import { useStoreActions, useStoreState } from '../../../../stores/mainStore/typedHooks'; import DefaultDialog from '../../../../components/Dialogs/DefaultDialog'; -import { Plus, Star, Trash } from 'react-feather'; +import { Star, Trash } from 'react-feather'; import DefaultIconButton from '../../../../components/Buttons/DefaultIconButton'; import FilterFiles from './FilterFiles'; import { throttle } from 'lodash'; @@ -93,22 +93,27 @@ const Files = () => { className={classes.container} onScroll={handleContainerScrollThrottled} > - {activeFolderId === 'all' && setFilter(value)} />} - -
- - {getTitle()} - - {activeFolderId === 'trash' && ( - n.isDeleted)} - onClick={() => { - setEmptyTrashConfirm(true); - }} - /> - )} +
+
+ + {getTitle()} + + {activeFolderId === 'trash' && ( + n.isDeleted)} + style={{ + marginTop: `-${theme.spacing(0.5)}px`, + }} + onClick={() => { + setEmptyTrashConfirm(true); + }} + /> + )} +
+ + {activeFolderId === 'all' && setFilter(value)} />}
{useMemo( @@ -121,15 +126,29 @@ const Files = () => { return ( + {activeFolderId === 'all' && items.length === 0 && ( + + + You don't have any notes yet. +
+ Press the New Note button to add a new note. + + } + /> + + )} + {activeFolderId === 'starred' && items.length === 0 && ( + Add notes here by pressing the{' '} {' '} icon. - + } /> @@ -139,11 +158,16 @@ const Files = () => { - When you trash notes, they end up here. Press the{' '} - {' '} + + When you trash notes, they end up here. +
+ Press the{' '} + {' '} icon above to empty the trash. - + } /> @@ -153,11 +177,9 @@ const Files = () => { - Press the{' '} - - New Note button to add a new note in this folder. - + + Press the New Note button to add a new note in this folder. + } /> @@ -230,28 +252,28 @@ const useStyles = makeStyles((theme) => ({ container: { overflowY: 'auto', backgroundColor: theme.palette.background.default, - padding: `0 ${theme.spacing(2)}px`, + }, + + titleContainer: { + padding: `0 ${theme.spacing(3)}px`, }, title: { display: 'flex', justifyContent: 'space-between', - padding: `${theme.spacing(3)}px ${theme.spacing(4)}px`, + padding: `${theme.spacing(3)}px 0`, marginBottom: theme.spacing(2), }, noteItem: { - background: theme.palette.background.paper, - borderRadius: 6, - marginBottom: theme.spacing(2), + marginBottom: theme.spacing(1), '&.MuiListItem-gutters': { - padding: `${theme.spacing(2)}px ${theme.spacing(4)}px`, + padding: `${theme.spacing(2)}px ${theme.spacing(3)}px`, }, '&.Mui-selected, &.Mui-selected:hover': { - background: theme.palette.primary.main, - color: theme.palette.primary.contrastText, + background: theme.palette.background.paper, '& .MuiListItemText-root': { '& .MuiListItemText-secondary': { diff --git a/src/views/MainApp/Sidebar/Folders/ListGroup.tsx b/src/views/MainApp/Sidebar/Folders/ListGroup.tsx index 29849d9..085029a 100644 --- a/src/views/MainApp/Sidebar/Folders/ListGroup.tsx +++ b/src/views/MainApp/Sidebar/Folders/ListGroup.tsx @@ -64,12 +64,13 @@ const useStyles = makeStyles((theme) => ({ '&.Mui-selected': { color: theme.palette.text.primary, - boxShadow: `inset 4px 0px 0px ${theme.palette.text.primary}`, + boxShadow: `inset 4px 0px 0px ${theme.palette.secondary.main}`, }, '& .MuiListItemText-root': { '& .MuiListItemText-primary': { fontSize: '0.9rem', + fontWeight: theme.typography.fontWeightMedium, }, }, diff --git a/src/views/MainApp/Sidebar/Folders/index.tsx b/src/views/MainApp/Sidebar/Folders/index.tsx index 7e202fb..419e536 100644 --- a/src/views/MainApp/Sidebar/Folders/index.tsx +++ b/src/views/MainApp/Sidebar/Folders/index.tsx @@ -227,14 +227,12 @@ const Folders = () => { key: 'cloudsync', text: 'Cloud Sync', icon: typeof user?.cloudLastSynced === 'number' ? Cloud : CloudOff, - hasNormalTextColor: true, onClick: () => setOpenCloudSync(true), }, { key: 'settings', text: 'Settings', icon: SettingsIcon, - hasNormalTextColor: true, onClick: () => setOpenSettings(true), }, ]} @@ -284,6 +282,7 @@ const useStyles = makeStyles((theme) => ({ display: 'flex', padding: `${theme.spacing(1)}px ${theme.spacing(4)}px`, fontSize: '0.9rem', + fontWeight: theme.typography.fontWeightMedium, textTransform: 'uppercase', justifyContent: 'space-between', position: 'relative',