cerc-io/snowballtools-base
16
0
Fork 2
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

🎨 style: adjust template card name and arrow also responsive of the list of template

Browse Source
This commit is contained in:
Wahyu Kurniawan 2024-02-28 16:20:05 +07:00
parent f3a7f4dea5
commit 7b7beefe37
No known key found for this signature in database
GPG Key ID: 040A1549143A8E33
2 changed files with 8 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/frontend/src/components/projects/create/TemplateCard/TemplateCard.tsx
View File

@ -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>

8
packages/frontend/src/pages/org-slug/projects/create/index.tsx
View File

@ -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} />
</>
) : (