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 ( return (
<button <button
className={cn( 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, 'cursor-default': template?.isComingSoon,
}, },
@ -63,7 +63,7 @@ export const TemplateCard = ({ template, isGitAuth }: TemplateCardProps) => {
<TemplateIcon type={template.icon as TemplateIconType} /> <TemplateIcon type={template.icon as TemplateIconType} />
</div> </div>
{/* Name */} {/* 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} {template.name}
</p> </p>
{template?.isComingSoon ? ( {template?.isComingSoon ? (
@ -75,7 +75,7 @@ export const TemplateCard = ({ template, isGitAuth }: TemplateCardProps) => {
variant="tertiary" variant="tertiary"
size="sm" size="sm"
iconOnly iconOnly
className="group-hover:flex hidden" className="group-hover:flex hidden absolute right-3"
> >
<ArrowRightCircleIcon /> <ArrowRightCircleIcon />
</Button> </Button>

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

@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import templates from 'assets/templates'; 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 ConnectAccount from 'components/projects/create/ConnectAccount';
import { useOctokit } from 'context/OctokitContext'; import { useOctokit } from 'context/OctokitContext';
import { Heading } from 'components/shared/Heading'; import { Heading } from 'components/shared/Heading';
@ -16,7 +16,7 @@ const NewProject = () => {
<Heading as="h3" className="font-medium text-lg"> <Heading as="h3" className="font-medium text-lg">
Start with template Start with template
</Heading> </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) => { {templates.map((template) => {
return ( return (
<TemplateCard <TemplateCard
@ -28,7 +28,9 @@ const NewProject = () => {
})} })}
</div> </div>
</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} /> <RepositoryList octokit={octokit} />
</> </>
) : ( ) : (