From d9392c095d748237638caca3f779a272c66d74af Mon Sep 17 00:00:00 2001
From: Andre H <andrehadiantolesmana@gmail.com>
Date: Thu, 29 Feb 2024 15:31:10 +0700
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20feat:=20reskin=20template?=
 =?UTF-8?q?=20header?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../org-slug/projects/create/Template.tsx     | 21 ++++++++++++-------
 1 file changed, 14 insertions(+), 7 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 d819a6f1..b764e45b 100644
--- a/packages/frontend/src/pages/org-slug/projects/create/Template.tsx
+++ b/packages/frontend/src/pages/org-slug/projects/create/Template.tsx
@@ -10,6 +10,8 @@ import { Avatar } from '@material-tailwind/react';
 
 import Stepper from '../../../../components/Stepper';
 import templates from '../../../../assets/templates';
+import { LinkChainIcon } from 'components/shared/CustomIcon';
+import { Heading } from 'components/shared/Heading';
 
 // TODO: Set dynamic route for template and load details from DB
 const CreateWithTemplate = () => {
@@ -44,19 +46,24 @@ const CreateWithTemplate = () => {
 
   return (
     <div className="flex flex-col items-center">
-      <div className="flex justify-between w-5/6 my-4 bg-gray-200 rounded-xl p-6 items-center">
-        <Avatar variant="rounded" src="/gray.png" placeholder={''} />
-        <div className="grow px-2">{template?.name}</div>
+      <div className="flex flex-col lg:flex-row justify-between w-5/6 my-4 bg-gray-200 rounded-xl p-6 gap-3 items-start lg:items-center">
+        <div className="flex items-center gap-3">
+          <Avatar variant="rounded" src="/gray.png" placeholder={''} />
+          <Heading className="font-medium">{template?.name}</Heading>
+        </div>
         <div>
           <a
             href={`https://github.com/${template?.repoFullName}`}
             target="_blank"
             rel="noreferrer"
+            className="flex gap-1.5 items-center text-sm"
           >
-            ^{' '}
-            {Boolean(template?.repoFullName)
-              ? template?.repoFullName
-              : 'Template not supported'}
+            <LinkChainIcon size={18} />
+            <span className="underline">
+              {Boolean(template?.repoFullName)
+                ? template?.repoFullName
+                : 'Template not supported'}
+            </span>
           </a>
         </div>
       </div>