fix(app-general): fix join game link button

eficode · Feb 11, 2021 · 72eeac5 · 72eeac5
1 parent 78f0bfa
commit 72eeac5
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 42 deletions.
diff --git a/packages/game-app/src/_shared/components/Link/Link.tsx b/packages/game-app/src/_shared/components/Link/Link.tsx
@@ -7,51 +7,56 @@ type Props = {
   id?: string;
 };
 
-type LinkVariants = 'tinyBlue' | 'tinyGray' | 'smallBlue' | 'smallGray' | 'gray' | 'blue';
+type LinkVariants = 'tinyBlue' | 'tinyGray' | 'smallBlue' | 'smallGray' | 'gray' | 'blue' | 'activeAccent';
 
 type CustomLinkProps = { variant?: LinkVariants } & Props;
 
 export const LinkButton = styled.button<CustomLinkProps>`
-  ${variant({
-    variants: {
-      tinyBlue: {
-        fontSize: '12px',
-        color: '#148AB3',
-        marginTop: '-2px',
-        fontWeight: '600',
+  ${({ theme }) =>
+    variant({
+      variants: {
+        tinyBlue: {
+          fontSize: '12px',
+          color: '#148AB3',
+          marginTop: '-2px',
+          fontWeight: '600',
+        },
+        tinyGray: {
+          fontSize: '12px',
+          color: '#9F998F',
+          marginTop: '-2px',
+          textDecoration: 'underline',
+        },
+        smallBlue: {
+          fontSize: '14px',
+          color: '#148AB3',
+          marginTop: '-2px',
+          fontWeight: '600',
+        },
+        smallGray: {
+          fontSize: '14px',
+          color: '#9F998F',
+          marginTop: '-2px',
+          textDecoration: 'underline',
+        },
+        gray: {
+          fontSize: '16px',
+          color: '#9F998F',
+          marginTop: '-4px',
+          textDecoration: 'underline',
+        },
+        blue: {
+          fontSize: '16px',
+          color: '#148AB3',
+          marginTop: '-4px',
+          fontWeight: '600',
+        },
+        activeAccent: {
+          fontSize: '16px',
+          color: theme.colors.activeAccent,
+        },
       },
-      tinyGray: {
-        fontSize: '12px',
-        color: '#9F998F',
-        marginTop: '-2px',
-        textDecoration: 'underline',
-      },
-      smallBlue: {
-        fontSize: '14px',
-        color: '#148AB3',
-        marginTop: '-2px',
-        fontWeight: '600',
-      },
-      smallGray: {
-        fontSize: '14px',
-        color: '#9F998F',
-        marginTop: '-2px',
-        textDecoration: 'underline',
-      },
-      gray: {
-        fontSize: '16px',
-        color: '#9F998F',
-        marginTop: '-4px',
-        textDecoration: 'underline',
-      },
-      blue: {
-        fontSize: '16px',
-        color: '#148AB3',
-        marginTop: '-4px',
-        fontWeight: '600',
-      },
-    },
-  })}
+    })}
   background-color: transparent;
   border: 0;
   font-family: 'Montserrat';

diff --git a/packages/game-app/src/dashboard/components/JoinGameButton/JoinGameButton.tsx b/packages/game-app/src/dashboard/components/JoinGameButton/JoinGameButton.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, Button, Input } from '@pipeline/components';
+import { Box, Button, Input, Link } from '@pipeline/components';
 import { useTranslate } from '@pipeline/i18n';
 import { ReactComponent as KeyboardIcon } from '@assets/icons/keyboard.svg';
 import useJoinGame from '../../hooks/useJoinGame';
@@ -17,7 +17,9 @@ const JoinGameButton: React.FC<Props> = () => {
         <Input id="join-link-field" iconLeft={<KeyboardIcon />} variant="default" value={text} onChange={onChange} />
       ) : null}
       {showInput && text ? (
-        <Button variant="clear" onClick={join} color="activeAccent" label={t('dashboard.joinButton')} />
+        <Link variant="activeAccent" onClick={join}>
+          {t('dashboard.joinButton')}
+        </Link>
       ) : null}
     </Box>
   );