🍼 Google button on YPP (#4096)

* Google button

* Add google button to channel-already-registered step

packages/atlas/src/assets/icons/GoogleSmallLogo.tsx

@@ -0,0 +1,79 @@
+import { Ref, SVGProps, forwardRef, memo } from 'react'
+
+const GoogleSmallLogo = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="46px" height="46px" viewBox="0 0 46 46" ref={ref} {...props}>
+    <defs>
+      <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-1">
+        <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1" />
+        <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
+        <feColorMatrix
+          values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.168 0"
+          in="shadowBlurOuter1"
+          type="matrix"
+          result="shadowMatrixOuter1"
+        />
+        <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter2" />
+        <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter2" result="shadowBlurOuter2" />
+        <feColorMatrix
+          values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.084 0"
+          in="shadowBlurOuter2"
+          type="matrix"
+          result="shadowMatrixOuter2"
+        />
+        <feMerge>
+          <feMergeNode in="shadowMatrixOuter1" />
+          <feMergeNode in="shadowMatrixOuter2" />
+          <feMergeNode in="SourceGraphic" />
+        </feMerge>
+      </filter>
+      <rect id="path-2" x="0" y="0" width="40" height="40" rx="2" />
+      <rect id="path-3" x="5" y="5" width="38" height="38" rx="1" />
+    </defs>
+    <g id="Google-Button" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+      <g id="9-PATCH" transform="translate(-608.000000, -219.000000)" />
+      <g id="btn_google_dark_normal" transform="translate(-1.000000, -1.000000)">
+        <g id="button" transform="translate(4.000000, 4.000000)" filter="url(#filter-1)">
+          <g id="button-bg">
+            <use fill="#4285F4" fillRule="evenodd" />
+            <use fill="none" />
+            <use fill="none" />
+            <use fill="none" />
+          </g>
+        </g>
+        <g id="button-bg-copy">
+          <use fill="#FFFFFF" fillRule="evenodd" />
+          <use fill="none" />
+          <use fill="none" />
+          <use fill="none" />
+        </g>
+        <g id="logo_googleg_48dp" transform="translate(15.000000, 15.000000)">
+          <path
+            d="M17.64,9.20454545 C17.64,8.56636364 17.5827273,7.95272727 17.4763636,7.36363636 L9,7.36363636 L9,10.845 L13.8436364,10.845 C13.635,11.97 13.0009091,12.9231818 12.0477273,13.5613636 L12.0477273,15.8195455 L14.9563636,15.8195455 C16.6581818,14.2527273 17.64,11.9454545 17.64,9.20454545 L17.64,9.20454545 Z"
+            id="Shape"
+            fill="#4285F4"
+          />
+          <path
+            d="M9,18 C11.43,18 13.4672727,17.1940909 14.9563636,15.8195455 L12.0477273,13.5613636 C11.2418182,14.1013636 10.2109091,14.4204545 9,14.4204545 C6.65590909,14.4204545 4.67181818,12.8372727 3.96409091,10.71 L0.957272727,10.71 L0.957272727,13.0418182 C2.43818182,15.9831818 5.48181818,18 9,18 L9,18 Z"
+            id="Shape"
+            fill="#34A853"
+          />
+          <path
+            d="M3.96409091,10.71 C3.78409091,10.17 3.68181818,9.59318182 3.68181818,9 C3.68181818,8.40681818 3.78409091,7.83 3.96409091,7.29 L3.96409091,4.95818182 L0.957272727,4.95818182 C0.347727273,6.17318182 0,7.54772727 0,9 C0,10.4522727 0.347727273,11.8268182 0.957272727,13.0418182 L3.96409091,10.71 L3.96409091,10.71 Z"
+            id="Shape"
+            fill="#FBBC05"
+          />
+          <path
+            d="M9,3.57954545 C10.3213636,3.57954545 11.5077273,4.03363636 12.4404545,4.92545455 L15.0218182,2.34409091 C13.4631818,0.891818182 11.4259091,0 9,0 C5.48181818,0 2.43818182,2.01681818 0.957272727,4.95818182 L3.96409091,7.29 C4.67181818,5.16272727 6.65590909,3.57954545 9,3.57954545 L9,3.57954545 Z"
+            id="Shape"
+            fill="#EA4335"
+          />
+          <path d="M0,0 L18,0 L18,18 L0,18 L0,0 Z" id="Shape" />
+        </g>
+        <g id="handles_square" />
+      </g>
+    </g>
+  </svg>
+))
+GoogleSmallLogo.displayName = 'GoogleSmallLogo'
+const Memo = memo(GoogleSmallLogo)
+export { Memo as SvgGoogleSmallLogo }

packages/atlas/src/assets/icons/LogoGoogleWhiteFull.tsx

