Reuse text button styles

src/components/categories/categories.styles.ts

@@ -29,17 +29,3 @@ export const Body = styled.div(({ theme }) => {
     padding-top: 0;
   `
 })
-
-export const NewCategory = styled.button(({ theme }) => {
-  return css`
-    padding: ${theme.space[2]} 0;
-    margin-top: ${theme.space[2]};
-    border: none;
-    width: 100%;
-    background: none;
-    text-align: center;
-    font-size: ${theme.fontSizes[2]};
-    cursor: pointer;
-    border-top: ${theme.borders.default};
-  `
-})

src/components/categories/categories.tsx

@@ -11,6 +11,7 @@ import { getCategoryItems } from 'store/categories/selectors'
 import { fetchCategories } from 'store/categories/actions'
 import { Category } from 'store/categories/types'
 import { ForwardIcon } from 'icons'
+import * as sc from 'styles/common'
 
 import * as s from './categories.styles'
 
@@ -55,7 +56,9 @@ const Categories: React.FC = () => {
             />
           ))}
 
-          <s.NewCategory onClick={() => setCreateNewCategory(true)}>New Category</s.NewCategory>
+          <hr />
+
+          <sc.TextButton onClick={() => setCreateNewCategory(true)}>New Category</sc.TextButton>
         </Layout>
       </s.Wrapper>
 

src/components/category/category.styles.ts

@@ -24,15 +24,3 @@ export const CategoryColor = styled.button<CategoryColorProps>(({ theme, color }
     cursor: pointer;
   `
 })
-
-export const Submit = styled.button.attrs({ type: 'submit' })(({ theme }) => {
-  return css`
-    padding: ${theme.space[2]} 0;
-    border: none;
-    width: 100%;
-    background: none;
-    text-align: center;
-    font-size: ${theme.fontSizes[2]};
-    cursor: pointer;
-  `
-})

src/components/category/category.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 
 import TextInput from 'components/text-input'
 import { useFocusInput } from 'hooks'
+import * as sc from 'styles/common'
 
 import * as s from './category.styles'
 
@@ -30,7 +31,7 @@ const Category: React.FC<Props> = props => {
           required
         />
 
-        {props.submitText && <s.Submit>{props.submitText}</s.Submit>}
+        {props.submitText && <sc.TextButton>{props.submitText}</sc.TextButton>}
       </form>
     </s.Wrapper>
   )

src/components/choose-category/choose-category.tsx

@@ -5,8 +5,7 @@ import { ListItem } from 'components/list'
 import { getCategoryItems } from 'store/categories/selectors'
 import { Transaction } from 'store/transactions/types'
 import { ForwardIcon } from 'icons'
