feat(profile): confirm before signing out

Author: Garrett Downs

public/global.css

@@ -78,7 +78,8 @@
   --shortcut-color: var(--secondary-text-color);
   --warning-color: hsl(48, 90%, 70%);
   --error-color: hsl(0, 90%, 70%);
-  --success-color: hsl(131, 60%, 70%);
+  --success-color: var(--app-text-color);
+  /* --success-color: hsl(131, 60%, 70%); */
 
   font-size: var(--base-font-size);
 }

src/routes/AppSettings.svelte

@@ -14,7 +14,6 @@
   import { Onyx } from 'onyx-ui/services';
   import { registerView, updateView, view } from 'onyx-ui/stores/view';
   import { onMount } from 'svelte';
-  import MdCheck from 'svelte-icons/md/MdCheck.svelte';
   import { push, replace } from 'svelte-spa-router';
   import { Auth } from '../lib/auth';
   import { Cache } from '../lib/cache';
@@ -303,8 +302,7 @@
                 Cache.invalidate();
                 Onyx.toaster.show({
                   title: 'Cache cleared',
-                  icon: MdCheck,
-                  type: 'info',
+                  type: 'success',
                 });
               },
             }}
@@ -318,8 +316,7 @@
               push('/signin');
               Onyx.toaster.show({
                 title: 'Successfully signed out',
-                icon: MdCheck,
-                type: 'info',
+                type: 'success',
               });
             }}
             onCancel={() => {}}

src/routes/Profile.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
-  import Button from 'onyx-ui/components/buttons/Button.svelte';
+  import ConfirmButton from 'onyx-ui/components/buttons/ConfirmButton.svelte';
   import Card from 'onyx-ui/components/card/Card.svelte';
   import CardContent from 'onyx-ui/components/card/CardContent.svelte';
   import Divider from 'onyx-ui/components/divider/Divider.svelte';
   import FormRow from 'onyx-ui/components/form/FormRow.svelte';
   import Typography from 'onyx-ui/components/Typography.svelte';
   import View from 'onyx-ui/components/view/View.svelte';
   import ViewContent from 'onyx-ui/components/view/ViewContent.svelte';
-  import { DataStatus } from 'onyx-ui/enums';
+  import { Color, DataStatus } from 'onyx-ui/enums';
+  import { Onyx } from 'onyx-ui/services';
   import { registerView, updateView } from 'onyx-ui/stores/view';
   import { onMount } from 'svelte';
   import { push } from 'svelte-spa-router';
@@ -88,15 +89,19 @@
           <FormRow label="Plan" navi={{ itemId: `plan`, onSelect: () => {} }}>{data.plan}</FormRow>
           <Divider title="description" />
           <Typography>{data.description || 'No description provided.'}</Typography>
-          <Button
+          <ConfirmButton
             title="Sign Out"
-            navi={{
-              itemId: `btnSignOut`,
-              onSelect: () => {
-                new Auth().clearSession();
-                push('/signin');
-              },
+            color={Color.Accent}
+            confirmText="Yes, sign out"
+            onConfirm={() => {
+              new Auth().clearSession();
+              push('/signin');
+              Onyx.toaster.show({
+                title: 'Successfully signed out',
+                type: 'success',
+              });
             }}
+            onCancel={() => {}}
           />
         {:catch}
           <Typography align="center">Failed to load data</Typography>