style: tailwind classname sorting (#1169)
This commit is contained in:
@@ -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>
|
||||
)}
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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" />}
|
||||
|
||||
@@ -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} />
|
||||
)}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user