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

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>