chore: better styling of buttons to match mobile (#149)

ApollosProject · Jan 25, 2024 · 9551ba0 · 9551ba0
1 parent d41e940
commit 9551ba0
Showing 1 changed file with 7 additions and 24 deletions.
diff --git a/packages/web-shared/ui-kit/Button/Button.styles.js b/packages/web-shared/ui-kit/Button/Button.styles.js
@@ -12,33 +12,20 @@ function darken(c, by) {
   return Color(c).darken(by).toString();
 }
 
-const buttonState = ({
-  theme,
-  variant,
-  disabled,
-  focused,
-  hovered,
-  pressed,
-}) => {
+const buttonState = ({ theme, variant, disabled, focused, hovered, pressed }) => {
   if (disabled) {
     return css`
       opacity: 0.5;
-      background: ${variant === 'secondary'
-        ? 'transparent'
-        : theme.colors.base.gray};
-      border: ${variant === 'secondary'
-        ? theme.colors.base.gray
-        : 'transparent'};
+      background: ${variant === 'secondary' ? 'transparent' : theme.colors.base.gray};
+      border: ${variant === 'secondary' ? theme.colors.base.gray : 'transparent'};
       cursor: not-allowed;
     `;
   }
 
   if (pressed) {
     return css`
       background: ${theme.colors.base.gray};
-      border: ${variant === 'secondary'
-        ? theme.colors.fill.system
-        : 'transparent'};
+      border: ${variant === 'secondary' ? theme.colors.fill.system : 'transparent'};
       transform: scale(0.98);
     `;
   }
@@ -159,13 +146,7 @@ const buttonColorState = ({ theme, disabled, focused, hovered }) => {
   return null;
 };
 
-const buttonColorStateLink = ({
-  theme,
-  disabled,
-  focused,
-  hovered,
-  variant,
-}) => {
+const buttonColorStateLink = ({ theme, disabled, focused, hovered, variant }) => {
   if (disabled && variant === 'link') {
     return css`
       color: ${theme.colors.text.secondary};
@@ -208,6 +189,8 @@ const Button = withTheme(styled.button`
   border-radius: ${themeGet('radii.xl')};
   cursor: pointer;
   align-items: center;
+  margin-top: 16px;
+  margin-bottom: 16px;
   ${buttonTypeProp}
   ${webTransition}
   ${buttonState}