Merge pull request #10 from opendexnetwork/feat/settings

feat: enable settings and backup warning

Author: maybeast

src/dashboard/Dashboard.tsx

@@ -28,12 +28,12 @@ import { Path } from "../router/Path";
 import Console from "./console/Console";
 import MenuItem, { MenuItemProps } from "./menu/MenuItem";
 import Overview from "./overview/Overview";
-// import SetupWarning from "./SetupWarning";
+import SetupWarning from "./SetupWarning";
 import Trade from "./trade/Trade";
 import Tradehistory from "./tradehistory/Tradehistory";
 import Wallets from "./wallet/Wallets";
-/* import SettingsIcon from "@material-ui/icons/Settings";
-import Settings from "../settings/Settings"; */
+import SettingsIcon from "@material-ui/icons/Settings";
+import Settings from "../settings/Settings";
 
 export const drawerWidth = 200;
 
@@ -187,14 +187,14 @@ const Dashboard = (): ReactElement => {
           </List>
         </Grid>
         <Grid container item direction="column" justify="flex-end">
-          {/* <Grid item container>
+          <Grid item container>
             <MenuItem
               path={Path.SETTINGS}
               text={"Settings"}
               component={Settings}
               icon={SettingsIcon}
             />
-          </Grid> */}
+          </Grid>
           {isElectron() && (
             <Grid item container justify="center">
               <Tooltip title="Disconnect from opendex-docker" placement="top">
@@ -213,18 +213,18 @@ const Dashboard = (): ReactElement => {
         </Grid>
       </Drawer>
       <main className={classes.content}>
-        {/* <Grid item container>
+        <Grid item container>
           {<SetupWarning />}
-        </Grid> */}
+        </Grid>
         <Switch>
           {menuItems.map((item) => (
             <Route exact path={`${path}${item.path}`} key={item.text}>
               {item.component}
             </Route>
           ))}
-          {/* <Route path={`${path}${Path.SETTINGS}`}>
+          <Route path={`${path}${Path.SETTINGS}`}>
             <Settings />
-          </Route> */}
+          </Route>
           <Route exact path={path}>
             <Redirect to={`${path}${Path.OVERVIEW}`} />
           </Route>

src/dashboard/SetupWarning.tsx

@@ -90,7 +90,9 @@ const SetupWarning = inject(BACKUP_STORE)(
                     color="inherit"
                     variant="outlined"
                     onClick={() =>
-                      history.push(`${Path.SETTINGS}${Path.INITIAL_SETUP}`)
+                      history.push(
+                        `${Path.DASHBOARD}${Path.SETTINGS}${Path.INITIAL_SETUP}`
+                      )
                     }
                   >
                     Setup Now

src/settings/BackupDirectory.tsx

@@ -31,8 +31,9 @@ type BackupDirectoryProps = {
 
 const useStyles = makeStyles(() =>
   createStyles({
-    input: {
-      minWidth: 270,
+    inputContainer: {
+      width: "100%",
+      maxWidth: 500,
     },
     messageContainer: {
       minHeight: 50,
@@ -130,9 +131,11 @@ const BackupDirectory = inject(
                 </Grid>
               )
             ) : (
-              <FormControl variant="outlined">
+              <FormControl
+                variant="outlined"
+                className={classes.inputContainer}
+              >
                 <OutlinedInput
-                  className={classes.input}
                   id="backup-input"
                   value={backupDirectory || ""}
                   placeholder="/home/user/opendex-backup"

src/settings/MnemonicPhrase.tsx

@@ -85,6 +85,7 @@ const MnemonicPhrase = inject(BACKUP_STORE)(
                         setChecked((previousChecked) => !previousChecked)
                       }
                       name="checked"
+                      color="default"
                     />
                   }
                   label="I understand that I will not be able to recover my funds if I lose this data"