From c0e0f5b41ffd258bcd234c8be7a5a7bc42eaf3fd Mon Sep 17 00:00:00 2001
From: seaerchin <chin@ers-macbook-pro.lan>
Date: Mon, 2 Oct 2023 01:37:27 +0800
Subject: [PATCH] refactor(herobody): change section size representation

---
 src/layouts/components/Homepage/HeroBody.tsx              | 8 ++++----
 src/templates/homepage/HeroSection/HeroInfoboxDesktop.tsx | 6 +++++-
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/layouts/components/Homepage/HeroBody.tsx b/src/layouts/components/Homepage/HeroBody.tsx
index fe8732b9b..33e664743 100644
--- a/src/layouts/components/Homepage/HeroBody.tsx
+++ b/src/layouts/components/Homepage/HeroBody.tsx
@@ -182,7 +182,7 @@ const HeroSideSectionLayout = ({
   errors,
   title,
   subtitle,
-  size = "50%",
+  size = "md",
   alignment = "left",
 }: HeroSideSectionProps) => {
   const { onChange } = useEditableContext()
@@ -206,7 +206,7 @@ const HeroSideSectionLayout = ({
       <Box w="100%">
         <Text textStyle="subhead-1">Section size</Text>
         <Radio.RadioGroup
-          onChange={(nextSectionSize) => {
+          onChange={(nextSectionSize: SectionSize) => {
             onChange({
               target: {
                 id: "section-0-hero-size",
@@ -217,11 +217,11 @@ const HeroSideSectionLayout = ({
           defaultValue={size}
         >
           <HStack spacing="0.5rem">
-            <Radio value="50%" size="xs" w="50%" allowDeselect={false}>
+            <Radio value="md" size="xs" w="50%" allowDeselect={false}>
               Wide
             </Radio>
             <Spacer />
-            <Radio value="33%" size="xs" w="50%" allowDeselect={false}>
+            <Radio value="sm" size="xs" w="50%" allowDeselect={false}>
               Narrow
             </Radio>
           </HStack>
diff --git a/src/templates/homepage/HeroSection/HeroInfoboxDesktop.tsx b/src/templates/homepage/HeroSection/HeroInfoboxDesktop.tsx
index f1b6b3e93..6b45783a9 100644
--- a/src/templates/homepage/HeroSection/HeroInfoboxDesktop.tsx
+++ b/src/templates/homepage/HeroSection/HeroInfoboxDesktop.tsx
@@ -12,6 +12,10 @@ 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
 
@@ -119,7 +123,7 @@ export const HeroInfoboxDesktop = ({
           button && (
             <div
               className={getClassNames(editorStyles, [
-                `hero-alignment-${alignment}`,
+                `${variant === "side" ? getButtonStyling(alignment) : ""}`,
               ])}
             >
               <HeroButton button={button} />