commit b186f52f10baeff987825f22fcb3cd61a0134f7d parent 2bd8f4dc133f7954553317ac081fc6c5fa018b64 Author: Yohanes Bandung <bandungpenting@gmail.com> Date: Mon, 9 Mar 2020 21:31:33 +0700 refactor(Uses): tweak List and Text Diffstat:
| M | src/Components/List.js | | | 8 | +++++++- |
| M | src/Components/Text.js | | | 2 | ++ |
| M | src/Pages/UsesPage.js | | | 19 | +++++++++---------- |
3 files changed, 18 insertions(+), 11 deletions(-)
diff --git a/src/Components/List.js b/src/Components/List.js @@ -10,16 +10,22 @@ type Props = {| |}; const ListBase: StyledComponent<Props, {}, {}> = styled.ul` - list-style: none; padding: 0; ${props => props.as === 'li' ? css` + position: relative; + list-style: none; + padding-left: 20px; margin-bottom: 5px; &:before { + display: inline-block; content: '- '; + position: absolute; + width: 20px; color: ${colors.orange}; + left: 0; } ` : css``} diff --git a/src/Components/Text.js b/src/Components/Text.js @@ -57,6 +57,8 @@ const Text: StyledComponent<TextProps, {}, {}> = styled.p` color: ${color}; letter-spacing: 0.03rem; line-height: 1.4; + word-wrap: break-word; + overflow-wrap: break-word; @media (max-width: 599px) { font-size: ${({as}) => `${mobileSizeResolver(as)}rem`}; diff --git a/src/Pages/UsesPage.js b/src/Pages/UsesPage.js @@ -1,27 +1,26 @@ // @flow import React from 'react'; -import {useHistory} from 'react-router'; import Text from '../Components/Text'; import List from '../Components/List'; +import Link from '../Components/Link'; const UsesPage = () => { - let history = useHistory(); - - const handleClick = () => { - history.push('/'); - }; return ( <React.Fragment> - <Text onClick={handleClick}>hehe</Text> <Text as="h2">Platform</Text> <List> - <List as="li">{'Macbook Pro 2018 13" (Office)'}</List> - <List as="li">{'Low-End PC with Manjaro Linux XFCE (Home)'}</List> + <List as="li">Macbook Pro 2018 13" (Office)</List> + <List as="li">Low-End PC with Manjaro Linux XFCE (Home)</List> </List> <Text as="h2">Hardware</Text> <List> - <List as="li">Ducky One 2 Mini Keyboard image</List> + <List as="li"> + Ducky One 2 Mini Keyboard{' '} + <Link to="https://twitter.com/bandungpenting/status/1146845120618090497"> + image + </Link> + </List> </List> <Text as="h2">Code Editor</Text> <List>