rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

refactor: alert styles

Browse Source
This commit is contained in:
Aman Harwara
2023-01-16 19:52:10 +05:30
parent dfa0e164bb
commit bb6e655d2f
7 changed files with 72 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
packages/styles/src/Alert/Alert.ts
View File

@@ -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 = `

5
packages/ui-services/src/Alert/Functions.ts
View File

@@ -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,
},
],

10
packages/web/src/javascripts/Components/ConfirmDeleteAccountModal/ConfirmDeleteAccountModal.tsx
View File

@@ -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">
<Button primary small colorStyle="neutral" rounded={false} ref={cancelRef} onClick={closeDialog}>
<div className="my-1 mt-4 flex justify-end gap-2">
<Button ref={cancelRef} onClick={closeDialog}>
Cancel
</Button>
<Button
primary
small
colorStyle="danger"
rounded={false}
onClick={() => {
application.user.deleteAccount().catch(console.error)
closeDialog()

12
packages/web/src/javascripts/Components/ConfirmSignoutModal/ConfirmSignoutModal.tsx
View File

@@ -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">
<Button primary small colorStyle="neutral" rounded={false} ref={cancelRef} onClick={closeDialog}>
<div className="my-1 mt-4 flex justify-end gap-2">
<Button ref={cancelRef} onClick={closeDialog}>
Cancel
</Button>
<Button
primary
small
colorStyle="danger"
rounded={false}
onClick={() => {
if (deleteLocalBackups) {
application.signOutAndDeleteLocalBackups().catch(console.error)

12
packages/web/src/javascripts/Components/OtherSessionsSignOut/OtherSessionsSignOut.tsx
View File

@@ -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">
End all other sessions?
</AlertDialogLabel>
<AlertDialogLabel className="text-lg font-bold capitalize">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">
<Button primary small colorStyle="neutral" rounded={false} ref={cancelRef} onClick={closeDialog}>
<div className="my-1 mt-4 flex justify-end gap-2">
<Button ref={cancelRef} onClick={closeDialog}>
Cancel
</Button>
<Button
primary
small
colorStyle="danger"
rounded={false}
onClick={() => {
application.revokeAllOtherSessions().catch(console.error)
closeDialog()

19
packages/web/src/javascripts/Components/SessionsModal/SessionsModal.tsx
View File

@@ -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">
{SessionStrings.RevokeTitle}
</AlertDialogLabel>
<AlertDialogLabel className="text-lg font-bold">{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">
<Button
primary
small
colorStyle="neutral"
rounded={false}
ref={cancelRevokeRef}
onClick={closeRevokeSessionAlert}
>
<div className="my-1 mt-4 flex justify-end gap-2">
<Button ref={cancelRevokeRef} onClick={closeRevokeSessionAlert}>
<span>{SessionStrings.RevokeCancelButton}</span>
</Button>
<Button
primary
small
colorStyle="danger"
rounded={false}
onClick={() => {
closeRevokeSessionAlert()
revokeSession(confirmRevokingSessionUuid).catch(console.error)

2
packages/web/src/stylesheets/_modals.scss
View File

@@ -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);