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

fix(web): navigation styles (#1177)

Browse Source
This commit is contained in:
Aman Harwara
2022-06-30 01:03:25 +05:30
committed by GitHub
parent 92360aaf66
commit 5cd449fe80
28 changed files with 94 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/web/src/javascripts/Components/AccountMenu/AdvancedOptions.tsx
View File

@@ -126,7 +126,7 @@ const AdvancedOptions: FunctionComponent<Props> = ({
{isPrivateWorkspace && (
<>
<DecoratedInput
className={'mb-2'}
className={{ container: 'mb-2' }}
left={[<Icon type="server" className="text-neutral" />]}
type="text"
placeholder="Userphrase"
@@ -135,7 +135,7 @@ const AdvancedOptions: FunctionComponent<Props> = ({
disabled={disabled}
/>
<DecoratedInput
className={'mb-2'}
className={{ container: 'mb-2' }}
left={[<Icon type="folder" className="text-neutral" />]}
type="text"
placeholder="Name"

2
packages/web/src/javascripts/Components/AccountMenu/ConfirmPassword.tsx
View File

@@ -119,7 +119,7 @@ const ConfirmPassword: FunctionComponent<Props> = ({
</div>
<form onSubmit={handleConfirmFormSubmit} className="mb-1 px-3">
<DecoratedPasswordInput
className="mb-2"
className={{ container: 'mb-2' }}
disabled={isRegistering}
left={[<Icon type="password" className="text-neutral" />]}
onChange={handlePasswordChange}

4
packages/web/src/javascripts/Components/AccountMenu/CreateAccount.tsx
View File

@@ -114,7 +114,7 @@ const CreateAccount: FunctionComponent<Props> = ({
</div>
<form onSubmit={handleRegisterFormSubmit} className="mb-1 px-3">
<DecoratedInput
className="mb-2"
className={{ container: 'mb-2' }}
disabled={isPrivateWorkspace}
left={[<Icon type="email" className="text-neutral" />]}
onChange={handleEmailChange}
@@ -125,7 +125,7 @@ const CreateAccount: FunctionComponent<Props> = ({
value={email}
/>
<DecoratedPasswordInput
className="mb-2"
className={{ container: 'mb-2' }}
left={[<Icon type="password" className="text-neutral" />]}
onChange={handlePasswordChange}
onKeyDown={handleKeyDown}

4
packages/web/src/javascripts/Components/AccountMenu/SignIn.tsx
View File

@@ -153,7 +153,7 @@ const SignInPane: FunctionComponent<Props> = ({ application, viewControllerManag
</div>
<div className="mb-1 px-3">
<DecoratedInput
className={`mb-2 ${error ? 'border-danger' : null}`}
className={{ container: `mb-2 ${error ? 'border-danger' : null}` }}
left={[<Icon type="email" className="text-neutral" />]}
type="email"
placeholder="Email"
@@ -165,7 +165,7 @@ const SignInPane: FunctionComponent<Props> = ({ application, viewControllerManag
ref={emailInputRef}
/>
<DecoratedPasswordInput
className={`mb-2 ${error ? 'border-danger' : null}`}
className={{ container: `mb-2 ${error ? 'border-danger' : null}` }}
disabled={isSigningIn}
left={[<Icon type="password" className="text-neutral" />]}
onChange={handlePasswordChange}

2
packages/web/src/javascripts/Components/Bubble/Bubble.tsx
View File

@@ -8,7 +8,7 @@ type Props = {
const styles = {
base: 'active:border-info active:bg-info active:text-neutral-contrast flex-grow cursor-pointer rounded-full border border-solid px-2 py-1 text-center transition',
unselected: 'text-neutral border-secondary-border',
unselected: 'text-neutral border-secondary-border bg-default',
selected: 'text-neutral-contrast border-info bg-info',
}

4
packages/web/src/javascripts/Components/ChallengeModal/ChallengePrompt.tsx
View File

@@ -65,14 +65,14 @@ const ChallengeModalPrompt: FunctionComponent<Props> = ({ prompt, values, index,
<DecoratedPasswordInput
ref={inputRef}
placeholder={prompt.placeholder}
className={`w-full max-w-76 ${isInvalid ? 'border-danger' : ''}`}
className={{ container: `w-full max-w-76 ${isInvalid ? 'border-danger' : ''}` }}
onChange={(value) => onValueChange(value, prompt)}
/>
) : (
<DecoratedInput
ref={inputRef}
placeholder={prompt.placeholder}
className={`w-full max-w-76 ${isInvalid ? 'border-danger' : ''}`}
className={{ container: `w-full max-w-76 ${isInvalid ? 'border-danger' : ''}` }}
onChange={(value) => onValueChange(value, prompt)}
/>
)}

2
packages/web/src/javascripts/Components/Icon/Icon.tsx
View File

@@ -56,6 +56,7 @@ import {
MenuArrowRightIcon,
MenuCloseIcon,
MoreIcon,
NotesFilledIcon,
NotesIcon,
PasswordIcon,
PencilFilledIcon,
@@ -123,6 +124,7 @@ export const ICONS = {
'menu-arrow-down': MenuArrowDownIcon,
'menu-arrow-right': MenuArrowRightIcon,
'menu-close': MenuCloseIcon,
'notes-filled': NotesFilledIcon,
'pencil-filled': PencilFilledIcon,
'pencil-off': PencilOffIcon,
'pin-filled': PinFilledIcon,

8
packages/web/src/javascripts/Components/Input/DecoratedInput.tsx
View File

@@ -3,7 +3,7 @@ import { DecoratedInputProps } from './DecoratedInputProps'
const getClassNames = (hasLeftDecorations: boolean, hasRightDecorations: boolean, roundedFull?: boolean) => {
return {
container: `position-relative flex items-stretch overflow-hidden border border-solid border-border bg-default text-sm focus-within:ring-2 focus-within:ring-info ${
container: `position-relative flex items-stretch overflow-hidden border border-solid border-passive-3 bg-default text-sm focus-within:ring-2 focus-within:ring-info bg-clip-padding ${
!hasLeftDecorations && !hasRightDecorations ? 'px-2 py-1.5' : ''
} ${roundedFull ? 'rounded-full' : 'rounded'}`,
input: `focus:ring-none w-full border-0 bg-transparent text-text focus:shadow-none focus:outline-none ${
@@ -20,7 +20,7 @@ const DecoratedInput = forwardRef(
(
{
autocomplete = false,
className = '',
className,
disabled = false,
id,
left,
@@ -43,7 +43,7 @@ const DecoratedInput = forwardRef(
const classNames = getClassNames(hasLeftDecorations, hasRightDecorations, roundedFull)
return (
<div className={`${classNames.container} ${disabled ? classNames.disabled : ''} ${className}`}>
<div className={`${classNames.container} ${disabled ? classNames.disabled : ''} ${className?.container}`}>
{left && (
<div className="flex items-center px-2 py-1.5">
{left.map((leftChild, index) => (
@@ -54,7 +54,7 @@ const DecoratedInput = forwardRef(
<input
autoComplete={autocomplete ? 'on' : 'off'}
className={`${classNames.input} ${disabled ? classNames.disabled : ''}`}
className={`${classNames.input} ${disabled ? classNames.disabled : ''} ${className?.input}`}
data-lpignore={type !== 'password' ? true : false}
disabled={disabled}
id={id}

5
packages/web/src/javascripts/Components/Input/DecoratedInputProps.ts
View File

@@ -2,7 +2,10 @@ import { FocusEventHandler, KeyboardEventHandler, ReactNode } from 'react'
export type DecoratedInputProps = {
autocomplete?: boolean
className?: string
className?: {
container?: string
input?: string
}
disabled?: boolean
id?: string
left?: ReactNode[]

2
packages/web/src/javascripts/Components/NoAccountWarning/NoAccountWarningContent.tsx
View File

@@ -24,7 +24,7 @@ const NoAccountWarningContent = ({ accountMenuController, noAccountWarningContro
}, [noAccountWarningController])
return (
<div className="mt-4 grid grid-cols-1 rounded-md p-4 shadow">
<div className="mt-4 grid grid-cols-1 rounded-md p-4 shadow-main">
<h1 className="sk-h3 m-0 text-sm font-semibold">Data not backed up</h1>
<p className="col-start-1 col-end-3 m-0 mt-1 text-sm">Sign in or register to back up your notes.</p>
<Button primary small className="col-start-1 col-end-3 mt-3 justify-self-start" onClick={showAccountMenu}>

2
packages/web/src/javascripts/Components/NoteTags/NoteTag.tsx
View File

@@ -116,7 +116,7 @@ const NoteTag = ({ viewControllerManager, tag }: Props) => {
return (
<button
ref={tagRef}
className="hover:bg-secondary-contrast focus:bg-secondary-contrast mt-2 mr-2 flex h-6 cursor-pointer items-center rounded border-0 bg-contrast py-2 pl-1 pr-2 text-xs text-text"
className="mt-2 mr-2 flex h-6 cursor-pointer items-center rounded border-0 bg-passive-4-opacity-variant py-2 pl-1 pr-2 text-xs text-text hover:bg-contrast focus:bg-contrast"
onClick={onTagClick}
onKeyDown={onKeyDown}
onFocus={onFocus}

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

@@ -89,7 +89,7 @@ const OfflineSubscription: FunctionComponent<Props> = ({ application }) => {
placeholder={'Offline Subscription Code'}
value={activationCode}
disabled={isSuccessfullyActivated}
className={'mb-3'}
className={{ container: 'mb-3' }}
/>
)}
</div>

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

@@ -205,7 +205,7 @@ const PasscodeLock = ({ application, viewControllerManager }: Props) => {
placeholder="Passcode"
/>
<DecoratedPasswordInput
className="mt-2"
className={{ container: 'mt-2' }}
type="password"
value={passcodeConfirmation ? passcodeConfirmation : ''}
onChange={handleConfirmPasscodeChange}

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

@@ -45,7 +45,7 @@ const ScanQRCode: FunctionComponent<Props> = ({ activation: act }) => {
</div>
<div className="min-h-2" />
<DecoratedInput
className="w-92 ml-4"
className={{ container: 'w-92 ml-4' }}
disabled={true}
value={act.secretKey}
right={[<CopyButton copyValue={act.secretKey} />]}

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

@@ -28,7 +28,7 @@ const Verification: FunctionComponent<Props> = ({ activation: act }) => {
Enter your <b>secret key</b>:
</div>
<div className="min-w-2" />
<DecoratedInput className={`w-92 ${secretKeyClass}`} onChange={act.setInputSecretKey} />
<DecoratedInput className={{ container: `w-92 ${secretKeyClass}` }} onChange={act.setInputSecretKey} />
</div>
<div className="flex flex-row items-center">
<Bullet />
@@ -37,7 +37,7 @@ const Verification: FunctionComponent<Props> = ({ activation: act }) => {
Verify the <b>authentication code</b> generated by your authenticator app:
</div>
<div className="min-w-2" />
<DecoratedInput className={`w-30 ${authTokenClass}`} onChange={act.setInputOtpToken} />
<DecoratedInput className={{ container: `w-30 ${authTokenClass}` }} onChange={act.setInputOtpToken} />
</div>
</div>
</ModalDialogDescription>

5
packages/web/src/javascripts/Components/SearchBar/SearchBar.tsx
View File

@@ -48,7 +48,10 @@ const SearchBar = ({ itemListController, searchOptionsController }: Props) => {
<DecoratedInput
autocomplete={false}
title="Searches notes and files in the currently selected tag"
className="placeholder:color-passive-0 rounded-full bg-contrast bg-clip-padding px-1"
className={{
container: 'px-1',
input: 'placeholder:text-passive-0',
}}
placeholder="Search"
value={noteFilterText}
ref={searchInputRef}

10
packages/web/src/javascripts/Components/Tags/SmartViewsListItem.tsx
View File

@@ -23,12 +23,12 @@ type Props = {
const PADDING_BASE_PX = 14
const PADDING_PER_LEVEL_PX = 21
const smartViewIconType = (view: SmartView): IconType => {
const smartViewIconType = (view: SmartView, isSelected: boolean): IconType => {
if (view.uuid === SystemViewId.AllNotes) {
return 'notes'
return isSelected ? 'notes-filled' : 'notes'
}
if (view.uuid === SystemViewId.Files) {
return 'file'
return 'folder'
}
if (view.uuid === SystemViewId.ArchivedNotes) {
return 'archive'
@@ -101,7 +101,7 @@ const SmartViewsListItem: FunctionComponent<Props> = ({ view, tagsState }) => {
}, [tagsState, view])
const isFaded = false
const iconType = smartViewIconType(view)
const iconType = smartViewIconType(view, isSelected)
return (
<>
@@ -113,7 +113,7 @@ const SmartViewsListItem: FunctionComponent<Props> = ({ view, tagsState }) => {
}}
>
<div className="tag-info">
<div className={'tag-icon mr-1'}>
<div className={'tag-icon mr-2'}>
<Icon type={iconType} className={`${isSelected ? 'text-info' : 'text-neutral'}`} />
</div>
<input

2
packages/web/src/javascripts/Components/Tags/TagsListItem.tsx
View File

@@ -216,7 +216,7 @@ export const TagsListItem: FunctionComponent<Props> = observer(({ tag, features,
</a>
</div>
)}
<div className={'tag-icon draggable mr-1'} ref={dragRef}>
<div className={'tag-icon draggable mr-2'} ref={dragRef}>
<Icon type="hashtag" className={`${isSelected ? 'text-info' : 'text-neutral'}`} />
</div>
<input