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

styles: adjust styling for different themes

Browse Source
This commit is contained in:
Antonella Sgarlatta
2021-05-06 12:06:30 -03:00
parent 1943b34fdf
commit 181e1985fd
5 changed files with 19 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/icons/ic-pin-off.svg
View File

@@ -1,3 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7 9.68991L1.66675 4.35665L2.84526 3.17813L16.9874 17.3203L15.8089 18.4988L10.6 13.2899V17.5H9.4V13H4.50001V11.5L7 10V9.68991ZM8.8101 11.5H6.60001L8.09971 10.7896L8.8101 11.5ZM11.5 4V9.47623L15.0238 13H15.5V11.5L13 10V4H13.75V2.5H6.25001V4H7V4.97623L8.5 6.47623V4H11.5Z" fill="#72767E"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M7 9.68991L1.66675 4.35665L2.84526 3.17813L16.9874 17.3203L15.8089 18.4988L10.6 13.2899V17.5H9.4V13H4.50001V11.5L7 10V9.68991ZM8.8101 11.5H6.60001L8.09971 10.7896L8.8101 11.5ZM11.5 4V9.47623L15.0238 13H15.5V11.5L13 10V4H13.75V2.5H6.25001V4H7V4.97623L8.5 6.47623V4H11.5Z" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 440 B

After

Width:  |  Height:  |  Size: 426 B

2
app/assets/javascripts/components/NotesOptions.tsx
View File

@@ -67,7 +67,7 @@ export const NotesOptions = observer(
Show preview
</span>
</Switch>
<div className="h-1px my-2 bg-secondary-contrast"></div>
<div className="h-1px my-2 bg-border"></div>
{appState.tags.tagsCount > 0 && (
<Disclosure
open={tagsMenuOpen}

4
app/assets/javascripts/components/NotesOptionsPanel.tsx
View File

@@ -46,13 +46,13 @@ export const NotesOptionsPanel = observer(({ appState }: Props) => {
onBlur={closeOnBlur}
ref={buttonRef}
className={
'bg-transparent border-solid border-1 border-gray-300 ' +
'bg-transparent border-solid border-1 border-neutral ' +
'cursor-pointer w-32px h-32px rounded-full p-0 ' +
'flex justify-center items-center'
}
>
<VisuallyHidden>Actions</VisuallyHidden>
<MoreIcon className="fill-current block" />
<MoreIcon className="fill-current color-text block" />
</DisclosureButton>
<DisclosurePanel
onKeyUp={(event) => {

2
app/assets/javascripts/components/Switch.tsx
View File

@@ -30,7 +30,7 @@ export const Switch: FunctionalComponent<SwitchProps> = (
setChecked(event.target.checked);
props.onChange(event.target.checked);
}}
className={`sn-switch ${checked ? 'bg-info' : 'bg-secondary-contrast'}`}
className={`sn-switch ${checked ? 'bg-info' : 'bg-neutral'}`}
>
<CustomCheckboxInput
{...({

20
app/assets/stylesheets/_sn.scss
View File

@@ -4,6 +4,10 @@
border-width: 2px;
}
.border-b-1 {
border-bottom-width: 1px;
}
.border-background {
border-color: var(--sn-stylekit-background-color);
}
@@ -16,16 +20,20 @@
border-color: var(--sn-stylekit-info-color);
}
.border-neutral {
border-color: var(--sn-stylekit-neutral-color);
}
.bg-border {
background-color: var(--sn-stylekit-border-color);
}
.bg-clip-padding {
background-clip: padding-box;
}
.bg-secondary-contrast {
background-color: var(--sn-stylekit-secondary-contrast-background-color);
}
.bg-transparent {
background-color: transparent;
.bg-neutral {
background-color: var(--sn-stylekit-neutral-color);
}
.focus-within\:border-background:focus-within {