Revert "Revert "feat: update note type menu design (#1032)""

This reverts commit b36c9d09bc.

app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceMenuItem.tsx

@@ -51,7 +51,7 @@ export const WorkspaceMenuItem: FunctionComponent<Props> = ({
       onClick={onClick}
       checked={descriptor.primary}
     >
-      <div className="flex items-center justify-between w-full">
+      <div className="flex items-center justify-between w-full ml-2">
         {isRenaming ? (
           <input
             ref={inputRef}

app/assets/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx

@@ -176,34 +176,32 @@ export const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
 
           return (
             <Fragment key={groupId}>
-              <div
+              <div className={`py-1 border-0 border-t-1px border-solid border-main ${index === 0 ? 'border-t-0' : ''}`}>
-                className={`flex items-center px-2.5 py-2 text-xs font-semibold color-text border-0 border-y-1px border-solid border-main ${
+                {group.items.map((item) => {
-                  index === 0 ? 'border-t-0 mb-2' : 'my-2'
+                  const onClickEditorItem = () => {
-                }`}
+                    selectEditor(item).catch(console.error)
-              >
+                  }
-                {group.icon && <Icon type={group.icon} className={`mr-2 ${group.iconClassName}`} />}
+                  return (
-                <div className="font-semibold text-input">{group.title}</div>
+                    <MenuItem
+                      type={MenuItemType.RadioButton}
+                      onClick={onClickEditorItem}
+                      className={
+                        'sn-dropdown-item py-2 text-input focus:bg-info-backdrop focus:shadow-none flex-row-reverse'
+                      }
+                      onBlur={closeOnBlur}
+                      checked={isSelectedEditor(item)}
+                    >
+                      <div className="flex flex-grow items-center justify-between">
+                        <div className="flex items-center">
+                          {group.icon && <Icon type={group.icon} className={`mr-2 ${group.iconClassName}`} />}
+                          {item.name}
+                        </div>
+                        {!item.isEntitled && <Icon type="premium-feature" />}
+                      </div>
+                    </MenuItem>
+                  )
+                })}
               </div>
-              {group.items.map((item) => {
-                const onClickEditorItem = () => {
-                  selectEditor(item).catch(console.error)
-                }
-
-                return (
-                  <MenuItem
-                    type={MenuItemType.RadioButton}
-                    onClick={onClickEditorItem}
-                    className={'sn-dropdown-item py-2 text-input focus:bg-info-backdrop focus:shadow-none'}
-                    onBlur={closeOnBlur}
-                    checked={isSelectedEditor(item)}
-                  >
-                    <div className="flex flex-grow items-center justify-between">
-                      {item.name}
-                      {!item.isEntitled && <Icon type="premium-feature" />}
-                    </div>
-                  </MenuItem>
-                )
-              })}
             </Fragment>
           )
         })}

app/assets/javascripts/Components/Menu/MenuItem.tsx

@@ -67,7 +67,7 @@ export const MenuItem: FunctionComponent<MenuItemProps> = forwardRef(
       >
         {type === MenuItemType.IconButton && icon ? <Icon type={icon} className={iconClassName} /> : null}
         {type === MenuItemType.RadioButton && typeof checked === 'boolean' ? (
-          <div className={`pseudo-radio-btn ${checked ? 'pseudo-radio-btn--checked' : ''} mr-2 flex-shrink-0`}></div>
+          <div className={`pseudo-radio-btn ${checked ? 'pseudo-radio-btn--checked' : ''} flex-shrink-0`}></div>
         ) : null}
         {children}
       </button>

app/assets/javascripts/Components/NotesList/NotesListOptionsMenu.tsx

@@ -119,7 +119,7 @@ export const NotesListOptionsMenu: FunctionComponent<Props> = observer(
           checked={sortBy === CollectionSort.UpdatedAt}
           onBlur={closeOnBlur}
         >
-          <div className="flex flex-grow items-center justify-between">
+          <div className="flex flex-grow items-center justify-between ml-2">
             <span>Date modified</span>
             {sortBy === CollectionSort.UpdatedAt ? (
               sortReverse ? (
@@ -137,7 +137,7 @@ export const NotesListOptionsMenu: FunctionComponent<Props> = observer(
           checked={sortBy === CollectionSort.CreatedAt}
           onBlur={closeOnBlur}
         >
-          <div className="flex flex-grow items-center justify-between">
+          <div className="flex flex-grow items-center justify-between ml-2">
             <span>Creation date</span>
             {sortBy === CollectionSort.CreatedAt ? (
               sortReverse ? (
@@ -155,7 +155,7 @@ export const NotesListOptionsMenu: FunctionComponent<Props> = observer(
           checked={sortBy === CollectionSort.Title}
           onBlur={closeOnBlur}
         >
-          <div className="flex flex-grow items-center justify-between">
+          <div className="flex flex-grow items-center justify-between ml-2">
             <span>Title</span>
             {sortBy === CollectionSort.Title ? (
               sortReverse ? (

app/assets/stylesheets/_sn.scss

@@ -514,6 +514,10 @@
   border-top-width: 1px;
 }
 
+.sn-component .border-b-0 {
+  border-bottom-width: 0;
+}
+
 .border-2 {
   border-width: 0.5rem;
 }
@@ -1006,8 +1010,7 @@
 }
 
 .focus\:shadow-inner:focus {
-  box-shadow: var(--sn-stylekit-info-color) 1px 1px 0px 0px inset,
+  box-shadow: var(--sn-stylekit-info-color) 1px 1px 0px 0px inset, var(--sn-stylekit-info-color) -1px -1px 0px 0px inset;
-    var(--sn-stylekit-info-color) -1px -1px 0px 0px inset;
 }
 
 .focus\:shadow-bottom:focus {
@@ -1076,8 +1079,8 @@
 }
 
 .transition {
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke,
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow,
-    opacity, box-shadow, transform, filter, backdrop-filter;
+    transform, filter, backdrop-filter;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 100ms;
 }
@@ -1152,3 +1155,7 @@
     border-radius: 0.5rem;
   }
 }
+
+.sn-component .flex-row-reverse {
+  flex-flow: row-reverse;
+}