From 335ac6a67bb5eb298f02f66b78a64d55aeb02442 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Timoth=C3=A9e=20Alby?= <timothee.alby@gmail.com>
Date: Wed, 20 Jul 2022 16:02:01 +0200
Subject: [PATCH] Merge pull request #8902 from
 overleaf/ta-layout-dropdown-icons

Change Layout Dropdown Icons

GitOrigin-RevId: 7b455997ef2004cb146a0927da122c38cb06aa3c
---
 .../components/icon-editor-only.js            | 39 -------------------
 .../components/icon-pdf-only.js               | 25 ------------
 .../components/layout-dropdown-button.js      | 28 ++++++-------
 3 files changed, 15 insertions(+), 77 deletions(-)
 delete mode 100644 services/web/frontend/js/features/editor-navigation-toolbar/components/icon-editor-only.js
 delete mode 100644 services/web/frontend/js/features/editor-navigation-toolbar/components/icon-pdf-only.js

diff --git a/services/web/frontend/js/features/editor-navigation-toolbar/components/icon-editor-only.js b/services/web/frontend/js/features/editor-navigation-toolbar/components/icon-editor-only.js
deleted file mode 100644
index 6118050620..0000000000
--- a/services/web/frontend/js/features/editor-navigation-toolbar/components/icon-editor-only.js
+++ /dev/null
@@ -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
diff --git a/services/web/frontend/js/features/editor-navigation-toolbar/components/icon-pdf-only.js b/services/web/frontend/js/features/editor-navigation-toolbar/components/icon-pdf-only.js
deleted file mode 100644
index 5a487ac6b1..0000000000
--- a/services/web/frontend/js/features/editor-navigation-toolbar/components/icon-pdf-only.js
+++ /dev/null
@@ -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
diff --git a/services/web/frontend/js/features/editor-navigation-toolbar/components/layout-dropdown-button.js b/services/web/frontend/js/features/editor-navigation-toolbar/components/layout-dropdown-button.js
index 26957239cd..725edfe051 100644
--- a/services/web/frontend/js/features/editor-navigation-toolbar/components/layout-dropdown-button.js
+++ b/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={
-              <i className="fa fa-fw">
-                <IconEditorOnly />
-              </i>
-            }
+            icon={<IconEditorOnly />}
             text={
               <Trans
                 i18nKey="editor_only_hide_pdf"
@@ -203,11 +209,7 @@ function LayoutDropdownButton() {
                 detachRole={detachRole}
               />
             }
-            icon={
-              <i className="fa fa-fw">
-                <IconPdfOnly />
-              </i>
-            }
+            icon={<IconPdfOnly />}
             text={
               <Trans
                 i18nKey="pdf_only_hide_editor"