From 36bfa4504d845527d3b2b52447b1783d52596379 Mon Sep 17 00:00:00 2001
From: Antonella Sgarlatta <antonella@standardnotes.org>
Date: Mon, 10 May 2021 18:58:31 -0300
Subject: [PATCH] styles: add hover state to ellipsis button and unify search
 options and ellipsis button styles

---
 .../javascripts/components/NotesOptions.tsx   | 10 ++++----
 .../components/NotesOptionsPanel.tsx          |  8 ++-----
 .../javascripts/components/SearchOptions.tsx  |  2 +-
 app/assets/stylesheets/_sn.scss               | 23 +++++++++++++++++--
 4 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/app/assets/javascripts/components/NotesOptions.tsx b/app/assets/javascripts/components/NotesOptions.tsx
index 4ece76ef5..f3dcb9865 100644
--- a/app/assets/javascripts/components/NotesOptions.tsx
+++ b/app/assets/javascripts/components/NotesOptions.tsx
@@ -26,11 +26,11 @@ export const NotesOptions = observer(
     });
 
     const notes = Object.values(appState.notes.selectedNotes);
-    const hidePreviews = !notes.some((note) => !note.hidePreview);
-    const locked = !notes.some((note) => !note.locked);
-    const archived = !notes.some((note) => !note.archived);
-    const trashed = !notes.some((note) => !note.trashed);
-    const pinned = !notes.some((note) => !note.pinned);
+    const hidePreviews = notes.some((note) => note.hidePreview);
+    const locked = notes.some((note) => note.locked);
+    const archived = notes.some((note) => note.archived);
+    const trashed = notes.some((note) => note.trashed);
+    const pinned = notes.some((note) => note.pinned);
 
     const tagsButtonRef = useRef<HTMLButtonElement>();
 
diff --git a/app/assets/javascripts/components/NotesOptionsPanel.tsx b/app/assets/javascripts/components/NotesOptionsPanel.tsx
index 9cd660805..e155e2215 100644
--- a/app/assets/javascripts/components/NotesOptionsPanel.tsx
+++ b/app/assets/javascripts/components/NotesOptionsPanel.tsx
@@ -50,14 +50,10 @@ export const NotesOptionsPanel = observer(({ appState }: Props) => {
         }}
         onBlur={closeOnBlur}
         ref={buttonRef}
-        className={
-          'sn-button outlined ' +
-          'cursor-pointer w-32px h-32px rounded-full p-0 ' +
-          'flex justify-center items-center'
-        }
+        className="sn-icon-button"
       >
         <VisuallyHidden>Actions</VisuallyHidden>
-        <MoreIcon className="fill-current color-neutral block" />
+        <MoreIcon className="fill-current block" />
       </DisclosureButton>
       <DisclosurePanel
         onKeyUp={(event) => {
diff --git a/app/assets/javascripts/components/SearchOptions.tsx b/app/assets/javascripts/components/SearchOptions.tsx
index 91d7f6409..75e0dbe96 100644
--- a/app/assets/javascripts/components/SearchOptions.tsx
+++ b/app/assets/javascripts/components/SearchOptions.tsx
@@ -54,7 +54,7 @@ const SearchOptions = observer(({ appState }: Props) => {
       <DisclosureButton
         ref={buttonRef}
         onBlur={closeOnBlur}
-        className="sn-icon-button color-neutral hover:color-info"
+        className="sn-icon-button"
       >
         <VisuallyHidden>Search options</VisuallyHidden>
         <TuneIcon className="fill-current block" />
diff --git a/app/assets/stylesheets/_sn.scss b/app/assets/stylesheets/_sn.scss
index e91093780..2bbdda778 100644
--- a/app/assets/stylesheets/_sn.scss
+++ b/app/assets/stylesheets/_sn.scss
@@ -78,6 +78,15 @@
   box-shadow: inset 0 0 0 2px var(--sn-stylekit-info-color);
 }
 
+.hover\:color-text:hover {
+  @extend .color-text;
+}
+
+.focus\:color-text:focus {
+  @extend .color-text;
+}
+
+
 .focus\:inner-ring-info:focus {
   @extend .inner-ring-info;
 }
@@ -132,8 +141,14 @@
  * is almost no style overlap.
  */
 .sn-icon-button {
-  @extend .border-2;
-  @extend .border-transparent;
+  @extend .w-32px;
+  @extend .h-32px;
+  @extend .flex;
+  @extend .justify-center;
+  @extend .items-center;
+  @extend .border-solid;
+  @extend .border-1;
+  @extend .border-neutral;
   @extend .bg-clip-padding;
   @extend .m-0;
   @extend .p-0;
@@ -141,6 +156,10 @@
   @extend .cursor-pointer;
   @extend .rounded-full;
   @extend .color-neutral;
+  @extend .hover\:color-text;
+  @extend .focus\:color-text;
+  @extend .hover\:bg-highlight;
+  @extend .focus\:bg-highlight;
   @extend .focus\:outline-none;
   @extend .focus\:ring-info;
 }