UI fixes

Author: gabriel

src/renderer/auth/provisions.tsx

@@ -33,7 +33,7 @@ import DeprovisionDialog from './provision/deprovision'
 import {authTypeDescription} from './helper'
 import {breakWords, contentTop} from '../theme'
 import {openSnack, openSnackError} from '../snack'
-import {store as appStore} from '../store'
+import {store as appStore, loadStatus} from '../store'
 
 type Props = {}
 
@@ -69,6 +69,7 @@ export default (props: Props) => {
   const fido2Enabled = appStore.useState((s) => s.fido2Enabled)
 
   React.useEffect(() => {
+    loadStatus()
     refresh(selected)
   }, [])
 
@@ -147,7 +148,7 @@ export default (props: Props) => {
   return (
     <Box display="flex" flexDirection="column" flex={1}>
       <Box display="flex" flexDirection="row" flex={1} style={{height: '100%', position: 'relative'}}>
-        <Box display="flex" flexDirection="column" style={{width: 204}}>
+        <Box display="flex" flexDirection="column" style={{width: 204, background: column2Color}}>
           <Box
             display="flex"
             flexDirection="row"
@@ -174,7 +175,6 @@ export default (props: Props) => {
                 width: col1,
                 overflowX: 'hidden',
                 overflowY: 'auto',
-                background: column2Color,
               }}
             >
               <Table size="small">

src/renderer/auth/unlock/index.tsx

@@ -7,7 +7,7 @@ import AuthUnlockPasswordView from './password'
 import AuthUnlockFIDO2View from './fido2'
 import AuthForgotView from './forgot'
 
-import {store, unlocked} from '../../store'
+import {store, unlocked, loadStatus} from '../../store'
 import {authUnlock} from '../../rpc/keys'
 import {AuthType} from '../../rpc/keys.d'
 import {Action} from './actions'
@@ -19,6 +19,10 @@ export default (props: Props) => {
 
   const fido2Enabled = store.useState((s) => s.fido2Enabled)
 
+  React.useEffect(() => {
+    loadStatus()
+  }, [])
+
   let actions = [] as Action[]
 
   switch (step) {

src/renderer/keys/grid.tsx

@@ -246,30 +246,38 @@ export default (_: {}) => {
         <Box
           display="flex"
           flexDirection="row"
-          style={{paddingLeft: 8, paddingTop: 20, position: 'relative'}}
+          style={{paddingLeft: 8, paddingTop: 20, marginTop: 8, position: 'relative'}}
         >
-          <IconButton color="primary" onClick={() => setCreateOpen(true)} id="newKeyButton">
-            <Tooltip title="Generate Key" placement="top">
-              <AddIcon />
-            </Tooltip>
-          </IconButton>
-          <IconButton onClick={openImport}>
-            <Tooltip title="Import Key" placement="top">
-              <ImportIcon />
-            </Tooltip>
-          </IconButton>
-          <IconButton onClick={() => setSearchOpen(true)}>
-            <Tooltip title="Search Keys" placement="top">
-              <SearchIcon />
-            </Tooltip>
-          </IconButton>
-          {syncEnabled && (
-            <IconButton onClick={sync} disabled={syncing}>
-              <Tooltip title="Sync Vault" placement="top">
-                <SyncIcon />
+          <Box style={{marginTop: 4}}>
+            <IconButton
+              size="small"
+              color="primary"
+              onClick={() => setCreateOpen(true)}
+              id="newKeyButton"
+              style={{marginRight: 12}}
+            >
+              <Tooltip title="Generate Key" placement="top">
+                <AddIcon />
               </Tooltip>
             </IconButton>
-          )}
+            <IconButton size="small" onClick={openImport} style={{marginRight: 12}}>
+              <Tooltip title="Import Key" placement="top">
+                <ImportIcon />
+              </Tooltip>
+            </IconButton>
+            <IconButton size="small" onClick={() => setSearchOpen(true)} style={{marginRight: 12}}>
+              <Tooltip title="Search Keys" placement="top">
+                <SearchIcon />
+              </Tooltip>
+            </IconButton>
+            {syncEnabled && (
+              <IconButton size="small" onClick={sync} disabled={syncing} style={{marginRight: 12}}>
+                <Tooltip title="Sync Vault" placement="top">
+                  <SyncIcon />
+                </Tooltip>
+              </IconButton>
+            )}
+          </Box>
 
           <Box display="flex" flexDirection="row" flexGrow={1} />
           <TextField
@@ -278,7 +286,7 @@ export default (_: {}) => {
             value={input}
             onChange={onInputChange}
             inputProps={{style: {paddingTop: 8, paddingBottom: 8}}}
-            style={{marginTop: 8, marginBottom: 8, marginRight: 10, width: 300}}
+            style={{marginBottom: 8, marginRight: 10, width: 300}}
           />
 
           <SearchDialog open={searchOpen} close={() => setSearchOpen(false)} reload={reload} />

src/renderer/root.tsx

@@ -71,10 +71,6 @@ export default (_: {}) => {
     snackOpen: s.snackOpen,
   }))
 
-  React.useEffect(() => {
-    loadStatus()
-  }, [])
-
   return (
     <ThemeProvider theme={theme}>
       <Box display="flex" flex={1} flexDirection="row" style={{height: '100%'}} onContextMenu={onContextMenu}>