Merge pull request #186 from calibreapp/realign-provider-defaults

robmorieson · web-flow · commit cc48f9c14845 · 2022-10-13T21:00:58.000+11:00
💅 Realign RLCL defaults with provider's latest defaults
diff --git a/src/components/Drift/index.tsx b/src/components/Drift/index.tsx
@@ -14,7 +14,7 @@ const styles: {
     fontSize: 16,
     display: 'flex',
     alignItems: 'flex-end',
-    padding: '.75rem',
+    padding: '12px',
     flexDirection: 'column'
   },
   button: {
@@ -24,8 +24,8 @@ const styles: {
     alignItems: 'center',
     fill: '#fff',
     cursor: 'pointer',
-    height: 52,
-    width: 52,
+    height: '56px',
+    width: '56px',
     borderRadius: '.3125rem',
     boxShadow: '0 2px 6px 0 rgba(0,0,0,.4)',
     overflow: 'hidden',
@@ -56,9 +56,7 @@ const Drift = ({
   const [positionStyles, setPositionStyles] = useState<CSSProperties>({
     zIndex: 2147483648,
     position: 'fixed',
-    display: 'block',
-    height: '60px !important',
-    width: '76px !important'
+    display: 'block'
   })
 
   useEffect(() => {
@@ -96,8 +94,8 @@ const Drift = ({
           >
             {icon === 'A' ? (
               <svg
-                width="20"
-                height="20"
+                width="24"
+                height="24"
                 viewBox="0 0 20 20"
                 focusable="false"
                 aria-hidden="true"
@@ -106,10 +104,9 @@ const Drift = ({
                 }}
               >
                 <path
+                  fill="#FFFFFF"
                   d="M4.583 14.894l-3.256 3.78c-.7.813-1.26.598-1.25-.46a10689.413 10689.413 0 0 1 .035-4.775V4.816a3.89 3.89 0 0 1 3.88-3.89h12.064a3.885 3.885 0 0 1 3.882 3.89v6.185a3.89 3.89 0 0 1-3.882 3.89H4.583z"
-                  fill="rgb(255, 255, 255)"
-                  fillRule="evenodd"
-                />
+                ></path>
               </svg>
             ) : icon === 'B' ? (
               <svg
diff --git a/src/components/HelpScout/index.tsx b/src/components/HelpScout/index.tsx
@@ -166,10 +166,10 @@ interface Props extends ProviderProps {
 }
 
 const HelpScout = ({
-  color = '#976ad4',
-  icon = 'beacon',
+  color = '#527ceb',
+  icon = 'message',
   zIndex = '1050',
-  horizontalPosition = 'left',
+  horizontalPosition = 'right',
   containerClass = ClassNames.container
 }: Props): JSX.Element | null => {
   const [state, loadChat] = useChat({ loadWhenIdle: true })
@@ -181,17 +181,17 @@ const HelpScout = ({
 
   useEffect(() => {
     setPositionStyles({
-      bottom: windowHeight < 740 ? '10px' : '40px',
+      bottom: windowHeight <= 740 ? '10px' : '40px',
       right:
         horizontalPosition === 'left'
           ? 'auto'
-          : windowHeight < 740
+          : windowHeight <= 740
           ? '20px'
           : '40px',
       left:
         horizontalPosition === 'right'
           ? 'auto'
-          : windowHeight < 740
+          : windowHeight <= 740
           ? '20px'
           : '40px'
     })
diff --git a/src/components/Intercom/index.tsx b/src/components/Intercom/index.tsx
@@ -149,17 +149,18 @@ const Intercom = ({
           >
             <svg
               focusable="false"
-              viewBox="0 0 16 14"
-              width="28"
-              height="25"
-              style={{ width: '16px' }}
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                fill="rgb(255, 255, 255)"
                 fillRule="evenodd"
                 clipRule="evenodd"
-                d="M.116 4.884l1.768-1.768L8 9.232l6.116-6.116 1.768 1.768L8 12.768.116 4.884z"
-              />
+                d="M18.601 8.39897C18.269 8.06702 17.7309 8.06702 17.3989 8.39897L12 13.7979L6.60099 8.39897C6.26904 8.06702 5.73086 8.06702 5.39891 8.39897C5.06696 8.73091 5.06696 9.2691 5.39891 9.60105L11.3989 15.601C11.7309 15.933 12.269 15.933 12.601 15.601L18.601 9.60105C18.9329 9.2691 18.9329 8.73091 18.601 8.39897Z"
+                fill="white"
+              ></path>
             </svg>
           </div>
         </div>
diff --git a/src/components/Messenger/index.tsx b/src/components/Messenger/index.tsx
@@ -92,22 +92,24 @@ const Widget = ({
       onClick={() => loadChat({ open: true })}
       onMouseEnter={() => loadChat({ open: false })}
     >
-      <svg width="60px" height="60px" viewBox="0 0 60 60">
-        <svg x="0" y="0" width="60px" height="60px">
-          <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
-            <g>
-              <circle fill={color ? color : '#0084FF'} cx="30" cy="30" r="30" />
-              <svg x="10" y="10">
-                <g transform="translate(0.000000, -10.000000)" fill="#FFFFFF">
-                  <g id="logo" transform="translate(0.000000, 10.000000)">
-                    <path d="M20,0 C31.2666,0 40,8.2528 40,19.4 C40,30.5472 31.2666,38.8 20,38.8 C17.9763,38.8 16.0348,38.5327 14.2106,38.0311 C13.856,37.9335 13.4789,37.9612 13.1424,38.1098 L9.1727,39.8621 C8.1343,40.3205 6.9621,39.5819 6.9273,38.4474 L6.8184,34.8894 C6.805,34.4513 6.6078,34.0414 6.2811,33.7492 C2.3896,30.2691 0,25.2307 0,19.4 C0,8.2528 8.7334,0 20,0 Z M7.99009,25.07344 C7.42629,25.96794 8.52579,26.97594 9.36809,26.33674 L15.67879,21.54734 C16.10569,21.22334 16.69559,21.22164 17.12429,21.54314 L21.79709,25.04774 C23.19919,26.09944 25.20039,25.73014 26.13499,24.24744 L32.00999,14.92654 C32.57369,14.03204 31.47419,13.02404 30.63189,13.66324 L24.32119,18.45264 C23.89429,18.77664 23.30439,18.77834 22.87569,18.45674 L18.20299,14.95224 C16.80079,13.90064 14.79959,14.26984 13.86509,15.75264 L7.99009,25.07344 Z" />
-                  </g>
-                </g>
-              </svg>
-            </g>
-          </g>
+      <div
+        style={{
+          width: '60px',
+          height: '60px',
+          backgroundColor: color ? color : '#0A7CFF',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          borderRadius: '60px'
+        }}
+      >
+        <svg width="36" height="36" viewBox="0 0 36 36">
+          <path
+            fill="white"
+            d="M1 17.99C1 8.51488 8.42339 1.5 18 1.5C27.5766 1.5 35 8.51488 35 17.99C35 27.4651 27.5766 34.48 18 34.48C16.2799 34.48 14.6296 34.2528 13.079 33.8264C12.7776 33.7435 12.4571 33.767 12.171 33.8933L8.79679 35.3828C7.91415 35.7724 6.91779 35.1446 6.88821 34.1803L6.79564 31.156C6.78425 30.7836 6.61663 30.4352 6.33893 30.1868C3.03116 27.2287 1 22.9461 1 17.99ZM12.7854 14.8897L7.79161 22.8124C7.31238 23.5727 8.24695 24.4295 8.96291 23.8862L14.327 19.8152C14.6899 19.5398 15.1913 19.5384 15.5557 19.8116L19.5276 22.7905C20.7193 23.6845 22.4204 23.3706 23.2148 22.1103L28.2085 14.1875C28.6877 13.4272 27.7531 12.5704 27.0371 13.1137L21.673 17.1847C21.3102 17.4601 20.8088 17.4616 20.4444 17.1882L16.4726 14.2094C15.2807 13.3155 13.5797 13.6293 12.7854 14.8897Z"
+          ></path>
         </svg>
-      </svg>
+      </div>
     </div>
   )
 }
diff --git a/src/components/Userlike/index.tsx b/src/components/Userlike/index.tsx
@@ -31,7 +31,7 @@ const styles: {
     border: '0'
   },
   icon: {
-    fontSize: '36px'
+    fontSize: '40px'
   }
 }
 
@@ -48,8 +48,8 @@ const Userlike = ({
   color = 'white',
   backgroundColor = '#0d8cff',
   position = 'right',
-  vOffset = '24px',
-  hOffset = '24px',
+  vOffset = 'calc(0% + 20px)',
+  hOffset = 'calc(0% + 24px)',
   style = 'round',
   containerClass = ClassNames.container
 }: Props): JSX.Element | null => {
@@ -88,16 +88,14 @@ const Userlike = ({
         <svg
           width="1em"
           height="1em"
-          viewBox="0 0 36 36"
+          viewBox="0 0 40 40"
           fill="none"
           style={{ ...styles.icon, color }}
         >
           <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M18 36c2.893 0 5.626-.682 8.047-1.895h5.11a2 2 0 002-2v-4.393A17.916 17.916 0 0036 18c0-9.941-8.059-18-18-18S0 8.059 0 18s8.059 18 18 18zM9.5 22a1.5 1.5 0 000 3h17a1.5 1.5 0 000-3h-17zm1.5-4a1.5 1.5 0 011.5-1.5h14a1.5 1.5 0 010 3h-14A1.5 1.5 0 0111 18zm-1.5-7a1.5 1.5 0 000 3h17a1.5 1.5 0 000-3h-17z"
+            d="M37.4 30.7c-.1-.5 0-.9.2-1.4 1.5-2.8 2.3-6 2.3-9.4C40 9 31 0 20 0 9 0 0 9 0 20s9 20 20 20c3.3 0 6.5-.9 9.4-2.3.4-.2.9-.3 1.4-.2l6.8 1.3c.7.1 1.3-.5 1.2-1.2l-1.4-6.9zM21 29h-8c-1.1 0-2-.9-2-2s.9-2 2-2h8c1.1 0 2 .9 2 2s-.9 2-2 2zm6-7H13c-1.1 0-2-.9-2-2s.9-2 2-2h14c1.1 0 2 .9 2 2s-.9 2-2 2zm0-7H13c-1.1 0-2-.9-2-2s.9-2 2-2h14c1.1 0 2 .9 2 2s-.9 2-2 2z"
             fill="currentColor"
-          />
+          ></path>
         </svg>
       </button>
     </div>
diff --git a/website/pages/helpscout.tsx b/website/pages/helpscout.tsx
@@ -25,7 +25,7 @@ const Page: NextPage = () => (
           <ExampleLinks />
         </div>
       </div>
-      <HelpScout color="#527ceb" />
+      <HelpScout />
     </Layout>
   </LiveChatLoaderProvider>
 )
diff --git a/website/pages/userlike.tsx b/website/pages/userlike.tsx
@@ -25,7 +25,7 @@ const Page: NextPage = () => (
           <ExampleLinks />
         </div>
       </div>
-      <Userlike vOffset="47px" hOffset="49px" />
+      <Userlike />
     </Layout>
   </LiveChatLoaderProvider>
 )

Original file line number	Diff line number	Diff line change
`@@ -25,7 +25,7 @@ const Page: NextPage = () => (`
`25`	`25`	`<ExampleLinks />`
`26`	`26`	`</div>`
`27`	`27`	`</div>`
`28`		`- <HelpScout color="#527ceb" />`
	`28`	`+ <HelpScout />`
`29`	`29`	`</Layout>`
`30`	`30`	`</LiveChatLoaderProvider>`
`31`	`31`	`)`