-
-import * as s from './choose-category.styles'
+import * as sc from 'styles/common'
 
 export interface Props {
   onCategoryClick: (categoryId: Transaction['category']) => any
@@ -30,7 +29,9 @@ const ChooseCategory: React.FC<Props> = ({ onCategoryClick, onCreateCategoryClic
 
       <ListItem title='Uncategorised' extra={<ForwardIcon />} onClick={() => onCategoryClick(null)} />
 
-      <s.NewCategory onClick={onCreateCategoryClick}>New Category</s.NewCategory>
+      <hr />
+
+      <sc.TextButton onClick={onCreateCategoryClick}>New Category</sc.TextButton>
     </>
   )
 }

src/components/login/login.styles.ts

@@ -46,14 +46,3 @@ export const FormError = styled.p(({ theme }) => {
     font-size: ${theme.fontSizes[0]};
   `
 })
-
-export const Submit = styled.button(({ theme }) => {
-  return css`
-    border: none;
-    background: none;
-    text-align: center;
-    font-size: ${theme.fontSizes[2]};
-    cursor: pointer;
-    margin: 0 auto;
-  `
-})

src/components/login/login.tsx

@@ -8,6 +8,7 @@ import { getIsAuthenticated } from 'store/auth/selectors'
 import { getError } from 'store/errors/selectors'
 import { LOGIN_FAIL } from 'store/auth/constants'
 import { useFocusInput } from 'hooks'
+import * as sc from 'styles/common'
 
 import * as s from './login.styles'
 
@@ -63,7 +64,7 @@ const Login: React.FC = () => {
 
         {error.id === LOGIN_FAIL && <s.FormError>{error.message}</s.FormError>}
 
-        <s.Submit type='submit'>Log in</s.Submit>
+        <sc.TextButton type='submit'>Log in</sc.TextButton>
       </s.Form>
     </s.Wrapper>
   )

src/components/overview/overview.tsx

@@ -15,7 +15,7 @@ import { Category } from 'store/categories/types'
 import { getActiveDate } from 'store/view/selectors'
 import { colors } from 'theme'
 import { formatCurrency, groupByCategory } from 'utils'
-import * as s from 'styles/common'
+import * as sc from 'styles/common'
 
 const Overview: React.FC = () => {
   const activeDate = useSelector(getActiveDate)
@@ -49,13 +49,13 @@ const Overview: React.FC = () => {
 
   return (
     <>
-      <s.Wrapper>
-        <s.HeaderWrapper>
+      <sc.Wrapper>
+        <sc.HeaderWrapper>
           {activeDate && (
             <Header title='Overview' subtitle={format(new Date(activeDate), 'MMMM yyyy')} withDateSelect />
           )}
 
-          <s.UpperSection>
+          <sc.UpperSection>
             <ResponsiveContainer height={200}>
               <PieChart>
                 <Pie
@@ -75,25 +75,25 @@ const Overview: React.FC = () => {
               </PieChart>
             </ResponsiveContainer>
 
-            <s.Total>
-              <s.TotalLabel>Total Categorised</s.TotalLabel>
-              <s.TotalAmount>{formatCurrency(total)}</s.TotalAmount>
-            </s.Total>
-          </s.UpperSection>
-        </s.HeaderWrapper>
+            <sc.Total>
+              <sc.TotalLabel>Total Categorised</sc.TotalLabel>
+              <sc.TotalAmount>{formatCurrency(total)}</sc.TotalAmount>
+            </sc.Total>
+          </sc.UpperSection>
+        </sc.HeaderWrapper>
 
         <Layout>
           {orderedItems.map(c => (
             <div key={c.category?.id ?? 'Uncategorised'}>
-              <s.ListHeadingWrapper>
+              <sc.ListHeadingWrapper>
                 <ListHeading
                   withBadge
                   badgeColor={c.category?.color}
                   title={c.category?.name ?? 'Uncategorised'}
                   extra={formatCurrency(c.total)}
                   onClick={() => handleSetSelectedCategory(c.id)}
                 />
-              </s.ListHeadingWrapper>
+              </sc.ListHeadingWrapper>
 
               {selectedCategoryId === c.id &&
                 c.transactions.map(transaction => (
@@ -108,7 +108,7 @@ const Overview: React.FC = () => {
             </div>
           ))}
         </Layout>
-      </s.Wrapper>
+      </sc.Wrapper>
 
       {selectedTransaction && (
         <TransactionFlow transaction={selectedTransaction} exitFlow={() => setSelectedTransactionId(null)} />

src/components/profile/profile.tsx

@@ -4,7 +4,7 @@ import { useDispatch } from 'react-redux'
 import Layout from 'components/layout'
 import Header from 'components/header'
 import { logout } from 'store/auth/actions'
-import * as s from 'styles/common'
+import * as sc from 'styles/common'
 
 const Profile: React.FC = () => {
   const dispatch = useDispatch()
@@ -14,15 +14,15 @@ const Profile: React.FC = () => {
   }
 
   return (
-    <s.Wrapper>
-      <s.HeaderWrapper>
+    <sc.Wrapper>
+      <sc.HeaderWrapper>
         <Header title='Profile' />
-      </s.HeaderWrapper>
+      </sc.HeaderWrapper>
 
       <Layout>
         <button onClick={handleLogout}>Log out</button>
       </Layout>
-    </s.Wrapper>
+    </sc.Wrapper>
   )
 }
 

src/components/transactions/transactions.tsx

@@ -13,7 +13,7 @@ import { Transaction } from 'store/transactions/types'
 import { getTransactionItems } from 'store/transactions/selectors'
 import { getActiveDate, getSelectedCategoryId, getMinAmount, getMaxAmount } from 'store/view/selectors'
 import { formatCurrency, groupByDay } from 'utils'
-import * as s from 'styles/common'
+import * as sc from 'styles/common'
 
 const Transactions: React.FC = () => {
   const activeDate = useSelector(getActiveDate)
@@ -62,8 +62,8 @@ const Transactions: React.FC = () => {
 
   return (
     <>
-      <s.Wrapper>
-        <s.HeaderWrapper>
+      <sc.Wrapper>
+        <sc.HeaderWrapper>
           {activeDate && (
             <Header
               title='Transactions'
@@ -73,27 +73,27 @@ const Transactions: React.FC = () => {
             />
           )}
 
-          <s.UpperSection>
-            <s.Total>
-              <s.TotalLabel>Total Spent</s.TotalLabel>
-              <s.TotalAmount>{formatCurrency(total)}</s.TotalAmount>
-            </s.Total>
+          <sc.UpperSection>
+            <sc.Total>
+              <sc.TotalLabel>Total Spent</sc.TotalLabel>
+              <sc.TotalAmount>{formatCurrency(total)}</sc.TotalAmount>
+            </sc.Total>
 
             <TextInput
               type='search'
               value={searchQuery}
               placeholder='Search for a merchant'
               onChange={({ target: { value } }) => setSearchQuery(value)}
             />
-          </s.UpperSection>
-        </s.HeaderWrapper>
+          </sc.UpperSection>
+        </sc.HeaderWrapper>
 
         <Layout>
           {transactionsByDay.map(day => (
             <div key={day.date}>
-              <s.ListHeadingWrapper>
+              <sc.ListHeadingWrapper>
                 <ListHeading title={day.date} extra={formatCurrency(day.total)} />
-              </s.ListHeadingWrapper>
+              </sc.ListHeadingWrapper>
 
               {day.transactions.map(transaction => (
                 <ListItem
@@ -108,7 +108,7 @@ const Transactions: React.FC = () => {
             </div>
           ))}
         </Layout>
-      </s.Wrapper>
+      </sc.Wrapper>
 
       {selectedTransaction && (
         <TransactionFlow transaction={selectedTransaction} exitFlow={() => setSelectedTransactionId(null)} />

src/styles/common.ts

@@ -56,3 +56,16 @@ export const ListHeadingWrapper = styled.div(({ theme }) => {
     top: 0;
   `
 })
+
+export const TextButton = styled.button(({ theme }) => {
+  return css`
+    display: block;
+    border: none;
+    background: none;
+    text-align: center;
+    padding: ${theme.space[2]} 0;
+    font-size: ${theme.fontSizes[2]};
+    cursor: pointer;
+    margin: 0 auto;
+  `
+})

src/styles/global.ts

@@ -19,6 +19,11 @@ const GlobalStyles = createGlobalStyle(({ theme }) => {
       font-weight: ${theme.fontWeights.medium};
       line-height: calc(1em + 2px);
     }
+
+    hr {
+      border: none;
+      border-top: ${theme.borders.default};
+    }
   `
 })