@@ -0,0 +1,18 @@
+// THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY;
+import { Ref, SVGProps, forwardRef, memo } from 'react'
+
+const SvgLogoGoogleWhiteFull = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
+  <svg width={108} height={36} viewBox="0 0 108 36" fill="none" xmlns="http://www.w3.org/2000/svg" ref={ref} {...props}>
+    <g clipPath="url(#clip0_2208_4389)" fill="#fff">
+      <path d="M26.377 12.446h-12.52v3.715h8.88c-.44 5.2-4.773 7.432-8.865 7.432a9.76 9.76 0 0 1-9.802-9.891c0-5.624 4.354-9.954 9.814-9.954 4.212 0 6.694 2.685 6.694 2.685l2.6-2.694S19.838.022 13.748.022C5.993.022-.006 6.567-.006 13.636c0 6.927 5.643 13.682 13.95 13.682 7.307 0 12.656-5.006 12.656-12.408 0-1.562-.227-2.464-.227-2.464h.004ZM36.634 9.755c-5.138 0-8.82 4.017-8.82 8.7 0 4.754 3.57 8.845 8.88 8.845 4.806 0 8.743-3.673 8.743-8.743 0-5.8-4.58-8.802-8.803-8.802Zm.05 3.446c2.526 0 4.92 2.043 4.92 5.334 0 3.22-2.384 5.322-4.932 5.322-2.8 0-5-2.242-5-5.348 0-3.04 2.18-5.308 5.02-5.308h-.008ZM55.815 9.755c-5.138 0-8.82 4.017-8.82 8.7 0 4.754 3.57 8.845 8.88 8.845 4.806 0 8.743-3.673 8.743-8.743 0-5.8-4.58-8.802-8.803-8.802Zm.05 3.446c2.526 0 4.92 2.043 4.92 5.334 0 3.22-2.384 5.322-4.932 5.322-2.8 0-5-2.242-5-5.348 0-3.04 2.18-5.308 5.02-5.308h-.008ZM74.628 9.765c-4.716 0-8.422 4.13-8.422 8.766 0 5.28 4.297 8.782 8.34 8.782 2.5 0 3.83-.993 4.8-2.132v1.73c0 3.027-1.838 4.84-4.612 4.84-2.68 0-4.024-1.993-4.5-3.123l-3.372 1.4c1.196 2.53 3.604 5.167 7.9 5.167 4.7 0 8.262-2.953 8.262-9.147V10.292H79.36v1.486c-1.13-1.22-2.678-2.013-4.73-2.013h-.002Zm.34 3.44c2.312 0 4.686 1.974 4.686 5.345 0 3.427-2.37 5.315-4.737 5.315-2.514 0-4.853-2.04-4.853-5.283 0-3.368 2.43-5.377 4.904-5.377ZM99.4 9.744c-4.448 0-8.183 3.54-8.183 8.76 0 5.526 4.163 8.803 8.6 8.803 3.712 0 6-2.03 7.35-3.85l-3.033-2.018c-.787 1.22-2.103 2.415-4.298 2.415-2.466 0-3.6-1.35-4.303-2.66l11.763-4.88-.6-1.43c-1.136-2.8-3.788-5.14-7.296-5.14Zm.153 3.374c1.603 0 2.756.852 3.246 1.874l-7.856 3.283c-.34-2.542 2.07-5.157 4.6-5.157h.01ZM85.6 26.787h3.864V.93H85.6v25.857Z" />
+    </g>
+    <defs>
+      <clipPath id="clip0_2208_4389">
+        <path fill="#fff" d="M0 0h108v36H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+))
+SvgLogoGoogleWhiteFull.displayName = 'SvgLogoGoogleWhiteFull'
+const Memo = memo(SvgLogoGoogleWhiteFull)
+export { Memo as SvgLogoGoogleWhiteFull }

packages/atlas/src/assets/icons/LogoYoutubeWhiteFull.tsx

