old-ybbond

My old site that was written with ReactJS
Log | Files | Refs | README

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:
Msrc/Components/List.js | 8+++++++-
Msrc/Components/Text.js | 2++
Msrc/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&quot; (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>