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 {
+    .Accessory svg {
+      fill: none;
+      stroke: var(--button-text);
+    }
+
+    &.Saved {
       color: #ff4d4d;
 
       .Accessory svg {
         fill: #ff4d4d;
-      stroke: #ff4d4d;
+        stroke: none;
       }
     }
 
-  &.save.Active {
-    color: #ff4d4d;
-
     &: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,
     Active: active,
     Blended: blended,
     Contained: contained,
-    },
+  })
-    buttonSize,
-    props.className
-  )
 
   const leftAccessoryClasses = classNames(leftAccessoryClassName, {
     Accessory: true,

components/Header/index.tsx

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