From 14bad4dc72a724cbcc6c7c79ff65a35113fa2e2e Mon Sep 17 00:00:00 2001 From: Sean Baines Date: Sun, 5 Jul 2020 14:51:19 +0100 Subject: [PATCH] Reuse text button styles --- .../categories/categories.styles.ts | 14 ---------- src/components/categories/categories.tsx | 5 +++- src/components/category/category.styles.ts | 12 --------- src/components/category/category.tsx | 3 ++- .../choose-category/choose-category.styles.ts | 15 ----------- .../choose-category/choose-category.tsx | 7 ++--- src/components/login/login.styles.ts | 11 -------- src/components/login/login.tsx | 3 ++- src/components/overview/overview.tsx | 26 +++++++++---------- src/components/profile/profile.tsx | 10 +++---- src/components/transactions/transactions.tsx | 26 +++++++++---------- src/styles/common.ts | 13 ++++++++++ src/styles/global.ts | 5 ++++ 13 files changed, 61 insertions(+), 89 deletions(-) delete mode 100644 src/components/choose-category/choose-category.styles.ts diff --git a/src/components/categories/categories.styles.ts b/src/components/categories/categories.styles.ts index 2aec22e..6c7e1b9 100644 --- a/src/components/categories/categories.styles.ts +++ b/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}; - ` -}) diff --git a/src/components/categories/categories.tsx b/src/components/categories/categories.tsx index 480f8fe..22b387b 100644 --- a/src/components/categories/categories.tsx +++ b/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 = () => { /> ))} - setCreateNewCategory(true)}>New Category +
+ + setCreateNewCategory(true)}>New Category diff --git a/src/components/category/category.styles.ts b/src/components/category/category.styles.ts index 3e9584b..9fa7074 100644 --- a/src/components/category/category.styles.ts +++ b/src/components/category/category.styles.ts @@ -24,15 +24,3 @@ export const CategoryColor = styled.button(({ 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; - ` -}) diff --git a/src/components/category/category.tsx b/src/components/category/category.tsx index 4fc20e1..6a0a267 100644 --- a/src/components/category/category.tsx +++ b/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 => { required /> - {props.submitText && {props.submitText}} + {props.submitText && {props.submitText}} ) diff --git a/src/components/choose-category/choose-category.styles.ts b/src/components/choose-category/choose-category.styles.ts deleted file mode 100644 index c67f210..0000000 --- a/src/components/choose-category/choose-category.styles.ts +++ /dev/null @@ -1,15 +0,0 @@ -import styled, { css } from 'styled-components' - -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}; - ` -}) diff --git a/src/components/choose-category/choose-category.tsx b/src/components/choose-category/choose-category.tsx index dcbfec1..4389ead 100644 --- a/src/components/choose-category/choose-category.tsx +++ b/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 = ({ onCategoryClick, onCreateCategoryClic } onClick={() => onCategoryClick(null)} /> - New Category +
+ + New Category ) } diff --git a/src/components/login/login.styles.ts b/src/components/login/login.styles.ts index 3368332..eab7bfa 100644 --- a/src/components/login/login.styles.ts +++ b/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; - ` -}) diff --git a/src/components/login/login.tsx b/src/components/login/login.tsx index 17ace66..c660814 100644 --- a/src/components/login/login.tsx +++ b/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 && {error.message}} - Log in + Log in ) diff --git a/src/components/overview/overview.tsx b/src/components/overview/overview.tsx index 4a7a19c..f89a6fd 100644 --- a/src/components/overview/overview.tsx +++ b/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 ( <> - - + + {activeDate && (
)} - + { - - Total Categorised - {formatCurrency(total)} - - - + + Total Categorised + {formatCurrency(total)} + + + {orderedItems.map(c => (
- + { extra={formatCurrency(c.total)} onClick={() => handleSetSelectedCategory(c.id)} /> - + {selectedCategoryId === c.id && c.transactions.map(transaction => ( @@ -108,7 +108,7 @@ const Overview: React.FC = () => {
))} - + {selectedTransaction && ( setSelectedTransactionId(null)} /> diff --git a/src/components/profile/profile.tsx b/src/components/profile/profile.tsx index 9ca930a..6d841fa 100644 --- a/src/components/profile/profile.tsx +++ b/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 ( - - + +
- + - + ) } diff --git a/src/components/transactions/transactions.tsx b/src/components/transactions/transactions.tsx index fa95059..0874906 100644 --- a/src/components/transactions/transactions.tsx +++ b/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 ( <> - - + + {activeDate && (
{ /> )} - - - Total Spent - {formatCurrency(total)} - + + + Total Spent + {formatCurrency(total)} + { placeholder='Search for a merchant' onChange={({ target: { value } }) => setSearchQuery(value)} /> - - + + {transactionsByDay.map(day => (
- + - + {day.transactions.map(transaction => ( {
))} - + {selectedTransaction && ( setSelectedTransactionId(null)} /> diff --git a/src/styles/common.ts b/src/styles/common.ts index 1cf7658..1c789dd 100644 --- a/src/styles/common.ts +++ b/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; + ` +}) diff --git a/src/styles/global.ts b/src/styles/global.ts index c838ec5..f99e2e2 100644 --- a/src/styles/global.ts +++ b/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}; + } ` })