Merge pull request #59 from KieIO/m7-lytran4

M7: Change shape common, img common for FeaturedProductCard, QuantityInput, HomeRecipeTab
2025-07-22 20:26:49 +00:00 · 2021-09-16 17:44:41 +07:00
parent 40b825cb0f 1b769e8258
commit fbccab6ae1
17 changed files with 198 additions and 129 deletions
--- a/pages/test.tsx
+++ b/pages/test.tsx
@@ -1,102 +1,84 @@
 import {
-  CartDrawer,
+  FeaturedProductCard,
  Layout
 } from 'src/components/common';
-import MenuNavigationProductList from 'src/components/common/MenuNavigationProductList/MenuNavigationProductList';
 // import { RecipeListPage } from 'src/components/modules/recipes';
 import { OPTION_ALL, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils';
-import { useModalCommon } from 'src/components/hooks';
+import { PRODUCT_DATA_TEST, PRODUCT_DATA_TEST_PAGE } from 'src/utils/demo-data';

 const CATEGORY = [
  {
-      name: 'All',
-      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=${OPTION_ALL}`,
+    name: 'All',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=${OPTION_ALL}`,
  },
  {
-      name: 'Veggie',
-      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`,
+    name: 'Veggie',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`,
  },
  {
-      name: 'Seafood',
-      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`,
+    name: 'Seafood',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`,
  },
  {
-      name: 'Frozen',
-      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`,
+    name: 'Frozen',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`,
  },
  {
-      name: 'Coffee Bean',
-      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=coffee-bean`,
+    name: 'Coffee Bean',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=coffee-bean`,
  },
  {
-      name: 'Sauce',
-      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=sauce`,
+    name: 'Sauce',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=sauce`,
  },
 ]
 const BRAND = [
  {
-      name: 'Maggi',
-      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`,
+    name: 'Maggi',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`,
  },
  {
-      name: 'Cholimes',
-      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`,
+    name: 'Cholimes',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`,
  },
  {
-      name: 'Chinsu',
-      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`,
+    name: 'Chinsu',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`,
  }
 ];

 const FEATURED = [

-    {
-        name: 'Best Sellers',
-        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`,
-    },
-    {
-        name: 'Sales',
-        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`,
-    },
-    {
-        name: 'New Item',
-        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`,
-    },
-    {
-        name: 'Viewed',
-        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=viewed`,
-    }
-  ];
+  {
+    name: 'Best Sellers',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`,
+  },
+  {
+    name: 'Sales',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`,
+  },
+  {
+    name: 'New Item',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`,
+  },
+  {
+    name: 'Viewed',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=viewed`,
+  }
+];


-import CheckoutSuccess from 'src/components/modules/checkout/CheckoutSuccess/CheckoutSuccess'
-import LoadingCommon from 'src/components/common/LoadingCommon/LoadingCommon'
-import SkeletonParagraph from 'src/components/common/SkeletonCommon/SkeletonParagraph/SkeletonParagraph'
-import SkeletonImage from 'src/components/common/SkeletonCommon/SkeletonImage/SkeletonImage'

+const data = PRODUCT_DATA_TEST[0]
 export default function Test() {
  return (
    <>
-    <div className="shape-common-border">
-      <div className="inner">
-        Lorem ipsum dolor sit amet.
-      </div>
-    </div>
-      {/* <BlogDetailPage /> */}
-      
-      {/* <RecipeListPage/> */}
-        {/*<MenuNavigation heading="CATEGORIES" categories={CATEGORY}/>*/}
-        {/* <button onClick={toggle}>toggle menu : {visibleMenuFilter.toString()}</button>
-           <MenuNavigationProductList categories={CATEGORY}  brands={BRAND} featured={FEATURED} visible={visibleMenuFilter} onClose={closeMenuFilter}/>  */}
-           {/* <CartDrawer  /> */}
-           <div className="shape-common-lg">
-              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit maiores aut, delectus assumenda explicabo, dolore facilis, quasi quae sed obcaecati doloribus dolorum architecto aperiam nisi dignissimos consequuntur amet neque possimus.
-           </div>
-           <div className="shape-common-lg-border">
-              <div className="inner">
-                Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus, porro aut. Quas, consequuntur! Officiis magni cum placeat magnam ut hic beatae error facere obcaecati. Labore eius explicabo fugit minus veritatis.
-              </div>
-           </div>
+      <FeaturedProductCard
+        imageSrc={data.imageSrc}
+        title="Sale 25% coffee bean"
+        subTitle="50 first orders within a day"
+        price={data.price}
+        originPrice="$20.00" />
    </>
  )
 }
