From f5e46766065626caacabf3c0e45699d2b76c7b27 Mon Sep 17 00:00:00 2001
From: jecheung9 <jeffcheung424@gmail.com>
Date: Tue, 9 Sep 2025 19:23:45 -0700
Subject: [PATCH 1/2] fixed isbigchain always true

---
 src/index.css                |  6 ++++++
 src/pages/CreateNewStore.tsx | 35 +++++++++++++++++++++++++----------
 2 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/src/index.css b/src/index.css
index 72c5cbc..f03d747 100644
--- a/src/index.css
+++ b/src/index.css
@@ -418,6 +418,12 @@ h1 {
   margin: 1rem 0;
 }
 
+.big-chain-group label {
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+}
+
 .items-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
diff --git a/src/pages/CreateNewStore.tsx b/src/pages/CreateNewStore.tsx
index fcef935..6ab342e 100644
--- a/src/pages/CreateNewStore.tsx
+++ b/src/pages/CreateNewStore.tsx
@@ -246,16 +246,31 @@ const CreateNewStore: React.FC = () => {
             ))}
 
             <div className="big-chain-group">
-              <label htmlFor="isBigChain">Is this a big chain store?<span className="required-form-item">*</span></label>
-              <input
-                type="checkbox"
-                id="isBigChain"
-                name="isBigChain"
-                checked={inputs.isBigChain}
-                onChange={handleChange}
-                autoComplete="off"
-                required
-              />
+              <span>Is this a big chain store?<span className="required-form-item">*</span></span>
+              <label htmlFor="isBigChainYes">
+                <input
+                  type="radio"
+                  id="isBigChainYes"
+                  name="isBigChain"
+                  value="true"
+                  checked={inputs.isBigChain === true}
+                  onChange={() => setInputs(prev => ({ ...prev, isBigChain: true }))}
+                  autoComplete="off"
+                  required
+                /> Yes
+              </label>
+              <label htmlFor="isBigChainNo">
+                <input
+                  type="radio"
+                  id="isBigChainNo"
+                  name="isBigChain"
+                  value="false"
+                  checked={inputs.isBigChain === false}
+                  onChange={() => setInputs(prev => ({ ...prev, isBigChain: false }))}
+                  autoComplete="off"
+                  required
+                /> No
+              </label>
             </div>
 
             <label htmlFor="storeLogoUrl">Store Logo Url<span className="required-form-item">*</span></label>

From e2ca6b7aed805385ef4c8b68a9aa14844b39227e Mon Sep 17 00:00:00 2001
From: jecheung9 <jeffcheung424@gmail.com>
Date: Tue, 9 Sep 2025 19:31:01 -0700
Subject: [PATCH 2/2] isbigchain small mobile css fix

---
 src/index.css                | 11 ++++++++
 src/pages/CreateNewStore.tsx | 50 +++++++++++++++++++-----------------
 2 files changed, 37 insertions(+), 24 deletions(-)

diff --git a/src/index.css b/src/index.css
index f03d747..05d86f3 100644
--- a/src/index.css
+++ b/src/index.css
@@ -335,6 +335,11 @@ h1 {
   display: contents;
 }
 
+.radio-options {
+  display: flex;
+  gap: 1rem;
+}
+
 .new-store-redirect {
   grid-column-start: 2; 
   padding: 0;
@@ -961,5 +966,11 @@ h1 {
     margin: 0 auto;
     text-align: center;
   }
+
+  .big-chain-group {
+    flex-direction: column; 
+    align-items: flex-start;
+    gap: 0.5rem; 
+  }
 }
 
diff --git a/src/pages/CreateNewStore.tsx b/src/pages/CreateNewStore.tsx
index 6ab342e..8092af8 100644
--- a/src/pages/CreateNewStore.tsx
+++ b/src/pages/CreateNewStore.tsx
@@ -247,30 +247,32 @@ const CreateNewStore: React.FC = () => {
 
             <div className="big-chain-group">
               <span>Is this a big chain store?<span className="required-form-item">*</span></span>
-              <label htmlFor="isBigChainYes">
-                <input
-                  type="radio"
-                  id="isBigChainYes"
-                  name="isBigChain"
-                  value="true"
-                  checked={inputs.isBigChain === true}
-                  onChange={() => setInputs(prev => ({ ...prev, isBigChain: true }))}
-                  autoComplete="off"
-                  required
-                /> Yes
-              </label>
-              <label htmlFor="isBigChainNo">
-                <input
-                  type="radio"
-                  id="isBigChainNo"
-                  name="isBigChain"
-                  value="false"
-                  checked={inputs.isBigChain === false}
-                  onChange={() => setInputs(prev => ({ ...prev, isBigChain: false }))}
-                  autoComplete="off"
-                  required
-                /> No
-              </label>
+              <div className="radio-options">
+                <label htmlFor="isBigChainYes">
+                  <input
+                    type="radio"
+                    id="isBigChainYes"
+                    name="isBigChain"
+                    value="true"
+                    checked={inputs.isBigChain === true}
+                    onChange={() => setInputs(prev => ({ ...prev, isBigChain: true }))}
+                    autoComplete="off"
+                    required
+                  /> Yes
+                </label>
+                <label htmlFor="isBigChainNo">
+                  <input
+                    type="radio"
+                    id="isBigChainNo"
+                    name="isBigChain"
+                    value="false"
+                    checked={inputs.isBigChain === false}
+                    onChange={() => setInputs(prev => ({ ...prev, isBigChain: false }))}
+                    autoComplete="off"
+                    required
+                  /> No
+                </label>
+              </div>
             </div>
 
             <label htmlFor="storeLogoUrl">Store Logo Url<span className="required-form-item">*</span></label>