Header components customisation

dancecard · Sep 23, 2021 · 83acf53 · 83acf53
1 parent ef1da2b
commit 83acf53
Show file tree

Hide file tree

Showing 10 changed files with 125 additions and 259 deletions.
diff --git a/assets/home-white.svg b/assets/home-white.svg
diff --git a/assets/home.svg b/assets/home.svg
diff --git a/assets/left-arrow-white.svg b/assets/left-arrow-white.svg
diff --git a/src/Widget/Conversation/Header/Header.tsx b/src/Widget/Conversation/Header/Header.tsx
@@ -3,15 +3,11 @@ import React from 'react';
 import { useAppContext } from 'src/context';
 
 import { formatPhoneNumber } from 'src/utils/common';
-import { renderCloseIcon } from 'src/utils/iconRenderers';
 
-import arrowIconSrc from '../../../../assets/left-arrow-white.svg';
-import homeIconSrc from '../../../../assets/home-white.svg';
+import { renderCloseIcon, renderPhoneIcon, renderArrowIcon, renderHomeIcon } from 'src/utils/iconRenderers';
 
 import { useTheme } from 'src/utils/style';
-import { Container, HeaderNav, Title, HeaderPhoneNumber, HeaderCloseButton } from './style';
-
-import { PhoneIconHolder, PhoneIcon } from '../Testimonials/style';
+import { Container, HeaderNav, Title, HeaderPhoneNumber, HeaderCloseButton, PhoneIconHolder } from './style';
 
 /* - - - - - - - - - - - - - - - - - - - - - */
 
