From 5fcc9302ebc49fd2913e8c8ddc4acd1ac52c3e29 Mon Sep 17 00:00:00 2001
From: seaerchin <44049504+seaerchin@users.noreply.github.com>
Date: Tue, 3 Oct 2023 11:45:24 +0800
Subject: [PATCH] refactor(hero): duplicate changes from template (#1551)

* refactor(hero): duplicate changes from template

* fix(scss-breakpoints): map.get -> map-get

---------

Co-authored-by: seaerchin <chin@ers-macbook-pro.lan>
---
 .../components/homepage/_hero.scss            |  14 +--
 .../isomer-template/theme/_breakpoints.scss   |   2 +-
 .../isomer-template/theme/_display.scss       |   4 +-
 src/styles/isomer-template/theme/_layout.scss |   4 +
 .../HeroSection/HeroInfoboxDesktop.tsx        | 104 +++++++++---------
 .../HeroSection/HeroInfoboxMobile.tsx         |   4 +-
 6 files changed, 61 insertions(+), 71 deletions(-)

diff --git a/src/styles/isomer-template/components/homepage/_hero.scss b/src/styles/isomer-template/components/homepage/_hero.scss
index 6883c1e2c..4b2d52256 100644
--- a/src/styles/isomer-template/components/homepage/_hero.scss
+++ b/src/styles/isomer-template/components/homepage/_hero.scss
@@ -16,7 +16,7 @@
   padding: 3rem 1.5rem;
 }
 
