From 5751d0c28ed87f41265d27ab78cc2bdb3826061b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lasse=20J=C3=B8rgensen?=
 <28780271+lasjorg@users.noreply.github.com>
Date: Tue, 28 Feb 2023 01:23:44 +0100
Subject: [PATCH] feat(client): make the new help icon clearer (#49516)

* feat(learn): update help button

* fix: remove space between svgs

* move style objects out of component
---
 client/src/assets/icons/help.tsx | 47 +++++++++++++++++++++++++-------
 1 file changed, 37 insertions(+), 10 deletions(-)

diff --git a/client/src/assets/icons/help.tsx b/client/src/assets/icons/help.tsx
index f745414e83a..e6d3760857c 100644
--- a/client/src/assets/icons/help.tsx
+++ b/client/src/assets/icons/help.tsx
@@ -1,20 +1,47 @@
 import React from 'react';
 
+const wrapper = {
+  display: 'grid',
+  placeItems: 'center',
+  position: 'relative',
+  padding: 'inherit'
+} as React.CSSProperties;
+
+const speechBubbleIcon = {
+  position: 'absolute'
+} as React.CSSProperties;
+
+const questionMarkIcon = {
+  position: 'absolute',
+  top: '-3px',
+  width: '9px'
+} as React.CSSProperties;
+
 function Help(
   props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
 ): JSX.Element {
   return (
     <>
-      <svg
-        fill='currentColor'
-        xmlns='http://www.w3.org/2000/svg'
-        height='24'
-        width='24'
-        aria-hidden='true'
-        {...props}
-      >
-        <path d='M11.95 18q.525 0 .888-.363.362-.362.362-.887t-.362-.887q-.363-.363-.888-.363t-.888.363q-.362.362-.362.887t.362.887q.363.363.888.363Zm-.9-3.85h1.85q0-.825.188-1.3.187-.475 1.062-1.3.65-.65 1.025-1.238.375-.587.375-1.412 0-1.4-1.025-2.15T12.1 6q-1.425 0-2.312.75-.888.75-1.238 1.8l1.65.65q.125-.45.563-.975Q11.2 7.7 12.1 7.7q.8 0 1.2.437.4.438.4.963 0 .5-.3.937-.3.438-.75.813-1.1.975-1.35 1.475-.25.5-.25 1.825ZM12 22q-2.075 0-3.9-.788-1.825-.787-3.175-2.137-1.35-1.35-2.137-3.175Q2 14.075 2 12t.788-3.9q.787-1.825 2.137-3.175 1.35-1.35 3.175-2.138Q9.925 2 12 2t3.9.787q1.825.788 3.175 2.138 1.35 1.35 2.137 3.175Q22 9.925 22 12t-.788 3.9q-.787 1.825-2.137 3.175-1.35 1.35-3.175 2.137Q14.075 22 12 22Zm0-2q3.35 0 5.675-2.325Q20 15.35 20 12q0-3.35-2.325-5.675Q15.35 4 12 4 8.65 4 6.325 6.325 4 8.65 4 12q0 3.35 2.325 5.675Q8.65 20 12 20Zm0-8Z' />
-      </svg>
+      <div style={wrapper}>
+        <svg
+          style={speechBubbleIcon}
+          xmlns='http://www.w3.org/2000/svg'
+          viewBox='0 0 512 512'
+          fill='currentColor'
+          {...props}
+        >
+          <path d='M160 368c26.5 0 48 21.5 48 48v16l72.5-54.4c8.3-6.2 18.4-9.6 28.8-9.6H448c8.8 0 16-7.2 16-16V64c0-8.8-7.2-16-16-16H64c-8.8 0-16 7.2-16 16V352c0 8.8 7.2 16 16 16h96zm48 124l-.2 .2-5.1 3.8-17.1 12.8c-4.8 3.6-11.3 4.2-16.8 1.5s-8.8-8.2-8.8-14.3V474.7v-6.4V468v-4V416H112 64c-35.3 0-64-28.7-64-64V64C0 28.7 28.7 0 64 0H448c35.3 0 64 28.7 64 64V352c0 35.3-28.7 64-64 64H309.3L208 492z' />
+        </svg>
+        <svg
+          style={questionMarkIcon}
+          xmlns='http://www.w3.org/2000/svg'
+          viewBox='0 0 320 512'
+          fill='currentColor'
+          {...props}
+        >
+          <path d='M64 160c0-35.3 28.7-64 64-64h32c35.3 0 64 28.7 64 64v3.6c0 21.8-11.1 42.1-29.4 53.8l-42.2 27.1c-25.2 16.2-40.4 44.1-40.4 74V320c0 17.7 14.3 32 32 32s32-14.3 32-32v-1.4c0-8.2 4.2-15.8 11-20.2l42.2-27.1c36.6-23.6 58.8-64.1 58.8-107.7V160c0-70.7-57.3-128-128-128H128C57.3 32 0 89.3 0 160c0 17.7 14.3 32 32 32s32-14.3 32-32zm80 320a40 40 0 1 0 0-80 40 40 0 1 0 0 80z' />
+        </svg>
+      </div>
     </>
   );
 }