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

style: tailwind classname sorting (#1169)

Browse Source
This commit is contained in:
Aman Harwara
2022-06-28 13:37:38 +05:30
committed by GitHub
parent 15ca2d358b
commit ee5b6627da
159 changed files with 565 additions and 549 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/web/src/javascripts/Components/Preferences/Panes/Account/Advanced.tsx
View File

@@ -21,7 +21,7 @@ const Advanced: FunctionComponent<Props> = ({ application, viewControllerManager
<PreferencesSegment>
<AccordionItem title={'Advanced Settings'}>
<div className="flex flex-row items-center">
<div className="flex-grow flex flex-col">
<div className="flex flex-grow flex-col">
<OfflineSubscription application={application} viewControllerManager={viewControllerManager} />
<Extensions
className={'mt-3'}

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

@@ -33,13 +33,13 @@ const Authentication: FunctionComponent<Props> = ({ viewControllerManager }) =>
<div className="flex flex-col items-center px-12">
<AccountIllustration className="mb-3" />
<Title>You're not signed in</Title>
<Text className="text-center mb-3">
<Text className="mb-3 text-center">
Sign in to sync your notes and preferences across all your devices and enable end-to-end encryption.
</Text>
<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 text-info underline cursor-pointer" onClick={clickSignIn}>
<button className="cursor-pointer border-0 bg-default p-0 text-info underline" onClick={clickSignIn}>
Sign in
</button>
</div>

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

@@ -142,7 +142,7 @@ const ChangeEmail: FunctionComponent<Props> = ({ onCloseDialog, application }) =
<div>
<ModalDialog>
<ModalDialogLabel closeDialog={handleDialogClose}>Change Email</ModalDialogLabel>
<ModalDialogDescription className="px-4.5 flex flex-row items-center">
<ModalDialogDescription className="flex flex-row items-center px-4.5">
{currentStep === Steps.InitialStep && (
<ChangeEmailForm setNewEmail={setNewEmail} setCurrentPassword={setCurrentPassword} />
)}

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

@@ -11,7 +11,7 @@ const labelClassName = 'block mb-1'
const ChangeEmailForm: FunctionComponent<Props> = ({ setNewEmail, setCurrentPassword }) => {
return (
<div className="w-full flex flex-col">
<div className="flex w-full flex-col">
<div className="mt-2 mb-3">
<label className={labelClassName} htmlFor="change-email-email-input">
New Email:

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

@@ -3,7 +3,7 @@ import { FunctionComponent } from 'react'
const ChangeEmailSuccess: FunctionComponent = () => {
return (
<div>
<div className={'font-bold text-info mb-2'}>Your email has been successfully changed.</div>
<div className={'mb-2 font-bold text-info'}>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.

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

@@ -40,10 +40,10 @@ const Credentials: FunctionComponent<Props> = ({ application }: Props) => {
<Title>Credentials</Title>
<Subtitle>Email</Subtitle>
<Text>
You're signed in as <span className="font-bold wrap">{user?.email}</span>
You're signed in as <span className="wrap font-bold">{user?.email}</span>
</Text>
<Button
className="min-w-20 mt-3"
className="mt-3 min-w-20"
label="Change email"
onClick={() => {
setIsChangeEmailDialogOpen(true)
@@ -54,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" label="Change password" onClick={presentPasswordWizard} />
<Button className="mt-3 min-w-20" label="Change password" onClick={presentPasswordWizard} />
{isChangeEmailDialogOpen && (
<ChangeEmail onCloseDialog={() => setIsChangeEmailDialogOpen(false)} application={application} />
)}

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

@@ -45,7 +45,7 @@ const FilesSection: FunctionComponent<Props> = ({ application }) => {
<Subtitle>Storage Quota</Subtitle>
{isLoading ? (
<div className="mt-2">
<Spinner className="w-3 h-3" />
<Spinner className="h-3 w-3" />
</div>
) : (
<>
@@ -54,7 +54,7 @@ const FilesSection: FunctionComponent<Props> = ({ application }) => {
<span>{formatSizeToReadableString(filesQuotaTotal)}</span> used
</div>
<progress
className="w-full progress-bar"
className="progress-bar w-full"
aria-label="Files storage used"
value={filesQuotaUsed}
max={filesQuotaTotal}

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

@@ -79,7 +79,7 @@ const OfflineSubscription: FunctionComponent<Props> = ({ application }) => {
return (
<>
<div className="flex items-center justify-between">
<div className="flex flex-col mt-3 w-full">
<div className="mt-3 flex w-full flex-col">
<Subtitle>{!hasUserPreviouslyStoredCode && 'Activate'} Offline Subscription</Subtitle>
<form onSubmit={handleSubscriptionCodeSubmit}>
<div className={'mt-2'}>
@@ -94,7 +94,7 @@ const OfflineSubscription: FunctionComponent<Props> = ({ application }) => {
)}
</div>
{(isSuccessfullyActivated || isSuccessfullyRemoved) && (
<div className={'mt-3 mb-3 info'}>
<div className={'info mt-3 mb-3'}>
Your offline subscription code has been successfully {isSuccessfullyActivated ? 'activated' : 'removed'}
.
</div>

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

@@ -23,7 +23,7 @@ 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="flex flex-row mt-3">
<div className="mt-3 flex flex-row">
<Button
className="mr-3"
label="Sign out other sessions"

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

@@ -32,9 +32,9 @@ const NoSubscription: FunctionComponent<Props> = ({ application }) => {
{isLoadingPurchaseFlow && <Text>Redirecting you to the subscription page...</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} />
<LinkButton className="mt-3 mr-3 min-w-20" label="Learn More" link={window.plansUrl as string} />
{application.hasAccount() && (
<Button className="min-w-20 mt-3" primary label="Subscribe" onClick={onPurchaseClick} />
<Button className="mt-3 min-w-20" primary label="Subscribe" onClick={onPurchaseClick} />
)}
</div>
</>

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

@@ -23,7 +23,7 @@ const Subscription: FunctionComponent<Props> = ({ application, viewControllerMan
<PreferencesGroup>
<PreferencesSegment>
<div className="flex flex-row items-center">
<div className="flex-grow flex flex-col">
<div className="flex flex-grow flex-col">
<Title>Subscription</Title>
{userSubscription && userSubscription.endsAt > now ? (
<SubscriptionInformation subscriptionState={subscriptionState} application={application} />

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

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

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

@@ -36,13 +36,13 @@ const Sync: FunctionComponent<Props> = ({ application }: Props) => {
<PreferencesGroup>
<PreferencesSegment>
<div className="flex flex-row items-center">
<div className="flex-grow flex flex-col">
<div className="flex flex-grow flex-col">
<Title>Sync</Title>
<Text>
Last synced <span className="font-bold">on {lastSyncDate}</span>
</Text>
<Button
className="min-w-20 mt-3"
className="mt-3 min-w-20"
label="Sync now"
disabled={isSyncingInProgress}
onClick={doSynchronization}

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

@@ -171,7 +171,7 @@ const CloudBackupProvider: FunctionComponent<Props> = ({ application, providerNa
return (
<div
className={`mr-1 ${isExpanded ? 'expanded' : ' '} ${
shouldShowEnableButton || backupFrequency ? 'flex justify-between items-center' : ''
shouldShowEnableButton || backupFrequency ? 'flex items-center justify-between' : ''
}`}
>
<div>
@@ -200,7 +200,7 @@ const CloudBackupProvider: FunctionComponent<Props> = ({ application, providerNa
<div>
<Button
label="Enable"
className={`px-1 text-xs min-w-40 ${additionalClass}`}
className={`min-w-40 px-1 text-xs ${additionalClass}`}
onClick={installIntegration}
disabled={!isEntitledToCloudBackups}
/>
@@ -209,7 +209,7 @@ const CloudBackupProvider: FunctionComponent<Props> = ({ application, providerNa
{backupFrequency && (
<div className={'flex flex-col items-end'}>
<Button className={`min-w-40 mb-2 ${additionalClass}`} label="Perform Backup" onClick={performBackupNow} />
<Button className={`mb-2 min-w-40 ${additionalClass}`} label="Perform Backup" onClick={performBackupNow} />
<Button className="min-w-40" label="Disable" onClick={disable} />
</div>
)}

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

@@ -131,12 +131,12 @@ const CloudLink: FunctionComponent<Props> = ({ application }) => {
<div className={additionalClass}>
<Subtitle>Email preferences</Subtitle>
<div className="flex items-center justify-between mt-1">
<div className="mt-1 flex items-center justify-between">
<div className="flex flex-col">
<Text>Receive a notification email if a cloud backup fails.</Text>
</div>
{isLoading ? (
<Spinner className="w-4 h-4" />
<Spinner className="h-4 w-4" />
) : (
<Switch
onChange={toggleMuteFailedCloudBackupEmails}

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

@@ -167,11 +167,11 @@ const DataBackups = ({ application, viewControllerManager }: Props) => {
<div className="flex items-center gap-2">
<label className="flex items-center gap-2">
<input type="radio" onChange={() => setIsBackupEncrypted(true)} checked={isBackupEncrypted} />
<span className="font-medium text-sm">Encrypted</span>
<span className="text-sm font-medium">Encrypted</span>
</label>
<label className="flex items-center gap-2">
<input type="radio" onChange={() => setIsBackupEncrypted(false)} checked={!isBackupEncrypted} />
<span className="font-medium text-sm">Decrypted</span>
<span className="text-sm font-medium">Decrypted</span>
</label>
</div>
</form>
@@ -183,7 +183,7 @@ const DataBackups = ({ application, viewControllerManager }: Props) => {
<PreferencesSegment>
<Subtitle>Import a previously saved backup file</Subtitle>
<div className="flex flex-row items-center mt-3">
<div className="mt-3 flex flex-row items-center">
<Button label="Import backup" onClick={handleImportFile} />
<input type="file" ref={fileInputRef} onChange={importFileSelected} className="hidden" />
{isImportDataLoading && <Spinner className="ml-4" />}

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

@@ -114,7 +114,7 @@ const EmailBackups = ({ application }: Props) => {
<Text>How often to receive backups.</Text>
<div className="mt-2">
{isLoading ? (
<Spinner className="w-4 h-4" />
<Spinner className="h-4 w-4" />
) : (
<Dropdown
id="def-editor-dropdown"
@@ -132,7 +132,7 @@ const EmailBackups = ({ application }: Props) => {
<Text>Receive a notification email if an email backup fails.</Text>
</div>
{isLoading ? (
<Spinner className="w-4 h-4" />
<Spinner className="h-4 w-4" />
) : (
<Switch onChange={toggleMuteFailedBackupEmails} checked={!isFailedBackupEmailMuted} />
)}

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

@@ -149,23 +149,23 @@ const BackupsDropZone: FunctionComponent<Props> = ({ application }) => {
<EncryptionStatusItem
status={decryptedFileItem.name}
icon={<Icon type="attachment-file" className="min-w-5 min-h-5" />}
icon={<Icon type="attachment-file" className="min-h-5 min-w-5" />}
checkmark={true}
/>
<HorizontalSeparator classes={'mt-3 mb-3'} />
<div className="flex justify-between items-center">
<div className="flex items-center justify-between">
<div>
<Subtitle>1. Choose related data file</Subtitle>
<Text className={`text-xs mr-3 em ${binaryFile ? 'font-bold success' : ''}`}>
<Text className={`em mr-3 text-xs ${binaryFile ? 'success font-bold' : ''}`}>
{droppedFile.file.uuid}/{FileBackupsConstantsV1.BinaryFileName}
</Text>
</div>
<div>
<Button
label="Choose"
className={'px-1 text-xs min-w-40'}
className={'min-w-40 px-1 text-xs'}
onClick={chooseRelatedBinaryFile}
disabled={!!binaryFile}
/>
@@ -174,19 +174,19 @@ const BackupsDropZone: FunctionComponent<Props> = ({ application }) => {
<HorizontalSeparator classes={'mt-3 mb-3'} />
<div className="flex justify-between items-center">
<div className="flex items-center justify-between">
<Subtitle>2. Decrypt and save file to your computer</Subtitle>
<div>
<Button
label={isSavingAsDecrypted ? undefined : 'Save'}
className={'px-1 text-xs min-w-40'}
className={'min-w-40 px-1 text-xs'}
onClick={downloadBinaryFileAsDecrypted}
disabled={isSavingAsDecrypted || !binaryFile}
>
{isSavingAsDecrypted && (
<div className="flex justify-center w-full">
<Spinner className="w-5 h-5" />
<div className="flex w-full justify-center">
<Spinner className="h-5 w-5" />
</div>
)}
</Button>

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

@@ -57,7 +57,7 @@ const FileBackupsDesktop = ({ application, backupsService }: Props) => {
<Title>File Backups</Title>
<div className="flex items-center justify-between">
<div className="flex flex-col mr-10">
<div className="mr-10 flex flex-col">
<Subtitle>
Automatically save encrypted backups of files uploaded on any device to this computer.
</Subtitle>
@@ -86,11 +86,11 @@ const FileBackupsDesktop = ({ application, backupsService }: Props) => {
<EncryptionStatusItem
status={backupsLocation}
icon={<Icon type="attachment-file" className="min-w-5 min-h-5" />}
icon={<Icon type="attachment-file" className="min-h-5 min-w-5" />}
checkmark={false}
/>
<div className="flex flex-row mt-2.5">
<div className="mt-2.5 flex flex-row">
<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>

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

@@ -39,12 +39,12 @@ const ExtensionInfoCell: FunctionComponent<Props> = ({ extensionName, changeName
}
return (
<div className="flex flex-row mr-3 items-center">
<div className="mr-3 flex flex-row items-center">
<input
ref={inputRef}
disabled={!isRenaming || !renameable}
autoComplete="off"
className="flex-grow text-base font-bold no-border bg-default px-0 text-text"
className="no-border flex-grow bg-default px-0 text-base font-bold text-text"
type="text"
value={newExtensionName}
onChange={({ target: input }) => setNewExtensionName((input as HTMLInputElement)?.value)}
@@ -54,18 +54,18 @@ const ExtensionInfoCell: FunctionComponent<Props> = ({ extensionName, changeName
{isRenaming && (
<>
<a className="pt-1 cursor-pointer" onClick={confirmRename}>
<a className="cursor-pointer pt-1" onClick={confirmRename}>
Confirm
</a>
<div className="min-w-3" />
<a className="pt-1 cursor-pointer" onClick={cancelRename}>
<a className="cursor-pointer pt-1" onClick={cancelRename}>
Cancel
</a>
</>
)}
{renameable && !isRenaming && (
<a className="pt-1 cursor-pointer" onClick={startRenaming}>
<a className="cursor-pointer pt-1" onClick={startRenaming}>
Rename
</a>
)}

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

@@ -64,7 +64,7 @@ const ExtensionItem: FunctionComponent<ExtensionItemProps> = ({ application, ext
<UseHosted offlineOnly={offlineOnly} toggleOfflineOnly={toggleOfflineOnly} />
)}
<div className="flex flex-row mt-2">
<div className="mt-2 flex flex-row">
<Button className="min-w-20" label={'Uninstall'} onClick={() => uninstall(extension)} />
</div>
</PreferencesSegment>

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

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

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

@@ -30,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 ? <Spinner className="w-4 h-4" /> : null}
{isLoading ? <Spinner className="h-4 w-4" /> : null}
{accountInfo && (
<>
<LinkButton className="mr-2" label="Open Blog" link={accountInfo.author_url} />

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

@@ -16,10 +16,10 @@ const EncryptionEnabled: FunctionComponent<Props> = ({ viewControllerManager })
const archived = formatCount(count.archived, 'archived notes')
const deleted = formatCount(count.deleted, 'trashed notes')
const noteIcon = <Icon type="rich-text" className="min-w-5 min-h-5" />
const tagIcon = <Icon type="hashtag" className="min-w-5 min-h-5" />
const archiveIcon = <Icon type="archive" className="min-w-5 min-h-5" />
const trashIcon = <Icon type="trash" className="min-w-5 min-h-5" />
const noteIcon = <Icon type="rich-text" className="min-h-5 min-w-5" />
const tagIcon = <Icon type="hashtag" className="min-h-5 min-w-5" />
const archiveIcon = <Icon type="archive" className="min-h-5 min-w-5" />
const trashIcon = <Icon type="trash" className="min-h-5 min-w-5" />
return (
<>
<div className="flex flex-row items-start pb-1 pt-1.5">

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

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

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

@@ -70,14 +70,14 @@ const ErroredItems: FunctionComponent<Props> = ({ viewControllerManager }: Props
<Text>{`${erroredItems.length} items are errored and could not be decrypted.`}</Text>
<div className="flex">
<Button
className="min-w-20 mt-3 mr-2"
className="mt-3 mr-2 min-w-20"
label="Export all"
onClick={() => {
void app.getArchiveService().downloadEncryptedItems(erroredItems)
}}
/>
<Button
className="min-w-20 mt-3 mr-2"
className="mt-3 mr-2 min-w-20"
colorStyle="danger"
label="Delete all"
onClick={() => {
@@ -99,21 +99,21 @@ const ErroredItems: FunctionComponent<Props> = ({ viewControllerManager }: Props
</Text>
<div className="flex">
<Button
className="min-w-20 mt-3 mr-2"
className="mt-3 mr-2 min-w-20"
label="Attempt decryption"
onClick={() => {
attemptDecryption(item)
}}
/>
<Button
className="min-w-20 mt-3 mr-2"
className="mt-3 mr-2 min-w-20"
label="Export"
onClick={() => {
void app.getArchiveService().downloadEncryptedItem(item)
}}
/>
<Button
className="min-w-20 mt-3 mr-2"
className="mt-3 mr-2 min-w-20"
colorStyle="danger"
label="Delete"
onClick={() => {

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

@@ -219,7 +219,7 @@ const PasscodeLock = ({ application, viewControllerManager }: Props) => {
{hasPasscode && !showPasscodeForm && (
<>
<Text>Passcode lock is enabled.</Text>
<div className="flex flex-row mt-3">
<div className="mt-3 flex flex-row">
<Button label="Change Passcode" onClick={changePasscodePressed} className="mr-3" />
<Button colorStyle="danger" label="Remove Passcode" onClick={removePasscodePressed} />
</div>
@@ -240,8 +240,8 @@ const PasscodeLock = ({ application, viewControllerManager }: Props) => {
return (
<a
key={option.value}
className={`mr-3 rounded text-info cursor-pointer ${
option.value === selectedAutoLockInterval ? 'bg-info text-info-contrast px-1.5 py-0.5' : ''
className={`mr-3 cursor-pointer rounded text-info ${
option.value === selectedAutoLockInterval ? 'bg-info px-1.5 py-0.5 text-info-contrast' : ''
}`}
onClick={() => selectAutoLockInterval(option.value)}
>

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

@@ -106,7 +106,7 @@ const Privacy: FunctionComponent<Props> = ({ application }: Props) => {
</Text>
</div>
{isLoading ? (
<Spinner className="flex-shrink-0 ml-2" />
<Spinner className="ml-2 flex-shrink-0" />
) : (
<Switch
onChange={toggleMuteSignInEmails}
@@ -125,7 +125,7 @@ const Privacy: FunctionComponent<Props> = ({ application }: Props) => {
</Text>
</div>
{isLoading ? (
<Spinner className="flex-shrink-0 ml-2" />
<Spinner className="ml-2 flex-shrink-0" />
) : (
<Switch
onChange={toggleSessionLogging}

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

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

@@ -5,7 +5,7 @@ type Props = {
}
const Bullet: FunctionComponent<Props> = ({ className = '' }) => (
<div className={`min-w-1 min-h-1 rounded-full bg-inverted-default ${className} mr-2`} />
<div className={`min-h-1 bg-inverted-default min-w-1 rounded-full ${className} mr-2`} />
)
export default Bullet

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

@@ -38,7 +38,7 @@ const SaveSecretKey: FunctionComponent<Props> = ({ activation: act }) => {
Step 2 of 3 - Save secret key
</ModalDialogLabel>
<ModalDialogDescription className="h-33 flex flex-row items-center">
<div className="flex-grow flex flex-col">
<div className="flex flex-grow flex-col">
<div className="flex flex-row items-center">
<Bullet />
<div className="min-w-1" />

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

@@ -22,10 +22,10 @@ const ScanQRCode: FunctionComponent<Props> = ({ activation: act }) => {
<ModalDialogLabel closeDialog={act.cancelActivation}>Step 1 of 3 - Scan QR code</ModalDialogLabel>
<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} />
<QRCode className="border-neutral-contrast-bg border-2 border-solid" value={act.qrCode} size={100} />
</div>
<div className="min-w-5" />
<div className="flex-grow flex flex-col">
<div className="flex flex-grow flex-col">
<div className="flex flex-row items-center">
<Bullet />
<div className="min-w-1" />
@@ -37,15 +37,15 @@ const ScanQRCode: FunctionComponent<Props> = ({ activation: act }) => {
</div>
<div className="min-h-2" />
<div className="flex flex-row items-center">
<Bullet className="self-start mt-2" />
<Bullet className="mt-2 self-start" />
<div className="min-w-1" />
<div className="text-sm flex-grow">
<div className="flex-grow text-sm">
<b>Scan this QR code</b> or <b>add this secret key</b>:
</div>
</div>
<div className="min-h-2" />
<DecoratedInput
className="ml-4 w-92"
className="w-92 ml-4"
disabled={true}
value={act.secretKey}
right={[<CopyButton copyValue={act.secretKey} />]}

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

@@ -19,11 +19,11 @@ const TwoFactorAuthView: FunctionComponent<Props> = ({ auth }) => {
<PreferencesGroup>
<PreferencesSegment>
<div className="flex flex-row items-center">
<div className="flex-grow flex flex-col">
<div className="flex flex-grow flex-col">
<TwoFactorTitle auth={auth} />
<TwoFactorDescription auth={auth} />
</div>
<div className="flex flex-col justify-center items-center min-w-15">
<div className="flex min-w-15 flex-col items-center justify-center">
<TwoFactorSwitch auth={auth} />
</div>
</div>

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

@@ -14,7 +14,7 @@ const TwoFactorSwitch: FunctionComponent<Props> = ({ auth }) => {
}
if (auth.status === 'fetching') {
return <Spinner className="w-4 h-4" />
return <Spinner className="h-4 w-4" />
}
return <Switch checked={!is2FADisabled(auth.status)} onChange={auth.toggle2FA} />

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

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

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

@@ -6,7 +6,7 @@ import PaneSelector from './PaneSelector'
import { PreferencesProps } from './PreferencesProps'
const PreferencesCanvas: FunctionComponent<PreferencesProps & { menu: PreferencesMenu }> = (props) => (
<div className="flex flex-row flex-grow min-h-0 justify-between">
<div className="flex min-h-0 flex-grow flex-row justify-between">
<PreferencesMenuView menu={props.menu} />
<PaneSelector {...props} />
</div>

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

@@ -2,17 +2,17 @@ import { FunctionComponent } from 'react'
export const Title: FunctionComponent = ({ children }) => (
<>
<h2 className="text-base m-0 mb-1 text-info font-bold">{children}</h2>
<h2 className="m-0 mb-1 text-base font-bold text-info">{children}</h2>
<div className="min-h-2" />
</>
)
export const Subtitle: FunctionComponent<{ className?: string }> = ({ children, className = '' }) => (
<h4 className={`font-medium text-sm m-0 mb-1 ${className}`}>{children}</h4>
<h4 className={`m-0 mb-1 text-sm font-medium ${className}`}>{children}</h4>
)
export const SubtitleLight: FunctionComponent<{ className?: string }> = ({ children, className = '' }) => (
<h4 className={`font-normal text-sm m-0 mb-1 ${className}`}>{children}</h4>
<h4 className={`m-0 mb-1 text-sm font-normal ${className}`}>{children}</h4>
)
export const Text: FunctionComponent<{ className?: string }> = ({ children, className = '' }) => (

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

@@ -12,8 +12,8 @@ interface Props {
const PreferencesMenuItem: FunctionComponent<Props> = ({ iconType, label, selected, onClick, hasBubble }) => (
<div
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'
className={`preferences-menu-item box-border flex h-auto w-auto min-w-42 cursor-pointer select-none flex-row items-center justify-start rounded border border-solid py-2 px-4 text-sm hover:border-border hover:bg-default ${
selected ? 'selected border-info font-bold text-info' : 'border-transparent'
}`}
onClick={(e) => {
e.preventDefault()

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 border-solid rounded border-border p-6 flex flex-col mb-3">{children}</div>
<div className="mb-3 flex flex-col rounded border border-solid border-border bg-default p-6">{children}</div>
)
export default PreferencesGroup

8
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="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">
<div className="flex min-h-0 flex-grow flex-row overflow-y-auto text-foreground">
<div className="flex flex-grow flex-col items-center py-6">
<div className="flex w-125 max-w-125 flex-col">
{children != undefined && Array.isArray(children) ? children.filter((child) => child != undefined) : children}
</div>
</div>
<div className="basis-[13.75rem] flex-shrink" />
<div className="flex-shrink basis-[13.75rem]" />
</div>
)

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

@@ -8,7 +8,7 @@ type Props = {
}
const PreferencesMenuView: FunctionComponent<Props> = ({ menu }) => (
<div className="min-w-55 overflow-y-auto flex flex-col px-3 py-6">
<div className="flex min-w-55 flex-col overflow-y-auto px-3 py-6">
{menu.menuItems.map((pref) => (
<PreferencesMenuItem
key={pref.id}

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-0 left-0 flex flex-col bg-contrast z-preferences">
<div className="absolute top-0 left-0 z-preferences flex h-full w-full flex-col bg-contrast">
<TitleBar className="items-center justify-between">
<div className="h-8 w-8" />
<Title className="text-lg">Your preferences for Standard Notes</Title>