Spruce up settings page

JohnStarich · Mar 1, 2020 · 0202f7b · 0202f7b
1 parent 9668a40
commit 0202f7b
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 18 deletions.
diff --git a/web/src/App.css b/web/src/App.css
@@ -68,19 +68,6 @@
   margin: 0 auto;
 }
 
-.advanced-settings:hover {
-  text-decoration: none;
-}
-
-.advanced-settings button {
-  color: #A00;
-}
-
-.advanced-settings:hover button {
-  background-color: #A00;
-  color: white;
-}
-
 .settings-icon {
   transform: scale(2);
 }
diff --git a/web/src/Settings.css b/web/src/Settings.css
@@ -0,0 +1,54 @@
+.settings-tiles {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  list-style: none;
+  padding: 0;
+  justify-content: center;
+  align-items: stretch;
+}
+
+.settings-tiles li {
+  flex: 1 1 0;
+  min-width: 15em;
+  max-width: 18em;
+}
+
+.settings-tiles li a {
+  box-sizing: border-box;
+  height: calc(100% - 2em);
+  display: block;
+  padding: 1.5em;
+  margin: 1em;
+  border: 1px solid #DDD;
+  border-radius: 0.5em;
+}
+
+.settings-tiles li a h2 {
+  font-size: 1.2em;
+  text-align: center;
+  margin-bottom: 1em;
+}
+
+.settings-tiles li a p {
+  color: #000;
+  text-decoration: none;
+}
+
+.settings-tiles li a:hover {
+  text-decoration: none;
+  background-color: #EEE;
+}
+
+.advanced-settings:hover {
+  text-decoration: none;
+}
+
+.advanced-settings {
+  color: #A00;
+}
+
+.advanced-settings:hover {
+  color: #600;
+}
+
diff --git a/web/src/Settings.js b/web/src/Settings.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import './Settings.css';
 
 import Accounts from './Accounts';
 import AdvancedOptions from './AdvancedOptions';
@@ -14,17 +15,39 @@ export default function ({ match }) {
     <Breadcrumbs as={Breadcrumb} skip={1} render={({ title, match }) =>
       <NavLink className="breadcrumb-item" to={match.url} exact>{title}</NavLink>
     }>
-      <Crumb title="Settings" match={match} /> 
+      <Crumb title="Settings" match={match} />
       <Switch>
         <Route path={`${match.path}/accounts`} component={Accounts} />
         <Route path={`${match.path}/balances`} component={BalanceSettings} />
         <Route path={`${match.path}/categories`} component={Categories} />
         <Route path={`${match.path}/advanced`} component={AdvancedOptions} />
         <Route exact path={match.path}>
-          <Link to={`${match.url}/accounts`}>Accounts</Link>
-          <Link to={`${match.url}/balances`}>Balances</Link>
-          <Link to={`${match.url}/categories`}>Categories</Link>
-          <Link to={`${match.url}/advanced`} className="advanced-settings">Advanced</Link>
+          <ul className="settings-tiles">
+            <li>
+              <Link to={`${match.url}/accounts`}>
+                <h2>Accounts</h2>
+                <p>Add and update bank or credit card accounts.</p>
+              </Link>
+            </li>
+            <li>
+              <Link to={`${match.url}/balances`}>
+                <h2>Balances</h2>
+                <p>Edit starting balances for accounts.</p>
+              </Link>
+            </li>
+            <li>
+              <Link to={`${match.url}/categories`}>
+                <h2>Categories</h2>
+                <p>Add and edit transaction categories.</p>
+              </Link>
+            </li>
+            <li>
+              <Link to={`${match.url}/advanced`} className="advanced-settings">
+                <h2>Advanced</h2>
+                <p>Power user tools.</p>
+              </Link>
+            </li>
+          </ul>
         </Route>
       </Switch>
     </Breadcrumbs>