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

chore: show key option descriptions & improve style

Browse Source
This commit is contained in:
Aman Harwara
2023-09-13 00:10:32 +05:30
parent 464af45b50
commit 9157dc1364
3 changed files with 51 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultModal/KeyStoragePreference.tsx
View File

@@ -1,4 +1,4 @@
import { KeySystemRootKeyStorageMode } from '@standardnotes/snjs' import { KeySystemRootKeyStorageMode, classNames } from '@standardnotes/snjs'
import StyledRadioInput from '@/Components/Radio/StyledRadioInput' import StyledRadioInput from '@/Components/Radio/StyledRadioInput'
type KeyStorageOption = { type KeyStorageOption = {
@@ -37,21 +37,29 @@ export const KeyStoragePreference = ({
}) => { }) => {
return ( return (
<div className="mb-3"> <div className="mb-3">
<div className="mb-3 text-lg">Vault Key Type</div> <div className="mb-3 text-lg">Vault Key Storage Mode</div>
{options.map((option) => { <div className="space-y-3">
return ( {options.map((option) => {
<label key={option.value} className="mb-2 flex items-center gap-2 text-base font-medium md:text-sm"> const isSelected = value === option.value
<StyledRadioInput return (
name="option" <label
checked={value === option.value} key={option.value}
onChange={() => { className="grid grid-cols-[auto,1fr] text-base font-medium [column-gap:0.5rem] [row-gap:0.25rem] md:text-sm"
onChange(option.value) >
}} <StyledRadioInput
/> className="col-start-1 col-end-2 place-self-center"
{option.label} name="option"
</label> checked={isSelected}
) onChange={() => {
})} onChange(option.value)
}}
/>
<div className={classNames('select-none', isSelected ? 'font-semibold' : '')}>{option.label}</div>
<div className="col-start-2 row-start-2 text-sm opacity-80">{option.description}</div>
</label>
)
})}
</div>
</div> </div>
) )
} }

43
packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultModal/PasswordTypePreference.tsx
View File

@@ -1,4 +1,4 @@
import { KeySystemPasswordType } from '@standardnotes/snjs' import { KeySystemPasswordType, classNames } from '@standardnotes/snjs'
import StyledRadioInput from '@/Components/Radio/StyledRadioInput' import StyledRadioInput from '@/Components/Radio/StyledRadioInput'
import DecoratedPasswordInput from '@/Components/Input/DecoratedPasswordInput' import DecoratedPasswordInput from '@/Components/Input/DecoratedPasswordInput'
import { useState } from 'react' import { useState } from 'react'
@@ -42,25 +42,30 @@ export const PasswordTypePreference = ({
return ( return (
<div className="mb-3"> <div className="mb-3">
<div className="mb-3 text-lg">Vault Key Type</div> <div className="mb-3 text-lg">Vault Key Type</div>
{options.map((option) => { <div className="mb-1 space-y-3">
return ( {options.map((option) => {
<label key={option.value} className="mb-2 flex items-center gap-2 text-base font-medium md:text-sm"> const isSelected = value === option.value
<StyledRadioInput return (
name="option" <label
checked={value === option.value} key={option.value}
onChange={() => { className="grid grid-cols-[auto,1fr] text-base font-medium [column-gap:0.5rem] [row-gap:0.25rem] md:text-sm"
onChange(option.value) >
}} <StyledRadioInput
/> className="col-start-1 col-end-2 place-self-center"
{option.label} name="option"
</label> checked={isSelected}
) onChange={() => {
})} onChange(option.value)
}}
/>
<div className={classNames('select-none', isSelected ? 'font-semibold' : '')}>{option.label}</div>
<div className="col-start-2 row-start-2 text-sm opacity-80">{option.description}</div>
</label>
)
})}
</div>
{value === KeySystemPasswordType.UserInputted && ( {value === KeySystemPasswordType.UserInputted && (
<div> <div className="mt-2">
<div className="text-gray-500 mt-3 text-sm">{options[1].description}</div>
<DecoratedPasswordInput <DecoratedPasswordInput
placeholder="Choose a password" placeholder="Choose a password"
id="key-input" id="key-input"

6
packages/web/src/javascripts/Components/Radio/StyledRadioInput.tsx
View File

@@ -4,10 +4,10 @@ import RadioIndicator from './RadioIndicator'
type Props = ComponentPropsWithoutRef<'input'> type Props = ComponentPropsWithoutRef<'input'>
const StyledRadioInput = (props: Props) => { const StyledRadioInput = ({ className, ...props }: Props) => {
return ( return (
<div className="flex"> <div className={classNames('flex', className)}>
<input type="radio" className={classNames('h-0 w-0 opacity-0', props.className)} {...props} /> <input type="radio" className="h-0 w-0 opacity-0" {...props} />
<RadioIndicator checked={!!props.checked} /> <RadioIndicator checked={!!props.checked} />
</div> </div>
) )