From 9524a83ec32bc630b03034d9b88ffa8b6513a478 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Thu, 19 May 2022 17:29:48 +0530
Subject: [PATCH] feat: update note type menu design (#1032)

---
 .../WorkspaceSwitcher/WorkspaceMenuItem.tsx   |  2 +-
 .../ChangeEditor/ChangeEditorMenu.tsx         | 52 +++++++++----------
 .../javascripts/Components/Menu/MenuItem.tsx  |  2 +-
 .../NotesList/NotesListOptionsMenu.tsx        |  6 +--
 app/assets/stylesheets/_sn.scss               | 15 ++++--
 5 files changed, 41 insertions(+), 36 deletions(-)

diff --git a/app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceMenuItem.tsx b/app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceMenuItem.tsx
index 663dd919a..065785670 100644
--- a/app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceMenuItem.tsx
+++ b/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}
diff --git a/app/assets/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx b/app/assets/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx
index 889a920cc..32c8d9afc 100644
--- a/app/assets/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx
+++ b/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>
           )
         })}
diff --git a/app/assets/javascripts/Components/Menu/MenuItem.tsx b/app/assets/javascripts/Components/Menu/MenuItem.tsx
index 10f74ed8b..ad2a9b072 100644
--- a/app/assets/javascripts/Components/Menu/MenuItem.tsx
+++ b/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>
diff --git a/app/assets/javascripts/Components/NotesList/NotesListOptionsMenu.tsx b/app/assets/javascripts/Components/NotesList/NotesListOptionsMenu.tsx
index bc1439a7e..367eddecd 100644
--- a/app/assets/javascripts/Components/NotesList/NotesListOptionsMenu.tsx
+++ b/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 ? (
diff --git a/app/assets/stylesheets/_sn.scss b/app/assets/stylesheets/_sn.scss
index bfa58afa4..bc3018db1 100644
--- a/app/assets/stylesheets/_sn.scss
+++ b/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,
-    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;
 }
 
 .focus\:shadow-bottom:focus {
@@ -1076,8 +1079,8 @@
 }
 
 .transition {
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke,
-    opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow,
+    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;
+}