@@ -0,0 +1,24 @@
+// THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY;
+import { Ref, SVGProps, forwardRef, memo } from 'react'
+
+const SvgLogoYoutubeWhiteFull = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
+  <svg width={110} height={24} viewBox="0 0 110 24" fill="none" xmlns="http://www.w3.org/2000/svg" ref={ref} {...props}>
+    <g clipPath="url(#clip0_2208_4388)" fill="#fff">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M31.395.522a4.39 4.39 0 0 1 3.088 3.088c.738 2.73.76 8.39.76 8.39s0 5.683-.738 8.39a4.39 4.39 0 0 1-3.088 3.088c-2.707.738-13.604.738-13.604.738s-10.896 0-13.603-.738a4.39 4.39 0 0 1-3.088-3.088C.384 17.66.384 12 .384 12s0-5.66.716-8.368A4.39 4.39 0 0 1 4.187.544c2.708-.738 13.604-.76 13.604-.76s10.896 0 13.604.738ZM14.323 6.764 23.363 12l-9.04 5.236V6.764Z"
+      />
+      <path d="M50.95 22.001c-.693-.47-1.186-1.185-1.477-2.17-.29-.984-.425-2.282-.425-3.915V13.7c0-1.633.157-2.975.493-3.96.335-1.007.85-1.723 1.566-2.17.716-.448 1.633-.694 2.774-.694 1.12 0 2.036.224 2.708.694.67.47 1.186 1.186 1.499 2.17.313.985.47 2.305.47 3.938v2.215c0 1.633-.157 2.931-.47 3.916-.313.984-.806 1.7-1.5 2.17-.693.448-1.633.694-2.796.694-1.208.022-2.148-.224-2.842-.672Zm3.871-2.394c.201-.492.29-1.32.29-2.438v-4.766c0-1.097-.089-1.902-.29-2.394-.201-.515-.537-.761-1.007-.761-.47 0-.783.246-.984.76-.202.515-.291 1.298-.291 2.395v4.766c0 1.118.09 1.946.268 2.438.18.493.515.739 1.007.739.47 0 .806-.246 1.007-.739Zm49.045-2.864.09 2.216c.067.492.179.85.358 1.073.179.224.47.336.85.336.515 0 .873-.201 1.052-.604.201-.403.29-1.074.313-1.991l2.976.179c.022.134.022.313.022.537 0 1.41-.38 2.46-1.164 3.154-.783.694-1.857 1.052-3.266 1.052-1.701 0-2.887-.537-3.558-1.589-.671-1.051-1.029-2.707-1.029-4.922v-2.707c0-2.283.358-3.96 1.052-5.012.716-1.052 1.924-1.589 3.624-1.589 1.186 0 2.081.224 2.708.65.626.424 1.074 1.095 1.342 2.013.269.917.38 2.17.38 3.781v2.618h-5.75v.805Zm.448-7.227c-.179.224-.291.56-.358 1.052s-.09 1.23-.09 2.238v1.096h2.506v-1.096c0-.985-.022-1.723-.089-2.238-.067-.515-.179-.873-.358-1.074-.179-.201-.448-.313-.806-.313-.38.022-.649.134-.805.335ZM42.582 15.67 38.667 1.53h3.423l1.365 6.399c.358 1.588.604 2.93.783 4.027h.09c.111-.805.38-2.125.782-4.005l1.41-6.421h3.423l-3.96 14.118v6.78h-3.378v-6.758h-.023ZM69.655 7.167V22.45h-2.684l-.291-1.88h-.068c-.738 1.41-1.834 2.126-3.289 2.126-1.006 0-1.767-.336-2.237-1.007-.492-.671-.716-1.7-.716-3.11V7.168h3.446v11.209c0 .671.067 1.163.223 1.454.157.291.403.425.739.425.29 0 .581-.09.85-.268.269-.18.47-.425.604-.694V7.167h3.423ZM87.309 7.167V22.45h-2.685l-.29-1.88h-.068c-.738 1.41-1.835 2.126-3.289 2.126-1.007 0-1.768-.336-2.237-1.007-.493-.671-.716-1.7-.716-3.11V7.168h3.445v11.209c0 .671.067 1.163.224 1.454.157.291.403.425.738.425.291 0 .582-.09.85-.268.27-.18.47-.425.605-.694V7.167h3.423Z" />
+      <path d="M79.008 4.303h-3.423V22.45h-3.356V4.303h-3.424V1.53h10.18v2.774h.023Zm19.667 5.303c-.201-.962-.537-1.656-1.007-2.103-.47-.425-1.096-.65-1.924-.65-.626 0-1.23.18-1.767.538-.56.358-.963.828-1.276 1.41h-.022V.745h-3.311v21.68h2.841l.358-1.454h.067c.269.515.671.918 1.186 1.23.542.298 1.15.452 1.768.448 1.163 0 2.013-.537 2.573-1.61.537-1.075.828-2.753.828-5.013v-2.416c0-1.7-.112-3.043-.314-4.005Zm-3.154 6.242c0 1.12-.045 1.992-.135 2.618-.09.627-.246 1.074-.47 1.343a1.083 1.083 0 0 1-.872.402c-.291 0-.537-.067-.783-.2-.246-.135-.425-.337-.582-.605v-8.681c.112-.425.313-.761.604-1.03.29-.268.582-.402.917-.402.358 0 .627.134.806.402.201.269.313.739.403 1.388.067.649.111 1.566.111 2.774v1.991Z" />
+    </g>
+    <defs>
+      <clipPath id="clip0_2208_4388">
+        <path fill="#fff" d="M0 0h110v24H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+))
+SvgLogoYoutubeWhiteFull.displayName = 'SvgLogoYoutubeWhiteFull'
+const Memo = memo(SvgLogoYoutubeWhiteFull)
+export { Memo as SvgLogoYoutubeWhiteFull }

packages/atlas/src/assets/icons/index.ts

@@ -206,6 +206,7 @@ export * from './LogoFacebookOnLight'
 export * from './LogoGithubMonochrome'
 export * from './LogoGithubOnDark'
 export * from './LogoGithubOnLight'
+export * from './LogoGoogleWhiteFull'
 export * from './LogoInstagramMonochrome'
 export * from './LogoInstagramOnDark'
 export * from './LogoInstagramOnLight'
@@ -235,6 +236,7 @@ export * from './LogoVkOnLight'
 export * from './LogoWhatsAppMonochrome'
 export * from './LogoWhatsAppOnDark'
 export * from './LogoWhatsAppOnLight'
+export * from './LogoYoutubeWhiteFull'
 export * from './LogoYoutube'
 export * from './SidebarChannel'
 export * from './SidebarChannels'

packages/atlas/src/assets/icons/svgs/logo-google-white-full.svg

