styles: refactor Buttons

Author: jamaljsr

app/src/components/common/PageHeader.tsx

@@ -23,7 +23,7 @@ const Styled = {
   `,
   BackLink: styled.a`
     text-transform: uppercase;
-    font-size: ${props => props.theme.sizes.s};
+    font-size: ${props => props.theme.sizes.xs};
     cursor: pointer;
     color: ${props => props.theme.colors.whitish};
 

app/src/components/common/base.tsx

@@ -36,28 +36,71 @@ interface ButtonProps {
 }
 
 export const Button = styled.button<ButtonProps>`
+  font-family: ${props => props.theme.fonts.work.medium};
+  font-size: ${props => props.theme.sizes.s};
   min-width: 120px;
   height: 44px;
   padding-left: 15px;
   padding-right: 15px;
   margin-left: 10px;
   text-align: center;
-  color: ${props => props.theme.colors.white};
-  background-color: ${props =>
-    props.ghost ? 'transparent' : props.theme.colors.tileBack};
-  border-width: ${props => (props.borderless && !props.primary ? '0' : '1px')};
-  border-color: ${props =>
-    props.primary ? props.theme.colors.green : props.theme.colors.white};
-  border-style: solid;
+  color: ${props => props.theme.colors.whitish};
+  background-color: ${props => props.theme.colors.blue};
+  border: 1px solid ${props => props.theme.colors.whitish};
   border-radius: 22px;
-  opacity: ${props => (props.disabled ? '0.5' : '1')};
 
   &:hover {
-    opacity: ${props => (props.disabled ? '0.6' : '0.8')};
+    color: ${props => props.theme.colors.blue};
+    background-color: ${props => props.theme.colors.white};
+    cursor: pointer;
   }
 
+  &:active,
+  &:focus {
+    outline: none;
+  }
+
+  ${props =>
+    props.ghost &&
+    `
+    background-color: transparent;
+    &:hover {
+      color: ${props.theme.colors.whitish};
+      text-decoration: underline;
+      background-color: transparent;
+    }
+  `}
+
+  ${props =>
+    props.disabled &&
+    `
+    opacity: 0.5;
+    &:hover {
+      cursor: not-allowed;
+    }
+  `}
+
+  ${props =>
+    props.borderless &&
+    `
+    border-width: 0;
+  `}
+
+  ${props =>
+    props.primary &&
+    `
+    border: 1px solid ${props.theme.colors.green};
+    &:hover {
+      color: ${props.theme.colors.blue};
+      text-decoration: none;
+      background-color: ${props.theme.colors.green};
+    }
+  `}
+
   svg {
     margin-right: 10px;
+    width: ${props => props.theme.sizes.m};
+    height: ${props => props.theme.sizes.m};
   }
 `;
 

app/src/components/common/text.tsx

@@ -26,7 +26,7 @@ export const HeaderThree = styled.h3`
 
 export const HeaderFour = styled.h4<HeaderProps>`
   font-family: ${props => props.theme.fonts.open.semiBold};
-  font-size: ${props => props.theme.sizes.s};
+  font-size: ${props => props.theme.sizes.xs};
   line-height: 20px;
   text-transform: uppercase;
   color: ${props => props.theme.colors.gray};
@@ -39,7 +39,7 @@ export const HeaderFive = styled.h5`
 `;
 
 export const Small = styled.p`
-  font-size: ${props => props.theme.sizes.s};
+  font-size: ${props => props.theme.sizes.xs};
   line-height: 19px;
 `;
 

app/src/components/layout/NavMenu.tsx

@@ -15,7 +15,7 @@ const Styled = {
     list-style: none;
   `,
   NavItem: styled.li`
-    font-size: ${props => props.theme.sizes.s};
+    font-size: ${props => props.theme.sizes.xs};
     margin-right: -17px;
 
     span {

app/src/components/loop/swap/StepButtons.tsx

@@ -24,7 +24,7 @@ const StepButtons: React.FC<Props> = ({ confirm, onCancel, onNext }) => {
       <Button ghost borderless onClick={onCancel}>
         {l('cancel')}
       </Button>
-      <Button primary onClick={onNext}>
+      <Button primary ghost onClick={onNext}>
         {confirm ? l('confirm') : l('next')}
       </Button>
     </Wrapper>

app/src/components/theme.tsx

@@ -18,6 +18,7 @@ export interface Theme {
     };
   };
   sizes: {
+    xs: string;
     s: string;
     m: string;
     l: string;
@@ -56,7 +57,8 @@ const theme: Theme = {
     },
   },
   sizes: {
-    s: '14px',
+    xs: '14px',
+    s: '16px',
     m: '18px',
     l: '22px',
     xl: '27px',