From 96bfd6efc2119b15195e130162c8dc783a5f9582 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Fri, 18 Feb 2022 20:48:04 +0530
Subject: [PATCH] fix: header button border (#887)

---
 app/assets/javascripts/components/ChangeEditorButton.tsx | 2 +-
 app/assets/javascripts/components/NotesOptionsPanel.tsx  | 2 +-
 app/assets/javascripts/components/PinNoteButton.tsx      | 4 +++-
 app/assets/stylesheets/_sn.scss                          | 4 ++++
 4 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/components/ChangeEditorButton.tsx b/app/assets/javascripts/components/ChangeEditorButton.tsx
index 20472a2d2..f2481f554 100644
--- 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
index 260608c26..f27e0b85f 100644
--- 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
index 0f88d5c3f..354f3df3a 100644
--- 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
index 76550ef02..a66a33bd7 100644
--- 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);
+}