fix: header button border (#887)

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" />

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" />

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>

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);
+}