From 181e1985fd7b4a01bce0fbf52f1d86d2a28c113c Mon Sep 17 00:00:00 2001
From: Antonella Sgarlatta <antonella@standardnotes.org>
Date: Thu, 6 May 2021 12:06:30 -0300
Subject: [PATCH] styles: adjust styling for different themes

---
 app/assets/icons/ic-pin-off.svg               |  2 +-
 .../javascripts/components/NotesOptions.tsx   |  2 +-
 .../components/NotesOptionsPanel.tsx          |  4 ++--
 app/assets/javascripts/components/Switch.tsx  |  2 +-
 app/assets/stylesheets/_sn.scss               | 20 +++++++++++++------
 5 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/app/assets/icons/ic-pin-off.svg b/app/assets/icons/ic-pin-off.svg
index aff807dae..ee303e6f9 100644
--- a/app/assets/icons/ic-pin-off.svg
+++ b/app/assets/icons/ic-pin-off.svg
@@ -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>
diff --git a/app/assets/javascripts/components/NotesOptions.tsx b/app/assets/javascripts/components/NotesOptions.tsx
index ebfe7c966..030d35a81 100644
--- a/app/assets/javascripts/components/NotesOptions.tsx
+++ b/app/assets/javascripts/components/NotesOptions.tsx
@@ -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}
diff --git a/app/assets/javascripts/components/NotesOptionsPanel.tsx b/app/assets/javascripts/components/NotesOptionsPanel.tsx
index 19e152eff..d1b3fa96e 100644
--- a/app/assets/javascripts/components/NotesOptionsPanel.tsx
+++ b/app/assets/javascripts/components/NotesOptionsPanel.tsx
@@ -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) => {
diff --git a/app/assets/javascripts/components/Switch.tsx b/app/assets/javascripts/components/Switch.tsx
index 1f4185021..89bb8574c 100644
--- a/app/assets/javascripts/components/Switch.tsx
+++ b/app/assets/javascripts/components/Switch.tsx
@@ -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
           {...({
diff --git a/app/assets/stylesheets/_sn.scss b/app/assets/stylesheets/_sn.scss
index 70733b8c7..df6d0af1b 100644
--- a/app/assets/stylesheets/_sn.scss
+++ b/app/assets/stylesheets/_sn.scss
@@ -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 {