Fix Alert buttons and sizing

components/Alert/index.scss

@@ -15,9 +15,9 @@
   border-radius: $unit;
   display: flex;
   flex-direction: column;
-  gap: $unit;
+  gap: $unit-2x;
-  min-width: $unit * 20;
+  min-width: 20vw;
-  max-width: $unit * 40;
+  max-width: 30vw;
   padding: $unit * 4;
 
   .description {
@@ -34,25 +34,4 @@
     align-self: flex-end;
     gap: $unit;
   }
-
-  .Button {
-    font-size: $font-regular;
-    padding: ($unit * 1.5) ($unit * 2);
-    margin-top: $unit * 2;
-
-    &.btn-disabled {
-      background: $grey-90;
-      color: $grey-70;
-      cursor: not-allowed;
-    }
-
-    &:not(.btn-disabled) {
-      background: $grey-90;
-      color: $grey-50;
-
-      &:hover {
-        background: $grey-80;
-      }
-    }
-  }
 }

components/Alert/index.tsx

@@ -30,6 +30,7 @@ const Alert = (props: Props) => {
             <div className="buttons">
               <AlertDialog.Cancel asChild>
                 <Button
+                  contained={true}
                   onClick={props.cancelAction}
                   text={props.cancelActionText}
                 />
@@ -37,6 +38,7 @@ const Alert = (props: Props) => {
               {props.primaryAction ? (
                 <AlertDialog.Action asChild>
                   <Button
+                    contained={true}
                     onClick={props.cancelAction}
                     text={props.primaryActionText}
                   />