--- a/src/components/common/ButtonCommon/ButtonCommon.module.scss
+++ b/src/components/common/ButtonCommon/ButtonCommon.module.scss
@@ -103,6 +103,20 @@
      }
    }
  }
+  &.small {
+    .inner {
+      padding: .5rem 1rem;
+      &.onlyIcon {
+        padding: 1rem;
+      }
+      @screen md {
+        padding: .8rem 1.6rem;
+        &.onlyIcon {
+          padding: .8rem;
+        }
+      }
+    }
+  }

  &.large {
    .inner {
--- a/src/components/common/ButtonCommon/ButtonCommon.tsx
+++ b/src/components/common/ButtonCommon/ButtonCommon.tsx
@@ -5,7 +5,7 @@ import s from './ButtonCommon.module.scss'
 interface Props {
    children?: React.ReactNode,
    type?: 'primary' | 'light' | 'ghost' | 'lightBorderNone',
-    size?: 'default' | 'large',
+    size?: 'default' | 'large' | 'small',
    icon?: React.ReactNode,
    isIconSuffix?: boolean,
    loading?: boolean,
--- a/src/components/common/ButtonIconBuy/ButtonIconBuy.tsx
+++ b/src/components/common/ButtonIconBuy/ButtonIconBuy.tsx
@@ -3,14 +3,14 @@ import { IconBuy } from 'src/components/icons'
 import ButtonCommon from '../ButtonCommon/ButtonCommon'

 interface Props {
-    type?: 'primary' | 'light' | 'ghost',
-    size?: 'default' | 'large',
+    type?: 'primary' | 'light' | 'ghost' | 'lightBorderNone',
+    size?: 'default' | 'large' | 'small',
    loading?: boolean,
    disabled?: boolean,
    onClick?: () => void,
 }

-const ButtonIconBuy = memo(({ type = 'light', size = 'default', loading = false, disabled, onClick }: Props) => {
+const ButtonIconBuy = memo(({ type = 'light', size = 'small', loading = false, disabled, onClick }: Props) => {
    return (
        <ButtonCommon
            type={type}
--- a/src/components/common/FeaturedProductCard/FeaturedProductCard.module.scss
+++ b/src/components/common/FeaturedProductCard/FeaturedProductCard.module.scss
@@ -3,7 +3,7 @@
    width: 59.8rem;
    height: 28.8rem;
    padding: 2.4rem;
-    @apply bg-primary-light inline-flex justify-start items-center custom-border-radius ;
+    @apply bg-primary-light inline-flex justify-start items-center shape-common;
    .left{
        width: 24rem;
        height: 24rem;
@@ -30,18 +30,15 @@
                line-height: 2.4rem;
            }
            .priceWrapper{
-                @apply flex justify-start;
+                @apply flex justify-start sm-headline;
                .price{
-                    @apply font-bold;
-                    font-size: 2rem;
-                    line-height: 2.8rem;
-                    letter-spacing: -0.01em;
+                    @apply font-bold sm-headline;
                    color: var(--text-active);
                }
                .originPrice{
+                    @apply sm-headline;
+                    font-weight: normal;
                    margin-left: 0.8rem;
-                    font-size: 2rem;
-                    line-height: 2.8rem;
                    color: var(--text-label);
                    text-decoration-line: line-through;
                }
@@ -50,11 +47,18 @@
        .buttonWarpper{
            @apply flex;
            .icon{
-                width: 5.6rem;
+                button {
+                    >div {
+                        @apply bg-primary-light;
+                    }
+                }
            }
            .button{
                margin-left: 0.8rem;
-                width: 20.6rem;
+                flex: 1;
+                button {
+                    @apply w-full;
+                }
            }
        }
    }
--- a/src/components/common/FeaturedProductCard/FeaturedProductCard.tsx
+++ b/src/components/common/FeaturedProductCard/FeaturedProductCard.tsx
@@ -4,6 +4,7 @@ import s from './FeaturedProductCard.module.scss'
 import { LANGUAGE } from '../../../utils/language.utils'
 import ButtonIconBuy from '../ButtonIconBuy/ButtonIconBuy'
 import ButtonCommon from '../ButtonCommon/ButtonCommon'
+import { ImgWithLink } from '..'
 interface FeaturedProductCardProps extends FeaturedProductProps {
  buttonText?: string
 }
@@ -19,7 +20,7 @@ const FeaturedProductCard = ({
  return (
    <div className={s.featuredProductCardWarpper}>
      <div className={s.left}>
-        <img src={imageSrc} alt="image" />
+        <ImgWithLink src={imageSrc} alt={title}/>
      </div>
      <div className={s.right}>
        <div className={s.rightTop}>
@@ -32,7 +33,7 @@ const FeaturedProductCard = ({
        </div>
        <div className={s.buttonWarpper}>
          <div className={s.icon}>
-            <ButtonIconBuy />
+            <ButtonIconBuy size='default'/>
          </div>
          <div className={s.button}>
            <ButtonCommon>{buttonText}</ButtonCommon>
--- a/src/components/common/ProductCard/ProductCard.tsx
+++ b/src/components/common/ProductCard/ProductCard.tsx
@@ -63,15 +63,15 @@ const ProductCard = ({
        {
          isSingleButton ?
            <div className={s.cardButton}>
-              <ButtonCommon type="light" icon={<IconBuy />}>Add to cart</ButtonCommon>
+              <ButtonCommon type="light" icon={<IconBuy />} size='small'>Add to cart</ButtonCommon>
            </div>
            :
            <>
              <div className={s.cardIcon}>
-                <ButtonIconBuy />
+                <ButtonIconBuy/>
              </div>
              <div className={s.cardButton}>
-                <ButtonCommon type="light">{buttonText}</ButtonCommon>
+                <ButtonCommon type="light" size='small'>{buttonText}</ButtonCommon>
              </div>
            </>
        }
--- a/src/components/common/QuanittyInput/QuanittyInput.module.scss
+++ b/src/components/common/QuanittyInput/QuanittyInput.module.scss
@@ -1,10 +1,23 @@
@import '../../../styles/utilities';
-.quanittyInputWarper{
-    border-color: theme("textColor.active");
-    @apply border border-solid inline-flex justify-between items-center custom-border-radius;
+.quanittyInputWarper {
+    @apply shape-common-border;
+    &::before{
+        height: 100%;
+        top: 1px;
+        background-color: var(--text-active);
+    }
+    .inner {
+        @apply inline-flex justify-between items-center;
+        margin: 0;
+    }
    .plusIcon, .minusIcon{
+        @apply flex justify-center items-center;
+        min-height: 2rem;
        &:hover{
            cursor: pointer;
+            svg path {
+                fill: var(--primary);
+            }
        }
    }
    &.default{
--- a/src/components/common/QuanittyInput/QuanittyInput.tsx
+++ b/src/components/common/QuanittyInput/QuanittyInput.tsx
@@ -4,8 +4,8 @@ import classNames from 'classnames'
 import { IconMinus, IconPlus } from '../../icons'
 interface QuanittyInputProps
  extends Omit<
-    React.InputHTMLAttributes<HTMLInputElement>,
-    'onChange' | 'min' | 'max' | 'step' | "type" | "size"
+  React.InputHTMLAttributes<HTMLInputElement>,
+  'onChange' | 'min' | 'max' | 'step' | "type" | "size"
  > {
  size?: 'default' | 'small'
  onChange?: (value: number) => void
@@ -63,18 +63,20 @@ const QuanittyInput = ({

  return (
    <div className={classNames(s.quanittyInputWarper, { [s[size]]: size })}>
-      <div className={s.minusIcon} onClick={onMinusClick}>
-        <IconMinus />
-      </div>
-      <input
-        {...props}
-        type="number"
-        value={value}
-        onChange={onValueChange}
-        className={s.quanittyInput}
-      />
-      <div className={s.plusIcon} onClick={onPlusClick}>
-        <IconPlus />
+      <div className={s.inner}>
+        <div className={s.minusIcon} onClick={onMinusClick}>
+          <IconMinus />
+        </div>
+        <input
+          {...props}
+          type="number"
+          value={value}
+          onChange={onValueChange}
+          className={s.quanittyInput}
+        />
+        <div className={s.plusIcon} onClick={onPlusClick}>
+          <IconPlus />
+        </div>
      </div>
    </div>
  )
--- a/src/components/icons/IconMinus.tsx
+++ b/src/components/icons/IconMinus.tsx
@@ -1,14 +1,14 @@
-const IconMinus = ({ ...props }) => {
+const IconMinus = () => {
  return (
    <svg
      width="12"
-      height="12"
-      viewBox="0 0 12 12"
+      height="2"
+      viewBox="0 0 12 2"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
-        d="M10.6667 5.33317H6.66669V1.33317C6.66669 1.15636 6.59645 0.98679 6.47142 0.861766C6.3464 0.736742 6.17683 0.666504 6.00002 0.666504C5.82321 0.666504 5.65364 0.736742 5.52862 0.861766C5.40359 0.98679 5.33335 1.15636 5.33335 1.33317V5.33317H1.33335C1.15654 5.33317 0.986974 5.40341 0.861949 5.52843C0.736925 5.65346 0.666687 5.82303 0.666687 5.99984C0.666687 6.17665 0.736925 6.34622 0.861949 6.47124C0.986974 6.59627 1.15654 6.6665 1.33335 6.6665H5.33335V10.6665C5.33335 10.8433 5.40359 11.0129 5.52862 11.1379C5.65364 11.2629 5.82321 11.3332 6.00002 11.3332C6.17683 11.3332 6.3464 11.2629 6.47142 11.1379C6.59645 11.0129 6.66669 10.8433 6.66669 10.6665V6.6665H10.6667C10.8435 6.6665 11.0131 6.59627 11.1381 6.47124C11.2631 6.34622 11.3334 6.17665 11.3334 5.99984C11.3334 5.82303 11.2631 5.65346 11.1381 5.52843C11.0131 5.40341 10.8435 5.33317 10.6667 5.33317Z"
+        d="M10.6667 0.333496H1.33335C1.15654 0.333496 0.986974 0.403734 0.861949 0.528758C0.736925 0.653783 0.666687 0.823352 0.666687 1.00016C0.666687 1.17697 0.736925 1.34654 0.861949 1.47157C0.986974 1.59659 1.15654 1.66683 1.33335 1.66683H10.6667C10.8435 1.66683 11.0131 1.59659 11.1381 1.47157C11.2631 1.34654 11.3334 1.17697 11.3334 1.00016C11.3334 0.823352 11.2631 0.653783 11.1381 0.528758C11.0131 0.403734 10.8435 0.333496 10.6667 0.333496Z"
        fill="#141414"
      />
    </svg>
--- a/src/components/icons/IconPlus.tsx
+++ b/src/components/icons/IconPlus.tsx
@@ -1,14 +1,14 @@
-const IconPlus = ({ ...props }) => {
+const IconPlus = () => {
  return (
    <svg
      width="12"
-      height="2"
-      viewBox="0 0 12 2"
+      height="12"
+      viewBox="0 0 12 12"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
-        d="M10.6667 0.333496H1.33335C1.15654 0.333496 0.986974 0.403734 0.861949 0.528758C0.736925 0.653783 0.666687 0.823352 0.666687 1.00016C0.666687 1.17697 0.736925 1.34654 0.861949 1.47157C0.986974 1.59659 1.15654 1.66683 1.33335 1.66683H10.6667C10.8435 1.66683 11.0131 1.59659 11.1381 1.47157C11.2631 1.34654 11.3334 1.17697 11.3334 1.00016C11.3334 0.823352 11.2631 0.653783 11.1381 0.528758C11.0131 0.403734 10.8435 0.333496 10.6667 0.333496Z"
+        d="M10.6667 5.33317H6.66669V1.33317C6.66669 1.15636 6.59645 0.98679 6.47142 0.861766C6.3464 0.736742 6.17683 0.666504 6.00002 0.666504C5.82321 0.666504 5.65364 0.736742 5.52862 0.861766C5.40359 0.98679 5.33335 1.15636 5.33335 1.33317V5.33317H1.33335C1.15654 5.33317 0.986974 5.40341 0.861949 5.52843C0.736925 5.65346 0.666687 5.82303 0.666687 5.99984C0.666687 6.17665 0.736925 6.34622 0.861949 6.47124C0.986974 6.59627 1.15654 6.6665 1.33335 6.6665H5.33335V10.6665C5.33335 10.8433 5.40359 11.0129 5.52862 11.1379C5.65364 11.2629 5.82321 11.3332 6.00002 11.3332C6.17683 11.3332 6.3464 11.2629 6.47142 11.1379C6.59645 11.0129 6.66669 10.8433 6.66669 10.6665V6.6665H10.6667C10.8435 6.6665 11.0131 6.59627 11.1381 6.47124C11.2631 6.34622 11.3334 6.17665 11.3334 5.99984C11.3334 5.82303 11.2631 5.65346 11.1381 5.52843C11.0131 5.40341 10.8435 5.33317 10.6667 5.33317Z"
        fill="#141414"
      />
    </svg>
--- a/src/components/modules/home/HomeRecipe/HomeRecipe.module.scss
+++ b/src/components/modules/home/HomeRecipe/HomeRecipe.module.scss
@@ -16,20 +16,5 @@
 			padding-top: 3.2rem; 
 			padding-bottom: 3.2rem; 
      @apply flex justify-start spacing-horizontal;
-      .tab{
-          font-family: var(--font-heading);
-          padding: 1.6rem 1.6rem 0.8rem 1.6rem;
-          font-size: 2.4rem;
-          line-height: 2.8rem;
-          @screen md{   
-            font-size: 3.2rem;
-            line-height: 4rem;
-          }
-					outline: none;
-          &.active{
-            @apply text-background custom-border-radius bg-primary;
-          }
-					
-      }
  }
 }
--- a/src/components/modules/home/HomeRecipe/HomeRecipe.tsx
+++ b/src/components/modules/home/HomeRecipe/HomeRecipe.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import {  HeadingCommon, ViewAllItem } from 'src/components/common'
 import { RecipeCardProps } from 'src/components/common/RecipeCard/RecipeCard'
 import RecipeCarousel from 'src/components/common/RecipeCarousel/RecipeCarousel'
@@ -7,6 +7,7 @@ import classNames from 'classnames';
 import image13 from "../../../../../public/assets/images/image13.png"
 import image14 from "../../../../../public/assets/images/image14.png"
 import image12 from "../../../../../public/assets/images/image12.png"
+import HomeRecipeTab from './HomeRecipeTab/HomeRecipeTab'

 interface HomeRecipeProps {
  data?: RecipeCardProps[]
@@ -44,7 +45,28 @@ const recipe:RecipeCardProps[] = [{
 }]


+const TABS = [
+  {
+    name: 'Noodle',
+    value: 'Noodle',
+  },
+  {
+    name: 'Curry',
+    value: 'Curry',
+  },
+  {
+    name: 'Special Recipes',
+    value: 'Special Recipes',
+  }
+]
+
 const HomeRecipe = ({ data =recipe, itemKey="home-recipe", title="Special Recipes" }: HomeRecipeProps) => {
+  const [activeTab, setActiveTab] = useState<string>(TABS[0].value)
+
+  const  onTabChanged = (value: string) => {
+    setActiveTab(value)
+  }
+  
  return (
    <div className={s.homeRecipeWarpper}>
      <div className={s.top}>
@@ -56,9 +78,14 @@ const HomeRecipe = ({ data =recipe, itemKey="home-recipe", title="Special Recipe
        </div>
      </div>
 			<div className={s.mid}>
-        <button className={classNames(s.tab,s.active)}>Noodle</button>
-        <button className={s.tab}>Curry</button>
-        <button className={s.tab}>Special Recipes</button>
+        {
+          TABS.map(item => <HomeRecipeTab
+            key={item.value}
+            activeValue={activeTab}
+            name={item.name}
+            value={item.value}
+            onClick={onTabChanged} />)
+        }
      </div>
      <div className={s.bot}>
        <RecipeCarousel data={data} itemKey={itemKey} />
--- a/src/components/modules/home/HomeRecipe/HomeRecipeTab/HomeRecipeTab.module.scss
+++ b/src/components/modules/home/HomeRecipe/HomeRecipeTab/HomeRecipeTab.module.scss
@@ -0,0 +1,17 @@
+@import "../../../../../styles/utilities";
+
+.tab {
+    all: unset;
+    @apply heading-3 font-heading cursor-pointer outline-none;
+    padding: 1.6rem;
+    &:focus {
+        outline: none;
+        filter: brightness(1.05);
+    }
+    &:focus-visible {
+        outline: 2px solid var(--text-active);
+    }
+    &.active {
+        @apply text-background shape-common bg-primary;
+    }
+}
--- a/src/components/modules/home/HomeRecipe/HomeRecipeTab/HomeRecipeTab.tsx
+++ b/src/components/modules/home/HomeRecipe/HomeRecipeTab/HomeRecipeTab.tsx
@@ -0,0 +1,26 @@
+import classNames from 'classnames';
+import React from 'react';
+import s from './HomeRecipeTab.module.scss'
+
+interface Props {
+    activeValue: string
+    name: string
+    value: string
+    onClick: (value: string) => void
+}
+
+
+const HomeRecipeTab = ({ activeValue, name, value, onClick }: Props) => {
+    const handleClick = () => {
+        onClick(value)
+    }
+
+    return (
+        <button onClick={handleClick} className={classNames(s.tab, {
+            [s.active]: activeValue === value
+        })}>{name}</button>
+
+    );
+};
+
+export default HomeRecipeTab;
--- a/src/styles/_base.scss
+++ b/src/styles/_base.scss
@@ -3,7 +3,7 @@

 :root {
  --primary: #5b9a74;
-  --primary-light: #e0f6e8;
+  --primary-light: #e3f2e9;
  --primary-lightest: #effaf4;

  --info-dark: #00317a;
--- a/src/styles/_utilities.scss
+++ b/src/styles/_utilities.scss
@@ -25,7 +25,7 @@
    }
    .heading-3 {
        font-size: 24px;
-        line-height: 32px;
+        line-height: 28px;
        letter-spacing: -0.01em;
        font-weight: bold;
        text-transform: uppercase;
@@ -114,8 +114,6 @@

    .shape-common {
        position: relative;
-        $border: 2px;
-        margin: $border;
        clip-path: url(#svg-custom-shape);
    }