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
-                className={`flex items-center px-2.5 py-2 text-xs font-semibold color-text border-0 border-y-1px border-solid border-main ${
-                  index === 0 ? 'border-t-0 mb-2' : 'my-2'
-                }`}
-              >
-                {group.icon && <Icon type={group.icon} className={`mr-2 ${group.iconClassName}`} />}
-                <div className="font-semibold text-input">{group.title}</div>
+              <div className={`py-1 border-0 border-t-1px border-solid border-main ${index === 0 ? 'border-t-0' : ''}`}>
+                {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 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 ? (