Merge pull request #8902 from overleaf/ta-layout-dropdown-icons

Change Layout Dropdown Icons

GitOrigin-RevId: 7b455997ef2004cb146a0927da122c38cb06aa3c

services/web/frontend/js/features/editor-navigation-toolbar/components/icon-editor-only.js

@@ -1,39 +0,0 @@
-function IconEditorOnly() {
-  const color = '#505050' // match color from .dropdown-menu > li > a
-
-  return (
-    <svg
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <rect
-        x="0.5"
-        y="1.5769"
-        width="15"
-        height="13.7692"
-        rx="1.5"
-        stroke={color}
-      />
-      <line x1="1" y1="2.49976" x2="15" y2="2.49976" stroke={color} />
-      <line
-        x1="14"
-        y1="2.99976"
-        x2="14"
-        y2="14.9998"
-        stroke={color}
-        strokeWidth="2"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M7.74946 5.26853L10.7397 8.35194C11.0868 8.70989 11.0868 9.29025 10.7397 9.6482L7.74946 12.7316C7.40233 13.0896 6.83952 13.0896 6.49238 12.7316C6.14525 12.3736 6.51344 11.7904 6.86057 11.4324L8.33333 9.91374L3.88889 9.91667C3.39797 9.91667 3 9.50629 3 9.00007C3 8.49385 3.39797 8.08347 3.88889 8.08347L8.33333 8.08054L6.86057 6.56187C6.51344 6.20392 6.14525 5.62649 6.49238 5.26853C6.83952 4.91058 7.40233 4.91058 7.74946 5.26853Z"
-        fill={color}
-      />
-    </svg>
-  )
-}
-
-export default IconEditorOnly

services/web/frontend/js/features/editor-navigation-toolbar/components/icon-pdf-only.js

@@ -1,25 +0,0 @@
-function IconPdfOnly() {
-  const color = '#505050' // match color from .dropdown-menu > li > a
-
-  return (
-    <svg
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <rect x="0.5" y="1.5" width="15" height="14" rx="1.5" stroke={color} />
-      <line x1="1" y1="2.5" x2="15" y2="2.5" stroke={color} />
-      <line x1="2" y1="3" x2="2" y2="15" stroke={color} strokeWidth="2" />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M8.25054 12.7315L5.26035 9.64806C4.91322 9.29011 4.91322 8.70975 5.26035 8.3518L8.25054 5.2684C8.59767 4.91044 9.16048 4.91044 9.50762 5.2684C9.85475 5.62635 9.48656 6.20964 9.13943 6.56759L7.66667 8.08626L12.1111 8.08333C12.602 8.08333 13 8.49371 13 8.99993C13 9.50615 12.602 9.91653 12.1111 9.91653L7.66667 9.91946L9.13943 11.4381C9.48656 11.7961 9.85475 12.3735 9.50762 12.7315C9.16048 13.0894 8.59767 13.0894 8.25054 12.7315Z"
-        fill={color}
-      />
-    </svg>
-  )
-}
-
-export default IconPdfOnly

services/web/frontend/js/features/editor-navigation-toolbar/components/layout-dropdown-button.js

@@ -6,8 +6,6 @@ import Tooltip from '../../../shared/components/tooltip'
 import Icon from '../../../shared/components/icon'
 import IconChecked from '../../../shared/components/icon-checked'
 import ControlledDropdown from '../../../shared/components/controlled-dropdown'
-import IconEditorOnly from './icon-editor-only'
-import IconPdfOnly from './icon-pdf-only'
 import { useLayoutContext } from '../../../shared/context/layout-context'
 import * as eventTracking from '../../../infrastructure/event-tracking'
 import useEventListener from '../../../shared/hooks/use-event-listener'
@@ -24,10 +22,22 @@ function IconLayout() {
   return <Icon type="columns" fw />
 }
 
+function IconSplit() {
+  return <Icon type="columns" fw />
+}
+
 function IconDetach() {
   return <Icon type="window-restore" fw />
 }
 
+function IconEditorOnly() {
+  return <Icon type="code" fw />
+}
+
+function IconPdfOnly() {
+  return <Icon type="file-pdf-o" fw />
+}
+
 function IconCheckmark({ iconFor, pdfLayout, view, detachRole }) {
   if (detachRole === 'detacher' || view === 'history') {
     return <IconPlaceholder />
@@ -164,7 +174,7 @@ function LayoutDropdownButton() {
                 detachRole={detachRole}
               />
             }
-            icon={<Icon type="columns" fw />}
+            icon={<IconSplit />}
             text={t('editor_and_pdf')}
           />
 
@@ -178,11 +188,7 @@ function LayoutDropdownButton() {
                 detachRole={detachRole}
               />
             }
-            icon={
+            icon={<IconEditorOnly />}
-              <i className="fa fa-fw">
-                <IconEditorOnly />
-              </i>
-            }
             text={
               <Trans
                 i18nKey="editor_only_hide_pdf"
@@ -203,11 +209,7 @@ function LayoutDropdownButton() {
                 detachRole={detachRole}
               />
             }
-            icon={
+            icon={<IconPdfOnly />}
-              <i className="fa fa-fw">
-                <IconPdfOnly />
-              </i>
-            }
             text={
               <Trans
                 i18nKey="pdf_only_hide_editor"