⚡️ feat: reskin template header

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">
+      <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">
-        <Avatar variant="rounded" src="/gray.png" placeholder={''} />
+        <div className="flex items-center gap-3">
-        <div className="grow px-2">{template?.name}</div>
+          <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"
           >
-            ^{' '}
+            <LinkChainIcon size={18} />
-            {Boolean(template?.repoFullName)
+            <span className="underline">
-              ? template?.repoFullName
+              {Boolean(template?.repoFullName)
-              : 'Template not supported'}
+                ? template?.repoFullName
+                : 'Template not supported'}
+            </span>
           </a>
         </div>
       </div>