styles: add hover state to ellipsis button and unify search options and ellipsis button styles

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>();
 

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) => {

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

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