Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: handle removed grey-x colors from stylekit #1046

Merged
merged 1 commit into from
May 23, 2022
Merged

feat: handle removed grey-x colors from stylekit #1046

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/assets/javascripts/Components/AccountMenu/AdvancedOptions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ export const AdvancedOptions: FunctionComponent<Props> = observer(
>
<div className="flex items-center">
Advanced options
<Icon type="chevron-down" className="color-grey-1 ml-1" />
<Icon type="chevron-down" className="color-passive-1 ml-1" />
</div>
</button>
{showAdvanced ? (
Expand Down
6 changes: 3 additions & 3 deletions app/assets/javascripts/Components/AccountMenu/ConfirmPassword.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,8 +113,8 @@ export const ConfirmPassword: FunctionComponent<Props> = observer(
</div>
<div className="px-3 mb-3 text-sm">
Because your notes are encrypted using your password,{' '}
<span className="color-dark-red">Standard Notes does not have a password reset option</span>. If you forget
your password, you will permanently lose access to your data.
<span className="color-danger">Standard Notes does not have a password reset option</span>. If you forget your
password, you will permanently lose access to your data.
</div>
<form onSubmit={handleConfirmFormSubmit} className="px-3 mb-1">
<DecoratedPasswordInput
Expand All @@ -127,7 +127,7 @@ export const ConfirmPassword: FunctionComponent<Props> = observer(
ref={passwordInputRef}
value={confirmPassword}
/>
{error ? <div className="color-dark-red my-2">{error}</div> : null}
{error ? <div className="color-danger my-2">{error}</div> : null}
<Button
className="btn-w-full mt-1 mb-3"
label={isRegistering ? 'Creating account...' : 'Create account & sign in'}
Expand Down
4 changes: 2 additions & 2 deletions app/assets/javascripts/Components/AccountMenu/GeneralAccountMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ export const GeneralAccountMenu: FunctionComponent<Props> = observer(
</div>
</div>
)}
<div className="flex cursor-pointer color-grey-1" onClick={doSynchronization}>
<div className="flex cursor-pointer color-passive-1" onClick={doSynchronization}>
<Icon type="sync" />
</div>
</div>
Expand All @@ -122,7 +122,7 @@ export const GeneralAccountMenu: FunctionComponent<Props> = observer(
You’re offline. Sign in to sync your notes and preferences across all your devices and enable end-to-end
encryption.
</div>
<div className="flex items-center color-grey-1">
<div className="flex items-center color-passive-1">
<Icon type="cloud-off" className="mr-2" />
<span className="font-semibold">Offline</span>
</div>
Expand Down
6 changes: 3 additions & 3 deletions app/assets/javascripts/Components/AccountMenu/SignIn.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@ export const SignInPane: FunctionComponent<Props> = observer(({ application, app
</div>
<div className="px-3 mb-1">
<DecoratedInput
className={`mb-2 ${error ? 'border-dark-red' : null}`}
className={`mb-2 ${error ? 'border-danger' : null}`}
left={[<Icon type="email" className="color-neutral" />]}
type="email"
placeholder="Email"
Expand All @@ -165,7 +165,7 @@ export const SignInPane: FunctionComponent<Props> = observer(({ application, app
ref={emailInputRef}
/>
<DecoratedPasswordInput
className={`mb-2 ${error ? 'border-dark-red' : null}`}
className={`mb-2 ${error ? 'border-danger' : null}`}
disabled={isSigningIn}
left={[<Icon type="password" className="color-neutral" />]}
onChange={handlePasswordChange}
Expand All @@ -175,7 +175,7 @@ export const SignInPane: FunctionComponent<Props> = observer(({ application, app
ref={passwordInputRef}
value={password}
/>
{error ? <div className="color-dark-red my-2">{error}</div> : null}
{error ? <div className="color-danger my-2">{error}</div> : null}
<Button
className="btn-w-full mt-1 mb-3"
label={isSigningIn ? 'Signing in...' : 'Sign in'}
Expand Down
2 changes: 1 addition & 1 deletion app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesPopover.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@ export const AttachedFilesPopover: FunctionComponent<Props> = observer(
<Button variant="normal" onClick={handleAttachFilesClick} onBlur={closeOnBlur}>
{currentTab === PopoverTabs.AttachedFiles ? 'Attach' : 'Upload'} files
</Button>
<div className="text-xs color-grey-0 mt-3">Or drop your files here</div>
<div className="text-xs color-passive-0 mt-3">Or drop your files here</div>
</div>
)}
</div>
Expand Down
2 changes: 1 addition & 1 deletion app/assets/javascripts/Components/AttachedFilesPopover/PopoverFileItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ export const PopoverFileItem: FunctionComponent<PopoverFileItemProps> = ({
)}
</div>
)}
<div className="text-xs color-grey-0">
<div className="text-xs color-passive-0">
{file.created_at.toLocaleString()} · {formatSizeToReadableString(file.decryptedSize)}
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion app/assets/javascripts/Components/Button/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const getClassName = (variant: ButtonVariant, danger: boolean, disabled: boolean
}

if (disabled) {
colors = variant === 'normal' ? 'bg-default color-grey-2' : 'bg-grey-2 color-info-contrast'
colors = variant === 'normal' ? 'bg-default color-passive-2' : 'bg-passive-2 color-info-contrast'
focusHoverStates =
variant === 'normal'
? 'focus:bg-default focus:outline-none hover:bg-default'
Expand Down
4 changes: 2 additions & 2 deletions app/assets/javascripts/Components/ChallengeModal/ChallengePrompt.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,13 +33,13 @@ export const ChallengeModalPrompt: FunctionComponent<Props> = ({ prompt, values,
{prompt.validation === ChallengeValidation.ProtectionSessionDuration ? (
<div className="min-w-76">
<div className="text-sm font-medium mb-2">Allow protected access for</div>
<div className="flex items-center justify-between bg-grey-4 rounded p-1">
<div className="flex items-center justify-between bg-passive-4 rounded p-1">
{ProtectionSessionDurations.map((option) => {
const selected = option.valueInSeconds === values[prompt.id].value
return (
<label
className={`cursor-pointer px-2 py-1.5 rounded ${
selected ? 'bg-default color-foreground font-semibold' : 'color-grey-0 hover:bg-grey-3'
selected ? 'bg-default color-foreground font-semibold' : 'color-passive-0 hover:bg-passive-3'
}`}
>
<input
Expand Down
4 changes: 2 additions & 2 deletions app/assets/javascripts/Components/ContentListView/ListItemTags.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@ export const ListItemTags: FunctionComponent<{
return (
<div className="flex flex-wrap mt-1.5 text-xs gap-2">
{tags.map((tag) => (
<span className="inline-flex items-center py-1 px-1.5 bg-grey-4-opacity-variant color-foreground rounded-0.5">
<Icon type="hashtag" className="sn-icon--small color-grey-1 mr-1" />
<span className="inline-flex items-center py-1 px-1.5 bg-passive-4-opacity-variant color-foreground rounded-0.5">
<Icon type="hashtag" className="sn-icon--small color-passive-1 mr-1" />
<span>{tag}</span>
</span>
))}
Expand Down
2 changes: 1 addition & 1 deletion app/assets/javascripts/Components/Dropdown/Dropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ const CustomDropdownButton: FunctionComponent<ListboxButtonProps> = ({
<div className="dropdown-selected-label">{label}</div>
</div>
<ListboxArrow className={`sn-dropdown-arrow ${isExpanded ? 'sn-dropdown-arrow-flipped' : ''}`}>
<Icon type="menu-arrow-down" className="sn-icon--small color-grey-1" />
<Icon type="menu-arrow-down" className="sn-icon--small color-passive-1" />
</ListboxArrow>
</>
)
Expand Down
4 changes: 2 additions & 2 deletions app/assets/javascripts/Components/Files/FilePreviewModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -208,7 +208,7 @@ const FilePreviewModal: FunctionComponent<Props> = observer(({ application, appS
<div className="font-bold text-base mb-2">This file can't be previewed.</div>
{isFilePreviewable ? (
<>
<div className="text-sm text-center color-grey-0 mb-4 max-w-35ch">
<div className="text-sm text-center color-passive-0 mb-4 max-w-35ch">
There was an error loading the file. Try again, or download the file and open it using another
application.
</div>
Expand All @@ -234,7 +234,7 @@ const FilePreviewModal: FunctionComponent<Props> = observer(({ application, appS
</>
) : (
<>
<div className="text-sm text-center color-grey-0 mb-4 max-w-35ch">
<div className="text-sm text-center color-passive-0 mb-4 max-w-35ch">
To view this file, download it and open it using another application.
</div>
<Button
Expand Down
2 changes: 1 addition & 1 deletion app/assets/javascripts/Components/Input/DecoratedInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const getClassNames = (hasLeftDecorations: boolean, hasRightDecorations: boolean
input: `w-full border-0 focus:shadow-none bg-transparent color-text ${
!hasLeftDecorations && hasRightDecorations ? 'pl-2' : ''
} ${hasRightDecorations ? 'pr-2' : ''}`,
disabled: 'bg-grey-5 cursor-not-allowed',
disabled: 'bg-passive-5 cursor-not-allowed',
}
}

Expand Down
2 changes: 1 addition & 1 deletion app/assets/javascripts/Components/Input/DecoratedPasswordInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const Toggle: FunctionComponent<{
setIsToggled: StateUpdater<boolean>
}> = ({ isToggled, setIsToggled }) => (
<IconButton
className="w-5 h-5 p-0 justify-center sk-circle hover:bg-grey-4 color-neutral"
className="w-5 h-5 p-0 justify-center sk-circle hover:bg-passive-4 color-neutral"
icon={isToggled ? 'eye-off' : 'eye'}
iconClassName="sn-icon--small"
title="Show/hide password"
Expand Down
4 changes: 2 additions & 2 deletions app/assets/javascripts/Components/Input/FloatingLabelInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,12 +38,12 @@ export const FloatingLabelInput: FunctionComponent<Props> = forwardRef(

const LABEL_CLASSNAME = `hidden absolute ${!focused ? 'color-neutral' : 'color-info'} ${
focused || value ? 'flex top-0 left-2 pt-1.5 px-1' : ''
} ${isInvalid ? 'color-dark-red' : ''} ${labelClassName}`
} ${isInvalid ? 'color-danger' : ''} ${labelClassName}`

const INPUT_CLASSNAME = `w-full h-full ${
focused || value ? 'pt-6 pb-2' : 'py-2.5'
} px-3 text-input border-1 border-solid border-main rounded placeholder-medium text-input focus:ring-info ${
isInvalid ? 'border-dark-red placeholder-dark-red' : ''
isInvalid ? 'border-danger placeholder-dark-red' : ''
} ${inputClassName}`

const handleFocus = () => setFocused(true)
Expand Down
2 changes: 1 addition & 1 deletion app/assets/javascripts/Components/NoteTags/NoteTag.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ export const NoteTag = observer(({ appState, tag }: Props) => {
>
<Icon type="hashtag" className="sn-icon--small color-info mr-1" />
<span className="whitespace-nowrap overflow-hidden overflow-ellipsis max-w-290px">
{prefixTitle && <span className="color-grey-1">{prefixTitle}</span>}
{prefixTitle && <span className="color-passive-1">{prefixTitle}</span>}
{title}
</span>
{showDeleteButton && (
Expand Down
6 changes: 3 additions & 3 deletions app/assets/javascripts/Components/NotesOptions/ListedActionsOption.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ const ListedMenuItem: FunctionComponent<ListedMenuItemProps> = ({
<div className="flex flex-col">
<div className="font-semibold">{action.label}</div>
{action.access_type && (
<div className="text-xs mt-0.5 color-grey-0">
<div className="text-xs mt-0.5 color-passive-0">
{'Uses '}
<strong>{action.access_type}</strong>
{' access to this note.'}
Expand Down Expand Up @@ -191,15 +191,15 @@ const ListedActionsMenu: FunctionComponent<ListedActionsMenuProps> = ({ applicat
/>
))
) : (
<div className="px-3 py-2 color-grey-0 select-none">No actions available</div>
<div className="px-3 py-2 color-passive-0 select-none">No actions available</div>
)}
</Fragment>
))}
</>
) : null}
{!isFetchingAccounts && !menuGroups.length ? (
<div className="w-full flex items-center justify-center px-4 py-6">
<div className="color-grey-0 select-none">No Listed accounts found</div>
<div className="color-passive-0 select-none">No Listed accounts found</div>
</div>
) : null}
</>
Expand Down
2 changes: 1 addition & 1 deletion app/assets/javascripts/Components/PremiumFeaturesModal/PremiumFeaturesModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ export const PremiumFeaturesModal: FunctionalComponent<Props> = ({
</div>
<div className="text-lg text-center font-bold mb-1">Enable Advanced Features</div>
</AlertDialogLabel>
<AlertDialogDescription className="text-sm text-center color-grey-1 px-4.5 mb-2">
<AlertDialogDescription className="text-sm text-center color-passive-1 px-4.5 mb-2">
In order to use <span className="font-semibold">{featureName}</span> and other advanced features, please
purchase a subscription or upgrade your current plan.
</AlertDialogDescription>
Expand Down
4 changes: 2 additions & 2 deletions app/assets/javascripts/Components/PurchaseFlow/Panes/CreateAccount.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,7 @@ export const CreateAccount: FunctionComponent<Props> = observer(({ appState, app
disabled={isCreatingAccount}
isInvalid={isEmailInvalid}
/>
{isEmailInvalid ? <div className="color-dark-red mb-4">Please provide a valid email.</div> : null}
{isEmailInvalid ? <div className="color-danger mb-4">Please provide a valid email.</div> : null}
<FloatingLabelInput
className="min-w-90 xs:min-w-auto mb-4"
id="purchase-create-account-password"
Expand All @@ -163,7 +163,7 @@ export const CreateAccount: FunctionComponent<Props> = observer(({ appState, app
isInvalid={isPasswordNotMatching}
/>
{isPasswordNotMatching ? (
<div className="color-dark-red mb-4">Passwords don't match. Please try again.</div>
<div className="color-danger mb-4">Passwords don't match. Please try again.</div>
) : null}
</div>
</form>
Expand Down
6 changes: 3 additions & 3 deletions app/assets/javascripts/Components/PurchaseFlow/Panes/SignIn.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@ export const SignIn: FunctionComponent<Props> = observer(({ appState, applicatio
isInvalid={isEmailInvalid}
/>
{isEmailInvalid && !otherErrorMessage ? (
<div className="color-dark-red mb-4">Please provide a valid email.</div>
<div className="color-danger mb-4">Please provide a valid email.</div>
) : null}
<FloatingLabelInput
className={`min-w-90 xs:min-w-auto ${otherErrorMessage ? 'mb-2' : 'mb-4'}`}
Expand All @@ -138,7 +138,7 @@ export const SignIn: FunctionComponent<Props> = observer(({ appState, applicatio
disabled={isSigningIn}
isInvalid={isPasswordInvalid}
/>
{otherErrorMessage ? <div className="color-dark-red mb-4">{otherErrorMessage}</div> : null}
{otherErrorMessage ? <div className="color-danger mb-4">{otherErrorMessage}</div> : null}
</div>
<Button
className={`${isSigningIn ? 'min-w-30' : 'min-w-24'} py-2.5 mb-5`}
Expand All @@ -148,7 +148,7 @@ export const SignIn: FunctionComponent<Props> = observer(({ appState, applicatio
disabled={isSigningIn}
/>
</form>
<div className="text-sm font-medium color-grey-1">
<div className="text-sm font-medium color-passive-1">
Don’t have an account yet?{' '}
<a
className={`color-info ${isSigningIn ? 'cursor-not-allowed' : 'cursor-pointer '}`}
Expand Down
6 changes: 3 additions & 3 deletions app/assets/javascripts/Components/PurchaseFlow/PurchaseFlowView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,23 +29,23 @@ export const PurchaseFlowView: FunctionComponent<PurchaseFlowViewProps> = observ
const { currentPane } = appState.purchaseFlow

return (
<div className="flex items-center justify-center overflow-hidden h-full w-full absolute top-left-0 z-index-purchase-flow bg-grey-super-light">
<div className="flex items-center justify-center overflow-hidden h-full w-full absolute top-left-0 z-index-purchase-flow bg-passive-super-light">
<div className="relative fit-content">
<div className="relative p-12 xs:px-8 mb-4 bg-default border-1 border-solid border-main rounded xs:rounded-0">
<SNLogoFull className="mb-5" />
<PurchaseFlowPaneSelector currentPane={currentPane} appState={appState} application={application} />
</div>
<div className="flex justify-end xs:px-4">
<a
className="mr-3 font-medium color-grey-1"
className="mr-3 font-medium color-passive-1"
href="https://standardnotes.com/privacy"
target="_blank"
rel="noopener noreferrer"
>
Privacy
</a>
<a
className="font-medium color-grey-1"
className="font-medium color-passive-1"
href="https://standardnotes.com/help"
target="_blank"
rel="noopener noreferrer"
Expand Down
2 changes: 1 addition & 1 deletion app/assets/javascripts/Components/RevisionHistoryModal/LegacyHistoryList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ export const LegacyHistoryList: FunctionComponent<Props> = ({
</HistoryListItem>
)
})}
{!legacyHistory?.length && <div className="color-grey-0 select-none">No legacy history found</div>}
{!legacyHistory?.length && <div className="color-passive-0 select-none">No legacy history found</div>}
</div>
)
}
4 changes: 2 additions & 2 deletions app/assets/javascripts/Components/RevisionHistoryModal/RemoteHistoryList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ export const RemoteHistoryList: FunctionComponent<RemoteHistoryListProps> = obse
if (group.entries && group.entries.length) {
return (
<Fragment key={group.title}>
<div className="px-3 mt-2.5 mb-1 font-semibold color-text uppercase color-grey-0 select-none">
<div className="px-3 mt-2.5 mb-1 font-semibold color-text uppercase color-passive-0 select-none">
{group.title}
</div>
{group.entries.map((entry) => (
Expand All @@ -82,7 +82,7 @@ export const RemoteHistoryList: FunctionComponent<RemoteHistoryListProps> = obse
}
})}
{!remoteHistoryLength && !isFetchingRemoteHistory && (
<div className="color-grey-0 select-none">No remote history found</div>
<div className="color-passive-0 select-none">No remote history found</div>
)}
</div>
)
Expand Down
2 changes: 1 addition & 1 deletion app/assets/javascripts/Components/RevisionHistoryModal/RevisionContentLocked.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export const RevisionContentLocked: FunctionComponent<{
<div className="flex flex-col items-center text-center max-w-40%">
<HistoryLockedIllustration />
<div class="text-lg font-bold mt-2 mb-1">Can't access this version</div>
<div className="mb-4 color-grey-0 leading-140%">
<div className="mb-4 color-passive-0 leading-140%">
{getPremiumContentCopy(
!isUserSubscriptionCanceled && !isUserSubscriptionExpired && userSubscriptionName
? userSubscriptionName
Expand Down
2 changes: 1 addition & 1 deletion app/assets/javascripts/Components/RevisionHistoryModal/RevisionHistoryModalWrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ const RevisionContentPlaceholder: FunctionComponent<RevisionContentPlaceholderPr
>
{isFetchingSelectedRevision && <div className={`sk-spinner w-5 h-5 spinner-info ${ABSOLUTE_CENTER_CLASSNAME}`} />}
{!isFetchingSelectedRevision && !selectedRevision ? (
<div className={`color-grey-0 select-none ${ABSOLUTE_CENTER_CLASSNAME}`}>No revision selected</div>
<div className={`color-passive-0 select-none ${ABSOLUTE_CENTER_CLASSNAME}`}>No revision selected</div>
) : null}
</div>
)
Expand Down
2 changes: 1 addition & 1 deletion app/assets/javascripts/Components/RevisionHistoryModal/SelectedRevisionContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ export const SelectedRevisionContent: FunctionComponent<SelectedRevisionContentP
{selectedRevision.payload.content.text}
</textarea>
) : (
<div className={`color-grey-0 ${ABSOLUTE_CENTER_CLASSNAME}`}>Empty note.</div>
<div className={`color-passive-0 ${ABSOLUTE_CENTER_CLASSNAME}`}>Empty note.</div>
)}
</div>
)}
Expand Down
4 changes: 2 additions & 2 deletions app/assets/javascripts/Components/RevisionHistoryModal/SessionHistoryList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ export const SessionHistoryList: FunctionComponent<Props> = ({
if (group.entries && group.entries.length) {
return (
<Fragment key={group.title}>
<div className="px-3 mt-2.5 mb-1 font-semibold color-text uppercase color-grey-0 select-none">
<div className="px-3 mt-2.5 mb-1 font-semibold color-text uppercase color-passive-0 select-none">
{group.title}
</div>
{group.entries.map((entry, index) => (
Expand All @@ -79,7 +79,7 @@ export const SessionHistoryList: FunctionComponent<Props> = ({
return null
}
})}
{!sessionHistoryLength && <div className="color-grey-0 select-none">No session history found</div>}
{!sessionHistoryLength && <div className="color-passive-0 select-none">No session history found</div>}
</div>
)
}
Loading