rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions 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

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>