🔧 chore: create project create repo buttonSize to be responsive

This commit is contained in:
Andre H 2024-03-06 14:15:19 +08:00
parent 3737550f7f
commit f23c757de9
2 changed files with 6 additions and 2 deletions

View File

@ -20,7 +20,7 @@ export const buttonTheme = tv(
variants: { variants: {
size: { size: {
lg: ['gap-2', 'py-3.5', 'px-5', 'text-base', 'tracking-[-0.011em]'], lg: ['gap-2', 'py-3.5', 'px-5', 'text-base', 'tracking-[-0.011em]'],
md: ['gap-2', 'py-3.25', 'px-5', 'text-sm', 'tracking-[-0.006em]'], md: ['gap-2', 'py-3', 'px-5', 'text-sm', 'tracking-[-0.006em]'],
sm: ['gap-1', 'py-2', 'px-3', 'text-xs'], sm: ['gap-1', 'py-2', 'px-3', 'text-xs'],
xs: ['gap-1', 'py-1', 'px-2', 'text-xs'], xs: ['gap-1', 'py-1', 'px-2', 'text-xs'],
}, },

View File

@ -3,6 +3,7 @@ import { useForm, SubmitHandler, Controller } from 'react-hook-form';
import { useNavigate, useOutletContext, useParams } from 'react-router-dom'; import { useNavigate, useOutletContext, useParams } from 'react-router-dom';
import toast from 'react-hot-toast'; import toast from 'react-hot-toast';
import assert from 'assert'; import assert from 'assert';
import { useMediaQuery } from 'usehooks-ts';
import { useOctokit } from '../../../../../context/OctokitContext'; import { useOctokit } from '../../../../../context/OctokitContext';
import { useGQLClient } from '../../../../../context/GQLClientContext'; import { useGQLClient } from '../../../../../context/GQLClientContext';
@ -28,6 +29,9 @@ const CreateRepo = () => {
const { orgSlug } = useParams(); const { orgSlug } = useParams();
const isDesktopView = useMediaQuery('(min-width: 720px)'); // md:
const buttonSize = isDesktopView ? { size: 'lg' as const } : {};
const navigate = useNavigate(); const navigate = useNavigate();
const [gitAccounts, setGitAccounts] = useState<string[]>([]); const [gitAccounts, setGitAccounts] = useState<string[]>([]);
@ -166,8 +170,8 @@ const CreateRepo = () => {
</div> </div>
<div> <div>
<Button <Button
{...buttonSize}
type="submit" type="submit"
size="lg"
disabled={!Boolean(template.repoFullName) || isLoading} disabled={!Boolean(template.repoFullName) || isLoading}
rightIcon={<ArrowRightCircleFilledIcon />} rightIcon={<ArrowRightCircleFilledIcon />}
> >