CTA button adjustments (#1177)

src/shared/components/CallToActionButton/CallToActionButton.style.ts

@@ -3,10 +3,14 @@ import styled from '@emotion/styled'
 
 import { colors, media, sizes, transitions } from '@/shared/theme'
 
+import { ColorVariants } from './CallToActionButton'
+
 import { CallToActionButtonProps } from '.'
+import { Text } from '../Text'
 
 const mappedColors = {
   blue: colors.blue[500],
+  lightBlue: colors.blue[200],
   red: colors.secondary.alert[100],
   yellow: colors.secondary.warning[100],
   green: colors.secondary.success[100],
@@ -21,12 +25,19 @@ export const CallToActionWrapper = styled.div`
     grid-column-gap: ${sizes(6)};
   }
 `
+type IconWrapperProps = {
+  colorVariant: ColorVariants
+}
 
-export const IconWrapper = styled.div`
+export const IconWrapper = styled.div<IconWrapperProps>`
   margin-bottom: ${sizes(5)};
+
+  path {
+    fill: ${({ colorVariant = 'blue' }) => mappedColors[colorVariant]};
+  }
 `
 
-export const BodyWrapper = styled.div`
+export const BodyWrapper = styled(Text)`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -65,11 +76,4 @@ export const StyledContainer = styled('button', { shouldForwardProp: isPropValid
       box-shadow: ${({ colorVariant = 'blue' }) => `${sizes(2)} ${sizes(2)} 0 ${mappedColors[colorVariant]}`};
     }
   }
-
-  ${IconWrapper} {
-    path,
-    circle {
-      stroke: ${({ colorVariant = 'blue' }) => mappedColors[colorVariant]};
-    }
-  }
 `

src/shared/components/CallToActionButton/CallToActionButton.tsx

@@ -6,7 +6,7 @@ import { getLinkPropsFromTo } from '@/utils/button'
 
 import { BodyWrapper, ContentWrapper, IconWrapper, StyledContainer } from './CallToActionButton.style'
 
-export type ColorVariants = 'red' | 'green' | 'yellow' | 'blue'
+export type ColorVariants = 'red' | 'green' | 'yellow' | 'blue' | 'lightBlue'
 
 export type CallToActionButtonProps = {
   to?: To
@@ -28,8 +28,8 @@ export const CallToActionButton: FC<CallToActionButtonProps> = ({
   return (
     <StyledContainer {...linkProps} onClick={onClick} colorVariant={colorVariant}>
       <ContentWrapper>
-        <IconWrapper>{icon}</IconWrapper>
-        <BodyWrapper>
+        <IconWrapper colorVariant={colorVariant === 'blue' ? 'lightBlue' : colorVariant}>{icon}</IconWrapper>
+        <BodyWrapper variant="h5">
           {label}
           <SvgGlyphChevronRight />
         </BodyWrapper>

src/shared/icons/NavChannels.tsx

@@ -3,14 +3,15 @@ import * as React from 'react'
 
 export const SvgNavChannels = (props: React.SVGProps<SVGSVGElement>) => (
   <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-    <circle cx={16} cy={7} r={3} stroke="#F4F6F8" strokeWidth={2} />
-    <circle cx={6} cy={7} r={1} stroke="#F4F6F8" strokeWidth={2} />
     <path
-      d="M13.5 20H21a1 1 0 001-1v-1a4 4 0 00-4-4h-4a4 4 0 00-4 4v.5M6 16h3.2a.8.8 0 00.8-.8v0A3.2 3.2 0 006.8 12H5a3 3 0 00-3 3v1"
-      stroke="#F4F6F8"
-      strokeWidth={2}
-      strokeMiterlimit={10}
-      strokeLinecap="square"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M16 3a4 4 0 100 8 4 4 0 000-8zm-2 4a2 2 0 114 0 2 2 0 01-4 0z"
+      fill="#F4F6F8"
+    />
+    <path
+      d="M6 5a2 2 0 100 4 2 2 0 000-4zM12.5 19H21v-1a3 3 0 00-3-3h-4a3 3 0 00-3 3v1.5H9V18c0-.343.034-.677.1-1H5v-2h3.991A2.2 2.2 0 006.8 13H5a2 2 0 00-2 2v2H1v-2a4 4 0 014-4h1.8a4.202 4.202 0 014.057 3.11A4.98 4.98 0 0114 13h4a5 5 0 015 5v1a2 2 0 01-2 2h-8.5v-2z"
+      fill="#F4F6F8"
     />
   </svg>
 )

src/shared/icons/NavHome.tsx

@@ -4,11 +4,10 @@ import * as React from 'react'
 export const SvgNavHome = (props: React.SVGProps<SVGSVGElement>) => (
   <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path
-      d="M15 20v1a1 1 0 001 1h5a1 1 0 001-1v-9.555a1 1 0 00-.331-.743L12 2l-9.669 8.702a1 1 0 00-.331.743V21a1 1 0 001 1h5c.552 0 1-.446 1-.998V17a1 1 0 011-1h5"
-      stroke="#F4F6F8"
-      strokeWidth={2}
-      strokeMiterlimit={10}
-      strokeLinecap="square"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M10 21.002A1.999 1.999 0 018 23H3a2 2 0 01-2-2v-9.555a2 2 0 01.662-1.486L12 .655l10.338 9.304A2 2 0 0123 11.445V21a2 2 0 01-2 2h-5a2 2 0 01-2-2v-2h2v2h5v-9.555l-9-8.1-9 8.1V21h5v-4a2 2 0 012-2h6v2h-6v4.002z"
+      fill="#F4F6F8"
     />
   </svg>
 )

src/shared/icons/NavNew.tsx

@@ -4,14 +4,11 @@ import * as React from 'react'
 export const SvgNavNew = (props: React.SVGProps<SVGSVGElement>) => (
   <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path
-      d="M1 22V4.125c0-.564.21-1.104.586-1.503A1.942 1.942 0 013 2h18c.53 0 1.04.224 1.414.622.375.399.586.94.586 1.503v10.75c0 .564-.21 1.104-.586 1.503A1.942 1.942 0 0121 17H5"
-      stroke="#F4F6F8"
-      strokeWidth={2}
-      strokeMiterlimit={10}
-      strokeLinecap="square"
+      d="M2.314 3.308A.943.943 0 013 3h18c.245 0 .493.103.686.308.195.207.314.5.314.817v10.75c0 .317-.12.61-.314.817A.942.942 0 0121 16H4v2h17c.816 0 1.585-.345 2.142-.937.556-.59.858-1.378.858-2.188V4.125c0-.81-.302-1.598-.858-2.188A2.942 2.942 0 0021 1H3c-.816 0-1.585.345-2.142.937A3.194 3.194 0 000 4.125V23h2V4.125c0-.317.12-.61.314-.817z"
+      fill="#F4F6F8"
     />
     <path
-      d="M8.476 12.09h-1.36L4.921 8.24s.035 1.207.035 3.85H4V7h1.35l2.19 3.813S7.516 7.86 7.513 7h.963v5.09zM12.7 12.09H9.795V7H12.7v.884h-1.835v1.118h1.708v.885h-1.708v1.312H12.7v.892zM18.716 12.09h-1.218l-.683-2.673c-.05-.19-.216-.975-.235-1.192-.029.264-.173.968-.23 1.198l-.68 2.668h-1.215L13.167 7h1.053l.645 2.779c.112.513.194.957.245 1.334.102-.673.693-3.067.97-4.113h1.01l.736 2.852c.074.295.189.943.232 1.26.047-.377.169-1.015.248-1.334L18.948 7H20l-1.284 5.09z"
+      d="M7.116 12.09h1.36V7h-.963c.003.86.027 3.813.027 3.813L5.35 7H4v5.09h.956c0-2.643-.035-3.85-.035-3.85l2.195 3.85zM12.7 12.09H9.795V7H12.7v.884h-1.835v1.118h1.708v.885h-1.708v1.312H12.7v.892zM17.498 12.09h1.218L20 7h-1.052l-.642 2.778c-.08.319-.2.957-.249 1.334a15.766 15.766 0 00-.23-1.26L17.09 7h-1.012c-.276 1.046-.867 3.44-.97 4.113a16.83 16.83 0 00-.244-1.334L14.22 7h-1.053l1.287 5.09h1.215l.68-2.667c.058-.23.202-.934.231-1.198.02.217.184 1.003.235 1.192l.683 2.674z"
       fill="#F4F6F8"
     />
   </svg>

src/shared/icons/NavPopular.tsx

@@ -4,9 +4,10 @@ import * as React from 'react'
 export const SvgNavPopular = (props: React.SVGProps<SVGSVGElement>) => (
   <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path
-      d="M17.292 9C19 10 20 12.61 20 15c0 3.012-1.54 5.635-4 7h-1c0-6-2.452-6-4-6 0 2-.6 6-3 6-2.46-1.365-4-3.988-4-7 0-1.892.657-3.63 1.755-5C7 8 11 6 11 2h1c1.485 1.788 3.274 6.158 1 9"
-      stroke="#F4F6F8"
-      strokeWidth={2}
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M12.47 1l.3.361c.845 1.019 1.736 2.707 2.118 4.54.383 1.834.285 3.984-1.107 5.724l-1.562-1.25c.882-1.102 1.026-2.559.712-4.066a9.424 9.424 0 00-1.1-2.804c-.37 1.625-1.304 2.898-2.252 3.924-.461.498-.954.967-1.394 1.385l-.39.374c-.554.534-.953.958-1.191 1.34l-.032.051-.037.046A6.966 6.966 0 005 15c0 2.553 1.246 4.755 3.224 5.973.44-.108.872-.554 1.235-1.562C9.857 18.306 10 16.93 10 16v-1h1.065c.75-.001 2.1-.003 3.196 1.018.972.904 1.568 2.426 1.707 4.832C17.834 19.61 19 17.47 19 15c0-1.064-.224-2.18-.632-3.125-.412-.958-.973-1.656-1.581-2.012l1.01-1.726c1.1.644 1.893 1.751 2.408 2.947.52 1.206.795 2.59.795 3.916 0 3.36-1.725 6.326-4.515 7.874L16.26 23H14v-1c0-2.917-.606-4.058-1.1-4.518-.272-.252-.581-.373-.944-.43-.076.94-.259 2.047-.615 3.037C10.865 21.409 9.886 23 8 23h-.259l-.226-.126C4.725 21.326 3 18.36 3 15c0-2.107.725-4.047 1.939-5.58.383-.598.934-1.157 1.466-1.67.145-.141.29-.28.436-.417.43-.41.856-.815 1.27-1.262C9.197 4.895 10 3.63 10 2V1h2.47z"
+      fill="#F4F6F8"
     />
   </svg>
 )

src/shared/icons/index.tsx

@@ -39,8 +39,8 @@ export * from './GlyphPlus'
 export * from './GlyphResize'
 export * from './GlyphRestart'
 export * from './GlyphRetry'
-export * from './GlyphShow'
 export * from './GlyphSearch'
+export * from './GlyphShow'
 export * from './GlyphSoundOff'
 export * from './GlyphSoundOn'
 export * from './GlyphTrash'

src/shared/icons/svgs/nav-channels.svg

@@ -1,6 +1,5 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="16" cy="7" r="3" stroke="#F4F6F8" stroke-width="2"/>
-<circle cx="6" cy="7" r="1" stroke="#F4F6F8" stroke-width="2"/>
-<path d="M13.5 20L21 20C21.5523 20 22 19.5523 22 19L22 18C22 15.7909 20.2091 14 18 14L14 14C11.7909 14 10 15.7909 10 18L10 18.5" stroke="#F4F6F8" stroke-width="2" stroke-miterlimit="10" stroke-linecap="square"/>
-<path d="M6 16L9.2 16C9.64183 16 10 15.6418 10 15.2V15.2C10 13.4327 8.56731 12 6.8 12L5 12C3.34315 12 2 13.3431 2 15L2 16" stroke="#F4F6F8" stroke-width="2" stroke-miterlimit="10" stroke-linecap="square"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 3C13.7909 3 12 4.79086 12 7C12 9.20914 13.7909 11 16 11C18.2091 11 20 9.20914 20 7C20 4.79086 18.2091 3 16 3ZM14 7C14 5.89543 14.8954 5 16 5C17.1046 5 18 5.89543 18 7C18 8.10457 17.1046 9 16 9C14.8954 9 14 8.10457 14 7Z" fill="#F4F6F8"/>
+<path d="M6 5C4.89543 5 4 5.89543 4 7C4 8.10457 4.89543 9 6 9C7.10457 9 8 8.10457 8 7C8 5.89543 7.10457 5 6 5Z" fill="#F4F6F8"/>
+<path d="M12.5 19H21V18C21 16.3431 19.6569 15 18 15H14C12.3431 15 11 16.3431 11 18L11 19.5H9L9 18C9 17.6575 9.03443 17.3231 9.10002 17H5V15H8.99103C8.88999 13.8787 7.94761 13 6.8 13L5 13C3.89543 13 3 13.8954 3 15L3 17H1V15C1 12.7909 2.79086 11 5 11H6.8C8.7429 11 10.3777 12.3192 10.8574 14.1108C11.7161 13.4161 12.8094 13 14 13H18C20.7614 13 23 15.2386 23 18V19C23 20.1046 22.1046 21 21 21H12.5V19Z" fill="#F4F6F8"/>
 </svg>

src/shared/icons/svgs/nav-home.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M15 20L15 21C15 21.5523 15.4477 22 16 22L21 22C21.5523 22 22 21.5523 22 21L22 11.4454C22 11.1619 21.8797 10.8917 21.669 10.7021L12 2L2.33103 10.7021C2.12032 10.8917 2 11.1619 2 11.4454L2 21C2 21.5523 2.44772 22 3 22L8 22C8.55228 22 9 21.5538 9 21.0015C9 19.8442 9 18.0931 9 16.9996C9 16.4473 9.44771 16 10 16L15 16" stroke="#F4F6F8" stroke-width="2" stroke-miterlimit="10" stroke-linecap="square"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 21.0015C10 22.1079 9.10266 23 8 23L3 23C1.89543 23 1 22.1046 1 21L0.999999 11.4454C0.999999 10.8784 1.24064 10.3381 1.66207 9.95877L12 0.654637L22.3379 9.95877C22.7594 10.3381 23 10.8784 23 11.4454L23 21C23 22.1046 22.1046 23 21 23L16 23C14.8954 23 14 22.1046 14 21L14 19L16 19L16 21L21 21L21 11.4454L12 3.34536L3 11.4454L3 21L8 21L8 16.9996C8 15.8944 8.896 15 10 15L16 15L16 17L10 17L10 21.0015Z" fill="#F4F6F8"/>
 </svg>

src/shared/icons/svgs/nav-new.svg

@@ -1,6 +1,6 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1 22V4.125C1 3.56141 1.21071 3.02091 1.58579 2.6224C1.96086 2.22388 2.46957 2 3 2H21C21.5304 2 22.0391 2.22388 22.4142 2.6224C22.7893 3.02091 23 3.56141 23 4.125V14.875C23 15.4386 22.7893 15.9791 22.4142 16.3776C22.0391 16.7761 21.5304 17 21 17H5" stroke="#F4F6F8" stroke-width="2" stroke-miterlimit="10" stroke-linecap="square"/>
-<path d="M8.47564 12.0909H7.11636L4.92145 8.24C4.92145 8.24 4.95636 9.44727 4.95636 12.0909H4V7H5.34909L7.54036 10.8131C7.54036 10.8131 7.51636 7.86036 7.51273 7H8.47564V12.0909Z" fill="#F4F6F8"/>
-<path d="M12.7004 12.0909H9.79492V7H12.7004V7.88436H10.8647V9.00218H12.5731V9.88655H10.8647V11.1993H12.7004V12.0909V12.0909Z" fill="#F4F6F8"/>
-<path d="M18.7164 12.0909H17.4982L16.8146 9.41673C16.7644 9.22764 16.5993 8.44218 16.5804 8.22546C16.5513 8.48873 16.4073 9.19273 16.3491 9.42327L15.6691 12.0909H14.4546L13.1673 7H14.2197L14.8648 9.77891C14.9775 10.2916 15.0589 10.736 15.1098 11.1127C15.2117 10.44 15.8029 8.04582 16.0793 7H17.0909L17.8262 9.85164C17.9004 10.1469 18.0146 10.7949 18.0575 11.112C18.1055 10.7345 18.2269 10.0967 18.3062 9.77818L18.9477 7H20L18.7164 12.0909Z" fill="#F4F6F8"/>
+<path d="M2.31399 3.30776C2.50685 3.10284 2.75502 3 3 3H21C21.245 3 21.4931 3.10284 21.686 3.30776C21.8808 3.51474 22 3.80773 22 4.125V14.875C22 15.1923 21.8808 15.4853 21.686 15.6922C21.4931 15.8972 21.245 16 21 16H4V18H21C21.8159 18 22.5851 17.6551 23.1424 17.063C23.6978 16.4729 24 15.6849 24 14.875V4.125C24 3.3151 23.6978 2.52709 23.1424 1.93703C22.5851 1.34492 21.8159 1 21 1H3C2.18411 1 1.41487 1.34492 0.857586 1.93703C0.30224 2.52709 0 3.3151 0 4.125V23H2V4.125C2 3.80773 2.11919 3.51474 2.31399 3.30776Z" fill="#F4F6F8"/>
+<path d="M7.11636 12.0909H8.47564V7H7.51273C7.51636 7.86036 7.54036 10.8131 7.54036 10.8131L5.34909 7H4V12.0909H4.95636C4.95636 9.44727 4.92145 8.24 4.92145 8.24L7.11636 12.0909Z" fill="#F4F6F8"/>
+<path d="M12.7004 12.0909H9.79492V7H12.7004V7.88436H10.8647V9.00218H12.5731V9.88655H10.8647V11.1993H12.7004V12.0909Z" fill="#F4F6F8"/>
+<path d="M17.4981 12.0909H18.7163L20 7H18.9476L18.3061 9.77818C18.2269 10.0967 18.1054 10.7345 18.0574 11.112C18.0145 10.7949 17.9003 10.1469 17.8261 9.85164L17.0909 7H16.0792C15.8029 8.04582 15.2116 10.44 15.1098 11.1127C15.0589 10.736 14.9774 10.2916 14.8647 9.77891L14.2196 7H13.1672L14.4545 12.0909H15.6691L16.3491 9.42327C16.4072 9.19273 16.5512 8.48873 16.5803 8.22546C16.5992 8.44218 16.7643 9.22764 16.8145 9.41673L17.4981 12.0909Z" fill="#F4F6F8"/>
 </svg>

src/shared/icons/svgs/nav-popular.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M17.2916 9.00001C19 10 20 12.6106 20 15C20 18.012 18.4594 20.6353 16 22H15C15 16 12.5479 16 11 16C11 18 10.4 22 8 22C5.54058 20.6353 4 18.012 4 15C4 13.1081 4.65672 11.3696 5.75463 10C7 8.00002 11 6.00001 11 2.00001L12 2C13.4845 3.78813 15.2738 8.15772 13 11" stroke="#F4F6F8" stroke-width="2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.4695 1L12.7694 1.36124C13.6151 2.37991 14.5061 4.06826 14.8883 5.90047C15.2711 7.73542 15.1729 9.88469 13.7809 11.6247L12.2191 10.3753C13.1009 9.27306 13.245 7.81638 12.9305 6.30893C12.7118 5.26082 12.2856 4.27036 11.8317 3.50514C11.4601 5.12979 10.5272 6.40286 9.5786 7.42888C9.11779 7.9273 8.62545 8.39565 8.18543 8.81423C8.0492 8.94382 7.91798 9.06865 7.79426 9.18811C7.24097 9.72242 6.84191 10.1458 6.60351 10.5286L6.57207 10.5791L6.53488 10.6255C5.57405 11.8241 5 13.3436 5 15C5 17.5533 6.24628 19.7545 8.22425 20.9729C8.66339 20.8647 9.09635 20.419 9.45911 19.4113C9.8571 18.3058 10 16.93 10 16V15H11C11.021 15 11.0425 15 11.0645 15C11.815 14.999 13.1642 14.9974 14.2614 16.0177C15.2334 16.9216 15.8289 18.4438 15.9683 20.8497C17.8343 19.6095 19 17.4694 19 15C19 13.9358 18.7756 12.8209 18.368 11.8746C17.9556 10.917 17.3953 10.2194 16.7865 9.86304L17.7968 8.137C18.8963 8.78062 19.6902 9.88838 20.2049 11.0835C20.7244 12.2897 21 13.6749 21 15C21 18.3603 19.2753 21.3262 16.4852 22.8744L16.2589 23H14V22C14 19.0827 13.3939 17.9421 12.8995 17.4823C12.628 17.2298 12.3186 17.1088 11.9558 17.0513C11.8799 17.9925 11.6974 19.0985 11.3409 20.0887C10.8653 21.4097 9.88588 23 8 23H7.74114L7.5148 22.8744C4.72465 21.3262 3 18.3603 3 15C3 12.8933 3.7251 10.9532 4.93856 9.41953C5.32193 8.82193 5.87335 8.26279 6.40495 7.74943C6.55036 7.60901 6.69571 7.4707 6.84063 7.33281C7.27072 6.92356 7.69704 6.5179 8.11006 6.07116C9.19764 4.89481 10 3.62961 10 2.00002V1.00003L12.4695 1Z" fill="#F4F6F8"/>
 </svg>