@@ -0,0 +1,15 @@
+<svg width="108" height="36" viewBox="0 0 108 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2208_4389)">
+<path d="M26.377 12.446H13.857V16.161H22.737C22.297 21.361 17.964 23.593 13.872 23.593C12.5757 23.5987 11.2912 23.3461 10.0936 22.8499C8.89595 22.3537 7.80916 21.624 6.89666 20.7032C5.98416 19.7824 5.26423 18.689 4.77891 17.487C4.29359 16.2849 4.05261 14.9982 4.07002 13.702C4.07002 8.07797 8.42402 3.74797 13.884 3.74797C18.096 3.74797 20.578 6.43297 20.578 6.43297L23.178 3.73897C23.178 3.73897 19.838 0.0219727 13.748 0.0219727C5.99302 0.0219727 -0.00598145 6.56697 -0.00598145 13.636C-0.00598145 20.563 5.63702 27.318 13.944 27.318C21.251 27.318 26.6 22.312 26.6 14.91C26.6 13.348 26.373 12.446 26.373 12.446H26.377Z" fill="white"/>
+<path d="M36.634 9.75503C31.496 9.75503 27.814 13.772 27.814 18.455C27.814 23.209 31.384 27.3 36.694 27.3C41.5 27.3 45.437 23.627 45.437 18.557C45.437 12.757 40.857 9.75503 36.634 9.75503ZM36.684 13.201C39.21 13.201 41.604 15.244 41.604 18.535C41.604 21.755 39.22 23.857 36.672 23.857C33.872 23.857 31.672 21.615 31.672 18.509C31.672 15.469 33.852 13.201 36.692 13.201H36.684Z" fill="white"/>
+<path d="M55.815 9.75503C50.677 9.75503 46.995 13.772 46.995 18.455C46.995 23.209 50.565 27.3 55.875 27.3C60.681 27.3 64.618 23.627 64.618 18.557C64.618 12.757 60.038 9.75503 55.815 9.75503ZM55.865 13.201C58.391 13.201 60.785 15.244 60.785 18.535C60.785 21.755 58.401 23.857 55.853 23.857C53.053 23.857 50.853 21.615 50.853 18.509C50.853 15.469 53.033 13.201 55.873 13.201H55.865Z" fill="white"/>
+<path d="M74.6281 9.76501C69.912 9.76501 66.2061 13.895 66.2061 18.531C66.2061 23.811 70.5031 27.313 74.5461 27.313C77.0461 27.313 78.3761 26.32 79.3461 25.181V26.911C79.3461 29.938 77.5081 31.751 74.7341 31.751C72.0541 31.751 70.7101 29.758 70.2341 28.628L66.8621 30.028C68.0581 32.558 70.4661 35.195 74.7621 35.195C79.4621 35.195 83.0241 32.242 83.0241 26.048V10.292H79.3601V11.778C78.2301 10.558 76.6821 9.76501 74.6301 9.76501H74.6281ZM74.9681 13.205C77.2801 13.205 79.6541 15.179 79.6541 18.55C79.6541 21.977 77.284 23.865 74.9171 23.865C72.4031 23.865 70.0641 21.825 70.0641 18.582C70.0641 15.214 72.4941 13.205 74.9681 13.205Z" fill="white"/>
+<path d="M99.4 9.74402C94.952 9.74402 91.217 13.284 91.217 18.504C91.217 24.03 95.38 27.307 99.817 27.307C103.529 27.307 105.817 25.277 107.167 23.457L104.134 21.439C103.347 22.659 102.031 23.854 99.836 23.854C97.37 23.854 96.236 22.504 95.533 21.194L107.296 16.314L106.696 14.884C105.56 12.084 102.908 9.74402 99.4 9.74402ZM99.553 13.118C101.156 13.118 102.309 13.97 102.799 14.992L94.943 18.275C94.603 15.733 97.013 13.118 99.543 13.118H99.553Z" fill="white"/>
+<path d="M85.6 26.787H89.464V0.929993H85.6V26.787Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_2208_4389">
+<rect width="108" height="36" fill="white"/>
+</clipPath>
+</defs>
+</svg>

packages/atlas/src/components/_buttons/GoogleButton/GoogleButton.tsx

