Merge d361ad9 into 89b6236

jbolda · Oct 18, 2019 · 137b6de · 137b6de
2 parents 89b6236 + d361ad9
commit 137b6de
Show file tree

Hide file tree

Showing 19 changed files with 241 additions and 82 deletions.
diff --git a/public/index.html b/public/index.html
@@ -25,7 +25,7 @@
     <title>finatr</title>
   </head>
 
-  <body>
+  <body style="margin:0">
     <noscript> You need to enable JavaScript to run this app. </noscript>
     <div id="root"></div>
     <!--

diff --git a/src/components/bootstrap/FlexTable.js b/src/components/bootstrap/FlexTable.js
@@ -1,8 +1,18 @@
+/** @jsx jsx */
+import { jsx } from 'theme-ui';
 import React from 'react';
 import { Flex, Box } from 'rebass';
 
 const HeaderRow = ({ items, columns }) => (
-  <Flex flexWrap="wrap">
+  <Flex
+    flexWrap="wrap"
+    sx={{
+      mx: 0,
+      borderColor: 'muted',
+      borderBottomStyle: 'solid',
+      borderBottomWidth: '2px'
+    }}
+  >
     {items.map(item => (
       <HeaderItem columns={columns || items.count} key={item}>
         {item}
@@ -22,7 +32,15 @@ const HeaderItem = ({ children, columns }) => (
 );
 
 const DataRow = ({ items, columns, itemKey, itemHeaders }) => (
-  <Flex flexWrap="wrap" mx={0}>
+  <Flex
+    flexWrap="wrap"
+    sx={{
+      mx: 0,
+      borderColor: 'muted',
+      borderBottomStyle: 'dashed',
+      borderBottomWidth: '1px'
+    }}
+  >
     {items.map((item, index) => (
       <DataItem
         columns={columns || items.count}

diff --git a/src/components/common/footer.js b/src/components/common/footer.js
@@ -1,5 +1,6 @@
-import React from 'react';
-import { Link } from '@reach/router';
+/** @jsx jsx */
+import { jsx } from 'theme-ui';
+import { NavLink } from './link';
 
 export default props => {
   return (
@@ -10,12 +11,12 @@ export default props => {
         alignItems: 'center',
         justifyContent: 'center',
         p: 2,
-        variant: 'styles.footer'
+        variant: 'variants.footer'
       }}
     >
-      <Link to="/" sx={{ variant: 'styles.navlink', p: 2 }}>
+      <NavLink to="/" sx={{ variant: 'styles.navlink', p: 2 }}>
         Home
-      </Link>
+      </NavLink>
     </footer>
   );
 };
diff --git a/src/components/common/header.js b/src/components/common/header.js
@@ -1,53 +1,55 @@
-import React from 'react';
-import { Link } from '@reach/router';
+/** @jsx jsx */
+import { jsx } from 'theme-ui';
+import { NavLink } from './link';
 import { useColorMode } from 'theme-ui';
 import { Flex, Box, Button, Text } from 'rebass';
 
 export default props => {
   const [colorMode, setColorMode] = useColorMode();
   return (
-    <header>
-      <Flex px={2} alignItems="center" flexWrap="wrap">
+    <header sx={{ variant: 'variants.header' }}>
+      <Flex px={2} py={1} alignItems="center" flexWrap="wrap">
         <Box>
           <Text fontWeight="bold">
-            <Link to="/">finatr</Link>
+            <NavLink to="/">finatr</NavLink>
           </Text>
         </Box>
         <Box mx="auto" />
         <Box>
           <Flex flexWrap="wrap">
             <Box>
               <Text p={2}>
-                <Link to="/">Home</Link>
+                <NavLink to="/">Home</NavLink>
               </Text>
             </Box>
             <Box>
               <Text p={2}>
-                <Link to="examples">Examples</Link>
+                <NavLink to="examples">Examples</NavLink>
               </Text>
             </Box>
             <Box>
               <Text p={2}>
-                <Link to="flow">Cash Flow</Link>
+                <NavLink to="flow">Cash Flow</NavLink>
               </Text>
             </Box>
             <Box>
               <Text p={2}>
-                <Link to="accounts">Accounts</Link>
+                <NavLink to="accounts">Accounts</NavLink>
               </Text>
             </Box>
             <Box>
               <Text p={2}>
-                <Link to="import">Import</Link>
+                <NavLink to="import">Import</NavLink>
               </Text>
             </Box>
             <Box>
               <Text p={2}>
-                <Link to="taxes">Taxes</Link>
+                <NavLink to="taxes">Taxes</NavLink>
               </Text>
             </Box>
             <Box>
               <Button
+                sx={{ variant: 'buttons.nav' }}
                 onClick={e => {
                   setColorMode(colorMode === 'light' ? 'dark' : 'light');
                 }}

diff --git a/src/components/common/link.js b/src/components/common/link.js
@@ -0,0 +1,33 @@
+/** @jsx jsx */
+import { jsx } from 'theme-ui';
+import { Link } from '@reach/router';
+
+export default props => {
+  return (
+    <Link
+      to={props.to}
+      sx={{
+        variant: 'variants.link'
+      }}
+    >
+      {props.children}
+    </Link>
+  );
+};
+
+const NavLink = props => {
+  return (
+    <Link
+      to={props.to}
+      sx={{
+        textDecoration: 'none',
+        ':hover': { color: 'muted', textDecoration: 'underline' },
+        variant: 'variants.navLink'
+      }}
+    >
+      {props.children}
+    </Link>
+  );
+};
+
+export { NavLink };
diff --git a/src/components/view/tabView.js b/src/components/view/tabView.js
@@ -1,7 +1,8 @@
+/** @jsx jsx */
+import { jsx } from 'theme-ui';
 import React from 'react';
-import { Box } from 'rebass';
+import { Box, Heading } from 'rebass';
 import { Tabs, TabList, Tab, TabPanels, TabPanel } from '@reach/tabs';
-import '@reach/tabs/styles.css';
 
 class TabView extends React.Component {
   constructor(props) {
@@ -29,15 +30,29 @@ class TabView extends React.Component {
       <Box id={this.props.id} pt={4} pb={4}>
         {!this.props.tabTitles || !this.props.tabContents ? null : (
           <Tabs index={activeTab} onChange={index => this.tabClick(index)}>
-            <TabList>
-              {this.props.tabTitles.map(title => (
-                <Tab key={title}>{title}</Tab>
+            <TabList sx={{ display: 'flex', overflowX: 'auto' }}>
+              {this.props.tabTitles.map((title, index) => (
+                <Tab
+                  key={title}
+                  sx={{
+                    display: 'inline-block',
+                    border: 'none',
+                    background: 'none',
+                    cursor: 'pointer',
+                    borderColor: activeTab === index ? 'primary' : 'muted',
+                    borderBottomStyle: 'solid',
+                    transition: 'all 500ms ease'
+                  }}
+                >
+                  <Heading fontSize={[3, 3, 4]}>{title}</Heading>
+                </Tab>
               ))}
             </TabList>
             <TabPanels>
               {this.props.tabContents.map((content, index) => (
                 <TabPanel
                   key={index}
+                  sx={{ outline: 'none', py: 2 }}
                   data-testid={`${this.props.id}-${this.props.tabTitles[index]
                     .toLowerCase()
                     .replace(' ', '-')}`}

diff --git a/src/index.js b/src/index.js
@@ -34,11 +34,11 @@ class App extends React.Component {
       <State.Provider value={this.state.model}>
         <ThemeProvider theme={theme}>
           <ColorMode />
-          <Flex flexDirection="column" minHeight="98vh">
+          <Flex flexDirection="column" minHeight="100vh">
             <Box p="0" m="0">
               <Header />
             </Box>
-            <Box p="0" m="0" flex="1 1 auto">
+            <Box p="0" my="0" mx="2" flex="1 1 auto">
               <Router>
                 <Homepage path="/" />
                 <StyleGuide path="style-guide" />

diff --git a/src/pages/examples/index.js b/src/pages/examples/index.js
@@ -1,3 +1,5 @@
+/** @jsx jsx */
+import { jsx } from 'theme-ui';
 import React from 'react';
 import { navigate } from '@reach/router';
 import { State } from '../../state';
@@ -46,6 +48,7 @@ const Examples = () => (
               <Heading p={1}>{example.name}</Heading>
               <Text p={1}>{example.content}</Text>
               <Button
+                sx={{ variant: 'buttons.primary' }}
                 onClick={event => loadExample(model, event)}
                 value={example.file}
               >

diff --git a/src/pages/flow/accountInput.js b/src/pages/flow/accountInput.js
@@ -1,3 +1,5 @@
+/** @jsx jsx */
+import { jsx } from 'theme-ui';
 import React from 'react';
 import { State } from '../../state';
 import { Box, Heading, Button } from 'rebass';
@@ -81,7 +83,11 @@ class AccountInput extends React.Component {
                     </Field>
                   </FieldGroup>
 
-                  <Button type="submit" disabled={isSubmitting}>
+                  <Button
+                    sx={{ variant: 'buttons.primary' }}
+                    type="submit"
+                    disabled={isSubmitting}
+                  >
                     Add Account
                   </Button>
                 </form>

diff --git a/src/pages/flow/accountTransactionInput.js b/src/pages/flow/accountTransactionInput.js
@@ -1,3 +1,5 @@
+/** @jsx jsx */
+import { jsx } from 'theme-ui';
 import React from 'react';
 import { State } from '../../state';
 import { Box, Heading, Button } from 'rebass';
@@ -345,7 +347,11 @@ class AccountTransactionInput extends React.Component {
                       prefixID={'debt-'}
                     />
 
-                    <Button type="submit" disabled={isSubmitting}>
+                    <Button
+                      sx={{ variant: 'buttons.primary' }}
+                      type="submit"
+                      disabled={isSubmitting}
+                    >
                       Add Transaction
                     </Button>
                   </form>

diff --git a/src/pages/flow/accounts.js b/src/pages/flow/accounts.js
@@ -1,3 +1,5 @@
+/** @jsx jsx */
+import { jsx } from 'theme-ui';
 import React from 'react';
 import { State } from '../../state';
 
@@ -38,7 +40,10 @@ class AccountFlow extends React.Component {
             tabTitles={['All Accounts', 'Add Account', 'Debt']}
             tabContents={[
               <React.Fragment>
-                <Button onClick={model.toggleAllAccount}>
+                <Button
+                  sx={{ variant: 'buttons.primary' }}
+                  onClick={model.toggleAllAccount}
+                >
                   Toggle All Visibility
                 </Button>
                 <AccountTable
@@ -97,7 +102,7 @@ const AccountTable = ({ data, actions }) =>
         key: account.name,
         data: [
           <Button
-            variant="outline"
+            sx={{ variant: 'buttons.outline' }}
             onClick={actions.toggleAccountVisibility.bind(this, account.name)}
           >
             {account.visible ? `👀` : `🤫`}
@@ -107,15 +112,21 @@ const AccountTable = ({ data, actions }) =>
           `${account.interest.toFixed(2)}%`,
           account.vehicle,
           <Button
-            color="blue"
+            sx={{
+              variant: 'buttons.outline',
+              color: 'blue'
+            }}
             onClick={() =>
               actions.setAccountForm(actions.model, 1, account.name)
             }
           >
             M
           </Button>,
           <Button
-            color="red"
+            sx={{
+              variant: 'buttons.outline',
+              color: 'red'
+            }}
             onClick={actions.deleteAccount.bind(this, account.name)}
           >
             <strong>X</strong>
@@ -170,23 +181,32 @@ const FlexDebtTable = ({ itemHeaders, data, actions }) => (
               account.starting.toFixed(2),
               `${account.interest.toFixed(2)}%`,
               <Button
-                color="green"
+                sx={{
+                  variants: 'outline',
+                  color: 'green'
+                }}
                 onClick={
                   actions.model.forms.accountTransactionFormVisible.toggle
                 }
               >
                 +
               </Button>,
               <Button
-                color="blue"
+                sx={{
+                  variants: 'outline',
+                  color: 'blue'
+                }}
                 onClick={() =>
                   actions.setAccountForm(actions.model, 1, account.name)
                 }
               >
                 M
               </Button>,
               <Button
-                color="red"
+                sx={{
+                  variants: 'outline',
+                  color: 'red'
+                }}
                 onClick={() => actions.model.deleteAccount(account.name)}
               >
                 X
@@ -221,15 +241,21 @@ const PaybackTable = ({ data, actions }) => (
         paybackTransaction.cycle,
         paybackTransaction.value,
         <Button
-          color="blue"
+          sx={{
+            variants: 'outline',
+            color: 'blue'
+          }}
           onClick={() => {
             actions.model.modifyAccountTransaction(data.name, index);
           }}
         >
           M
         </Button>,
         <Button
-          color="red"
+          sx={{
+            variants: 'outline',
+            color: 'green'
+          }}
           onClick={() =>
             actions.model.deleteAccountTransaction(data.name, index)
           }