Fix styles for favorite buttons in GridRep

components/Button/index.scss

@@ -29,11 +29,46 @@
     background: transparent;
   }
 
+  &.Contained {
+    background: var(--button-contained-bg);
+
+    &:hover {
+      background: var(--button-contained-bg-hover);
+    }
+
+    &.Save:hover .Accessory svg {
+      fill: #ff4d4d;
+      stroke: #ff4d4d;
+    }
+
+    &.Active.Save {
+      color: #ff4d4d;
+
+      .Accessory svg {
+        fill: #ff4d4d;
+        stroke: #ff4d4d;
+      }
+
+      &:hover {
+        color: darken(#ff4d4d, 30);
+
+        .Accessory svg {
+          fill: darken(#ff4d4d, 30);
+          stroke: darken(#ff4d4d, 30);
+        }
+      }
+    }
+  }
+
   &.medium {
     height: $unit * 5.5;
     padding: ($unit * 1.5) $unit-2x;
   }
 
+  &.small {
+    padding: $unit * 1.5;
+  }
+
   &.destructive:hover {
     background: $error;
     color: $grey-100;
@@ -55,11 +90,6 @@
   &.save.Active {
     color: #ff4d4d;
 
-    .Accessory svg {
-      fill: #ff4d4d;
-      stroke: #ff4d4d;
-    }
-
     &:hover {
       color: darken(#ff4d4d, 30);
 

components/Button/index.tsx

@@ -23,23 +23,31 @@ interface Props
     HTMLButtonElement
   > {
   accessoryIcon?: React.ReactNode
+  active?: boolean
   blended?: boolean
+  contained?: boolean
   size?: 'small' | 'medium' | 'large'
   text?: string
 }
 
 const defaultProps = {
+  active: false,
   blended: false,
+  contained: false,
   size: 'medium',
 }
 
 const Button = React.forwardRef<HTMLButtonElement, Props>(
-  ({ accessoryIcon, blended, size, text, ...props }, forwardedRef) => {
+  (
+    { accessoryIcon, active, blended, contained, size, text, ...props },
+    forwardedRef
+  ) => {
     const classes = classNames(
       {
         Button: true,
+        Active: active,
         Blended: blended,
-        // Active: active,
+        Contained: contained,
         // 'btn-pressed': pressed,
         // 'btn-disabled': disabled,
         // save: props.icon === 'save',

components/GridRep/index.scss

@@ -94,11 +94,6 @@
         width: 14px;
         height: 14px;
       }
-
-      button:hover,
-      button.Active {
-        background: $grey-90;
-      }
     }
 
     .bottom {

components/GridRep/index.tsx

@@ -8,7 +8,8 @@ import { accountState } from '~utils/accountState'
 import { formatTimeAgo } from '~utils/timeAgo'
 
 import Button from '~components/Button'
-import { ButtonType } from '~utils/enums'
+
+import SaveIcon from '~public/icons/Save.svg'
 
 import './index.scss'
 
@@ -162,9 +163,11 @@ const GridRep = (props: Props) => {
         ((props.user && account.user && account.user.id !== props.user.id) ||
           !props.user) ? (
           <Button
+            className="Save"
+            accessoryIcon={<SaveIcon class="stroke" />}
             active={props.favorited}
-            icon="save"
+            contained={true}
-            type={ButtonType.IconOnly}
+            size="small"
             onClick={sendSaveData}
           />
         ) : (

styles/themes.scss

@@ -18,6 +18,8 @@
   --button-bg: #{$button--bg--light};
   --button-bg-hover: #{$button--bg--light--hover};
   --button-bg-disabled: #{$button--bg--light--disabled};
+  --button-contained-bg: #{$button--contained--bg--light};
+  --button-contained-bg-hover: #{$button--contained--bg--light--hover};
 
   --button-text: #{$button--text--light};
   --button-text-hover: #{$button--text--light--hover};
@@ -102,6 +104,8 @@
   --button-bg: #{$button--bg--dark};
   --button-bg-hover: #{$button--bg--dark--hover};
   --button-bg-disabled: #{$button--bg--dark--disabled};
+  --button-contained-bg: #{$button--contained--bg--dark};
+  --button-contained-bg-hover: #{$button--contained--bg--dark--hover};
 
   --button-text: #{$button--text--dark};
   --button-text-hover: #{$button--text--dark--hover};

styles/variables.scss

@@ -129,9 +129,14 @@ $menu--text--dark--hover: $grey-15;
 $button--bg--light: $grey-80;
 $button--bg--light--hover: $grey-100;
 $button--bg--light--disabled: $grey-50;
+$button--contained--bg--light: $grey-90;
+$button--contained--bg--light--hover: $grey-80;
+
 $button--bg--dark: $grey-00;
 $button--bg--dark--hover: $grey-05;
 $button--bg--dark--disabled: $grey-30;
+$button--contained--bg--dark: $grey-15;
+$button--contained--bg--dark--hover: $grey-05;
 
 $button--text--light: $grey-55;
 $button--text--light--hover: $grey-40;