old-ybbond

commit 850c558cd0b10304525b6f968aec70c0315ee90a
parent 731a06ed225cd02267e2d77de0721bf5322530d0
Author: Yohanes Bandung <bandungpenting@gmail.com>
Date:   Wed, 25 Mar 2020 20:11:26 +0700

refactor(Components): tweak button an link appearance

Diffstat:
M
src/App.js
 | 
29
++++++++++-------------------
M
src/Components/Button.js
 | 
5
-----
M
src/Components/Link.js
 | 
5
+++--

diff --git a/src/App.js b/src/App.js
@@ -81,29 +81,20 @@ const App = () => {
               </Button>
             </Text>
             <Text>
-              <Button
-                aria-label="Go to CV Page"
-                onClick={() => Link.goTo('/')}
-                tabindex="1"
-              >
-                <Link to="/">CV</Link>
-              </Button>{' '}
+              <Link aria-label="Go to CV Page" to="/">
+                CV
+              </Link>{' '}
               -{' '}
-              <Button
+              <Link
                 aria-label="Go to page that lists the tools I use"
-                onClick={() => Link.goTo('/uses')}
-                tabindex="2"
+                to="/uses"
               >
-                <Link to="/uses">Uses</Link>
-              </Button>{' '}
+                Uses
+              </Link>{' '}
               -{' '}
-              <Button
-                aria-label="Go to About Page"
-                onClick={() => Link.goTo('/about')}
-                tabindex="3"
-              >
-                <Link to="/about">About</Link>
-              </Button>
+              <Link aria-label="Go to About Page" to="/about">
+                About
+              </Link>{' '}
             </Text>
           </Header>
           <Switch>
diff --git a/src/Components/Button.js b/src/Components/Button.js
@@ -17,11 +17,6 @@ const Button: StyledComponent<ButtonProps, {}, {}> = styled.button`
   &::-moz-focus-inner {
     border: 0;
   }
-
-  &:focus {
-    outline: ${colors.lightSelection} solid 3px;
-    outline-offset: 7px;
-  }
 `;
 
 export default Button;
diff --git a/src/Components/Link.js b/src/Components/Link.js
@@ -47,14 +47,15 @@ const Link = ({children, to, ...props}: LinkProps) => {
   }
 
   const {isExact = false} = useRouteMatch(to) || {};
-  const handleClick = () => {
+  const handleClick = e => {
+    e.preventDefault();
     history.push(to);
   };
 
   return (
     <LinkBase
       {...props}
-      as="span"
+      href={to}
       onClick={handleClick}
       isCurrentRoute={isExact}
     >