-@media screen and (min-width: map.get($breakpoints, "md")) {
+@media screen and (min-width: map-get($breakpoints, "md")) {
   .hero-floating {
     padding: 3rem;
   }
@@ -60,15 +60,7 @@
   width: 50%;
 }
 
-.hero-alignment-left {
-  align-self: flex-end;
-}
-
-.hero-alignment-right {
-  align-self: flex-start;
-}
-
-@media screen and (min-width: map.get($breakpoints, "xl")) {
+@media screen and (min-width: map-get($breakpoints, "xl")) {
   .hero-side-sm {
     width: 50%;
   }
@@ -88,7 +80,7 @@
   }
 }
 
-@media screen and ((max-width: map.get($breakpoints, "xl") - 1)) {
+@media screen and ((max-width: (map-get($breakpoints, "xl") - 1))) {
   .hero-side-sm {
     width: 33%;
   }
diff --git a/src/styles/isomer-template/theme/_breakpoints.scss b/src/styles/isomer-template/theme/_breakpoints.scss
index e3eb92f3e..54d739564 100644
--- a/src/styles/isomer-template/theme/_breakpoints.scss
+++ b/src/styles/isomer-template/theme/_breakpoints.scss
@@ -11,4 +11,4 @@ $breakpoints: (
 );
 
 // Maximum width of site contents
-$container-max-width: map.get($breakpoints, "xl");
+$container-max-width: map-get($breakpoints, "xl");
diff --git a/src/styles/isomer-template/theme/_display.scss b/src/styles/isomer-template/theme/_display.scss
index 09fff1a29..0d2b0d667 100644
--- a/src/styles/isomer-template/theme/_display.scss
+++ b/src/styles/isomer-template/theme/_display.scss
@@ -1,7 +1,7 @@
 @use "sass:map";
 
-@media screen and (min-width: map.get($breakpoints, "lg")),
-  screen and (max-width: (map.get($breakpoints, "md") - 1)) {
+@media screen and (min-width: map-get($breakpoints, "lg")),
+  screen and (max-width: (map-get($breakpoints, "md") - 1)) {
   .is-visible-tablet-only {
     display: none !important;
   }
diff --git a/src/styles/isomer-template/theme/_layout.scss b/src/styles/isomer-template/theme/_layout.scss
index 6c1824a9d..ad244c431 100644
--- a/src/styles/isomer-template/theme/_layout.scss
+++ b/src/styles/isomer-template/theme/_layout.scss
@@ -2,6 +2,10 @@
   justify-content: flex-end;
 }
 
+.flex-start {
+  justify-content: flex-start;
+}
+
 .w-100 {
   width: 100%;
 }
diff --git a/src/templates/homepage/HeroSection/HeroInfoboxDesktop.tsx b/src/templates/homepage/HeroSection/HeroInfoboxDesktop.tsx
index 6b45783a9..29ef0de17 100644
--- a/src/templates/homepage/HeroSection/HeroInfoboxDesktop.tsx
+++ b/src/templates/homepage/HeroSection/HeroInfoboxDesktop.tsx
@@ -12,10 +12,6 @@ import { EditorHeroDropdownSection } from "types/homepage"
 import { HeroButton } from "./HeroButton"
 import { HeroDropdown } from "./HeroDropdown"
 
-const getButtonStyling = (alignment: SectionAlignment = "left") => {
-  return `hero-alignment-${alignment}`
-}
-
 interface HeroInfoboxDesktopProps {
   alignment: SectionAlignment
 
@@ -31,8 +27,6 @@ interface HeroInfoboxDesktopProps {
   variant: "side" | "floating"
 }
 
-const BASE_TITLE_CONTAINER_STYLES = ["mb-8", "is-flex"]
-
 export const HeroInfoboxDesktop = ({
   variant,
   alignment = "left",
@@ -46,11 +40,6 @@ export const HeroInfoboxDesktop = ({
   url,
   button,
 }: HeroInfoboxDesktopProps) => {
-  const SIDE_SECTION_TITLE_CONTAINER_STYLES = [
-    "side-section-infobox-container",
-    `side-section-container-${alignment}`,
-  ]
-
   return (
     <div
       className={getClassNames(editorStyles, [
@@ -70,66 +59,71 @@ export const HeroInfoboxDesktop = ({
         }}
       >
         <div
-          className={getClassNames(editorStyles, [
-            ...BASE_TITLE_CONTAINER_STYLES,
-            ...(variant === "side" ? SIDE_SECTION_TITLE_CONTAINER_STYLES : []),
-          ])}
+          className={getClassNames(
+            editorStyles,
+            variant === "side" ? ["side-section-infobox-container"] : []
+          )}
           style={{
+            display: "flex",
             flexDirection: "column",
+            alignSelf: alignment === "right" ? "flex-start" : "flex-end",
           }}
         >
-          <h1
-            className={getClassNames(editorStyles, [
-              "h1",
-              "mb-4",
-              "hero-text-color",
-            ])}
+          <div
+            className={getClassNames(editorStyles, ["mb-8", "is-flex"])}
+            style={{ flexDirection: "column" }}
           >
-            <b>{title}</b>
-          </h1>
-
-          {subtitle && (
-            <p
+            <h1
               className={getClassNames(editorStyles, [
-                "is-hidden-touch",
-                "body-2",
+                "h1",
+                "mb-4",
                 "hero-text-color",
               ])}
             >
-              {subtitle}
-            </p>
-          )}
-        </div>
+              <b>{title}</b>
+            </h1>
 
-        {dropdown?.title ? (
-          <div
-            className={getClassNames(editorStyles, ["is-flex"])}
-            style={{
-              justifyContent: "center",
-              alignContent: "center",
-            }}
-          >
-            <HeroDropdown
-              title={dropdown.title}
-              options={dropdown.options}
-              isActive={dropdownIsActive}
-              toggleDropdown={toggleDropdown}
-            />
+            {subtitle && (
+              <p
+                className={getClassNames(editorStyles, [
+                  "is-hidden-touch",
+                  "body-2",
+                  "hero-text-color",
+                ])}
+              >
+                {subtitle}
+              </p>
+            )}
           </div>
-        ) : (
-          // NOTE: This is to mirror the template structure
-          // as closely as possible.
-          url &&
-          button && (
+          {dropdown?.title ? (
             <div
               className={getClassNames(editorStyles, [
-                `${variant === "side" ? getButtonStyling(alignment) : ""}`,
+                "is-flex",
+                "is-full-width",
               ])}
+              style={{
+                justifyContent: "center",
+                alignContent: "center",
+              }}
             >
-              <HeroButton button={button} />
+              <HeroDropdown
+                title={dropdown.title}
+                options={dropdown.options}
+                isActive={dropdownIsActive}
+                toggleDropdown={toggleDropdown}
+              />
             </div>
-          )
-        )}
+          ) : (
+            // NOTE: This is to mirror the template structure
+            // as closely as possible.
+            url &&
+            button && (
+              <div>
+                <HeroButton button={button} />
+              </div>
+            )
+          )}
+        </div>
       </div>
     </div>
   )
diff --git a/src/templates/homepage/HeroSection/HeroInfoboxMobile.tsx b/src/templates/homepage/HeroSection/HeroInfoboxMobile.tsx
index 3f06fed2d..0a415c63c 100644
--- a/src/templates/homepage/HeroSection/HeroInfoboxMobile.tsx
+++ b/src/templates/homepage/HeroSection/HeroInfoboxMobile.tsx
@@ -40,8 +40,8 @@ export const HeroInfoboxMobile = ({
       style={{
         paddingTop: "106px",
         paddingBottom: "106px",
-        paddingLeft: "84px",
-        paddingRight: "84px",
+        paddingLeft: "48px",
+        paddingRight: "48px",
       }}
     >
       <div