🎨 Replace buttons styling for variants for consistency (#722)

frontend/src/components/UserSettings/DeleteAccount.tsx

@@ -22,13 +22,7 @@ const DeleteAccount: React.FC = () => {
           Permanently delete your data and everything associated with your
           account.
         </Text>
-        <Button
-          bg="ui.danger"
-          color="white"
-          _hover={{ opacity: 0.8 }}
-          mt={4}
-          onClick={confirmationModal.onOpen}
-        >
+        <Button variant="danger" mt={4} onClick={confirmationModal.onOpen}>
           Delete
         </Button>
         <DeleteConfirmation

frontend/src/routes/login.tsx

@@ -127,13 +127,7 @@ function Login() {
             Forgot password?
           </Link>
         </Center>
-        <Button
-          bg="ui.main"
-          color="white"
-          _hover={{ opacity: 0.8 }}
-          type="submit"
-          isLoading={isSubmitting}
-        >
+        <Button variant="primary" type="submit" isLoading={isSubmitting}>
           Log In
         </Button>
       </Container>

frontend/src/routes/recover-password.tsx

@@ -82,13 +82,7 @@ function RecoverPassword() {
           <FormErrorMessage>{errors.email.message}</FormErrorMessage>
         )}
       </FormControl>
-      <Button
-        bg="ui.main"
-        color="white"
-        _hover={{ opacity: 0.8 }}
-        type="submit"
-        isLoading={isSubmitting}
-      >
+      <Button variant="primary" type="submit" isLoading={isSubmitting}>
         Continue
       </Button>
     </Container>

frontend/src/routes/reset-password.tsx

@@ -124,12 +124,7 @@ function ResetPassword() {
           <FormErrorMessage>{errors.confirm_password.message}</FormErrorMessage>
         )}
       </FormControl>
-      <Button
-        bg="ui.main"
-        color="white"
-        _hover={{ opacity: 0.8 }}
-        type="submit"
-      >
+      <Button variant="primary" type="submit">
         Reset Password
       </Button>
     </Container>