From 274762cbfecd8700636a6fdcb30f14bb49822451 Mon Sep 17 00:00:00 2001
From: Andre H <andrehadiantolesmana@gmail.com>
Date: Wed, 6 Mar 2024 14:14:10 +0800
Subject: [PATCH 1/6] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20feat:=20create=20proje?=
 =?UTF-8?q?ct=20mobile=20layout?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../org-slug/projects/create/Template.tsx      | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/frontend/src/pages/org-slug/projects/create/Template.tsx b/packages/frontend/src/pages/org-slug/projects/create/Template.tsx
index 3d61792..1f4236f 100644
--- a/packages/frontend/src/pages/org-slug/projects/create/Template.tsx
+++ b/packages/frontend/src/pages/org-slug/projects/create/Template.tsx
@@ -14,11 +14,15 @@ import {
 } from 'components/shared/CustomIcon';
 import { Heading } from 'components/shared/Heading';
 import { Steps } from 'components/shared/Steps';
+import { useMediaQuery } from 'usehooks-ts';
 
 // TODO: Set dynamic route for template and load details from DB
 const CreateWithTemplate = () => {
   const { orgSlug } = useParams();
 
+  const isDesktopView = useMediaQuery('(min-width: 720px)'); // md:
+  const stepsOrientation = isDesktopView ? 'vertical' : 'horizontal';
+
   const stepperValues = [
     {
       step: 1,
@@ -47,7 +51,7 @@ const CreateWithTemplate = () => {
   );
 
   return (
-    <div className="flex flex-col items-center">
+    <div className="flex flex-col items-center gap-6 md:gap-10">
       <div className="flex flex-col lg:flex-row justify-between w-5/6 my-4 bg-base-bg-alternate rounded-xl p-6 gap-3 items-start lg:items-center">
         <div className="flex items-center gap-3">
           <TemplateIcon type={template?.icon as TemplateIconType} size={48} />
@@ -69,11 +73,15 @@ const CreateWithTemplate = () => {
           </a>
         </div>
       </div>
-      <div className="grid grid-cols-3 w-5/6 p-6">
-        <div>
-          <Steps currentIndex={activeStep} steps={stepperValues} />
+      <div className="grid grid-cols-3 w-5/6 p-0 md:p-6 gap-8 md:gap-0">
+        <div className="col-span-3 md:col-span-1">
+          <Steps
+            orientation={stepsOrientation}
+            currentIndex={activeStep}
+            steps={stepperValues}
+          />
         </div>
-        <div className="col-span-2">
+        <div className="col-span-3 md:col-span-2">
           <Outlet context={{ template }} />
         </div>
       </div>

From 3737550f7f8b429b8849abe47039a20809b38bc2 Mon Sep 17 00:00:00 2001
From: Andre H <andrehadiantolesmana@gmail.com>
Date: Wed, 6 Mar 2024 14:14:49 +0800
Subject: [PATCH 2/6] =?UTF-8?q?=F0=9F=94=A7=20chore:=20useMediaQuery=20cha?=
 =?UTF-8?q?nge=20md=20to=20>720px?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/src/pages/org-slug/projects/Id.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/src/pages/org-slug/projects/Id.tsx b/packages/frontend/src/pages/org-slug/projects/Id.tsx
index cf333ba..60c2f07 100644
--- a/packages/frontend/src/pages/org-slug/projects/Id.tsx
+++ b/packages/frontend/src/pages/org-slug/projects/Id.tsx
@@ -24,7 +24,7 @@ const Id = () => {
   const client = useGQLClient();
   const location = useLocation();
 
-  const isDesktopView = useMediaQuery('(min-width: 768px)'); // md:
+  const isDesktopView = useMediaQuery('(min-width: 720px)'); // md:
   const buttonSize = isDesktopView ? {} : { size: 'sm' as const };
 
   const [project, setProject] = useState<ProjectType | null>(null);

From f23c757de9f11d03102e829eaa04e88fc7685f8d Mon Sep 17 00:00:00 2001
From: Andre H <andrehadiantolesmana@gmail.com>
Date: Wed, 6 Mar 2024 14:15:19 +0800
Subject: [PATCH 3/6] =?UTF-8?q?=F0=9F=94=A7=20chore:=20create=20project=20?=
 =?UTF-8?q?create=20repo=20buttonSize=20to=20be=20responsive?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../frontend/src/components/shared/Button/Button.theme.ts   | 2 +-
 .../src/pages/org-slug/projects/create/template/index.tsx   | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/components/shared/Button/Button.theme.ts b/packages/frontend/src/components/shared/Button/Button.theme.ts
index 262cb8f..eedb9b2 100644
--- a/packages/frontend/src/components/shared/Button/Button.theme.ts
+++ b/packages/frontend/src/components/shared/Button/Button.theme.ts
@@ -20,7 +20,7 @@ export const buttonTheme = tv(
     variants: {
       size: {
         lg: ['gap-2', 'py-3.5', 'px-5', 'text-base', 'tracking-[-0.011em]'],
-        md: ['gap-2', 'py-3.25', 'px-5', 'text-sm', 'tracking-[-0.006em]'],
+        md: ['gap-2', 'py-3', 'px-5', 'text-sm', 'tracking-[-0.006em]'],
         sm: ['gap-1', 'py-2', 'px-3', 'text-xs'],
         xs: ['gap-1', 'py-1', 'px-2', 'text-xs'],
       },
diff --git a/packages/frontend/src/pages/org-slug/projects/create/template/index.tsx b/packages/frontend/src/pages/org-slug/projects/create/template/index.tsx
index 9fc8795..f57428e 100644
--- a/packages/frontend/src/pages/org-slug/projects/create/template/index.tsx
+++ b/packages/frontend/src/pages/org-slug/projects/create/template/index.tsx
@@ -3,6 +3,7 @@ import { useForm, SubmitHandler, Controller } from 'react-hook-form';
 import { useNavigate, useOutletContext, useParams } from 'react-router-dom';
 import toast from 'react-hot-toast';
 import assert from 'assert';
+import { useMediaQuery } from 'usehooks-ts';
 
 import { useOctokit } from '../../../../../context/OctokitContext';
 import { useGQLClient } from '../../../../../context/GQLClientContext';
@@ -28,6 +29,9 @@ const CreateRepo = () => {
 
   const { orgSlug } = useParams();
 
+  const isDesktopView = useMediaQuery('(min-width: 720px)'); // md:
+  const buttonSize = isDesktopView ? { size: 'lg' as const } : {};
+
   const navigate = useNavigate();
 
   const [gitAccounts, setGitAccounts] = useState<string[]>([]);
@@ -166,8 +170,8 @@ const CreateRepo = () => {
         </div>
         <div>
           <Button
+            {...buttonSize}
             type="submit"
-            size="lg"
             disabled={!Boolean(template.repoFullName) || isLoading}
             rightIcon={<ArrowRightCircleFilledIcon />}
           >

From 226d02ea59f8a6773a400fec341186f9f241226d Mon Sep 17 00:00:00 2001
From: Andre H <andrehadiantolesmana@gmail.com>
Date: Wed, 6 Mar 2024 14:29:28 +0800
Subject: [PATCH 4/6] =?UTF-8?q?=F0=9F=94=A7=20chore:=20change=20media=20qu?=
 =?UTF-8?q?ery=20to=20lg?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/pages/org-slug/projects/create/Template.tsx  | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/frontend/src/pages/org-slug/projects/create/Template.tsx b/packages/frontend/src/pages/org-slug/projects/create/Template.tsx
index 1f4236f..682d1f4 100644
--- a/packages/frontend/src/pages/org-slug/projects/create/Template.tsx
+++ b/packages/frontend/src/pages/org-slug/projects/create/Template.tsx
@@ -20,7 +20,7 @@ import { useMediaQuery } from 'usehooks-ts';
 const CreateWithTemplate = () => {
   const { orgSlug } = useParams();
 
-  const isDesktopView = useMediaQuery('(min-width: 720px)'); // md:
+  const isDesktopView = useMediaQuery('(min-width: 960px)'); // lg:
   const stepsOrientation = isDesktopView ? 'vertical' : 'horizontal';
 
   const stepperValues = [
@@ -51,8 +51,8 @@ const CreateWithTemplate = () => {
   );
 
   return (
-    <div className="flex flex-col items-center gap-6 md:gap-10">
-      <div className="flex flex-col lg:flex-row justify-between w-5/6 my-4 bg-base-bg-alternate rounded-xl p-6 gap-3 items-start lg:items-center">
+    <div className="flex flex-col items-center gap-6 lg:gap-10 mx-auto w-full lg:w-5/6">
+      <div className="flex flex-col lg:flex-row justify-between w-full my-4 bg-base-bg-alternate rounded-xl p-6 gap-3 items-start lg:items-center">
         <div className="flex items-center gap-3">
           <TemplateIcon type={template?.icon as TemplateIconType} size={48} />
           <Heading className="font-medium">{template?.name}</Heading>
@@ -73,15 +73,15 @@ const CreateWithTemplate = () => {
           </a>
         </div>
       </div>
-      <div className="grid grid-cols-3 w-5/6 p-0 md:p-6 gap-8 md:gap-0">
-        <div className="col-span-3 md:col-span-1">
+      <div className="grid grid-cols-3 p-0 lg:p-6 w-full gap-8 lg:gap-0">
+        <div className="col-span-3 lg:col-span-1">
           <Steps
             orientation={stepsOrientation}
             currentIndex={activeStep}
             steps={stepperValues}
           />
         </div>
-        <div className="col-span-3 md:col-span-2">
+        <div className="col-span-3 lg:col-span-2">
           <Outlet context={{ template }} />
         </div>
       </div>

From 028831f80649f6ace11d74b5dbf8ddcb5a3a3c71 Mon Sep 17 00:00:00 2001
From: Andre H <andrehadiantolesmana@gmail.com>
Date: Thu, 7 Mar 2024 11:45:51 +0800
Subject: [PATCH 5/6] =?UTF-8?q?=F0=9F=94=A7=20chore:=20change=20isDesktopV?=
 =?UTF-8?q?iew=20to=20isTabletView?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/src/pages/org-slug/projects/Id.tsx          | 4 ++--
 .../frontend/src/pages/org-slug/projects/create/Template.tsx  | 4 ++--
 .../src/pages/org-slug/projects/create/template/index.tsx     | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/frontend/src/pages/org-slug/projects/Id.tsx b/packages/frontend/src/pages/org-slug/projects/Id.tsx
index 60c2f07..e5b7604 100644
--- a/packages/frontend/src/pages/org-slug/projects/Id.tsx
+++ b/packages/frontend/src/pages/org-slug/projects/Id.tsx
@@ -24,8 +24,8 @@ const Id = () => {
   const client = useGQLClient();
   const location = useLocation();
 
-  const isDesktopView = useMediaQuery('(min-width: 720px)'); // md:
-  const buttonSize = isDesktopView ? {} : { size: 'sm' as const };
+  const isTabletView = useMediaQuery('(min-width: 720px)'); // md:
+  const buttonSize = isTabletView ? {} : { size: 'sm' as const };
 
   const [project, setProject] = useState<ProjectType | null>(null);
   const [repoUrl, setRepoUrl] = useState('');
diff --git a/packages/frontend/src/pages/org-slug/projects/create/Template.tsx b/packages/frontend/src/pages/org-slug/projects/create/Template.tsx
index 682d1f4..ae7f55a 100644
--- a/packages/frontend/src/pages/org-slug/projects/create/Template.tsx
+++ b/packages/frontend/src/pages/org-slug/projects/create/Template.tsx
@@ -20,8 +20,8 @@ import { useMediaQuery } from 'usehooks-ts';
 const CreateWithTemplate = () => {
   const { orgSlug } = useParams();
 
-  const isDesktopView = useMediaQuery('(min-width: 960px)'); // lg:
-  const stepsOrientation = isDesktopView ? 'vertical' : 'horizontal';
+  const isTabletView = useMediaQuery('(min-width: 960px)'); // lg:
+  const stepsOrientation = isTabletView ? 'vertical' : 'horizontal';
 
   const stepperValues = [
     {
diff --git a/packages/frontend/src/pages/org-slug/projects/create/template/index.tsx b/packages/frontend/src/pages/org-slug/projects/create/template/index.tsx
index f57428e..777a866 100644
--- a/packages/frontend/src/pages/org-slug/projects/create/template/index.tsx
+++ b/packages/frontend/src/pages/org-slug/projects/create/template/index.tsx
@@ -29,8 +29,8 @@ const CreateRepo = () => {
 
   const { orgSlug } = useParams();
 
-  const isDesktopView = useMediaQuery('(min-width: 720px)'); // md:
-  const buttonSize = isDesktopView ? { size: 'lg' as const } : {};
+  const isTabletView = useMediaQuery('(min-width: 720px)'); // md:
+  const buttonSize = isTabletView ? { size: 'lg' as const } : {};
 
   const navigate = useNavigate();
 

From 658cc0b6b2610a04a61b15ac366e5993b76365be Mon Sep 17 00:00:00 2001
From: Andre H <andrehadiantolesmana@gmail.com>
Date: Thu, 7 Mar 2024 12:18:41 +0800
Subject: [PATCH 6/6] =?UTF-8?q?=F0=9F=94=A7=20chore:=20change=20to=20isDes?=
 =?UTF-8?q?ktopView=20for=20>960px?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../frontend/src/pages/org-slug/projects/create/Template.tsx  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/pages/org-slug/projects/create/Template.tsx b/packages/frontend/src/pages/org-slug/projects/create/Template.tsx
index ae7f55a..682d1f4 100644
--- a/packages/frontend/src/pages/org-slug/projects/create/Template.tsx
+++ b/packages/frontend/src/pages/org-slug/projects/create/Template.tsx
@@ -20,8 +20,8 @@ import { useMediaQuery } from 'usehooks-ts';
 const CreateWithTemplate = () => {
   const { orgSlug } = useParams();
 
-  const isTabletView = useMediaQuery('(min-width: 960px)'); // lg:
-  const stepsOrientation = isTabletView ? 'vertical' : 'horizontal';
+  const isDesktopView = useMediaQuery('(min-width: 960px)'); // lg:
+  const stepsOrientation = isDesktopView ? 'vertical' : 'horizontal';
 
   const stepperValues = [
     {