Merge pull request #141 from k35o/rounded

角丸等の調整
k35o · Jul 31, 2024 · 06c7551 · 06c7551
2 parents d37f460 + 0696ee2
commit 06c7551
Show file tree

Hide file tree

Showing 20 changed files with 84 additions and 99 deletions.
diff --git a/src/app/blog/_components/blog-card/blog-card.tsx b/src/app/blog/_components/blog-card/blog-card.tsx
@@ -1,69 +1,68 @@
 import { Heading } from '@/components/heading';
 import { TextTag } from '@/components/text-tag';
-import { Route } from 'next';
+import { isInternalRoute } from '@/utils/is-internal-route';
 import Link from 'next/link';
+import { FC } from 'react';
 
-export const BlogCard = <T extends string>({
-  link,
-  emotion,
-  title,
-  tags,
-}: {
+type BlogCardProps = {
   link: string;
   emotion: string;
   title: string;
   tags: [string?, string?, string?, string?, string?];
+};
+
+export const BlogCard: FC<BlogCardProps> = ({
+  link,
+  emotion,
+  title,
+  tags,
 }) => {
-  const isExternal = link.startsWith('http');
   return (
-    <section className="h-40 rounded-md bg-white shadow-md">
-      {isExternal ? (
+    <section className="h-40 rounded-xl bg-white shadow-md">
+      {isInternalRoute(link) ? (
+        <Link href={link}>
+          <BlogCardContent
+            emotion={emotion}
+            title={title}
+            tags={tags}
+          />
+        </Link>
+      ) : (
         <a href={link} target="_blank" rel="noopener noreferrer">
-          <div className="flex gap-6 p-4">
-            <div className="flex h-32 w-32 shrink-0 items-center justify-center rounded-md bg-gray text-7xl">
-              {emotion}
-            </div>
-            <div className="flex w-full flex-col justify-around">
-              <Heading type="h3" lineClamp={3}>
-                {title}
-              </Heading>
-              {tags.length > 0 && (
-                <div className="hidden justify-end gap-2 md:flex">
-                  {tags.map((tag) => {
-                    if (!tag) {
-                      return null;
-                    }
-                    return <TextTag key={tag} text={tag} />;
-                  })}
-                </div>
-              )}
-            </div>
-          </div>
+          <BlogCardContent
+            emotion={emotion}
+            title={title}
+            tags={tags}
+          />
         </a>
-      ) : (
-        <Link href={link as Route<T>}>
-          <div className="flex gap-6 p-4">
-            <div className="flex h-32 w-32 shrink-0 items-center justify-center rounded-md bg-gray text-7xl">
-              {emotion}
-            </div>
-            <div className="flex w-full flex-col justify-around">
-              <Heading type="h3" lineClamp={3}>
-                {title}
-              </Heading>
-              {tags.length > 0 && (
-                <div className="hidden justify-end gap-2 md:flex">
-                  {tags.map((tag) => {
-                    if (!tag) {
-                      return null;
-                    }
-                    return <TextTag key={tag} text={tag} />;
-                  })}
-                </div>
-              )}
-            </div>
-          </div>
-        </Link>
       )}
     </section>
   );
 };
+
+export const BlogCardContent: FC<Omit<BlogCardProps, 'link'>> = ({
+  emotion,
+  title,
+  tags,
+}) => (
+  <div className="flex gap-6 p-4">
+    <div className="flex h-32 w-32 shrink-0 items-center justify-center rounded-lg bg-bgLight text-7xl">
+      {emotion}
+    </div>
+    <div className="flex w-full flex-col justify-around">
+      <Heading type="h3" lineClamp={3}>
+        {title}
+      </Heading>
+      {tags.length > 0 && (
+        <div className="hidden justify-end gap-2 md:flex">
+          {tags.map((tag) => {
+            if (!tag) {
+              return null;
+            }
+            return <TextTag key={tag} text={tag} />;
+          })}
+        </div>
+      )}
+    </div>
+  </div>
+);
diff --git a/src/app/characters/check-syntax/_components/result/result.tsx b/src/app/characters/check-syntax/_components/result/result.tsx
@@ -40,7 +40,7 @@ export const Result: FC = () => {
             テキストをコピーする
           </Button>
         </div>
-        <div className="rounded-md border border-border px-3 py-2">
+        <div className="rounded-lg border border-border px-3 py-2">
           <p className="whitespace-pre-wrap text-wrap break-all">
             {fixedText}
           </p>

diff --git a/src/app/colors/contrasts/_components/description/description.tsx b/src/app/colors/contrasts/_components/description/description.tsx
@@ -2,7 +2,7 @@ import { FC } from 'react';
 
 export const Description: FC = () => {
   return (
-    <div className="w-full rounded-md border-2 border-border p-4">
+    <div className="w-full rounded-lg border-2 border-border p-4">
       <p>
         WCAG
         2.1によると、AA基準における大文字のテキストの最小コントラスト比は4.5:1、小文字のテキストの最小コントラスト比は3:1です。

diff --git a/src/app/converter/_components/color-converter/color-tip.tsx b/src/app/converter/_components/color-converter/color-tip.tsx
@@ -3,7 +3,7 @@ import { FC } from 'react';
 export const ColorTip: FC<{ color: string }> = ({ color }) => {
   return (
     <div
-      className="h-6 w-6 rounded-md border border-border"
+      className="h-6 w-6 rounded-lg border border-border"
       style={{ backgroundColor: color }}
     />
   );

diff --git a/src/app/sql-statement/_components/create-columns/create-columns.tsx b/src/app/sql-statement/_components/create-columns/create-columns.tsx
@@ -36,7 +36,7 @@ export const CreateColumns: FC<Props> = ({
   const columnsEntries = Object.entries(columns);
 
   return (
-    <fieldset className="relative rounded-md p-2">
+    <fieldset className="relative p-2">
       <div className="flex flex-col justify-between gap-2 py-2 md:flex-row md:items-center md:gap-0">
         <legend className="text-lg font-bold">カラム情報</legend>
         <div className="flex items-center gap-2 self-end md:self-auto">

diff --git a/src/app/sql-statement/_components/create-columns/loading-create-columns.tsx b/src/app/sql-statement/_components/create-columns/loading-create-columns.tsx
@@ -3,7 +3,7 @@ import { Button } from '@/components/button';
 
 export const LoadingCreateColumns: FC = () => {
   return (
-    <fieldset className="rounded-md p-2">
+    <fieldset className="p-2">
       <div className="flex flex-col justify-between gap-2 py-2 md:flex-row md:items-center md:gap-0">
         <legend className="text-lg font-bold">カラム情報</legend>
         <div className="flex items-center gap-2 self-end md:self-auto">

diff --git a/src/app/sql-statement/_components/create-restrictions/create-restrictions.tsx b/src/app/sql-statement/_components/create-restrictions/create-restrictions.tsx
@@ -32,7 +32,7 @@ export const CreateRestrictions: FC<Props> = ({
 }) => {
   const restrictionsEntries = Object.entries(restrictions);
   return (
-    <fieldset className="rounded-md p-2">
+    <fieldset className="p-2">
       <div className="flex items-center justify-between py-2">
         <legend className="text-lg font-bold">制限</legend>
         <Button

diff --git a/src/app/sql-statement/_components/create-table/create-table.tsx b/src/app/sql-statement/_components/create-table/create-table.tsx
@@ -23,7 +23,7 @@ export const CreateTable: FC<Props> = ({
   };
 
   return (
-    <fieldset className="rounded-md p-2">
+    <fieldset className="p-2">
       <legend className="text-lg font-bold">テーブル情報</legend>
       <div className="flex flex-col justify-center gap-4">
         <FormControl

diff --git a/src/components/accordion/accordion-button.tsx b/src/components/accordion/accordion-button.tsx
@@ -19,7 +19,7 @@ export const AccordionButton: FC<PropsWithChildren<{}>> = ({
     <button
       type="button"
       className={clsx(
-        'flex w-full flex-row items-center justify-between rounded-md p-2',
+        'flex w-full flex-row items-center justify-between rounded-lg p-2',
         'hover:bg-grayHover active:bg-grayActive',
         'focus-visible::first:ring-focusRing focus-visible::first:border-transparent focus-visible::first:outline-none focus-visible::first:ring-2',
       )}

diff --git a/src/components/accordion/accordion.tsx b/src/components/accordion/accordion.tsx
@@ -7,7 +7,7 @@ export const Accordion: FC<PropsWithChildren<{}>> = ({
   return (
     <div
       className={clsx(
-        'rounded-md border-2 border-borderLight p-2',
+        'rounded-lg border-2 border-borderLight p-2',
         'focus-within:border-transparent focus-within:outline-none focus-within:ring-2 focus-within:ring-focusRing',
       )}
     >

diff --git a/src/components/alert/alert.tsx b/src/components/alert/alert.tsx
@@ -18,7 +18,7 @@ export const Alert: FC<Props> = ({ status, message }) => {
     <div
       role="alert"
       className={clsx(
-        'flex items-center gap-2 rounded-md p-4',
+        'flex items-center gap-2 rounded-lg p-4',
         status === 'success' && 'bg-successLight',
         status === 'info' && 'bg-infoLight',
         status === 'warning' && 'bg-warningLight',

diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
@@ -32,7 +32,7 @@ export const Button: FC<
     <button
       type={type}
       className={clsx(
-        'rounded-lg font-bold',
+        'rounded-xl font-bold',
         {
           ['bg-primary text-white hover:bg-primaryHover active:bg-primaryActive']:
             variant === 'contained',

diff --git a/src/components/form/autocomplete/autocomplete.tsx b/src/components/form/autocomplete/autocomplete.tsx
@@ -59,7 +59,7 @@ export const Autocomplete: FC<Props> = ({
     <div
       ref={ref}
       className={clsx(
-        'relative w-full rounded-md border border-border shadow-sm',
+        'relative w-full rounded-lg border border-border shadow-sm',
         'focus-within:border-transparent focus-within:outline-none focus-within:ring-2 focus-within:ring-focusRing',
         'has-[:hover]:bg-grayHover',
         'has-[[aria-invalid=true]]:border-error',
@@ -76,7 +76,7 @@ export const Autocomplete: FC<Props> = ({
               <div
                 key={text}
                 tabIndex={-1}
-                className="inline-flex items-center gap-2 rounded-full bg-gray px-3 py-1 text-sm font-medium"
+                className="inline-flex items-center gap-2 rounded-full bg-bgBase px-3 py-1 text-sm font-medium"
               >
                 {label}
                 <IconButton
@@ -188,7 +188,7 @@ export const Autocomplete: FC<Props> = ({
         {open && (
           <div
             role="presentation"
-            className="absolute top-1 z-10 w-full rounded-md border border-borderLight bg-white shadow-md"
+            className="absolute top-1 z-10 w-full rounded-lg border border-borderLight bg-white shadow-md"
           >
             <ul
               id={`${id}_listbox`}

diff --git a/src/components/form/checkbox/checkbox.tsx b/src/components/form/checkbox/checkbox.tsx
@@ -22,7 +22,7 @@ export const Checkbox: FC<Props> = ({ label, value, onChange }) => {
       />
       <span
         className={clsx(
-          'inline-flex h-5 w-5 items-center justify-center rounded-md border-2',
+          'inline-flex h-5 w-5 items-center justify-center rounded-lg border-2',
           isFocus &&
             'border-transparent outline-none ring-2 ring-focusRing',
           value

diff --git a/src/components/form/radio/radio.tsx b/src/components/form/radio/radio.tsx
@@ -41,7 +41,7 @@ export const Radio: FC<Props> = ({
           <input
             type="radio"
             className={clsx(
-              'cursor-pointer rounded-md border border-borderLight',
+              'cursor-pointer',
               'disabled:cursor-not-allowed',
             )}
             value={option.value}

diff --git a/src/components/form/select/select.tsx b/src/components/form/select/select.tsx
@@ -36,7 +36,7 @@ export const Select: FC<Props> = ({
         aria-invalid={isInvalid}
         aria-required={isRequired}
         className={clsx(
-          'w-full appearance-none rounded-md border border-border px-3 py-2 shadow-sm',
+          'w-full appearance-none rounded-lg border border-border px-3 py-2 shadow-sm',
           'hover:bg-grayHover',
           'aria-invalid:border-error',
           'disabled:cursor-not-allowed disabled:border-borderLight disabled:bg-gray disabled:text-gray',

diff --git a/src/components/form/text-field/text-field.tsx b/src/components/form/text-field/text-field.tsx
@@ -32,7 +32,7 @@ export const TextField: FC<Props> = ({
       value={value}
       onChange={(e) => onChange(e.target.value)}
       className={clsx(
-        'w-full rounded-md border border-border px-3 py-2',
+        'w-full rounded-lg border border-border px-3 py-2',
         'hover:bg-grayHover',
         'aria-invalid:border-error',
         'disabled:cursor-not-allowed disabled:border-borderLight disabled:bg-gray disabled:text-gray',

diff --git a/src/components/form/textarea/textarea.tsx b/src/components/form/textarea/textarea.tsx
@@ -46,7 +46,7 @@ export const Textarea: FC<Props> = ({
       aria-invalid={isInvalid}
       aria-required={isRequired}
       className={clsx(
-        'w-full resize-none rounded-md border border-border px-3 py-2',
+        'w-full resize-none rounded-lg border border-border px-3 py-2',
         'hover:bg-grayHover',
         'aria-invalid:border-error',
         'disabled:cursor-not-allowed disabled:border-borderLight disabled:bg-gray disabled:text-gray',

diff --git a/src/components/link-button/link-button.tsx b/src/components/link-button/link-button.tsx
@@ -11,38 +11,24 @@ export const LinkButton: FC<
     endIcon?: ReactNode;
   }>
 > = ({ children, size = 'md', href, startIcon, endIcon }) => {
+  const className = clsx(
+    'rounded-xl font-bold',
+    'bg-primary text-white hover:bg-primaryHover active:bg-primaryActive',
+    'focus-visible:border-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focusRing',
+    size === 'sm' && 'px-3 py-1 text-sm',
+    size === 'md' && 'text-md px-4 py-2',
+    size === 'lg' && 'px-6 py-3 text-lg',
+    Boolean(startIcon || endIcon) &&
+      'inline-flex items-center justify-between gap-2',
+  );
   return isInternalRoute(href) ? (
-    <Link
-      className={clsx(
-        'rounded-lg font-bold',
-        'bg-primary text-white hover:bg-primaryHover active:bg-primaryActive',
-        'focus-visible:border-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focusRing',
-        size === 'sm' && 'px-3 py-1 text-sm',
-        size === 'md' && 'text-md px-4 py-2',
-        size === 'lg' && 'px-6 py-3 text-lg',
-        Boolean(startIcon || endIcon) &&
-          'flex items-center justify-between gap-2',
-      )}
-      href={href}
-    >
+    <Link className={className} href={href}>
       {startIcon}
       {children}
       {endIcon}
     </Link>
   ) : (
-    <a
-      className={clsx(
-        'rounded-lg font-bold',
-        'bg-primary text-white hover:bg-primaryHover active:bg-primaryActive',
-        'focus-visible:border-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focusRing',
-        size === 'sm' && 'px-3 py-1 text-sm',
-        size === 'md' && 'text-md px-4 py-2',
-        size === 'lg' && 'px-6 py-3 text-lg',
-        Boolean(startIcon || endIcon) &&
-          'flex items-center justify-between gap-2',
-      )}
-      href={href}
-    >
+    <a className={className} href={href}>
       {startIcon}
       {children}
       {endIcon}

diff --git a/src/components/text-tag/text-tag.tsx b/src/components/text-tag/text-tag.tsx
@@ -1,6 +1,6 @@
 export const TextTag = ({ text }: { text: string }) => {
   return (
-    <span className="inline-block rounded-full bg-gray px-3 py-1 text-sm font-medium">
+    <span className="inline-block rounded-full bg-bgBase px-3 py-1 text-sm font-medium">
       {text}
     </span>
   );