@@ -0,0 +1,61 @@
+import styled from '@emotion/styled'
+import * as React from 'react'
+
+import { SvgGoogleSmallLogo } from '@/assets/icons/GoogleSmallLogo'
+
+interface GoogleButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
+  label?: string
+  disabled?: boolean
+}
+export const GoogleButton = ({ label, ...rest }: GoogleButtonProps) => {
+  return (
+    <StyledButton {...rest}>
+      <IconContainer>
+        <SvgGoogleSmallLogo />
+      </IconContainer>
+      <span>Sign in with Google</span>
+    </StyledButton>
+  )
+}
+
+const IconContainer = styled.div`
+  background-color: #fff;
+  height: 100%;
+  display: grid;
+  place-items: center;
+`
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  text-align: center;
+  padding: 0;
+  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 0.25);
+  font-size: 16px;
+  border-radius: 1px;
+  transition: background-color 0.218s, border-color 0.218s, box-shadow 0.218s;
+  font-family: Roboto, arial, sans-serif;
+  cursor: pointer;
+  user-select: none;
+  background-color: #4285f4;
+  color: #fff;
+  border: 1px solid #4285f4;
+
+  :hover {
+    box-shadow: 0 0 3px 3px rgb(66 133 244 / 0.3);
+  }
+
+  :disabled {
+    background-color: rgb(37 5 5 / 0.08);
+    color: rgb(0 0 0 / 0.4);
+    cursor: not-allowed;
+  }
+
+  > span {
+    padding: 0 12px;
+    width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+`

packages/atlas/src/components/_buttons/GoogleButton/index.ts

@@ -0,0 +1 @@
+export * from './GoogleButton'

packages/atlas/src/components/_overlays/Dialog/Dialog.tsx

@@ -26,7 +26,7 @@ export type DialogProps = PropsWithChildren<{
   title?: ReactNode
   dividers?: boolean
   size?: DialogSize
-  primaryButton?: DialogButtonProps
+  primaryButton?: DialogButtonProps | JSX.Element
   secondaryButton?: DialogButtonProps
   additionalActionsNode?: ReactNode
   additionalActionsNodeMobilePosition?: 'top' | 'bottom'
@@ -111,11 +111,14 @@ export const Dialog: FC<DialogProps> = ({
                 {secondaryButton.text}
               </Button>
             )}
-            {primaryButton && (
-              <Button variant={primaryButton.variant || 'primary'} size={buttonSize} fullWidth {...primaryButton}>
-                {primaryButton.text}
-              </Button>
-            )}
+            {primaryButton &&
+              ('text' in primaryButton ? (
+                <Button variant={primaryButton.variant || 'primary'} size={buttonSize} fullWidth {...primaryButton}>
+                  {primaryButton.text}
+                </Button>
+              ) : (
+                (primaryButton as JSX.Element)
+              ))}
           </FooterButtonsContainer>
         </Footer>
       )}

packages/atlas/src/components/_overlays/DialogModal/DialogModal.stories.tsx

@@ -57,7 +57,7 @@ const ToggleableTemplate: StoryFn<DialogModalProps> = ({ ...args }) => {
         onExitClick={() => setOpen(false)}
         primaryButton={{
           ...args.primaryButton,
-          text: args.primaryButton?.text || 'Default',
+          text: args.primaryButton && 'text' in args.primaryButton ? args.primaryButton?.text : 'Default',
           onClick: () => setOpen(false),
         }}
         secondaryButton={{

packages/atlas/src/index.html

@@ -17,7 +17,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@600;700&family=Inter:wght@400;500;600;700&display=swap"
+      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@600;700&family=Roboto:wght@400&family=Inter:wght@400;500;600;700&display=swap"
       rel="stylesheet"
     />
   </head>

packages/atlas/src/views/global/YppLandingView/YppAuthorizationModal/YppAuthorizationModal.styles.ts

@@ -1,10 +1,9 @@
-import { css } from '@emotion/react'
 import styled from '@emotion/styled'
 
-import { SvgControlsConnect, SvgLogoYoutube } from '@/assets/icons'
-import { SvgAppLogoShort, SvgAppLogoShortMonochrome } from '@/assets/logos'
+import { SvgAppLogoShort } from '@/assets/logos'
 import { Text } from '@/components/Text'
-import { cVar, sizes } from '@/styles'
+import { SkeletonLoader } from '@/components/_loaders/SkeletonLoader'
+import { cVar, media, sizes } from '@/styles'
 
 export const StyledSvgAppLogoShort = styled(SvgAppLogoShort)`
   height: 36px;
@@ -17,13 +16,6 @@ export const StyledSvgAppLogoShort = styled(SvgAppLogoShort)`
 export const Content = styled.div`
   margin-top: ${sizes(6)};
 `
-export const AdditionalSubtitleWrapper = styled.div`
-  margin-top: ${sizes(6)};
-  margin-bottom: ${sizes(4)};
-`
-export const AdditionalSubtitle = styled(Text)`
-  display: inline;
-`
 
 export const DescriptionText = styled(Text)`
   display: block;
@@ -50,29 +42,11 @@ export const CategoriesText = styled(Text)`
   margin-top: ${sizes(1)};
 `
 
-export const LogosWrapper = styled.div`
-  display: grid;
-  grid-template-columns: repeat(3, auto);
-  justify-content: start;
-  align-items: center;
-  gap: ${sizes(4)};
-`
-
-const logoStyles = css`
-  path {
-    fill: ${cVar('colorTextMuted')};
-  }
-`
+export const RequirementsButtonSkeleton = styled(SkeletonLoader)`
+  height: 40px;
+  width: 100%;
 
-export const StyledSvgLogoYoutube = styled(SvgLogoYoutube)`
-  ${logoStyles};
-`
-export const StyledSvgControlsConnect = styled(SvgControlsConnect)`
-  path {
-    fill: ${cVar('colorCoreNeutral500')};
+  ${media.sm} {
+    width: 150px;
   }
 `
-// todo replace with AppLogo
-export const StyledAppLogo = styled(SvgAppLogoShortMonochrome)`
-  ${logoStyles};
-`

packages/atlas/src/views/global/YppLandingView/YppAuthorizationModal/YppAuthorizationModal.tsx

@@ -11,6 +11,7 @@ import { SvgAlertsError32 } from '@/assets/icons'
 import appScreenshot from '@/assets/images/ypp-authorization/app-screenshot.webp'
 import { Text } from '@/components/Text'
 import { Button } from '@/components/_buttons/Button'
+import { GoogleButton } from '@/components/_buttons/GoogleButton'
 import { Loader } from '@/components/_loaders/Loader'
 import { DialogModal } from '@/components/_overlays/DialogModal'
 import { atlasConfig } from '@/config'
@@ -35,6 +36,7 @@ import {
   DescriptionText,
   HeaderIconsWrapper,
   Img,
+  RequirementsButtonSkeleton,
   StyledSvgAppLogoShort,
 } from './YppAuthorizationModal.styles'
 import { YppAuthorizationErrorCode, YppAuthorizationStepsType } from './YppAuthorizationModal.types'
@@ -75,12 +77,14 @@ export const YppAuthorizationModal: FC<YppAuthorizationModalProps> = ({
   const navigate = useNavigate()
   const [isSubmitting, setIsSubmitting] = useState(false)
   const { decrementOverlaysOpenCount } = useOverlayManager()
-  const { refetchYppSyncedChannels } = useGetYppSyncedChannels()
+  const {
+    unsyncedChannels: yppUnsyncedChannels,
+    currentChannel: yppCurrentChannel,
+    isLoading,
+  } = useGetYppSyncedChannels()
   const contentRef = useRef<HTMLDivElement | null>(null)
   const channelsLoaded = !!unSyncedChannels
-  const hasMoreThanOneChannel = unSyncedChannels && unSyncedChannels.length > 1
   const [finalFormData, setFinalFormData] = useState<FinalFormData | null>(null)
-  const [isFetchingData, setIsFetchingData] = useState(false)
   const selectedChannelId = useYppStore((store) => store.selectedChannelId)
   const referrerId = useYppStore((store) => store.referrerId)
   const setSelectedChannelId = useYppStore((store) => store.actions.setSelectedChannelId)
@@ -148,13 +152,9 @@ export const YppAuthorizationModal: FC<YppAuthorizationModalProps> = ({
       onChangeStep('ypp-sync')
     }
     if (currentStep === 'details' || currentStep === 'channel-already-registered') {
-      onChangeStep('requirements')
-    }
-    if (currentStep === 'requirements' && hasMoreThanOneChannel) {
-      setYtRequirementsErrors([])
       onChangeStep('select-channel')
     }
-  }, [currentStep, hasMoreThanOneChannel, onChangeStep, setYtRequirementsErrors])
+  }, [currentStep, onChangeStep])
 
   const handleSelectChannel = useCallback(
     (selectedChannelId: string) => {
@@ -326,66 +326,59 @@ export const YppAuthorizationModal: FC<YppAuthorizationModalProps> = ({
     [fetchedChannelRequirements, ytRequirementsErrors]
   )
 
-  const verifyChannelRequirements = useCallback(async () => {
-    const channels = activeMembership?.channels
-
-    if (!channels?.length) {
-      navigate(absoluteRoutes.studio.newChannel())
-      return
-    }
-    setIsFetchingData(true)
-    const { data } = await refetchYppSyncedChannels().finally(() => {
-      setIsFetchingData(false)
-    })
-    if (data?.currentChannel) {
-      navigate(absoluteRoutes.studio.ypp())
-      return
-    }
-
-    if (data?.unsyncedChannels?.length) {
-      setSelectedChannelId(data?.unsyncedChannels[0].id)
-    }
-    if (data?.unsyncedChannels?.length && data?.unsyncedChannels.length > 1) {
-      onChangeStep('select-channel')
-      return
-    }
-
-    handleAuthorizeClick(data?.unsyncedChannels?.[0].id)
-  }, [
-    activeMembership?.channels,
-    handleAuthorizeClick,
-    navigate,
-    onChangeStep,
-    refetchYppSyncedChannels,
-    setSelectedChannelId,
-  ])
-
   const authorizationStep = useMemo(() => {
     switch (currentStep) {
-      case 'requirements':
+      case 'requirements': {
+        const getPrimaryButton = () => {
+          if (isLoading) {
+            return <RequirementsButtonSkeleton />
+          }
+
+          if (yppCurrentChannel) {
+            navigate(absoluteRoutes.studio.ypp())
+          }
+
+          if (!activeMembership?.channels.length) {
+            return {
+              text: 'Create a new channel',
+              onClick: () => navigate(absoluteRoutes.studio.newChannel()),
+            }
+          }
+
+          if (yppUnsyncedChannels?.length) {
+            setSelectedChannelId(yppUnsyncedChannels[0].id)
+          }
+
+          if (yppUnsyncedChannels && yppUnsyncedChannels.length > 1) {
+            return {
+              text: 'Select channel',
+              onClick: () => onChangeStep('select-channel'),
+            }
+          }
+
+          return (
+            <GoogleButton
+              onClick={() => {
+                setSelectedChannelId(yppUnsyncedChannels?.[0].id ?? '')
+                handleAuthorizeClick(yppUnsyncedChannels?.[0].id)
+              }}
+            />
+          )
+        }
+
         return {
           title: 'Requirements',
           description: `Before you can apply to the program, make sure your YouTube channel meets the below conditions.`,
-          primaryButton: {
-            text: isFetchingData
-              ? 'Please wait...'
-              : activeMembership?.channels.length
-              ? 'Continue'
-              : 'Create new channel',
-            disabled: isFetchingData,
-            onClick: () => verifyChannelRequirements(),
-          },
+          primaryButton: getPrimaryButton(),
           component: <YppAuthorizationRequirementsStep requirements={requirements} />,
         }
+      }
+
       case 'select-channel':
         return {
           title: 'Select channel',
           description: `Select the ${APP_NAME} channel you want your YouTube channel to be connected with.`,
-          primaryButton: {
-            text: 'Authorize with YouTube',
-            onClick: () => handleAuthorizeClick(),
-            disabled: !selectedChannel,
-          },
+          primaryButton: <GoogleButton disabled={!selectedChannel} onClick={() => handleAuthorizeClick()} />,
           component: (
             <YppAuthorizationSelectChannelStep
               channels={unSyncedChannels}
@@ -456,10 +449,7 @@ export const YppAuthorizationModal: FC<YppAuthorizationModalProps> = ({
         return {
           headerIcon: <SvgAlertsError32 />,
           title: 'Authorization failed',
-          primaryButton: {
-            text: 'Select another channel',
-            onClick: () => handleAuthorizeClick(),
-          },
+          primaryButton: <GoogleButton onClick={() => handleAuthorizeClick()} />,
           description: (
             <>
               The YouTube channel you selected is already enrolled in the YouTube Partner Program and is tied to the{' '}
@@ -476,10 +466,6 @@ export const YppAuthorizationModal: FC<YppAuthorizationModalProps> = ({
     }
   }, [
     currentStep,
-    isFetchingData,
-    activeMembership?.channels.length,
-    requirements,
-    handleAuthorizeClick,
     selectedChannel,
     unSyncedChannels,
     selectedChannelId,
@@ -489,12 +475,20 @@ export const YppAuthorizationModal: FC<YppAuthorizationModalProps> = ({
     handleGoToDashboard,
     alreadyRegisteredChannel?.channelTitle,
     alreadyRegisteredChannel?.ownerMemberHandle,
-    verifyChannelRequirements,
+    requirements,
+    isLoading,
+    yppCurrentChannel,
+    activeMembership?.channels.length,
+    yppUnsyncedChannels,
+    navigate,
+    setSelectedChannelId,
+    onChangeStep,
+    handleAuthorizeClick,
     handleSubmitDetailsForm,
   ])
 
   const secondaryButton = useMemo(() => {
-    if (currentStep === 'select-channel' || (currentStep === 'requirements' && !hasMoreThanOneChannel)) return
+    if (currentStep === 'requirements' || currentStep === 'select-channel') return
     if (currentStep === 'summary') {
       return {
         text: 'Close',
@@ -507,7 +501,7 @@ export const YppAuthorizationModal: FC<YppAuthorizationModalProps> = ({
       disabled: isSubmitting,
       onClick: handleGoBack,
     }
-  }, [currentStep, hasMoreThanOneChannel, handleGoBack, isSubmitting, handleClose])
+  }, [currentStep, handleGoBack, isSubmitting, handleClose])
 
   return (
     <FormProvider {...detailsFormMethods}>

packages/atlas/src/views/global/YppLandingView/YppAuthorizationModal/YppAuthorizationSteps/YppAuthorizationRequirementsStep/YppAuthorizationRequirementsStep.styles.ts

@@ -4,7 +4,7 @@ import { Text } from '@/components/Text'
 import { cVar, sizes, square } from '@/styles'
 
 export const StyledList = styled.ul`
-  margin: 0;
+  margin: 0 0 ${sizes(6)} 0;
   padding-left: 0;
   display: grid;
   gap: ${sizes(4)};

packages/atlas/src/views/global/YppLandingView/YppAuthorizationModal/YppAuthorizationSteps/YppAuthorizationRequirementsStep/YppAuthorizationRequirementsStep.tsx

@@ -1,6 +1,8 @@
 import { FC, ReactNode } from 'react'
 
 import { SvgActionCheck, SvgActionClose } from '@/assets/icons'
+import { Banner } from '@/components/Banner'
+import { atlasConfig } from '@/config'
 
 import { ListItem, Paragraph, StyledList, TickWrapper } from './YppAuthorizationRequirementsStep.styles'
 
@@ -15,15 +17,20 @@ type YppAuthorizationRequirementsStepProps = {
 
 export const YppAuthorizationRequirementsStep: FC<YppAuthorizationRequirementsStepProps> = ({ requirements }) => {
   return (
-    <StyledList>
-      {requirements.map((item, idx) => (
-        <ListItem key={idx} as="li" variant="t200" color="colorText">
-          <TickWrapper fulfilled={item.fulfilled}>
-            {item.fulfilled ? <SvgActionCheck /> : <SvgActionClose />}
-          </TickWrapper>
-          <Paragraph>{item.text}</Paragraph>
-        </ListItem>
-      ))}
-    </StyledList>
+    <>
+      <StyledList>
+        {requirements.map((item, idx) => (
+          <ListItem key={idx} as="li" variant="t200" color="colorText">
+            <TickWrapper fulfilled={item.fulfilled}>
+              {item.fulfilled ? <SvgActionCheck /> : <SvgActionClose />}
+            </TickWrapper>
+            <Paragraph>{item.text}</Paragraph>
+          </ListItem>
+        ))}
+      </StyledList>
+      <Banner
+        description={`${atlasConfig.general.appName} uses Google OAuth to get access to your public profile and account email address as part of sign up flow, and integrates with YouTube API to obtain details about your YouTube channel data, such as followers and video statistics.`}
+      />
+    </>
   )
 }

packages/atlas/src/views/global/YppLandingView/YppFooter.styles.ts

@@ -3,7 +3,7 @@ import styled from '@emotion/styled'
 import bottomLeftPattern from '@/assets/images/ypp-background-pattern.svg'
 import topLeftBannerPattern from '@/assets/images/ypp-banner-pattern.svg'
 import { Text } from '@/components/Text'
-import { Button } from '@/components/_buttons/Button'
+import { GoogleButton } from '@/components/_buttons/GoogleButton'
 import { cVar, media, sizes } from '@/styles'
 
 export const CtaBanner = styled.div`
@@ -35,7 +35,6 @@ export const StyledBannerText = styled(Text)`
   }
 `
 
-export const StyledButton = styled(Button)`
+export const StyledButton = styled(GoogleButton)`
   margin-top: ${sizes(8)};
-  background-color: ${cVar('colorCoreBaseBlack')};
 `

packages/atlas/src/views/global/YppLandingView/YppFooter.tsx

@@ -1,6 +1,6 @@
 import { FC, ReactElement } from 'react'
 
-import { SvgActionChevronR, SvgActionInfo, SvgActionSpeech, SvgActionTokensStack } from '@/assets/icons'
+import { SvgActionInfo, SvgActionSpeech, SvgActionTokensStack } from '@/assets/icons'
 import { GridItem, LayoutGrid } from '@/components/LayoutGrid'
 import { Text } from '@/components/Text'
 import { CallToActionButton, CallToActionWrapper } from '@/components/_buttons/CallToActionButton'
@@ -47,9 +47,7 @@ export const YppFooter: FC<YppFooterSectionProps> = ({ onSignUpClick }) => {
                 Get the most out of your YouTube channel
               </StyledBannerText>
 
-              <StyledButton size="large" icon={<SvgActionChevronR />} onClick={onSignUpClick} iconPlacement="right">
-                Authorize with YouTube
-              </StyledButton>
+              <StyledButton onClick={onSignUpClick}>Authorize with YouTube</StyledButton>
             </CtaBanner>
           </GridItem>
         </LayoutGrid>

packages/atlas/src/views/global/YppLandingView/YppHero.styles.ts

@@ -19,6 +19,14 @@ export const ButtonWrapper = styled.div`
   justify-content: center;
 `
 
+export const LogosContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${sizes(10)};
+  margin-bottom: ${sizes(8)};
+`
+
 export const SelectDifferentChannelButton = styled.button`
   white-space: normal;
   border: none;

packages/atlas/src/views/global/YppLandingView/YppHero.tsx

@@ -2,7 +2,7 @@ import { FC } from 'react'
 import { useParallax } from 'react-scroll-parallax'
 import { CSSTransition, SwitchTransition } from 'react-transition-group'
 
-import { SvgActionChevronR } from '@/assets/icons'
+import { SvgActionChevronR, SvgLogoGoogleWhiteFull, SvgLogoYoutubeWhiteFull } from '@/assets/icons'
 import hero576 from '@/assets/images/ypp-hero/hero-576.webp'
 import hero864 from '@/assets/images/ypp-hero/hero-864.webp'
 import hero1152 from '@/assets/images/ypp-hero/hero-1152.webp'
@@ -14,6 +14,7 @@ import yt2304 from '@/assets/images/ypp-hero/yt-2304.webp'
 import { GridItem, LayoutGrid } from '@/components/LayoutGrid'
 import { Text } from '@/components/Text'
 import { Button } from '@/components/_buttons/Button'
+import { GoogleButton } from '@/components/_buttons/GoogleButton'
 import { ChannelCard } from '@/components/_channel/ChannelCard'
 import { SkeletonLoader } from '@/components/_loaders/SkeletonLoader'
 import { atlasConfig } from '@/config'
@@ -25,6 +26,7 @@ import {
   ButtonWrapper,
   FrontImage,
   HeroImageWrapper,
+  LogosContainer,
   SelectDifferentChannelButton,
   StyledInfiniteCarousel,
 } from './YppHero.styles'
@@ -41,18 +43,6 @@ type YppHeroProps = {
   selectedChannelTitle?: string | null
 }
 
-export const getButtonText = (variant: YppAtlasStatus) => {
-  switch (variant) {
-    case 'have-channel':
-      return 'Sign up now'
-    case 'connect-wallet':
-    case 'no-channel':
-      return 'Create channel & sign up'
-    case 'ypp-signed':
-      return 'Go to dashboard'
-  }
-}
-
 export const YppHero: FC<YppHeroProps> = ({
   onSignUpClick,
   onSelectChannel,
@@ -104,6 +94,10 @@ export const YppHero: FC<YppHeroProps> = ({
             >
               Reupload and backup your YouTube videos to receive a guaranteed payout in the YouTube Partner Program.
             </Text>
+            <LogosContainer data-aos="fade-up" data-aos-delay="350" data-aos-offset="40" data-aos-easing="atlas-easing">
+              <SvgLogoYoutubeWhiteFull />
+              <SvgLogoGoogleWhiteFull />
+            </LogosContainer>
             <ButtonWrapper data-aos="fade-up" data-aos-delay="450" data-aos-offset="40" data-aos-easing="atlas-easing">
               <SwitchTransition>
                 <CSSTransition
@@ -112,15 +106,19 @@ export const YppHero: FC<YppHeroProps> = ({
                   classNames={transitions.names.fade}
                 >
                   {yppAtlasStatus ? (
-                    <Button
-                      size="large"
-                      variant={yppAtlasStatus === 'ypp-signed' ? 'secondary' : 'primary'}
-                      icon={<SvgActionChevronR />}
-                      iconPlacement="right"
-                      onClick={onSignUpClick}
-                    >
-                      {getButtonText(yppAtlasStatus)}
-                    </Button>
+                    yppAtlasStatus === 'ypp-signed' ? (
+                      <Button
+                        size="large"
+                        variant="secondary"
+                        icon={<SvgActionChevronR />}
+                        iconPlacement="right"
+                        onClick={onSignUpClick}
+                      >
+                        Go to dashboard
+                      </Button>
+                    ) : (
+                      <GoogleButton onClick={onSignUpClick} />
+                    )
                   ) : (
                     <SkeletonLoader width={190} height={48} />
                   )}

packages/atlas/src/views/global/YppLandingView/YppThreeStepsSection.tsx

@@ -6,9 +6,10 @@ import memberDropdown from '@/assets/images/member-dropdown.webp'
 import selectChannel from '@/assets/images/select-channel.webp'
 import { Text } from '@/components/Text'
 import { Button } from '@/components/_buttons/Button'
+import { GoogleButton } from '@/components/_buttons/GoogleButton'
 import { atlasConfig } from '@/config'
 import { useMediaMatch } from '@/hooks/useMediaMatch'
-import { YppAtlasStatus, getButtonText } from '@/views/global/YppLandingView/YppHero'
+import { YppAtlasStatus } from '@/views/global/YppLandingView/YppHero'
 
 import {
   BackgroundContainer,
@@ -54,19 +55,29 @@ export const YppThreeStepsSection: FC<YppThreeStepsSectionProps> = ({ onSignUpCl
               Our fully automated verification process is as simple as 1-2-3. If you don't have an {appName} channel
               already, you'll be able to create one for free.
             </Text>
-            <Button
-              size="large"
-              variant={yppStatus === 'ypp-signed' ? 'secondary' : 'primary'}
-              iconPlacement="right"
-              icon={<SvgActionChevronR />}
-              data-aos="fade-up"
-              data-aos-delay="200"
-              data-aos-offset="40"
-              data-aos-easing="atlas-easing"
-              onClick={onSignUpClick}
-            >
-              {getButtonText(yppStatus)}
-            </Button>
+            {yppStatus === 'ypp-signed' ? (
+              <Button
+                size="large"
+                variant="secondary"
+                iconPlacement="right"
+                icon={<SvgActionChevronR />}
+                data-aos="fade-up"
+                data-aos-delay="200"
+                data-aos-offset="40"
+                data-aos-easing="atlas-easing"
+                onClick={onSignUpClick}
+              >
+                Go to dashboard
+              </Button>
+            ) : (
+              <GoogleButton
+                data-aos="fade-up"
+                data-aos-delay="200"
+                data-aos-offset="40"
+                data-aos-easing="atlas-easing"
+                onClick={onSignUpClick}
+              />
+            )}
             <Text
               variant="t100"
               as="p"