Fix save button states

components/Button/index.scss

@@ -43,7 +43,7 @@
       stroke: #ff4d4d;
     }
 
-    &.Active.Save {
+    &.Save {
       color: #ff4d4d;
 
       .Accessory svg {
@@ -99,24 +99,27 @@
     }
   }
 
-  &.save:hover {
+  &.Save {
-    color: #ff4d4d;
-
     .Accessory svg {
-      fill: #ff4d4d;
+      fill: none;
-      stroke: #ff4d4d;
+      stroke: var(--button-text);
     }
-  }
 
-  &.save.Active {
+    &.Saved {
-    color: #ff4d4d;
+      color: #ff4d4d;
+
+      .Accessory svg {
+        fill: #ff4d4d;
+        stroke: none;
+      }
+    }
 
     &:hover {
-      color: darken(#ff4d4d, 30);
+      color: #ff4d4d;
 
-      .icon svg {
+      .Accessory svg {
-        fill: darken(#ff4d4d, 30);
+        fill: none;
-        stroke: darken(#ff4d4d, 30);
+        stroke: #ff4d4d;
       }
     }
   }

components/Button/index.tsx

@@ -41,16 +41,12 @@ const Button = React.forwardRef<HTMLButtonElement, Props>(function button(
   },
   forwardedRef
 ) {
-  const classes = classNames(
+  const classes = classNames(buttonSize, props.className, {
-    {
+    Button: true,
-      Button: true,
+    Active: active,
-      Active: active,
+    Blended: blended,
-      Blended: blended,
+    Contained: contained,
-      Contained: contained,
+  })
-    },
-    buttonSize,
-    props.className
-  )
 
   const leftAccessoryClasses = classNames(leftAccessoryClassName, {
     Accessory: true,

components/Header/index.tsx

@@ -179,24 +179,18 @@ const Header = () => {
   }
 
   const saveButton = () => {
-    if (party.favorited)
+    return (
-      return (
+      <Button
-        <Button
+        leftAccessoryIcon={<SaveIcon />}
-          leftAccessoryIcon={<SaveIcon />}
+        className={classNames({
-          blended={true}
+          Save: true,
-          text="Saved"
+          Saved: party.favorited,
-          onClick={toggleFavorite}
+        })}
-        />
+        blended={true}
-      )
+        text={party.favorited ? 'Saved' : 'Save'}
-    else
+        onClick={toggleFavorite}
-      return (
+      />
-        <Button
+    )
-          leftAccessoryIcon={<SaveIcon />}
-          blended={true}
-          text="Save"
-          onClick={toggleFavorite}
-        />
-      )
   }
 
   const image = () => {