refactor: alert styles

packages/styles/src/Alert/Alert.ts

@@ -1,4 +1,42 @@
-type AlertButtonStyle = 'small' | 'outlined' | 'contrast' | 'neutral' | 'info' | 'warning' | 'danger' | 'success'
+type AlertButtonStyle = 'default' | 'contrast' | 'neutral' | 'info' | 'warning' | 'danger' | 'success'
+
+const getColorsForNormalVariant = (style: AlertButtonStyle) => {
+  switch (style) {
+    case 'default':
+      return 'bg-default text-text'
+    case 'contrast':
+      return 'bg-default text-contrast'
+    case 'neutral':
+      return 'bg-default text-neutral'
+    case 'info':
+      return 'bg-default text-info'
+    case 'warning':
+      return 'bg-default text-warning'
+    case 'danger':
+      return 'bg-default text-danger'
+    case 'success':
+      return 'bg-default text-success'
+  }
+}
+
+const getColorsForPrimaryVariant = (style: AlertButtonStyle) => {
+  switch (style) {
+    case 'default':
+      return 'bg-default text-foreground'
+    case 'contrast':
+      return 'bg-contrast text-text'
+    case 'neutral':
+      return 'bg-neutral text-neutral-contrast'
+    case 'info':
+      return 'bg-info text-info-contrast'
+    case 'warning':
+      return 'bg-warning text-warning-contrast'
+    case 'danger':
+      return 'bg-danger text-danger-contrast'
+    case 'success':
+      return 'bg-success text-success-contrast'
+  }
+}
 
 type AlertButton = {
   text: string
@@ -23,7 +61,15 @@ export class SKAlert {
   buttonsString() {
     const genButton = function (buttonDesc: AlertButton, index: number) {
       return `
-        <button id='button-${index}' class='font-bold px-2.5 py-2 text-base lg:text-xs text-info-contrast bg-${buttonDesc.style}'>
+        <button id='button-${index}' class='font-bold px-4 py-1.5 rounded text-base lg:text-sm ${
+        buttonDesc.primary ? 'no-border ' : 'border-solid border-border border '
+      } ${
+        buttonDesc.primary
+          ? 'hover:brightness-125 focus:outline-none focus:brightness-125 '
+          : 'focus:bg-contrast focus:outline-none hover:bg-contrast '
+      } ${
+        buttonDesc.primary ? getColorsForPrimaryVariant(buttonDesc.style) : getColorsForNormalVariant(buttonDesc.style)
+      }'>
           <div class='sk-label'>${buttonDesc.text}</div>
         </button>
       `
@@ -36,7 +82,7 @@ export class SKAlert {
       .join('')
 
     const str = `
-      <div class='sk-button-group'>
+      <div class='flex items-center justify-end gap-2 w-full'>
         ${buttonString}
       </div>
     `
@@ -57,7 +103,7 @@ export class SKAlert {
       buttonsTemplate = ''
       panelStyle = 'style="padding-bottom: 8px"'
     }
-    const titleTemplate = this.title ? `<div class='mb-1 font-bold text-lg lg:text-base'>${this.title}</div>` : ''
+    const titleTemplate = this.title ? `<div class='mb-1 font-bold text-lg'>${this.title}</div>` : ''
     const messageTemplate = this.text ? `<p class='sk-p text-base lg:text-sm'>${this.text}</p>` : ''
 
     const template = `

packages/ui-services/src/Alert/Functions.ts

@@ -22,7 +22,7 @@ export function confirmDialog({
       buttons: [
         {
           text: cancelButtonText,
-          style: 'neutral',
+          style: 'default',
           action() {
             resolve(false)
           },
@@ -30,6 +30,7 @@ export function confirmDialog({
         {
           text: confirmButtonText,
           style: confirmButtonStyle,
+          primary: true,
           action() {
             resolve(true)
           },
@@ -56,7 +57,7 @@ export function alertDialog({
       buttons: [
         {
           text: closeButtonText,
-          style: 'neutral',
+          style: 'default',
           action: resolve,
         },
       ],

packages/web/src/javascripts/Components/ConfirmDeleteAccountModal/ConfirmDeleteAccountModal.tsx

@@ -25,22 +25,20 @@ const ConfirmDeleteAccountModal = ({ application, viewControllerManager }: Props
           <div className="sk-panel">
             <div className="sk-panel-content">
               <div className="sk-panel-section">
-                <AlertDialogLabel className="sk-h3 sk-panel-section-title">Delete account?</AlertDialogLabel>
+                <AlertDialogLabel className="text-lg font-bold">Delete account?</AlertDialogLabel>
                 <AlertDialogDescription className="sk-panel-row">
                   <div>
-                    <p className="text-foreground">{STRING_DELETE_ACCOUNT_CONFIRMATION}</p>
+                    <p className="text-base text-foreground lg:text-sm">{STRING_DELETE_ACCOUNT_CONFIRMATION}</p>
                   </div>
                 </AlertDialogDescription>
 
-                <div className="my-1 mt-4 flex gap-2">
+                <div className="my-1 mt-4 flex justify-end gap-2">
-                  <Button primary small colorStyle="neutral" rounded={false} ref={cancelRef} onClick={closeDialog}>
+                  <Button ref={cancelRef} onClick={closeDialog}>
                     Cancel
                   </Button>
                   <Button
                     primary
-                    small
                     colorStyle="danger"
-                    rounded={false}
                     onClick={() => {
                       application.user.deleteAccount().catch(console.error)
                       closeDialog()

packages/web/src/javascripts/Components/ConfirmSignoutModal/ConfirmSignoutModal.tsx

@@ -38,14 +38,14 @@ const ConfirmSignoutModal: FunctionComponent<Props> = ({ application, viewContro
           <div className="sk-panel">
             <div className="sk-panel-content">
               <div className="sk-panel-section">
-                <AlertDialogLabel className="sk-h3 sk-panel-section-title">Sign out workspace?</AlertDialogLabel>
+                <AlertDialogLabel className="text-lg font-bold">Sign out workspace?</AlertDialogLabel>
                 <AlertDialogDescription className="sk-panel-row">
                   <div>
-                    <p className="text-foreground">{STRING_SIGN_OUT_CONFIRMATION}</p>
+                    <p className="text-base text-foreground lg:text-sm">{STRING_SIGN_OUT_CONFIRMATION}</p>
                     {showWorkspaceWarning && (
                       <>
                         <br />
-                        <p className="text-foreground">
+                        <p className="text-base text-foreground lg:text-sm">
                           <strong>Note: </strong>
                           Because you have other workspaces signed in, this sign out may leave logs and other metadata
                           of your session on this device. For a more robust sign out that performs a hard clear of all
@@ -83,15 +83,13 @@ const ConfirmSignoutModal: FunctionComponent<Props> = ({ application, viewContro
                   </div>
                 )}
 
-                <div className="my-1 mt-4 flex gap-2">
+                <div className="my-1 mt-4 flex justify-end gap-2">
-                  <Button primary small colorStyle="neutral" rounded={false} ref={cancelRef} onClick={closeDialog}>
+                  <Button ref={cancelRef} onClick={closeDialog}>
                     Cancel
                   </Button>
                   <Button
                     primary
-                    small
                     colorStyle="danger"
-                    rounded={false}
                     onClick={() => {
                       if (deleteLocalBackups) {
                         application.signOutAndDeleteLocalBackups().catch(console.error)

packages/web/src/javascripts/Components/OtherSessionsSignOut/OtherSessionsSignOut.tsx

@@ -24,25 +24,21 @@ const ConfirmOtherSessionsSignOut = observer(({ application, viewControllerManag
           <div className="sk-panel">
             <div className="sk-panel-content">
               <div className="sk-panel-section">
-                <AlertDialogLabel className="sk-h3 sk-panel-section-title capitalize">
+                <AlertDialogLabel className="text-lg font-bold capitalize">End all other sessions?</AlertDialogLabel>
-                  End all other sessions?
-                </AlertDialogLabel>
                 <AlertDialogDescription className="sk-panel-row">
-                  <p className="text-foreground">
+                  <p className="text-base text-foreground lg:text-sm">
                     This action will sign out all other devices signed into your account, and remove your data from
                     those devices when they next regain connection to the internet. You may sign back in on those
                     devices at any time.
                   </p>
                 </AlertDialogDescription>
-                <div className="my-1 mt-4 flex gap-2">
+                <div className="my-1 mt-4 flex justify-end gap-2">
-                  <Button primary small colorStyle="neutral" rounded={false} ref={cancelRef} onClick={closeDialog}>
+                  <Button ref={cancelRef} onClick={closeDialog}>
                     Cancel
                   </Button>
                   <Button
                     primary
-                    small
                     colorStyle="danger"
-                    rounded={false}
                     onClick={() => {
                       application.revokeAllOtherSessions().catch(console.error)
                       closeDialog()

packages/web/src/javascripts/Components/SessionsModal/SessionsModal.tsx

@@ -166,28 +166,17 @@ const SessionsModalContent: FunctionComponent<{
               <div className="sk-panel">
                 <div className="sk-panel-content">
                   <div className="sk-panel-section">
-                    <AlertDialogLabel className="sk-h3 sk-panel-section-title">
+                    <AlertDialogLabel className="text-lg font-bold">{SessionStrings.RevokeTitle}</AlertDialogLabel>
-                      {SessionStrings.RevokeTitle}
-                    </AlertDialogLabel>
                     <AlertDialogDescription className="sk-panel-row">
-                      <p>{SessionStrings.RevokeText}</p>
+                      <p className="text-base text-foreground lg:text-sm">{SessionStrings.RevokeText}</p>
                     </AlertDialogDescription>
-                    <div className="my-1 flex gap-2">
+                    <div className="my-1 mt-4 flex justify-end gap-2">
-                      <Button
+                      <Button ref={cancelRevokeRef} onClick={closeRevokeSessionAlert}>
-                        primary
-                        small
-                        colorStyle="neutral"
-                        rounded={false}
-                        ref={cancelRevokeRef}
-                        onClick={closeRevokeSessionAlert}
-                      >
                         <span>{SessionStrings.RevokeCancelButton}</span>
                       </Button>
                       <Button
                         primary
-                        small
                         colorStyle="danger"
-                        rounded={false}
                         onClick={() => {
                           closeRevokeSessionAlert()
                           revokeSession(confirmRevokingSessionUuid).catch(console.error)

packages/web/src/stylesheets/_modals.scss

@@ -59,6 +59,7 @@
   .sn-component {
     height: 100%;
     .sk-panel {
+      border-radius: 0.25rem;
       height: 100%;
     }
   }
@@ -105,6 +106,7 @@
     padding: 0;
     padding-bottom: 0;
     min-width: 300px;
+    border-radius: 0.25rem;
 
     -webkit-box-shadow: 0px 2px 35px 0px rgba(0, 0, 0, 0.19);
     -moz-box-shadow: 0px 2px 35px 0px rgba(0, 0, 0, 0.19);