From a10953ffb95e8a644143d7769520107dcad73fbd Mon Sep 17 00:00:00 2001
From: ronronscelestes <71838159+ronronscelestes@users.noreply.github.com>
Date: Tue, 2 Nov 2021 18:00:31 +0100
Subject: [PATCH] QA/ Wysiwyg link button size (#11441)

* attempt to fix link svg in wysiwyg

* fixed more label button

* fixed tests
---
 .../components/Wysiwyg/WysiwygNav.js               | 14 ++++++++++----
 .../components/Wysiwyg/WysiwygStyles.js            |  7 +++++++
 .../src/pages/Roles/CreatePage/tests/index.test.js |  8 ++++----
 .../src/pages/Roles/EditPage/tests/index.test.js   |  8 ++++----
 4 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/packages/core/admin/admin/src/content-manager/components/Wysiwyg/WysiwygNav.js b/packages/core/admin/admin/src/content-manager/components/Wysiwyg/WysiwygNav.js
index 44d8e6592e..329bbbce21 100644
--- a/packages/core/admin/admin/src/content-manager/components/Wysiwyg/WysiwygNav.js
+++ b/packages/core/admin/admin/src/content-manager/components/Wysiwyg/WysiwygNav.js
@@ -18,7 +18,13 @@ import Image from '@strapi/icons/Picture';
 import Link from '@strapi/icons/Link';
 import Quote from '@strapi/icons/Quote';
 import More from '@strapi/icons/More';
-import { MainButtons, CustomIconButton, MoreButton, IconButtonGroupMargin } from './WysiwygStyles';
+import {
+  MainButtons,
+  CustomIconButton,
+  MoreButton,
+  IconButtonGroupMargin,
+  CustomLinkIconButton,
+} from './WysiwygStyles';
 
 const WysiwygNav = ({
   editorRef,
@@ -75,7 +81,7 @@ const WysiwygNav = ({
               />
             </MainButtons>
 
-            <MoreButton disabled ref={buttonMoreRef} id="more" label="more" icon={<More />} />
+            <MoreButton disabled ref={buttonMoreRef} id="more" label="More" icon={<More />} />
           </Flex>
 
           <Button onClick={onTogglePreviewMode} variant="tertiary" size="L" id="preview">
@@ -135,7 +141,7 @@ const WysiwygNav = ({
             ref={buttonMoreRef}
             onClick={onTogglePopover}
             id="more"
-            label="more"
+            label="More"
             icon={<More />}
           />
           {visiblePopover && (
@@ -179,7 +185,7 @@ const WysiwygNav = ({
                     name="Image"
                     icon={<Image />}
                   />
-                  <CustomIconButton
+                  <CustomLinkIconButton
                     onClick={() => onActionClick('Link', editorRef, onTogglePopover)}
                     id="Link"
                     label="Link"
diff --git a/packages/core/admin/admin/src/content-manager/components/Wysiwyg/WysiwygStyles.js b/packages/core/admin/admin/src/content-manager/components/Wysiwyg/WysiwygStyles.js
index 125a3863d2..c1269e1cc9 100644
--- a/packages/core/admin/admin/src/content-manager/components/Wysiwyg/WysiwygStyles.js
+++ b/packages/core/admin/admin/src/content-manager/components/Wysiwyg/WysiwygStyles.js
@@ -21,6 +21,13 @@ export const CustomIconButton = styled(IconButton)`
   }
 `;
 
+export const CustomLinkIconButton = styled(CustomIconButton)`
+  svg {
+    width: ${8 / 16}rem;
+    height: ${8 / 16}rem;
+  }
+`;
+
 export const MainButtons = styled(IconButtonGroup)`
   margin-left: ${({ theme }) => theme.spaces[4]};
 `;
diff --git a/packages/plugins/users-permissions/admin/src/pages/Roles/CreatePage/tests/index.test.js b/packages/plugins/users-permissions/admin/src/pages/Roles/CreatePage/tests/index.test.js
index 0ce4400eea..1d60255520 100644
--- a/packages/plugins/users-permissions/admin/src/pages/Roles/CreatePage/tests/index.test.js
+++ b/packages/plugins/users-permissions/admin/src/pages/Roles/CreatePage/tests/index.test.js
@@ -770,10 +770,6 @@ describe('Admin | containers | RoleCreatePage', () => {
         background: #d9d8ff;
       }
 
-      .c40:hover:not([aria-disabled='true']) svg path {
-        fill: #4945ff;
-      }
-
       .c47 {
         background: transparent;
         border: none;
@@ -861,6 +857,10 @@ describe('Admin | containers | RoleCreatePage', () => {
         height: 5.5rem;
       }
 
+      .c44:hover svg path {
+        fill: #4945ff;
+      }
+
       @media (max-width:68.75rem) {
         .c20 {
           grid-column: span;
diff --git a/packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/tests/index.test.js b/packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/tests/index.test.js
index 4255641b7d..6ba8b542b8 100644
--- a/packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/tests/index.test.js
+++ b/packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/tests/index.test.js
@@ -853,10 +853,6 @@ describe('Admin | containers | RoleEditPage', () => {
         background: #d9d8ff;
       }
 
-      .c47:hover:not([aria-disabled='true']) svg path {
-        fill: #4945ff;
-      }
-
       .c54 {
         background: transparent;
         border: none;
@@ -944,6 +940,10 @@ describe('Admin | containers | RoleEditPage', () => {
         height: 5.5rem;
       }
 
+      .c51:hover svg path {
+        fill: #4945ff;
+      }
+
       @media (max-width:68.75rem) {
         .c27 {
           grid-column: span;