FB-324-332-website-changes-and-remove-FOUC

package.json

@@ -23,7 +23,7 @@
     "@material-ui/core": "4.9.5",
     "@material-ui/styles": "4.9.0",
     "@mdx-js/react": "1.6.22",
-    "clsx": "1.2.1",
+    "clsx": "2.0.0",
     "docusaurus-plugin-hotjar": "0.0.2",
     "lodash": "4.17.21",
     "lottie-react": "2.4.0",

src/components/Button/Button.tsx

@@ -1,122 +1,26 @@
-import noop from 'lodash/noop';
-import { rem } from 'polished';
-// eslint-disable-next-line no-unused-vars -- false positive error
-import React, { ReactNode, MouseEvent } from 'react';
-import styled, { css } from 'styled-components';
-
-const resetDefault = css`
-  padding: 0;
-  border: none;
-  outline: none;
-  font: inherit;
-  color: inherit;
-  background: none;
-`;
-
-const commonStyles = css`
-  cursor: pointer;
-  font-weight: 700;
-  min-width: 180px;
-  padding: 16px;
-  border-radius: 32px;
-  transition: all 0.2s ease-out;
-  &:hover {
-    text-decoration: none;
-  }
-
-  ${({ theme, variant, reversed }) => {
-    if (reversed && variant === 'solid') {
-      return css`
-        background-color: ${theme.color.primary};
-        color: ${theme.color.white};
-        border: 2px solid white;
-        &:hover {
-          background-color: ${theme.color.white};
-          color: ${theme.color.primary};
-          border: 2px solid ${({ theme }) => theme.color.primary};
-        }
-      `;
-    } else if (variant === 'solid') {
-      return css`
-        background-color: ${theme.color.black};
-        color: ${theme.color.white};
-        border: 2px solid ${theme.color.black};
-        &:hover {
-          background-color: inherit;
-          color: ${theme.color.black};
-        }
-      `;
-    } else if (variant === 'outlined') {
-      return css`
-        color: ${theme.color.black};
-        border: 2px solid ${theme.color.black};
-        &:hover {
-          background-color: ${theme.color.black};
-          color: ${theme.color.white};
-        }
-      `;
-    }
-    return css``;
-  }}
-
-  ${({ size }) => {
-    if (size === 'md') {
-      return css`
-        font-size: ${rem('16px')};
-        line-height: ${rem('26px')};
-      `;
-    } else if (size === 'sm') {
-      return css`
-        font-size: ${rem('14px')};
-        line-height: ${rem('24px')};
-      `;
-    } else if (size === 'lg') {
-      return css`
-        font-size: ${rem('18px')};
-        line-height: ${rem('28px')};
-      `;
-    }
-    return css``;
-  }}
-`;
-
-const StyledButton = styled.button`
-  ${resetDefault}
-  ${commonStyles}
-`;
+import clsx from 'clsx';
+import React, { ButtonHTMLAttributes } from 'react';
 
 type ButtonProps = {
-  children: ReactNode;
-  className?: string;
-  disabled?: boolean;
-  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
-  reversed?: boolean;
-  size?: string;
-  type?: string;
   variant?: string;
-};
+} & ButtonHTMLAttributes<HTMLButtonElement>;
 
 export const Button = ({
   children,
   className,
-  disabled = false,
-  onClick = noop,
-  reversed = false,
-  size = 'md',
-  type = 'button',
-  variant = 'solid',
+  variant,
+  ...props
 }: ButtonProps) => {
   return (
-    <StyledButton
-      className={className}
-      disabled={disabled}
-      onClick={onClick}
-      reversed={reversed}
-      size={size}
-      type={type}
-      variant={variant}
+    <button
+      className={clsx(className, 'button', {
+        button__solid: variant === 'solid',
+        button__outlined: variant === 'outlined',
+        button__pricing: variant === 'pricing',
+      })}
+      {...props}
     >
       {children}
-    </StyledButton>
+    </button>
   );
 };

src/components/Card/Card.tsx

@@ -1,15 +1,12 @@
-import React from 'react';
-
-import { ReactNode } from "react";
+import React, { ReactNode } from 'react';
 import styled from 'styled-components';
