From 7b7beefe37d7ab5ad96be46a1b74159ec046ad74 Mon Sep 17 00:00:00 2001
From: Wahyu Kurniawan <ayungavis@gmail.com>
Date: Wed, 28 Feb 2024 16:20:05 +0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20style:=20adjust=20template=20car?=
 =?UTF-8?q?d=20name=20and=20arrow=20also=20responsive=20of=20the=20list=20?=
 =?UTF-8?q?of=20template?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../projects/create/TemplateCard/TemplateCard.tsx         | 6 +++---
 .../frontend/src/pages/org-slug/projects/create/index.tsx | 8 +++++---
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/frontend/src/components/projects/create/TemplateCard/TemplateCard.tsx b/packages/frontend/src/components/projects/create/TemplateCard/TemplateCard.tsx
index b5ac2057..b7c549fd 100644
--- a/packages/frontend/src/components/projects/create/TemplateCard/TemplateCard.tsx
+++ b/packages/frontend/src/components/projects/create/TemplateCard/TemplateCard.tsx
@@ -51,7 +51,7 @@ export const TemplateCard = ({ template, isGitAuth }: TemplateCardProps) => {
   return (
     <button
       className={cn(
-        'flex items-center gap-3 px-3 py-3 bg-base-bg-alternate hover:bg-base-bg-emphasized rounded-2xl group',
+        'flex items-center gap-3 px-3 py-3 bg-base-bg-alternate hover:bg-base-bg-emphasized rounded-2xl group relative',
         {
           'cursor-default': template?.isComingSoon,
         },
@@ -63,7 +63,7 @@ export const TemplateCard = ({ template, isGitAuth }: TemplateCardProps) => {
         <TemplateIcon type={template.icon as TemplateIconType} />
       </div>
       {/* Name */}
-      <p className="flex flex-1 text-sm tracking-tighter text-elements-high-em">
+      <p className="flex-1 text-left text-sm tracking-tighter text-elements-high-em">
         {template.name}
       </p>
       {template?.isComingSoon ? (
@@ -75,7 +75,7 @@ export const TemplateCard = ({ template, isGitAuth }: TemplateCardProps) => {
           variant="tertiary"
           size="sm"
           iconOnly
-          className="group-hover:flex hidden"
+          className="group-hover:flex hidden absolute right-3"
         >
           <ArrowRightCircleIcon />
         </Button>
diff --git a/packages/frontend/src/pages/org-slug/projects/create/index.tsx b/packages/frontend/src/pages/org-slug/projects/create/index.tsx
index 252b75ce..48c576a3 100644
--- a/packages/frontend/src/pages/org-slug/projects/create/index.tsx
+++ b/packages/frontend/src/pages/org-slug/projects/create/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import templates from 'assets/templates';
-import RepositoryList from 'components/projects/create/RepositoryList';
+import { RepositoryList } from 'components/projects/create/RepositoryList';
 import ConnectAccount from 'components/projects/create/ConnectAccount';
 import { useOctokit } from 'context/OctokitContext';
 import { Heading } from 'components/shared/Heading';
@@ -16,7 +16,7 @@ const NewProject = () => {
         <Heading as="h3" className="font-medium text-lg">
           Start with template
         </Heading>
-        <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
+        <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-3">
           {templates.map((template) => {
             return (
               <TemplateCard
@@ -28,7 +28,9 @@ const NewProject = () => {
           })}
         </div>
       </div>
-      <h5 className="mt-4 ml-4">Import a repository</h5>
+      <Heading as="h3" className="font-medium text-lg mt-10">
+        Import a repository
+      </Heading>
       <RepositoryList octokit={octokit} />
     </>
   ) : (