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

feat(web): tailwind css (#1147)

Browse Source
This commit is contained in:
Aman Harwara
2022-06-28 02:50:52 +05:30
committed by GitHub
parent 0ead805412
commit b80038f607
201 changed files with 1824 additions and 2699 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/web/src/javascripts/Components/Preferences/Panes/Account/Authentication.tsx
View File

@@ -36,10 +36,10 @@ const Authentication: FunctionComponent<Props> = ({ viewControllerManager }) =>
<Text className="text-center mb-3">
Sign in to sync your notes and preferences across all your devices and enable end-to-end encryption.
</Text>
<Button variant="primary" label="Create free account" onClick={clickRegister} className="mb-3" />
<div className="text-input">
<Button primary label="Create free account" onClick={clickRegister} className="mb-3" />
<div className="text-sm">
Already have an account?{' '}
<button className="border-0 p-0 bg-default color-info underline cursor-pointer" onClick={clickSignIn}>
<button className="border-0 p-0 bg-default text-info underline cursor-pointer" onClick={clickSignIn}>
Sign in
</button>
</div>

4
packages/web/src/javascripts/Components/Preferences/Panes/Account/ChangeEmail/ChangeEmail.tsx
View File

@@ -142,14 +142,14 @@ const ChangeEmail: FunctionComponent<Props> = ({ onCloseDialog, application }) =
<div>
<ModalDialog>
<ModalDialogLabel closeDialog={handleDialogClose}>Change Email</ModalDialogLabel>
<ModalDialogDescription className="px-4.5">
<ModalDialogDescription className="px-4.5 flex flex-row items-center">
{currentStep === Steps.InitialStep && (
<ChangeEmailForm setNewEmail={setNewEmail} setCurrentPassword={setCurrentPassword} />
)}
{currentStep === Steps.FinishStep && <ChangeEmailSuccess />}
</ModalDialogDescription>
<ModalDialogButtons className="px-4.5">
<Button className="min-w-20" variant="primary" label={submitButtonTitle} onClick={handleSubmit} />
<Button className="min-w-20" primary label={submitButtonTitle} onClick={handleSubmit} />
</ModalDialogButtons>
</ModalDialog>
</div>

20
packages/web/src/javascripts/Components/Preferences/Panes/Account/ChangeEmail/ChangeEmailForm.tsx
View File

@@ -1,3 +1,5 @@
import DecoratedInput from '@/Components/Input/DecoratedInput'
import DecoratedPasswordInput from '@/Components/Input/DecoratedPasswordInput'
import { Dispatch, SetStateAction, FunctionComponent } from 'react'
type Props = {
@@ -7,8 +9,6 @@ type Props = {
const labelClassName = 'block mb-1'
const inputClassName = 'sk-input contrast'
const ChangeEmailForm: FunctionComponent<Props> = ({ setNewEmail, setCurrentPassword }) => {
return (
<div className="w-full flex flex-col">
@@ -16,12 +16,11 @@ const ChangeEmailForm: FunctionComponent<Props> = ({ setNewEmail, setCurrentPass
<label className={labelClassName} htmlFor="change-email-email-input">
New Email:
</label>
<input
id="change-email-email-input"
className={inputClassName}
<DecoratedInput
type="email"
onChange={({ target }) => {
setNewEmail((target as HTMLInputElement).value)
id="change-email-email-input"
onChange={(newEmail) => {
setNewEmail(newEmail)
}}
/>
</div>
@@ -29,12 +28,11 @@ const ChangeEmailForm: FunctionComponent<Props> = ({ setNewEmail, setCurrentPass
<label className={labelClassName} htmlFor="change-email-password-input">
Current Password:
</label>
<input
<DecoratedPasswordInput
id="change-email-password-input"
className={inputClassName}
type="password"
onChange={({ target }) => {
setCurrentPassword((target as HTMLInputElement).value)
onChange={(currentPassword) => {
setCurrentPassword(currentPassword)
}}
/>
</div>

4
packages/web/src/javascripts/Components/Preferences/Panes/Account/ChangeEmail/ChangeEmailSuccess.tsx
View File

@@ -3,8 +3,8 @@ import { FunctionComponent } from 'react'
const ChangeEmailSuccess: FunctionComponent = () => {
return (
<div>
<div className={'sk-label sk-bold info mt-2'}>Your email has been successfully changed.</div>
<p className={'sk-p'}>
<div className={'font-bold text-info mb-2'}>Your email has been successfully changed.</div>
<p>
Please ensure you are running the latest version of Standard Notes on all platforms to ensure maximum
compatibility.
</p>

5
packages/web/src/javascripts/Components/Preferences/Panes/Account/ClearSessionDataView.tsx
View File

@@ -13,10 +13,9 @@ const ClearSessionDataView: FunctionComponent<{
<PreferencesGroup>
<PreferencesSegment>
<Title>Clear workspace</Title>
<Text>Remove all data related to the current workspace from the application.</Text>
<div className="min-h-3" />
<Text className="mb-3">Remove all data related to the current workspace from the application.</Text>
<Button
dangerStyle={true}
colorStyle="danger"
label="Clear workspace"
onClick={() => {
viewControllerManager.accountMenuController.setSigningOut(true)

3
packages/web/src/javascripts/Components/Preferences/Panes/Account/Credentials.tsx
View File

@@ -44,7 +44,6 @@ const Credentials: FunctionComponent<Props> = ({ application }: Props) => {
</Text>
<Button
className="min-w-20 mt-3"
variant="normal"
label="Change email"
onClick={() => {
setIsChangeEmailDialogOpen(true)
@@ -55,7 +54,7 @@ const Credentials: FunctionComponent<Props> = ({ application }: Props) => {
<Text>
Current password was set on <span className="font-bold">{passwordCreatedOn}</span>
</Text>
<Button className="min-w-20 mt-3" variant="normal" label="Change password" onClick={presentPasswordWizard} />
<Button className="min-w-20 mt-3" label="Change password" onClick={presentPasswordWizard} />
{isChangeEmailDialogOpen && (
<ChangeEmail onCloseDialog={() => setIsChangeEmailDialogOpen(false)} application={application} />
)}

3
packages/web/src/javascripts/Components/Preferences/Panes/Account/Files.tsx
View File

@@ -1,4 +1,5 @@
import { WebApplication } from '@/Application/Application'
import Spinner from '@/Components/Spinner/Spinner'
import { formatSizeToReadableString } from '@standardnotes/filepicker'
import { SubscriptionSettingName } from '@standardnotes/snjs'
import { FunctionComponent, useEffect, useState } from 'react'
@@ -44,7 +45,7 @@ const FilesSection: FunctionComponent<Props> = ({ application }) => {
<Subtitle>Storage Quota</Subtitle>
{isLoading ? (
<div className="mt-2">
<div className="sk-spinner spinner-info w-3 h-3"></div>
<Spinner className="w-3 h-3" />
</div>
) : (
<>

6
packages/web/src/javascripts/Components/Preferences/Panes/Account/OfflineSubscription.tsx
View File

@@ -101,7 +101,7 @@ const OfflineSubscription: FunctionComponent<Props> = ({ application }) => {
)}
{hasUserPreviouslyStoredCode && (
<Button
dangerStyle={true}
colorStyle="danger"
label="Remove offline key"
onClick={() => {
handleRemoveClick().catch(console.error)
@@ -111,7 +111,7 @@ const OfflineSubscription: FunctionComponent<Props> = ({ application }) => {
{!hasUserPreviouslyStoredCode && !isSuccessfullyActivated && (
<Button
label={'Submit'}
variant="primary"
primary
disabled={activationCode === ''}
onClick={(event) => handleSubscriptionCodeSubmit(event)}
/>
@@ -119,7 +119,7 @@ const OfflineSubscription: FunctionComponent<Props> = ({ application }) => {
</form>
</div>
</div>
<HorizontalSeparator classes="mt-8 mb-5" />
<HorizontalSeparator classes="mt-5 mb-3" />
</>
)
}

14
packages/web/src/javascripts/Components/Preferences/Panes/Account/SignOutView.tsx
View File

@@ -23,30 +23,24 @@ const SignOutView: FunctionComponent<Props> = observer(({ application, viewContr
<Title>Sign out</Title>
<Subtitle>Other devices</Subtitle>
<Text>Want to sign out on all devices except this one?</Text>
<div className="min-h-3" />
<div className="flex flex-row">
<div className="flex flex-row mt-3">
<Button
className="mr-3"
variant="normal"
label="Sign out other sessions"
onClick={() => {
viewControllerManager.accountMenuController.setOtherSessionsSignOut(true)
}}
/>
<Button
variant="normal"
label="Manage sessions"
onClick={() => viewControllerManager.openSessionsModal()}
/>
<Button label="Manage sessions" onClick={() => viewControllerManager.openSessionsModal()} />
</div>
</PreferencesSegment>
<HorizontalSeparator classes="my-4" />
<PreferencesSegment>
<Subtitle>This workspace</Subtitle>
<Text>Remove all data related to the current workspace from the application.</Text>
<div className="min-h-3" />
<Button
dangerStyle={true}
className="mt-3"
colorStyle="danger"
label="Sign out workspace"
onClick={() => {
viewControllerManager.accountMenuController.setSigningOut(true)

4
packages/web/src/javascripts/Components/Preferences/Panes/Account/Subscription/NoSubscription.tsx
View File

@@ -30,11 +30,11 @@ const NoSubscription: FunctionComponent<Props> = ({ application }) => {
<>
<Text>You don't have a Standard Notes subscription yet.</Text>
{isLoadingPurchaseFlow && <Text>Redirecting you to the subscription page...</Text>}
{purchaseFlowError && <Text className="color-danger">{purchaseFlowError}</Text>}
{purchaseFlowError && <Text className="text-danger">{purchaseFlowError}</Text>}
<div className="flex">
<LinkButton className="min-w-20 mt-3 mr-3" label="Learn More" link={window.plansUrl as string} />
{application.hasAccount() && (
<Button className="min-w-20 mt-3" variant="primary" label="Subscribe" onClick={onPurchaseClick} />
<Button className="min-w-20 mt-3" primary label="Subscribe" onClick={onPurchaseClick} />
)}
</div>
</>

7
packages/web/src/javascripts/Components/Preferences/Panes/Account/Subscription/SubscriptionInformation.tsx
View File

@@ -18,12 +18,7 @@ const SubscriptionInformation = ({ subscriptionState, application }: Props) => {
return (
<>
<StatusText subscriptionState={subscriptionState} />
<Button
className="min-w-20 mt-3 mr-3"
variant="normal"
label="Manage subscription"
onClick={manageSubscription}
/>
<Button className="min-w-20 mt-3 mr-3" label="Manage subscription" onClick={manageSubscription} />
</>
)
}

1
packages/web/src/javascripts/Components/Preferences/Panes/Account/Sync.tsx
View File

@@ -43,7 +43,6 @@ const Sync: FunctionComponent<Props> = ({ application }: Props) => {
</Text>
<Button
className="min-w-20 mt-3"
variant="normal"
label="Sync now"
disabled={isSyncingInProgress}
onClick={doSynchronization}

12
packages/web/src/javascripts/Components/Preferences/Panes/Backups/CloudBackups/CloudBackupProvider.tsx
View File

@@ -166,7 +166,7 @@ const CloudBackupProvider: FunctionComponent<Props> = ({ application, providerNa
const isExpanded = authBegan || successfullyInstalled
const shouldShowEnableButton = !backupFrequency && !authBegan
const additionalClass = isEntitledToCloudBackups ? '' : 'faded cursor-default pointer-events-none'
const additionalClass = isEntitledToCloudBackups ? '' : 'opacity-50 cursor-default pointer-events-none'
return (
<div
@@ -199,7 +199,6 @@ const CloudBackupProvider: FunctionComponent<Props> = ({ application, providerNa
{shouldShowEnableButton && (
<div>
<Button
variant="normal"
label="Enable"
className={`px-1 text-xs min-w-40 ${additionalClass}`}
onClick={installIntegration}
@@ -210,13 +209,8 @@ const CloudBackupProvider: FunctionComponent<Props> = ({ application, providerNa
{backupFrequency && (
<div className={'flex flex-col items-end'}>
<Button
className={`min-w-40 mb-2 ${additionalClass}`}
variant="normal"
label="Perform Backup"
onClick={performBackupNow}
/>
<Button className="min-w-40" variant="normal" label="Disable" onClick={disable} />
<Button className={`min-w-40 mb-2 ${additionalClass}`} label="Perform Backup" onClick={performBackupNow} />
<Button className="min-w-40" label="Disable" onClick={disable} />
</div>
)}
</div>

5
packages/web/src/javascripts/Components/Preferences/Panes/Backups/CloudBackups/CloudBackups.tsx
View File

@@ -16,6 +16,7 @@ import { convertStringifiedBooleanToBoolean } from '@/Utils'
import { STRING_FAILED_TO_UPDATE_USER_SETTING } from '@/Constants/Strings'
import PreferencesGroup from '@/Components/Preferences/PreferencesComponents/PreferencesGroup'
import PreferencesSegment from '@/Components/Preferences/PreferencesComponents/PreferencesSegment'
import Spinner from '@/Components/Spinner/Spinner'
const providerData = [{ name: CloudProvider.Dropbox }, { name: CloudProvider.Google }, { name: CloudProvider.OneDrive }]
@@ -27,7 +28,7 @@ const CloudLink: FunctionComponent<Props> = ({ application }) => {
const [isEntitledToCloudBackups, setIsEntitledToCloudBackups] = useState(false)
const [isFailedCloudBackupEmailMuted, setIsFailedCloudBackupEmailMuted] = useState(true)
const [isLoading, setIsLoading] = useState(false)
const additionalClass = isEntitledToCloudBackups ? '' : 'faded cursor-default pointer-events-none'
const additionalClass = isEntitledToCloudBackups ? '' : 'opacity-50 cursor-default pointer-events-none'
const loadIsFailedCloudBackupEmailMutedSetting = useCallback(async () => {
if (!application.getUser()) {
@@ -135,7 +136,7 @@ const CloudLink: FunctionComponent<Props> = ({ application }) => {
<Text>Receive a notification email if a cloud backup fails.</Text>
</div>
{isLoading ? (
<div className={'sk-spinner info small'} />
<Spinner className="w-4 h-4" />
) : (
<Switch
onChange={toggleMuteFailedCloudBackupEmails}

17
packages/web/src/javascripts/Components/Preferences/Panes/Backups/DataBackups.tsx
View File

@@ -20,6 +20,7 @@ import Button from '@/Components/Button/Button'
import PreferencesGroup from '../../PreferencesComponents/PreferencesGroup'
import PreferencesSegment from '../../PreferencesComponents/PreferencesSegment'
import HorizontalSeparator from '@/Components/Shared/HorizontalSeparator'
import Spinner from '@/Components/Spinner/Spinner'
type Props = {
application: WebApplication
@@ -163,29 +164,29 @@ const DataBackups = ({ application, viewControllerManager }: Props) => {
{isEncryptionEnabled && (
<form className="sk-panel-form sk-panel-row">
<div className="sk-input-group">
<label className="sk-horizontal-group tight">
<div className="flex items-center gap-2">
<label className="flex items-center gap-2">
<input type="radio" onChange={() => setIsBackupEncrypted(true)} checked={isBackupEncrypted} />
<Subtitle>Encrypted</Subtitle>
<span className="font-medium text-sm">Encrypted</span>
</label>
<label className="sk-horizontal-group tight">
<label className="flex items-center gap-2">
<input type="radio" onChange={() => setIsBackupEncrypted(false)} checked={!isBackupEncrypted} />
<Subtitle>Decrypted</Subtitle>
<span className="font-medium text-sm">Decrypted</span>
</label>
</div>
</form>
)}
<Button variant="normal" onClick={downloadDataArchive} label="Download backup" className="mt-2" />
<Button onClick={downloadDataArchive} label="Download backup" className="mt-2" />
</PreferencesSegment>
<HorizontalSeparator classes="my-4" />
<PreferencesSegment>
<Subtitle>Import a previously saved backup file</Subtitle>
<div className="flex flex-row items-center mt-3">
<Button variant="normal" label="Import backup" onClick={handleImportFile} />
<Button label="Import backup" onClick={handleImportFile} />
<input type="file" ref={fileInputRef} onChange={importFileSelected} className="hidden" />
{isImportDataLoading && <div className="sk-spinner normal info ml-4" />}
{isImportDataLoading && <Spinner className="ml-4" />}
</div>
</PreferencesSegment>
</PreferencesGroup>

5
packages/web/src/javascripts/Components/Preferences/Panes/Backups/EmailBackups.tsx
View File

@@ -11,6 +11,7 @@ import HorizontalSeparator from '@/Components/Shared/HorizontalSeparator'
import { EmailBackupFrequency, MuteFailedBackupsEmailsOption, SettingName } from '@standardnotes/snjs'
import PreferencesGroup from '../../PreferencesComponents/PreferencesGroup'
import PreferencesSegment from '../../PreferencesComponents/PreferencesSegment'
import Spinner from '@/Components/Spinner/Spinner'
type Props = {
application: WebApplication
@@ -113,7 +114,7 @@ const EmailBackups = ({ application }: Props) => {
<Text>How often to receive backups.</Text>
<div className="mt-2">
{isLoading ? (
<div className={'sk-spinner info small'} />
<Spinner className="w-4 h-4" />
) : (
<Dropdown
id="def-editor-dropdown"
@@ -131,7 +132,7 @@ const EmailBackups = ({ application }: Props) => {
<Text>Receive a notification email if an email backup fails.</Text>
</div>
{isLoading ? (
<div className={'sk-spinner info small'} />
<Spinner className="w-4 h-4" />
) : (
<Switch onChange={toggleMuteFailedBackupEmails} checked={!isFailedBackupEmailMuted} />
)}

5
packages/web/src/javascripts/Components/Preferences/Panes/Backups/Files/BackupsDropZone.tsx
View File

@@ -8,6 +8,7 @@ import { StreamingFileApi } from '@standardnotes/filepicker'
import { WebApplication } from '@/Application/Application'
import EncryptionStatusItem from '../../Security/EncryptionStatusItem'
import PreferencesSegment from '@/Components/Preferences/PreferencesComponents/PreferencesSegment'
import Spinner from '@/Components/Spinner/Spinner'
type Props = {
application: WebApplication
@@ -163,7 +164,6 @@ const BackupsDropZone: FunctionComponent<Props> = ({ application }) => {
</div>
<div>
<Button
variant="normal"
label="Choose"
className={'px-1 text-xs min-w-40'}
onClick={chooseRelatedBinaryFile}
@@ -179,7 +179,6 @@ const BackupsDropZone: FunctionComponent<Props> = ({ application }) => {
<div>
<Button
variant="normal"
label={isSavingAsDecrypted ? undefined : 'Save'}
className={'px-1 text-xs min-w-40'}
onClick={downloadBinaryFileAsDecrypted}
@@ -187,7 +186,7 @@ const BackupsDropZone: FunctionComponent<Props> = ({ application }) => {
>
{isSavingAsDecrypted && (
<div className="flex justify-center w-full">
<div className="sk-spinner w-5 h-5 spinner-info"></div>
<Spinner className="w-5 h-5" />
</div>
)}
</Button>

14
packages/web/src/javascripts/Components/Preferences/Panes/Backups/Files/FileBackupsDesktop.tsx
View File

@@ -91,18 +91,8 @@ const FileBackupsDesktop = ({ application, backupsService }: Props) => {
/>
<div className="flex flex-row mt-2.5">
<Button
variant="normal"
label="Open Backups Location"
className={'mr-3 text-xs'}
onClick={openBackupsLocation}
/>
<Button
variant="normal"
label="Change Backups Location"
className={'mr-3 text-xs'}
onClick={changeBackupsLocation}
/>
<Button label="Open Backups Location" className={'mr-3 text-xs'} onClick={openBackupsLocation} />
<Button label="Change Backups Location" className={'mr-3 text-xs'} onClick={changeBackupsLocation} />
</div>
</>
</PreferencesSegment>

4
packages/web/src/javascripts/Components/Preferences/Panes/Extensions/ConfirmCustomExtension.tsx
View File

@@ -56,11 +56,11 @@ const ConfirmCustomExtension: FunctionComponent<{
<div className="min-h-3" />
<div className="flex flex-row">
<Button className="min-w-20" variant="normal" label="Cancel" onClick={() => callback(false)} />
<Button className="min-w-20" label="Cancel" onClick={() => callback(false)} />
<div className="min-w-3" />
<Button className="min-w-20" variant="normal" label="Install" onClick={() => callback(true)} />
<Button className="min-w-20" label="Install" onClick={() => callback(true)} />
</div>
</PreferencesSegment>
)

2
packages/web/src/javascripts/Components/Preferences/Panes/Extensions/ExtensionInfoCell.tsx
View File

@@ -44,7 +44,7 @@ const ExtensionInfoCell: FunctionComponent<Props> = ({ extensionName, changeName
ref={inputRef}
disabled={!isRenaming || !renameable}
autoComplete="off"
className="flex-grow text-base font-bold no-border bg-default px-0 color-text"
className="flex-grow text-base font-bold no-border bg-default px-0 text-text"
type="text"
value={newExtensionName}
onChange={({ target: input }) => setNewExtensionName((input as HTMLInputElement)?.value)}

15
packages/web/src/javascripts/Components/Preferences/Panes/Extensions/ExtensionItem.tsx
View File

@@ -52,19 +52,20 @@ const ExtensionItem: FunctionComponent<ExtensionItemProps> = ({ application, ext
const localInstallable = extension.package_info.download_url
const isThirParty = 'identifier' in extension && application.features.isThirdPartyFeature(extension.identifier)
const isThirdParty = 'identifier' in extension && application.features.isThirdPartyFeature(extension.identifier)
return (
<PreferencesSegment classes={'mb-5'}>
<ExtensionInfoCell isThirdParty={isThirParty} extensionName={extensionName} changeName={changeExtensionName} />
<ExtensionInfoCell isThirdParty={isThirdParty} extensionName={extensionName} changeName={changeExtensionName} />
<div className="min-h-2" />
<div className="my-1" />
{isThirParty && localInstallable && <UseHosted offlineOnly={offlineOnly} toggleOfflineOnly={toggleOfflineOnly} />}
{isThirdParty && localInstallable && (
<UseHosted offlineOnly={offlineOnly} toggleOfflineOnly={toggleOfflineOnly} />
)}
<div className="min-h-2" />
<div className="flex flex-row">
<Button className="min-w-20" variant="normal" label={'Uninstall'} onClick={() => uninstall(extension)} />
<div className="flex flex-row mt-2">
<Button className="min-w-20" label={'Uninstall'} onClick={() => uninstall(extension)} />
</div>
</PreferencesSegment>
)

8
packages/web/src/javascripts/Components/Preferences/Panes/Extensions/Extensions.tsx
View File

@@ -118,13 +118,7 @@ const Extensions: FunctionComponent<Props> = ({ application, extensionsLatestVer
setCustomUrl(value)
}}
/>
<div className="min-h-2" />
<Button
className="min-w-20"
variant="normal"
label="Install"
onClick={() => submitExtensionUrl(customUrl)}
/>
<Button className="min-w-20 mt-3" label="Install" onClick={() => submitExtensionUrl(customUrl)} />
</PreferencesSegment>
)}
{confirmableExtension && (

4
packages/web/src/javascripts/Components/Preferences/Panes/General/Defaults.tsx
View File

@@ -71,13 +71,13 @@ const Defaults: FunctionComponent<Props> = ({ application }) => {
label: editor.displayName,
value: identifier,
...(iconType ? { icon: iconType } : null),
...(tint ? { iconClassName: `color-accessory-tint-${tint}` } : null),
...(tint ? { iconClassName: `text-accessory-tint-${tint}` } : null),
}
})
.concat([
{
icon: 'plain-text',
iconClassName: 'color-accessory-tint-1',
iconClassName: 'text-accessory-tint-1',
label: PLAIN_EDITOR_NAME,
value: 'plain-editor',
},

1
packages/web/src/javascripts/Components/Preferences/Panes/Listed/Listed.tsx
View File

@@ -96,7 +96,6 @@ const Listed = ({ application }: Props) => {
<Text>Create a free Listed author account to get started.</Text>
<Button
className="mt-3"
variant="normal"
disabled={requestingAccount}
label={requestingAccount ? 'Creating account...' : 'Create new author'}
onClick={registerNewAccount}

3
packages/web/src/javascripts/Components/Preferences/Panes/Listed/ListedAccountItem.tsx
View File

@@ -3,6 +3,7 @@ import { LinkButton, Subtitle } from '@/Components/Preferences/PreferencesCompon
import { WebApplication } from '@/Application/Application'
import { ListedAccount, ListedAccountInfo } from '@standardnotes/snjs'
import { FunctionComponent, useEffect, useState } from 'react'
import Spinner from '@/Components/Spinner/Spinner'
type Props = {
account: ListedAccount
@@ -29,7 +30,7 @@ const ListedAccountItem: FunctionComponent<Props> = ({ account, showSeparator, a
<Subtitle className="em">{accountInfo?.display_name}</Subtitle>
<div className="mb-2" />
<div className="flex">
{isLoading ? <div className="sk-spinner small info"></div> : null}
{isLoading ? <Spinner className="w-4 h-4" /> : null}
{accountInfo && (
<>
<LinkButton className="mr-2" label="Open Blog" link={accountInfo.author_url} />

4
packages/web/src/javascripts/Components/Preferences/Panes/Security/EncryptionStatusItem.tsx
View File

@@ -11,9 +11,9 @@ const EncryptionStatusItem: FunctionComponent<Props> = ({ icon, status, checkmar
<div className="w-full rounded py-1.5 px-3 text-input my-1 min-h-8 flex flex-row items-center bg-contrast no-border focus-within:ring-info">
{icon}
<div className="min-w-3 min-h-1" />
<div className="flex-grow color-text text-sm">{status}</div>
<div className="flex-grow text-text text-sm">{status}</div>
<div className="min-w-3 min-h-1" />
{checkmark && <Icon className="success min-w-4 min-h-4" type="check-bold" />}
{checkmark && <Icon className="text-success min-w-4 min-h-4" type="check-bold" />}
</div>
)

11
packages/web/src/javascripts/Components/Preferences/Panes/Security/ErroredItems.tsx
View File

@@ -65,13 +65,12 @@ const ErroredItems: FunctionComponent<Props> = ({ viewControllerManager }: Props
<PreferencesGroup>
<PreferencesSegment>
<Title>
Error Decrypting Items <span className="ml-1 color-warning">⚠️</span>
Error Decrypting Items <span className="ml-1 text-warning">⚠️</span>
</Title>
<Text>{`${erroredItems.length} items are errored and could not be decrypted.`}</Text>
<div className="flex">
<Button
className="min-w-20 mt-3 mr-2"
variant="normal"
label="Export all"
onClick={() => {
void app.getArchiveService().downloadEncryptedItems(erroredItems)
@@ -79,8 +78,7 @@ const ErroredItems: FunctionComponent<Props> = ({ viewControllerManager }: Props
/>
<Button
className="min-w-20 mt-3 mr-2"
variant="normal"
dangerStyle={true}
colorStyle="danger"
label="Delete all"
onClick={() => {
void deleteItems(erroredItems)
@@ -102,7 +100,6 @@ const ErroredItems: FunctionComponent<Props> = ({ viewControllerManager }: Props
<div className="flex">
<Button
className="min-w-20 mt-3 mr-2"
variant="normal"
label="Attempt decryption"
onClick={() => {
attemptDecryption(item)
@@ -110,7 +107,6 @@ const ErroredItems: FunctionComponent<Props> = ({ viewControllerManager }: Props
/>
<Button
className="min-w-20 mt-3 mr-2"
variant="normal"
label="Export"
onClick={() => {
void app.getArchiveService().downloadEncryptedItem(item)
@@ -118,8 +114,7 @@ const ErroredItems: FunctionComponent<Props> = ({ viewControllerManager }: Props
/>
<Button
className="min-w-20 mt-3 mr-2"
variant="normal"
dangerStyle={true}
colorStyle="danger"
label="Delete"
onClick={() => {
void deleteItem(item)

32
packages/web/src/javascripts/Components/Preferences/Panes/Security/PasscodeLock.tsx
View File

@@ -11,7 +11,7 @@ import {
import { WebApplication } from '@/Application/Application'
import { preventRefreshing } from '@/Utils'
import { alertDialog } from '@/Services/AlertService'
import { ChangeEventHandler, FormEvent, useCallback, useEffect, useRef, useState } from 'react'
import { FormEvent, useCallback, useEffect, useRef, useState } from 'react'
import { ApplicationEvent } from '@standardnotes/snjs'
import { observer } from 'mobx-react-lite'
import { ViewControllerManager } from '@/Services/ViewControllerManager'
@@ -19,6 +19,7 @@ import { Title, Text } from '@/Components/Preferences/PreferencesComponents/Cont
import Button from '@/Components/Button/Button'
import PreferencesGroup from '../../PreferencesComponents/PreferencesGroup'
import PreferencesSegment from '../../PreferencesComponents/PreferencesSegment'
import DecoratedPasswordInput from '@/Components/Input/DecoratedPasswordInput'
type Props = {
application: WebApplication
@@ -93,13 +94,11 @@ const PasscodeLock = ({ application, viewControllerManager }: Props) => {
})
}
const handlePasscodeChange: ChangeEventHandler<HTMLInputElement> = (event) => {
const { value } = event.target
const handlePasscodeChange = (value: string) => {
setPasscode(value)
}
const handleConfirmPasscodeChange: ChangeEventHandler<HTMLInputElement> = (event) => {
const { value } = event.target
const handleConfirmPasscodeChange = (value: string) => {
setPasscodeConfirmation(value)
}
@@ -185,7 +184,7 @@ const PasscodeLock = ({ application, viewControllerManager }: Props) => {
{keyStorageInfo && <Text className="mb-3">{keyStorageInfo}</Text>}
{!showPasscodeForm && <Button label="Add passcode" onClick={handleAddPassCode} variant="primary" />}
{!showPasscodeForm && <Button label="Add passcode" onClick={handleAddPassCode} primary />}
</>
)}
@@ -198,25 +197,22 @@ const PasscodeLock = ({ application, viewControllerManager }: Props) => {
{showPasscodeForm && (
<form className="sk-panel-form" onSubmit={submitPasscodeForm}>
<div className="sk-panel-row" />
<input
className="sk-input contrast"
<DecoratedPasswordInput
type="password"
ref={passcodeInputRef}
value={passcode ? passcode : ''}
onChange={handlePasscodeChange}
placeholder="Passcode"
/>
<input
className="sk-input contrast"
<DecoratedPasswordInput
className="mt-2"
type="password"
value={passcodeConfirmation ? passcodeConfirmation : ''}
onChange={handleConfirmPasscodeChange}
placeholder="Confirm Passcode"
/>
<div className="min-h-2" />
<Button variant="primary" onClick={submitPasscodeForm} label="Set Passcode" className="mr-3" />
<Button variant="normal" onClick={cancelPasscodeForm} label="Cancel" />
<Button primary onClick={submitPasscodeForm} label="Set Passcode" className="mr-3 mt-3" />
<Button onClick={cancelPasscodeForm} label="Cancel" />
</form>
)}
@@ -224,8 +220,8 @@ const PasscodeLock = ({ application, viewControllerManager }: Props) => {
<>
<Text>Passcode lock is enabled.</Text>
<div className="flex flex-row mt-3">
<Button variant="normal" label="Change Passcode" onClick={changePasscodePressed} className="mr-3" />
<Button dangerStyle={true} label="Remove Passcode" onClick={removePasscodePressed} />
<Button label="Change Passcode" onClick={changePasscodePressed} className="mr-3" />
<Button colorStyle="danger" label="Remove Passcode" onClick={removePasscodePressed} />
</div>
</>
)}
@@ -244,7 +240,9 @@ const PasscodeLock = ({ application, viewControllerManager }: Props) => {
return (
<a
key={option.value}
className={`sk-a info mr-3 ${option.value === selectedAutoLockInterval ? 'boxed' : ''}`}
className={`mr-3 rounded text-info cursor-pointer ${
option.value === selectedAutoLockInterval ? 'bg-info text-info-contrast px-1.5 py-0.5' : ''
}`}
onClick={() => selectAutoLockInterval(option.value)}
>
{option.label}

5
packages/web/src/javascripts/Components/Preferences/Panes/Security/Privacy.tsx
View File

@@ -8,6 +8,7 @@ import { FunctionComponent, useCallback, useEffect, useState } from 'react'
import { STRING_FAILED_TO_UPDATE_USER_SETTING } from '@/Constants/Strings'
import PreferencesGroup from '../../PreferencesComponents/PreferencesGroup'
import PreferencesSegment from '../../PreferencesComponents/PreferencesSegment'
import Spinner from '@/Components/Spinner/Spinner'
type Props = {
application: WebApplication
@@ -105,7 +106,7 @@ const Privacy: FunctionComponent<Props> = ({ application }: Props) => {
</Text>
</div>
{isLoading ? (
<div className={'sk-spinner info small flex-shrink-0 ml-2'} />
<Spinner className="flex-shrink-0 ml-2" />
) : (
<Switch
onChange={toggleMuteSignInEmails}
@@ -124,7 +125,7 @@ const Privacy: FunctionComponent<Props> = ({ application }: Props) => {
</Text>
</div>
{isLoading ? (
<div className={'sk-spinner info small flex-shrink-0 ml-2'} />
<Spinner className="flex-shrink-0 ml-2" />
) : (
<Switch
onChange={toggleSessionLogging}

6
packages/web/src/javascripts/Components/Preferences/Panes/Security/Protections.tsx
View File

@@ -74,16 +74,16 @@ const Protections: FunctionComponent<Props> = ({ application }) => {
<PreferencesSegment>
<Title>Protections</Title>
{protectionsDisabledUntil ? (
<Text className="info">Unprotected access expires at {protectionsDisabledUntil}.</Text>
<Text className="text-info">Unprotected access expires at {protectionsDisabledUntil}.</Text>
) : (
<Text className="info">Protections are enabled.</Text>
<Text className="text-info">Protections are enabled.</Text>
)}
<Text className="mt-2">
Actions like viewing or searching protected notes, exporting decrypted backups, or revoking an active session
require additional authentication such as entering your account password or application passcode.
</Text>
{protectionsDisabledUntil && (
<Button className="mt-3" variant="primary" label="End Unprotected Access" onClick={enableProtections} />
<Button className="mt-3" primary label="End Unprotected Access" onClick={enableProtections} />
)}
</PreferencesSegment>
</PreferencesGroup>

4
packages/web/src/javascripts/Components/Preferences/Panes/TwoFactorAuth/AuthAppInfoPopup.tsx
View File

@@ -14,7 +14,7 @@ const DisclosureIconButton: FunctionComponent<Props> = ({ className = '', icon,
<DisclosureButton
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
className={`no-border cursor-pointer bg-transparent hover:brightness-130 p-0 ${className ?? ''}`}
className={`no-border cursor-pointer bg-transparent hover:brightness-125 p-0 ${className ?? ''}`}
>
<Icon type={icon} />
</DisclosureButton>
@@ -51,7 +51,7 @@ const AuthAppInfoTooltip: FunctionComponent = () => {
/>
<DisclosurePanel>
<div
className={`bg-inverted-default color-inverted-default text-center rounded shadow-overlay
className={`bg-inverted-default text-inverted-default text-center rounded shadow-overlay
py-1.5 px-2 absolute w-103 -top-10 -left-51`}
>
Some apps, like Google Authenticator, do not back up and restore your secret keys if you lose your device or

6
packages/web/src/javascripts/Components/Preferences/Panes/TwoFactorAuth/SaveSecretKey.tsx
View File

@@ -37,7 +37,7 @@ const SaveSecretKey: FunctionComponent<Props> = ({ activation: act }) => {
>
Step 2 of 3 - Save secret key
</ModalDialogLabel>
<ModalDialogDescription className="h-33">
<ModalDialogDescription className="h-33 flex flex-row items-center">
<div className="flex-grow flex flex-col">
<div className="flex flex-row items-center">
<Bullet />
@@ -76,8 +76,8 @@ const SaveSecretKey: FunctionComponent<Props> = ({ activation: act }) => {
</div>
</ModalDialogDescription>
<ModalDialogButtons>
<Button className="min-w-20" variant="normal" label="Back" onClick={() => act.openScanQRCode()} />
<Button className="min-w-20" variant="primary" label="Next" onClick={() => act.openVerification()} />
<Button className="min-w-20" label="Back" onClick={() => act.openScanQRCode()} />
<Button className="min-w-20" primary label="Next" onClick={() => act.openVerification()} />
</ModalDialogButtons>
</ModalDialog>
)

6
packages/web/src/javascripts/Components/Preferences/Panes/TwoFactorAuth/ScanQRCode.tsx
View File

@@ -20,7 +20,7 @@ const ScanQRCode: FunctionComponent<Props> = ({ activation: act }) => {
return (
<ModalDialog>
<ModalDialogLabel closeDialog={act.cancelActivation}>Step 1 of 3 - Scan QR code</ModalDialogLabel>
<ModalDialogDescription className="h-33">
<ModalDialogDescription className="h-33 flex flex-row items-center">
<div className="w-25 h-25 flex items-center justify-center bg-info">
<QRCode className="border-neutral-contrast-bg border-solid border-2" value={act.qrCode} size={100} />
</div>
@@ -53,8 +53,8 @@ const ScanQRCode: FunctionComponent<Props> = ({ activation: act }) => {
</div>
</ModalDialogDescription>
<ModalDialogButtons>
<Button className="min-w-20" variant="normal" label="Cancel" onClick={() => act.cancelActivation()} />
<Button className="min-w-20" variant="primary" label="Next" onClick={() => act.openSaveSecretKey()} />
<Button className="min-w-20" label="Cancel" onClick={() => act.cancelActivation()} />
<Button className="min-w-20" primary label="Next" onClick={() => act.openSaveSecretKey()} />
</ModalDialogButtons>
</ModalDialog>
)

2
packages/web/src/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorAuthView/TwoFactorAuthView.tsx
View File

@@ -31,7 +31,7 @@ const TwoFactorAuthView: FunctionComponent<Props> = ({ auth }) => {
{auth.errorMessage != null && (
<PreferencesSegment>
<Text className="color-danger">{auth.errorMessage}</Text>
<Text className="text-danger">{auth.errorMessage}</Text>
</PreferencesSegment>
)}
</PreferencesGroup>

3
packages/web/src/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorAuthView/TwoFactorSwitch.tsx
View File

@@ -2,6 +2,7 @@ import { FunctionComponent } from 'react'
import Switch from '@/Components/Switch/Switch'
import { observer } from 'mobx-react-lite'
import { is2FADisabled, TwoFactorAuth } from '../TwoFactorAuth'
import Spinner from '@/Components/Spinner/Spinner'
type Props = {
auth: TwoFactorAuth
@@ -13,7 +14,7 @@ const TwoFactorSwitch: FunctionComponent<Props> = ({ auth }) => {
}
if (auth.status === 'fetching') {
return <div className="sk-spinner normal info" />
return <Spinner className="w-4 h-4" />
}
return <Switch checked={!is2FADisabled(auth.status)} onChange={auth.toggle2FA} />

4
packages/web/src/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorSuccess.tsx
View File

@@ -15,13 +15,13 @@ type Props = {
const TwoFactorSuccess: FunctionComponent<Props> = ({ activation: act }) => (
<ModalDialog>
<ModalDialogLabel closeDialog={act.finishActivation}>Successfully Enabled</ModalDialogLabel>
<ModalDialogDescription>
<ModalDialogDescription className="flex flex-row items-center">
<div className="flex flex-row items-center justify-center pt-2">
<Subtitle>Two-factor authentication has been successfully enabled for your account.</Subtitle>
</div>
</ModalDialogDescription>
<ModalDialogButtons>
<Button className="min-w-20" variant="primary" label="Finish" onClick={act.finishActivation} />
<Button className="min-w-20" primary label="Finish" onClick={act.finishActivation} />
</ModalDialogButtons>
</ModalDialog>
)

10
packages/web/src/javascripts/Components/Preferences/Panes/TwoFactorAuth/Verification.tsx
View File

@@ -19,7 +19,7 @@ const Verification: FunctionComponent<Props> = ({ activation: act }) => {
return (
<ModalDialog>
<ModalDialogLabel closeDialog={act.cancelActivation}>Step 3 of 3 - Verification</ModalDialogLabel>
<ModalDialogDescription className="h-33">
<ModalDialogDescription className="h-33 flex flex-row items-center">
<div className="flex-grow flex flex-col">
<div className="flex flex-row items-center mb-4">
<Bullet />
@@ -43,13 +43,13 @@ const Verification: FunctionComponent<Props> = ({ activation: act }) => {
</ModalDialogDescription>
<ModalDialogButtons>
{act.verificationStatus === 'invalid-auth-code' && (
<div className="text-sm color-danger flex-grow">Incorrect authentication code, please try again.</div>
<div className="text-sm text-danger flex-grow">Incorrect authentication code, please try again.</div>
)}
{act.verificationStatus === 'invalid-secret' && (
<div className="text-sm color-danger flex-grow">Incorrect secret key, please try again.</div>
<div className="text-sm text-danger flex-grow">Incorrect secret key, please try again.</div>
)}
<Button className="min-w-20" variant="normal" label="Back" onClick={act.openSaveSecretKey} />
<Button className="min-w-20" variant="primary" label="Next" onClick={act.enable2FA} />
<Button className="min-w-20" label="Back" onClick={act.openSaveSecretKey} />
<Button className="min-w-20" primary label="Next" onClick={act.enable2FA} />
</ModalDialogButtons>
</ModalDialog>
)

8
packages/web/src/javascripts/Components/Preferences/PreferencesComponents/Content.tsx
View File

@@ -2,7 +2,7 @@ import { FunctionComponent } from 'react'
export const Title: FunctionComponent = ({ children }) => (
<>
<h2 className="text-base m-0 mb-1 info">{children}</h2>
<h2 className="text-base m-0 mb-1 text-info font-bold">{children}</h2>
<div className="min-h-2" />
</>
)
@@ -20,9 +20,9 @@ export const Text: FunctionComponent<{ className?: string }> = ({ children, clas
)
const buttonClasses =
'block bg-default color-text rounded border-solid \
border-1 px-4 py-1.75 font-bold text-sm fit-content \
focus:bg-contrast hover:bg-contrast border-main'
'block bg-default text-text rounded border-solid \
border px-4 py-1.5 font-bold text-sm w-fit \
focus:bg-contrast hover:bg-contrast border-border'
export const LinkButton: FunctionComponent<{
label: string

8
packages/web/src/javascripts/Components/Preferences/PreferencesComponents/MenuItem.tsx
View File

@@ -12,16 +12,18 @@ interface Props {
const PreferencesMenuItem: FunctionComponent<Props> = ({ iconType, label, selected, onClick, hasBubble }) => (
<div
className={`preferences-menu-item select-none ${selected ? 'selected' : ''}`}
className={`preferences-menu-item box-border w-auto h-auto rounded min-w-42 py-2 px-4 flex flex-row items-center justify-start text-sm cursor-pointer border-solid border select-none hover:border-border hover:bg-default ${
selected ? 'selected border-info text-info font-bold' : 'border-transparent'
}`}
onClick={(e) => {
e.preventDefault()
onClick()
}}
>
<Icon className="icon" type={iconType} />
<Icon className={`icon text-base ${selected ? 'text-info' : 'text-neutral'}`} type={iconType} />
<div className="min-w-1" />
{label}
{hasBubble && <span className="ml-1 color-warning">⚠️</span>}
{hasBubble && <span className="ml-1 text-warning">⚠️</span>}
</div>
)

2
packages/web/src/javascripts/Components/Preferences/PreferencesComponents/PreferencesGroup.tsx
View File

@@ -1,7 +1,7 @@
import { FunctionComponent } from 'react'
const PreferencesGroup: FunctionComponent = ({ children }) => (
<div className="bg-default border-1 border-solid rounded border-main px-6 py-6 flex flex-col mb-3">{children}</div>
<div className="bg-default border border-solid rounded border-border p-6 flex flex-col mb-3">{children}</div>
)
export default PreferencesGroup

4
packages/web/src/javascripts/Components/Preferences/PreferencesComponents/PreferencesPane.tsx
View File

@@ -1,13 +1,13 @@
import { FunctionComponent } from 'react'
const PreferencesPane: FunctionComponent = ({ children }) => (
<div className="color-foreground flex-grow flex flex-row overflow-y-auto min-h-0">
<div className="text-foreground flex-grow flex flex-row overflow-y-auto min-h-0">
<div className="flex-grow flex flex-col py-6 items-center">
<div className="w-125 max-w-125 flex flex-col">
{children != undefined && Array.isArray(children) ? children.filter((child) => child != undefined) : children}
</div>
</div>
<div className="flex-basis-55 flex-shrink" />
<div className="basis-[13.75rem] flex-shrink" />
</div>
)

2
packages/web/src/javascripts/Components/Preferences/PreferencesView.tsx
View File

@@ -28,7 +28,7 @@ const PreferencesView: FunctionComponent<PreferencesProps> = (props) => {
}, [props, menu])
return (
<div className="h-full w-full absolute top-left-0 flex flex-col bg-contrast z-index-preferences">
<div className="h-full w-full absolute top-0 left-0 flex flex-col bg-contrast z-preferences">
<TitleBar className="items-center justify-between">
<div className="h-8 w-8" />
<Title className="text-lg">Your preferences for Standard Notes</Title>