@@ -32,12 +28,8 @@ function Header() {
       <HeaderNav>
         {appState.routerHistory?.length > 1 && (
           <React.Fragment>
-            <button onClick={() => goBack()}>
-              <img src={arrowIconSrc} alt="Back" />
-            </button>
-            <button onClick={() => goHome()}>
-              <img src={homeIconSrc} alt="Home" />
-            </button>
+            <button onClick={() => goBack()}>{renderArrowIcon(parameters?.titleFontColor)}</button>
+            <button onClick={() => goHome()}>{renderHomeIcon(parameters?.titleFontColor)}</button>
           </React.Fragment>
         )}
       </HeaderNav>
@@ -54,8 +46,12 @@ function Header() {
         {formatPhoneNumber(config?.phoneNumberParameters.phoneNumber as string)}
       </HeaderPhoneNumber>
 
-      <PhoneIconHolder className="rcw-phone-icon-holder" href={`tel:${config?.phoneNumberParameters.phoneNumber}`}>
-        <PhoneIcon className="rcw-phone-icon is-animating" />
+      <PhoneIconHolder
+        color={parameters.phoneIconColor}
+        href={`tel:${config?.phoneNumberParameters.phoneNumber}`}
+        className="rcw-phone-icon-holder"
+      >
+        {renderPhoneIcon(parameters.phoneIconColor)}
       </PhoneIconHolder>
     </Container>
   );

diff --git a/src/Widget/Conversation/Header/keyframesAnimations.ts b/src/Widget/Conversation/Header/keyframesAnimations.ts
@@ -0,0 +1,54 @@
+import { keyframes } from 'styled-components';
+
+export const phoneOuterFrames = keyframes`
+  0% {
+    box-shadow: 0 0 0 0em rgba(#3498db, 0), 0em 0.05em 0.1em rgba(#000000, 0.2);
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+  10% {
+    transform: translate3d(0, 0, 0) scale(1.15);
+  }
+  20% {
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+  100% {
+    box-shadow: 0 0 0 0em rgba(#3498db, 0), 0em 0.05em 0.1em rgba(#000000, 0.2);
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+`;
+
+export const phoneIconFrames = keyframes`
+  0% {
+    transform: translate3d(0em, 0, 0);
+  }
+  1% {
+    transform: translate3d(2px, 0, 0);
+  }
+  2% {
+    transform: translate3d(-2px, 0, 0);
+  }
+  3% {
+    transform: translate3d(2px, 0, 0);
+  }
+  4% {
+    transform: translate3d(-2px, 0, 0);
+  }
+  5% {
+    transform: translate3d(2px, 0, 0);
+  }
+  6% {
+    transform: translate3d(-2px, 0, 0);
+  }
+  7% {
+    transform: translate3d(2px, 0, 0);
+  }
+  8% {
+    transform: translate3d(-2px, 0, 0);
+  }
+  9% {
+    transform: translate3d(2px, 0, 0);
+  }
+  10% {
+    transform: translate3d(0, 0, 0);
+  }
+`;
diff --git a/src/Widget/Conversation/Header/style.ts b/src/Widget/Conversation/Header/style.ts
@@ -1,5 +1,7 @@
 import styled from 'styled-components';
 
+import { phoneOuterFrames, phoneIconFrames } from './keyframesAnimations';
+
 export const Container = styled.div<{ backgroundColor: string }>`
   display: flex;
   flex-direction: column;
@@ -20,13 +22,12 @@ export const HeaderNav = styled.div`
   display: flex;
   align-items: center;
   position: absolute;
-  top: 27px;
+  top: 34px;
   left: 24px;
 
   button {
-    width: 32px;
-    height: 32px;
-    margin-right: 5px;
+    width: 22px;
+    margin-right: 12px;
     padding: 0 !important;
     border: 0;
     background: transparent;
@@ -82,3 +83,23 @@ export const HeaderCloseButton = styled.button`
     height: 20px;
   }
 `;
+
+export const PhoneIconHolder = styled.a<{ color: string }>`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  right: 25px;
+  top: 25px;
+  width: 38px;
+  height: 38px;
+  border: 2px solid ${p => p.color};
+  border-radius: 50%;
+  animation: ${phoneOuterFrames} 9000ms infinite;
+
+  svg {
+    height: 18px;
+    width: 18px;
+    animation: ${phoneIconFrames} 9000ms infinite;
+  }
+`;
diff --git a/src/Widget/Conversation/Testimonials/style.ts b/src/Widget/Conversation/Testimonials/style.ts
@@ -54,142 +54,3 @@ export const TestimonialsListItem = styled.li<{ color: string; widgetIsOpen: boo
     max-width: 120px;
   }
 `;
-
-export const PhoneIconHolder = styled.a`
-  position: absolute;
-  right: 25px;
-  top: 25px;
-
-  /* position: relative; */
-  width: 38px;
-  height: 38px;
-`;
-
-const phoneOuterFrames = keyframes`
-  0% {
-    box-shadow: 0 0 0 0em rgba(#3498db, 0), 0em 0.05em 0.1em rgba(#000000, 0.2);
-    transform: translate3d(0, 0, 0) scale(1);
-  }
-  10% {
-    transform: translate3d(0, 0, 0) scale(1.15);
-  }
-  20% {
-    transform: translate3d(0, 0, 0) scale(1);
-  }
-  100% {
-    box-shadow: 0 0 0 0em rgba(#3498db, 0), 0em 0.05em 0.1em rgba(#000000, 0.2);
-    transform: translate3d(0, 0, 0) scale(1);
-  }
-`;
-const phoneInnerFrames = keyframes`
-  0% {
-    opacity: 1;
-    transform: translate3d(0, 0, 0) scale(0);
-  }
-  10% {
-    opacity: 1;
-    transform: translate3d(0, 0, 0) scale(0.9);
-  }
-  20% {
-    opacity: 0;
-    transform: translate3d(0, 0, 0) scale(0);
-  }
-  100% {
-    opacity: 0;
-    transform: translate3d(0, 0, 0) scale(0);
-  }
-`;
-
-const phoneIconFrames = keyframes`
-  0% {
-    transform: translate3d(0em, 0, 0);
-  }
-  1% {
-    transform: translate3d(0.01em, 0, 0);
-  }
-  2% {
-    transform: translate3d(-0.01em, 0, 0);
-  }
-  3% {
-    transform: translate3d(0.01em, 0, 0);
-  }
-  4% {
-    transform: translate3d(-0.01em, 0, 0);
-  }
-  5% {
-    transform: translate3d(0.01em, 0, 0);
-  }
-  6% {
-    transform: translate3d(-0.01em, 0, 0);
-  }
-  7% {
-    transform: translate3d(0.01em, 0, 0);
-  }
-  8% {
-    transform: translate3d(-0.01em, 0, 0);
-  }
-  9% {
-    transform: translate3d(0.01em, 0, 0);
-  }
-  10% {
-    transform: translate3d(0, 0, 0);
-  }
-`;
-
-export const PhoneIcon = styled.i`
-  display: block;
-  position: relative;
-  height: 100%;
-  width: 100%;
-  margin: 0;
-  /* background-color: #0073aa; */
-  background-color: transparent;
-
-  box-shadow: 0 0 0 0em rgba(#0073aa, 0), 0em 0.05em 0.1em rgba(#000000, 0.2);
-  border-radius: 50%;
-  font-size: 15vmin;
-  transform: translate3d(0, 0, 0) scale(1);
-  cursor: pointer;
-  border: 2px solid #fff;
-
-  &.is-animating {
-    animation: ${phoneOuterFrames} 9000ms infinite;
-
-    &::before {
-      animation: ${phoneInnerFrames} 9000ms infinite;
-    }
-
-    &::after {
-      animation: ${phoneIconFrames} 9000ms infinite;
-    }
-  }
-
-  &::before,
-  &::after {
-    content: '';
-    position: absolute;
-  }
-
-  &::before {
-    top: 0;
-    left: 0;
-    height: 44px;
-    width: 44px;
-    background-color: rgba(#fff, 0.1);
-    border-radius: 100%;
-    opacity: 1;
-    transform: translate3d(0, 0, 0) scale(0);
-  }
-
-  &::after {
-    top: 8px;
-    left: 8px;
-    height: 18px;
-    width: 18px;
-    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c3ZnanM9Imh0dHA6Ly9zdmdqcy5jb20vc3ZnanMiIHZlcnNpb249IjEuMSIgd2lkdGg9IjUxMiIgaGVpZ2h0PSI1MTIiIHg9IjAiIHk9IjAiIHZpZXdCb3g9IjAgMCA1MTMuNjQgNTEzLjY0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIiBjbGFzcz0iIj48Zz4KPGcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KCTxnPgoJCTxwYXRoIGQ9Ik00OTkuNjYsMzc2Ljk2bC03MS42OC03MS42OGMtMjUuNi0yNS42LTY5LjEyLTE1LjM1OS03OS4zNiwxNy45MmMtNy42OCwyMy4wNDEtMzMuMjgsMzUuODQxLTU2LjMyLDMwLjcyICAgIGMtNTEuMi0xMi44LTEyMC4zMi03OS4zNi0xMzMuMTItMTMzLjEyYy03LjY4LTIzLjA0MSw3LjY4LTQ4LjY0MSwzMC43Mi01Ni4zMmMzMy4yOC0xMC4yNCw0My41Mi01My43NiwxNy45Mi03OS4zNmwtNzEuNjgtNzEuNjggICAgYy0yMC40OC0xNy45Mi01MS4yLTE3LjkyLTY5LjEyLDBsLTQ4LjY0LDQ4LjY0Yy00OC42NCw1MS4yLDUuMTIsMTg2Ljg4LDEyNS40NCwzMDcuMmMxMjAuMzIsMTIwLjMyLDI1NiwxNzYuNjQxLDMwNy4yLDEyNS40NCAgICBsNDguNjQtNDguNjRDNTE3LjU4MSw0MjUuNiw1MTcuNTgxLDM5NC44OCw0OTkuNjYsMzc2Ljk2eiIgZmlsbD0iI2ZmZmZmZiIgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCIgc3R5bGU9IiIgY2xhc3M9IiIvPgoJPC9nPgo8L2c+CjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjwvZz4KPGcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPC9nPgo8ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8L2c+CjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjwvZz4KPGcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPC9nPgo8ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8L2c+CjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjwvZz4KPGcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPC9nPgo8ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8L2c+CjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjwvZz4KPGcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPC9nPgo8ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8L2c+CjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjwvZz4KPGcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPC9nPgo8ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8L2c+CjwvZz48L3N2Zz4K);
-    background-position: 50% 50%;
-    background-repeat: no-repeat;
-    background-size: cover;
-    transform: translate3d(0, 0, 0);
-  }
-`;