fix: header button border (#887)

standardnotes · Feb 18, 2022 · 96bfd6e · 96bfd6e
1 parent 1e80a40
commit 96bfd6e
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 3 deletions.
diff --git a/app/assets/javascripts/components/ChangeEditorButton.tsx b/app/assets/javascripts/components/ChangeEditorButton.tsx
@@ -101,7 +101,7 @@ export const ChangeEditorButton: FunctionComponent<Props> = observer(
             }}
             onBlur={closeOnBlur}
             ref={buttonRef}
-            className="sn-icon-button"
+            className="sn-icon-button border-contrast"
           >
             <VisuallyHidden>Change editor</VisuallyHidden>
             <Icon type="dashboard" className="block" />

diff --git a/app/assets/javascripts/components/NotesOptionsPanel.tsx b/app/assets/javascripts/components/NotesOptionsPanel.tsx
@@ -69,7 +69,7 @@ export const NotesOptionsPanel = observer(
           }}
           onBlur={closeOnBlur}
           ref={buttonRef}
-          className="sn-icon-button"
+          className="sn-icon-button border-contrast"
         >
           <VisuallyHidden>Actions</VisuallyHidden>
           <Icon type="more" className="block" />

diff --git a/app/assets/javascripts/components/PinNoteButton.tsx b/app/assets/javascripts/components/PinNoteButton.tsx
@@ -28,7 +28,9 @@ export const PinNoteButton: FunctionComponent<Props> = observer(
 
     return (
       <button
-        className={`sn-icon-button ${pinned ? 'toggled' : ''} ${className}`}
+        className={`sn-icon-button border-contrast ${
+          pinned ? 'toggled' : ''
+        } ${className}`}
         onClick={togglePinned}
       >
         <VisuallyHidden>Pin selected notes</VisuallyHidden>

diff --git a/app/assets/stylesheets/_sn.scss b/app/assets/stylesheets/_sn.scss
@@ -950,3 +950,7 @@
 .text-editor {
   font-size: var(--sn-stylekit-font-size-editor);
 }
+
+.sn-component .border-contrast {
+  border-color: var(--sn-stylekit-contrast-border-color);
+}