Fixes ONEARMY#620: changed nav btn colors to match mockup

patyiscoding · Oct 13, 2019 · 9e6015c · 9e6015c
1 parent 632bf5e
commit 9e6015c
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 1 deletion.
diff --git a/src/pages/common/Login/Login.tsx b/src/pages/common/Login/Login.tsx
@@ -98,14 +98,15 @@ export class LoginComponent extends React.Component<IProps, IState> {
             small
             mr={2}
             data-cy="sign-in-button"
+            style={{ fontWeight: 'bold' }}
           >
             Login
           </ButtonSign>
         </Link>
         <Link to={'/sign-up'}>
           <ButtonSign
             display={['none', 'none', 'flex']}
-            variant="secondary"
+            variant="colorful"
             small
             // onClick={this.toggleModal}
           >

diff --git a/src/themes/styled.theme.tsx b/src/themes/styled.theme.tsx
@@ -143,6 +143,26 @@ const buttons = {
     color: '#e0e0e0',
     backgroundColor: 'transparent',
   },
+  colorful: {
+    fontFamily: '"Varela Round", Arial, sans-serif',
+    border: '2px solid ' + colors.black,
+    color: colors.black,
+    display: 'flex',
+    bg: colors.white,
+    transition: '.2s ease-in-out',
+    '&:hover': {
+      bg: colors.yellow.base,
+      cursor: 'pointer',
+    },
+    '&[disabled]': {
+      opacity: 0.5,
+      cursor: 'not-allowed',
+    },
+    '&[disabled]:hover': {
+      bg: colors.yellow.base,
+    },
+    borderRadius: radii[1] + 'px',
+  },
 }
 
 export default {