styles: make class names BEM and extract sn-dropdown-item style

app/assets/javascripts/components/NotesOptions.tsx

@@ -52,10 +52,6 @@ export const NotesOptions = observer(
     const tagsButtonRef = useRef<HTMLButtonElement>();
 
     const iconClass = 'color-neutral mr-2';
-    const buttonClass =
-      'flex items-center border-0 focus:inner-ring-info ' +
-      'cursor-pointer hover:bg-contrast color-text bg-transparent px-3 ' +
-      'text-left';
 
     useEffect(() => {
       if (onSubmenuChange) {
@@ -144,7 +140,7 @@ export const NotesOptions = observer(
               }}
               onBlur={closeOnBlur}
               ref={tagsButtonRef}
-              className={`${buttonClass} py-1.5 justify-between`}
+              className="sn-dropdown-item justify-between"
             >
               <div className="flex items-center">
                 <Icon type="hashtag" className={iconClass} />
@@ -169,7 +165,7 @@ export const NotesOptions = observer(
               {appState.tags.tags.map((tag) => (
                 <button
                   key={tag.title}
-                  className={`${buttonClass} py-2`}
+                  className="sn-dropdown-item sn-dropdown-item--no-icon"
                   onBlur={closeOnBlur}
                   onClick={() => {
                     appState.notes.isTagInSelectedNotes(tag)
@@ -194,7 +190,7 @@ export const NotesOptions = observer(
         {unpinned && (
           <button
             onBlur={closeOnBlur}
-            className={`${buttonClass} py-1.5`}
+            className="sn-dropdown-item"
             onClick={() => {
               appState.notes.setPinSelectedNotes(true);
             }}
@@ -206,7 +202,7 @@ export const NotesOptions = observer(
         {pinned && (
           <button
             onBlur={closeOnBlur}
-            className={`${buttonClass} py-1.5`}
+            className="sn-dropdown-item"
             onClick={() => {
               appState.notes.setPinSelectedNotes(false);
             }}
@@ -218,7 +214,7 @@ export const NotesOptions = observer(
         {unarchived && (
           <button
             onBlur={closeOnBlur}
-            className={`${buttonClass} py-1.5`}
+            className="sn-dropdown-item"
             onClick={() => {
               appState.notes.setArchiveSelectedNotes(true);
             }}
@@ -230,7 +226,7 @@ export const NotesOptions = observer(
         {archived && (
           <button
             onBlur={closeOnBlur}
-            className={`${buttonClass} py-1.5`}
+            className="sn-dropdown-item"
             onClick={() => {
               appState.notes.setArchiveSelectedNotes(false);
             }}
@@ -242,7 +238,7 @@ export const NotesOptions = observer(
         {notTrashed && (
           <button
             onBlur={closeOnBlur}
-            className={`${buttonClass} py-1.5`}
+            className="sn-dropdown-item"
             onClick={async () => {
               await appState.notes.setTrashSelectedNotes(true);
             }}
@@ -255,7 +251,7 @@ export const NotesOptions = observer(
           <>
             <button
               onBlur={closeOnBlur}
-              className={`${buttonClass} py-1.5`}
+              className="sn-dropdown-item"
               onClick={async () => {
                 await appState.notes.setTrashSelectedNotes(false);
               }}
@@ -265,7 +261,7 @@ export const NotesOptions = observer(
             </button>
             <button
               onBlur={closeOnBlur}
-              className={`${buttonClass} py-1.5`}
+              className="sn-dropdown-item"
               onClick={async () => {
                 await appState.notes.deleteNotesPermanently();
               }}
@@ -275,7 +271,7 @@ export const NotesOptions = observer(
             </button>
             <button
               onBlur={closeOnBlur}
-              className={`${buttonClass} py-1.5`}
+              className="sn-dropdown-item"
               onClick={async () => {
                 await appState.notes.emptyTrash();
               }}

app/assets/javascripts/components/SearchOptions.tsx

@@ -63,7 +63,7 @@ const SearchOptions = observer(({ appState }: Props) => {
         style={{
           top: optionsPanelTop,
         }}
-        className="sn-dropdown sn-dropdown-anchor-right absolute grid gap-2 py-2"
+        className="sn-dropdown sn-dropdown--anchor-right absolute grid gap-2 py-2"
       >
         <Switch
           className="h-10"

app/assets/javascripts/components/Switch.tsx

@@ -42,7 +42,7 @@ export const Switch: FunctionalComponent<SwitchProps> = (
         <span
           aria-hidden
           className={`sn-switch-handle ${
-            checked ? 'sn-switch-handle-right' : ''
+            checked ? 'sn-switch-handle--right' : ''
           }`}
         />
       </CustomCheckboxContainer>

app/assets/javascripts/components/Tag.tsx

@@ -10,7 +10,7 @@ export const Tag: FunctionalComponent<TagProps> = ({ title, className }) => (
   <span
     className={`bg-contrast rounded text-xs color-text p-1 flex items-center ${className ?? ''}`}
   >
-    <Icon type="hashtag" className="small color-neutral mr-1" />
+    <Icon type="hashtag" className="sn-icon--small color-neutral mr-1" />
     {title}
   </span>
 );

app/assets/stylesheets/_sn.scss

@@ -235,11 +235,11 @@
   @extend .h-5;
   @extend .w-5;
   @extend .fill-current;
-}
 
-.sn-icon.small {
+  &.sn-icon--small {
-  @extend .h-3\.5 ;
+    @extend .h-3\.5 ;
-  @extend .w-3\.5 ;
+    @extend .w-3\.5 ;
+  }
 }
 
 .sn-dropdown {
@@ -253,7 +253,7 @@
 
   z-index: $z-index-dropdown-menu;
 
-  &.sn-dropdown-anchor-right {
+  &.sn-dropdown--anchor-right {
     right: 0;
   }
 
@@ -297,7 +297,7 @@
   top: 50%;
   transform: translate(0px, -50%);
 
-  &.sn-switch-handle-right {
+  &.sn-switch-handle--right {
     transform: translate(
       calc(2rem - 1.125rem),
       -50%
@@ -308,3 +308,21 @@
 .sn-component .sk-app-bar .sk-app-bar-item {
   justify-content: flex-start;
 }
+
+.sn-dropdown-item {
+  @extend .flex;
+  @extend .items-center;
+  @extend .border-0;
+  @extend .focus\:inner-ring-info;
+  @extend .cursor-pointer;
+  @extend .hover\:bg-contrast;
+  @extend .color-text;
+  @extend .bg-transparent;
+  @extend .px-3;
+  @extend .py-1\.5;
+  @extend .text-left;
+
+  &.sn-dropdown-item--no-icon {
+    @extend .py-2;
+  }
+}