-import { BOX_BORDER_RADIUS } from '../../globalStyles/sharedStyles/box';
 
 const CardComponent = styled.div`
   width: 100%;
   padding: 36px 48px;
   text-align: center;
   background-color: #eee;
-  ${BOX_BORDER_RADIUS};
+  border-radius: 8px;
 `;
 
 const TitleComponent = styled.div`
@@ -43,9 +40,7 @@ export const Card = ({ icon, title, description }: CardProps) => {
     <CardComponent>
       <IconComponent>{icon}</IconComponent>
       <TitleComponent>{title}</TitleComponent>
-      <DescriptionComponent>
-        {description}
-      </DescriptionComponent>
+      <DescriptionComponent>{description}</DescriptionComponent>
     </CardComponent>
   );
 };

src/components/ListCard/ListCard.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { BOX_BORDER_RADIUS } from '../../globalStyles/sharedStyles/box';
 import styled from 'styled-components';
+
 import media from '../../globalStyles/media';
 import CheckmarkIcon from '../../images/svg/checkmark.svg';
 
@@ -13,7 +13,7 @@ const CardComponent = styled.div`
   width: 100%;
   padding: 36px 48px;
   background-color: #eee;
-  ${BOX_BORDER_RADIUS};
+  border-radius: 8px;
   ${media.lessThan('md')`
     padding: 24px;
   `}

src/components/PricingCard/PricingCard.tsx

@@ -1,10 +1,12 @@
+import { Link } from '@material-ui/core';
 import React from 'react';
 import styled from 'styled-components';
+
 import CheckmarkIcon from '../../images/svg/checkmark.svg';
 import TalkIcon from '../../images/svg/talk.svg';
-import { Link } from '@material-ui/core';
+import { Button } from '../Button';
 
-type PricingCardProps = {
+export type PricingCardData = {
   color: string;
   buttonText: string;
   buttonLink: string;
@@ -13,8 +15,16 @@ type PricingCardProps = {
   denominator?: string;
   isMostPopular?: boolean;
   benefits: string[] | string;
+  btnClassName:
+    | 'btn-trial'
+    | 'btn-buy-monthly'
+    | 'btn-buy-yearly'
+    | 'btn-buy-lifelong'
+    | 'btn-buy-custom';
 };
 
+type PricingCardProps = PricingCardData;
+
 const TitleComponent = styled.div`
   font-weight: 900;
   font-size: 28px;
@@ -50,6 +60,8 @@ const BulletpointWrapComponent = styled.div`
 `;
 
 const LinkComponent = styled(Link)`
+  display: flex;
+  justify-content: center;
   &:hover {
     text-decoration: none !important;
   }
@@ -80,7 +92,7 @@ const BadgeComponent = styled.div`
 `;
 
 const BenefitsComponent = styled.div`
-  text-align: ${({ isBenefitsList }) => isBenefitsList ? 'center' : 'left'};
+  text-align: ${({ isBenefitsList }) => (isBenefitsList ? 'center' : 'left')};
   display: flex;
   flex-flow: column;
   flex-grow: 1;
@@ -101,19 +113,6 @@ const BulletPointComponent = styled.div`
   }
 `;
 
-const ButtonComponent = styled.button`
-  background-color: ${({ color }) => color};
-  display: block;
-  margin: auto;
-  color: white;
-  border-radius: 30px;
-  border: 0px;
-  padding: 15px 30px;
-  font-weight: 700;
-  font-size: 18px;
-  cursor: pointer;
-`;
-
 export const PricingCard = ({
   color,
   title,
@@ -123,12 +122,15 @@ export const PricingCard = ({
   denominator,
   isMostPopular,
   buttonLink,
+  btnClassName,
 }: PricingCardProps) => {
   const isBenefitsList = typeof benefits === 'string';
 
   return (
     <CardComponent color={color}>
-      {isMostPopular && <BadgeComponent color={color}>Most popular</BadgeComponent>}
+      {isMostPopular && (
+        <BadgeComponent color={color}>Most popular</BadgeComponent>
+      )}
       <TitleComponent>{title}</TitleComponent>
       {price ? (
         <PriceComponent>
@@ -161,7 +163,13 @@ export const PricingCard = ({
             ))}
       </BenefitsComponent>
       <LinkComponent href={buttonLink}>
-        <ButtonComponent color={color}>{buttonText}</ButtonComponent>
+        <Button
+          className={btnClassName}
+          variant="pricing"
+          style={{ backgroundColor: color }}
+        >
+          {buttonText}
+        </Button>
       </LinkComponent>
     </CardComponent>
   );

src/components/SectionLayout/SectionLayout.tsx

@@ -21,7 +21,11 @@ export const SectionLayout = ({
 }: SectionLayoutProps) => (
   <Section alternativeBackground={alternativeBackground} id={id}>
     <Container>
-      {heading && <AccentHeading isStrong size="lg" center={centerHeading}>{heading}</AccentHeading>}
+      {heading && (
+        <AccentHeading size="lg" center={centerHeading} isStrong>
+          {heading}
+        </AccentHeading>
+      )}
       {children}
     </Container>
   </Section>