From e2b0f0473bf1d40250b32a5697a8c345db2ab25c Mon Sep 17 00:00:00 2001 From: mattyl006 Date: Tue, 5 Jul 2022 11:23:31 +0200 Subject: [PATCH] apply utils --- src/App.js | 7 ++-- src/index.css | 12 ++++-- src/utils/colors.js | 7 ++++ src/utils/containers.js | 42 +++++++++++++++++++++ src/utils/fonts.js | 83 +++++++++++++++++++++++++++++++++++++++++ src/utils/theme.js | 10 +++++ 6 files changed, 155 insertions(+), 6 deletions(-) create mode 100644 src/utils/colors.js create mode 100644 src/utils/containers.js create mode 100644 src/utils/fonts.js create mode 100644 src/utils/theme.js diff --git a/src/App.js b/src/App.js index 961ae4c..3850fb4 100644 --- a/src/App.js +++ b/src/App.js @@ -1,5 +1,6 @@ -import styled from 'styled-components'; +import styled, {ThemeProvider} from 'styled-components'; import Media from 'react-media'; +import theme from "./utils/theme"; const H1 = styled.h1` color: green; @@ -7,7 +8,7 @@ const H1 = styled.h1` function App() { return ( - <> +

Hello Gonito mobile! @@ -18,7 +19,7 @@ function App() { Hello Gonito desktop!

- + ); } diff --git a/src/index.css b/src/index.css index c1b1552..ee465bd 100644 --- a/src/index.css +++ b/src/index.css @@ -1,10 +1,16 @@ +@import url('https://fonts.googleapis.com/css2?family=Kanit&family=Roboto:wght@300;400;500&display=swap'); + html { - box-sizing: border-box; - scroll-behavior: smooth; + box-sizing: border-box; + scroll-behavior: smooth; } *, *:before, *:after { - box-sizing: inherit; + box-sizing: inherit; +} + +body { + font-family: 'Roboto', sans-serif; } \ No newline at end of file diff --git a/src/utils/colors.js b/src/utils/colors.js new file mode 100644 index 0000000..fee9997 --- /dev/null +++ b/src/utils/colors.js @@ -0,0 +1,7 @@ +const colors = { + white: '#FCFCFC', + green: '#1B998B', + dark: '#343434', +}; + +export default colors; \ No newline at end of file diff --git a/src/utils/containers.js b/src/utils/containers.js new file mode 100644 index 0000000..5d69130 --- /dev/null +++ b/src/utils/containers.js @@ -0,0 +1,42 @@ +import styled from 'styled-components'; + +const Container = styled.div` + padding: ${({setPadding}) => setPadding ? setPadding : '0'}; + margin: ${({setMargin}) => setMargin ? setMargin : '0'}; + width: ${({setWidth}) => setWidth ? setWidth : 'auto'}; + max-width: ${({setMaxWidth}) => setMaxWidth ? setMaxWidth : 'auto'}; + min-width: ${({setMinWidth}) => setMinWidth ? setMinWidth : 'auto'}; + height: ${({setHeight}) => setHeight ? setHeight : 'auto'}; + max-height: ${({setMaxHeight}) => setMaxHeight ? setMaxHeight : 'auto'}; + min-height: ${({setMinHeight}) => setMinHeight ? setMinHeight : 'auto'}; + background-color: ${({setBackgroundColor}) => setBackgroundColor ? setBackgroundColor : 'transparent'}; + border-radius: ${({setBorderRadius}) => setBorderRadius ? setBorderRadius : '0'}; + box-shadow: ${({shadow}) => shadow ? shadow : 'none'}; + gap: ${({setGap}) => setGap ? setGap : '0'}; + border: ${({setBorder}) => setBorder ? setBorder : 'none'}; + cursor: ${({setCursor}) => setCursor ? setCursor : 'auto'}; + display: ${({setDisplay}) => setDisplay ? setDisplay : 'block'}; + opacity: ${({setOpacity}) => setOpacity ? setOpacity : '1'}; + outline: ${({setOutline}) => setOutline ? setOutline : 'none'}; + transition: opacity 0.3s ease-in-out; +`; + +const FlexRow = styled(Container)` + display: ${({setDisplay}) => setDisplay ? setDisplay : 'flex'}; + justify-content: ${({alignment}) => alignment ? alignment : 'center'}; + align-items: ${({alignmentY}) => alignmentY ? alignmentY : 'center'}; +`; + +const FlexColumn = styled(FlexRow)` + flex-direction: column; + justify-content: ${({alignmentY}) => alignmentY ? alignmentY : 'center'}; + align-items: ${({alignment}) => alignment ? alignment : 'center'}; +`; + +const Grid = styled(Container)` + display: grid; + grid-template-columns: ${({setTemplateColumns}) => setTemplateColumns ? setTemplateColumns : 'auto'}; + grid-template-rows: ${({setTemplateRows}) => setTemplateRows ? setTemplateRows : 'auto'}; +`; + +export {Container, FlexRow, FlexColumn, Grid}; \ No newline at end of file diff --git a/src/utils/fonts.js b/src/utils/fonts.js new file mode 100644 index 0000000..df0124e --- /dev/null +++ b/src/utils/fonts.js @@ -0,0 +1,83 @@ +import styled from 'styled-components'; +import {Container} from './containers'; + +const H1 = styled(Container)` + font-family: 'Kanit', sans-serif; + font-weight: 400; + font-size: 24px; + line-height: 24px; + color: ${({theme, color}) => color ? color : theme.colors.dark}; + + @media (min-width: ${({theme}) => theme.overMobile}) { + font-size: 48px; + line-height: 52px; + } +`; + +const H2 = styled(Container)` + font-family: 'Kanit', sans-serif; + font-weight: 400; + font-size: 20px; + line-height: 24px; + color: ${({theme, color}) => color ? color : theme.colors.dark}; + + @media (min-width: ${({theme}) => theme.overMobile}) { + font-size: 32px; + line-height: 36px; + } +`; + +const H3 = styled(Container)` + font-family: 'Kanit', sans-serif; + font-weight: 400; + font-size: 18px; + line-height: 20px; + color: ${({theme, color}) => color ? color : theme.colors.dark}; + + @media (min-width: ${({theme}) => theme.overMobile}) { + font-size: 24px; + line-height: 26px; + } +`; + +const Body = styled(Container)` + font-family: 'Roboto', sans-serif; + font-weight: 300; + font-size: 14px; + line-height: 20px; + color: ${({theme, color}) => color ? color : theme.colors.dark}; + + @media (min-width: ${({theme}) => theme.overMobile}) { + font-weight: 400; + font-size: 16px; + line-height: 22px; + } +`; + +const Medium = styled(Container)` + font-family: 'Roboto', sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 20px; + color: ${({theme, color}) => color ? color : theme.colors.dark}; + + @media (min-width: ${({theme}) => theme.overMobile}) { + font-size: 16px; + line-height: 22px; + font-weight: 500; + } +`; + +const Menu = styled(Container)` + font-family: 'Roboto', sans-serif; + font-size: 18px; + line-height: 24px; + font-weight: 400; + color: ${({theme, color}) => color ? color : theme.colors.dark}; +`; + +const Label = styled(Menu)` + font-weight: 300; +`; + +export {H1, H2, H3, Body, Medium, Menu, Label}; \ No newline at end of file diff --git a/src/utils/theme.js b/src/utils/theme.js new file mode 100644 index 0000000..6cd9bc6 --- /dev/null +++ b/src/utils/theme.js @@ -0,0 +1,10 @@ +import colors from './colors'; + +const theme = { + colors, + overMobile: '768px', + mobile: '(max-width: 768px)', + desktop: '(min-width: 769px)', +}; + +export default theme; \ No newline at end of file