♻️refactor: remove badge classname (#1018)

OpenUp-LabTakizawa · Oct 1, 2024 · b680aae · b680aae
1 parent 857b54e
commit b680aae
Show file tree

Hide file tree

Showing 12 changed files with 54 additions and 66 deletions.
diff --git a/app/@modal/(.)history/modal.tsx b/app/@modal/(.)history/modal.tsx
@@ -30,7 +30,7 @@ export function Modal({
       onClose={router.back}
       className={`bg-transparent duration-200 ease-out fixed grid group h-full inset-0 items-center justify-items-center m-0 max-h-none max-w-none opacity-0 overflow-hidden overscroll-contain p-0 pointer-events-none text-inherit w-full z-50 backdrop:bg-[#0006] open:opacity-100 open:pointer-events-auto open:visible ${styles.dialog}`}
     >
-      <div className="bg-base-100 col-start-1 duration-200 ease-out max-h-[90vh] max-w-3xl overflow-y-auto overscroll-contain p-6 rounded-b-box rounded-t-box row-start-1 scale-90 shadow-2xl space-y-4 transition w-11/12 group-open:scale-100 group-open:translate-y-0">
+      <div className="bg-white col-start-1 duration-200 ease-out max-h-[90vh] max-w-3xl overflow-y-auto overscroll-contain p-2 pt-7 rounded-b-box rounded-t-box row-start-1 scale-90 shadow-2xl space-y-2 transition w-full group-open:scale-100 group-open:translate-y-0 sm:p-6 sm:space-y-4">
         <button
           type="button"
           onClick={router.back}

diff --git a/app/carousel.tsx b/app/carousel.tsx
@@ -362,9 +362,9 @@ export function IndicatorCarousel(): JSX.Element {
 
 export function Attention(): JSX.Element {
   return (
-    <p className="text-center text-xs">
+    <p className="text-center text-xs sm:text-sm">
       ※&nbsp;写真は過去開催時のものです。
-      <br />
+      <br className="sm:hidden" />
       体験学習はイベントごとに異なります。
     </p>
   )

diff --git a/app/history/page.tsx b/app/history/page.tsx
@@ -27,8 +27,8 @@ export default function History(): JSX.Element {
       </h2>
       {HIROSHIMA_HISTORY.map((history) => (
         <section key={history.date} className="space-y-4">
-          <details className={`rounded-2xl w-full ${styles.details}`}>
-            <summary className="block bg-amber-50 font-bold font-zenMaruGothic p-4 relative text-2xl w-full">
+          <details className={`group w-full ${styles.details}`}>
+            <summary className="block bg-amber-50 font-bold font-zenMaruGothic p-4 relative rounded-2xl text-2xl w-full group-open:rounded-b-none">
               <p className="absolute outline outline-offset-2 rounded text-rose-400 text-xs -rotate-45">
                 大好評で
                 <br />
@@ -48,7 +48,7 @@ export default function History(): JSX.Element {
             >
               イベントの様子はこちら！
               <ArrowTopRightOnSquareIcon
-                className={`${styles.arrowTopRight} size-5`}
+                className={`size-5 ${styles.arrowTopRight}`}
               />
             </Link>
           </details>

diff --git a/app/history/programs.tsx b/app/history/programs.tsx
@@ -20,7 +20,9 @@ export function Programs({
               {program.date.dayOfWeek})
             </p>
             <p className="space-x-1">
-              <b className="badge badge-outline badge-xs">場所</b>
+              <b className="bg-gray-100 border border-current px-1.5 rounded-3xl text-xs w-fit">
+                場所
+              </b>
               <span>{program.venue}</span>
             </p>
           </li>

diff --git a/app/kanto_event/page.tsx b/app/kanto_event/page.tsx
@@ -123,9 +123,7 @@ export default function KantoEvent(): JSX.Element {
       />
       <Schedules schedules={schedules} />
       <section className="mx-auto p-2 text-center w-max">
-        <p className="font-bold text-sm md:text-xl">
-          全日程参加が必須となります。
-        </p>
+        <b className="text-lg md:text-xl">全日程参加が必須となります。</b>
         <p className="mb-3">
           <Link
             href={`#${guideline.anchorLink}`}
@@ -134,7 +132,7 @@ export default function KantoEvent(): JSX.Element {
             応募要項
           </Link>
           をご確認の上、
-          <br />
+          <br className="sm:hidden" />
           応募画面からお申し込みください。
         </p>
         <LineApply lineLink={KANTO_LINE} />

diff --git a/app/kanto_event/procedure.tsx b/app/kanto_event/procedure.tsx
@@ -11,7 +11,7 @@ export function Procedure({
   return (
     <section className="px-2 space-y-4 text-center">
       <h2 className="font-bold font-zenMaruGothic text-3xl">応募手順</h2>
-      <ul className="mx-auto space-y-2 text-sm w-80">
+      <ul className="max-w-lg mx-auto space-y-2 text-sm">
         <Step index={1}>
           <p>
             <Link
@@ -20,15 +20,15 @@ export function Procedure({
             >
               LINE公式アカウント
             </Link>
-            を<br />
+            を<br className="sm:hidden" />
             友達追加してトーク画面へ
           </p>
           <LineAddFriends linkLink={guideline.lineLink} />
         </Step>
         <Step index={2}>
           <p>
             トーク画面メニューの
-            <br />
+            <br className="sm:hidden" />
             <b>「参加申込はこちら」</b>をタップ
           </p>
         </Step>
@@ -41,7 +41,7 @@ export function Procedure({
           </p>
           <p>
             担当者よりご参加の確定、及び、
-            <br />
+            <br className="sm:hidden" />
             その他のご連絡をさせて頂きます。
           </p>
         </Step>

diff --git a/app/kanto_event/qAndA.tsx b/app/kanto_event/qAndA.tsx
@@ -24,7 +24,7 @@ export function QA({
           <details
             key={qAndA.title}
             open={index === 0}
-            className={`rounded-2xl w-full ${styles.details}`}
+            className={`w-full ${styles.details}`}
           >
             <summary className="block bg-sky-50 p-2 relative rounded-2xl text-base text-center">
               {qAndA.title}

diff --git a/app/kanto_event/requirement.tsx b/app/kanto_event/requirement.tsx
@@ -21,7 +21,7 @@ export function Requirement({
           募集を終了します。
         </p>
       </div>
-      <div className="border-2 border-sky-400 mx-auto py-2 space-y-2 text-center text-sm w-80 sm:hidden">
+      <div className="border-2 border-sky-400 mx-auto py-2 space-y-2 text-center text-sm sm:hidden">
         <div className="border-1 border-b pb-2">
           <p className="font-bold">募集人数</p>
           <p>{guideline.participantsNumber}</p>

diff --git a/app/kanto_event/schedules.tsx b/app/kanto_event/schedules.tsx
@@ -9,9 +9,12 @@ export function Schedules({
   return (
     <section className="mx-auto px-2 relative space-y-2 text-center">
       <h2 className="font-bold font-zenMaruGothic text-3xl">スケジュール</h2>
-      <ul className="border-2 border-sky-400 mx-auto w-80 sm:w-max">
-        {schedules.map((schedule) => (
-          <li key={schedule.alt} className="border-b p-2 space-y-1">
+      <ul className="border-2 border-sky-400 mx-auto p-2 w-fit">
+        {schedules.map((schedule, index) => (
+          <li
+            key={schedule.alt}
+            className={`p-2 space-y-2${index !== schedules.length - 1 ? " border-b" : ""}`}
+          >
             <p className="decoration-4 decoration-sky-400 underline">
               {schedule.date.year}年
               <b className="text-2xl">{schedule.date.month}</b>月
@@ -21,21 +24,23 @@ export function Schedules({
               日(
               <b className="text-xl">{schedule.date.dayOfWeek}</b>)
             </p>
-            <p className="space-x-2">
-              <span className="badge badge-outline">開始</span>
-              <span className="font-bold">
-                10：00&nbsp;～&nbsp;17：00（予定）
+            <p className="flex">
+              <span className="bg-gray-100 border border-current px-1.5 rounded-3xl text-xs">
+                開始
               </span>
+              <b className="grow">10：00&nbsp;～&nbsp;17：00（予定）</b>
             </p>
-            <div className="flex gap-2 items-center justify-center">
-              <p className="badge badge-outline">場所</p>
-              <div>
-                <p className="font-bold">{schedule.venue}</p>
+            <div className="flex gap-2 items-center">
+              <p className="bg-gray-100 border border-current px-1.5 rounded-3xl text-xs">
+                場所
+              </p>
+              <div className="grow">
+                <b>{schedule.venue}</b>
                 <Link
                   href={schedule.googleMapLink}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="flex gap-1 items-center mx-auto underline w-max"
+                  className="flex gap-1 items-center mx-auto underline w-fit"
                 >
                   {schedule.address}
                   <ArrowTopRightOnSquareIcon className="size-4" />

diff --git a/app/kanto_event/tablist.tsx b/app/kanto_event/tablist.tsx
@@ -53,7 +53,7 @@ export function Tablist({
   }
 
   return (
-    <section className="max-w-lg mx-auto px-2 space-y-2 text-center w-80 sm:w-96">
+    <section className="max-w-lg mx-auto px-2 space-y-2 text-center sm:w-96">
       <div className="flex gap-2 mx-auto">
         {schedules.map((schedule) => (
           <button
@@ -131,45 +131,28 @@ function TabCard({
         <h3 className="font-bold mx-auto text-base">
           {time === "am" ? schedule.title.am : schedule.title.pm}
         </h3>
-        {schedule.url.am || schedule.url.pm ? (
-          <Link
-            href={time === "am" ? schedule.url.am : schedule.url.pm}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="flex font-bold gap-1 items-center mx-auto text-sm underline w-max"
-          >
-            {time === "am"
-              ? schedule.organization.am
-              : schedule.organization.pm}
-            <ArrowTopRightOnSquareIcon className="size-4" />
-          </Link>
-        ) : time === "am" ? (
-          <p className="font-bold text-sm">{schedule.organization.am}</p>
-        ) : (
-          <p className="font-bold text-sm">{schedule.organization.pm}</p>
-        )}
+        <Link
+          href={time === "am" ? schedule.url.am : schedule.url.pm}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="flex font-bold gap-1 items-center mx-auto text-sm underline w-max"
+        >
+          {time === "am" ? schedule.organization.am : schedule.organization.pm}
+          <ArrowTopRightOnSquareIcon className="size-4" />
+        </Link>
         <p className="font-bold text-sm">
           {schedule.date.year}年{schedule.date.month}月{schedule.date.day}
           日({schedule.date.dayOfWeek})&nbsp;10:00~17:00
         </p>
         <div className="flex flex-wrap gap-2 justify-center">
-          {time === "am"
-            ? schedule.tags.am.map((tag) => (
-                <span
-                  key={tag}
-                  className="badge badge-outline bg-gray-100 text-xs"
-                >
-                  {tag}
-                </span>
-              ))
-            : schedule.tags.pm.map((tag) => (
-                <span
-                  key={tag}
-                  className="badge badge-outline bg-gray-100 text-xs"
-                >
-                  {tag}
-                </span>
-              ))}
+          {(time === "am" ? schedule.tags.am : schedule.tags.pm).map((tag) => (
+            <span
+              key={tag}
+              className="bg-gray-100 border border-current h-5 px-1.5 rounded-3xl text-xs"
+            >
+              {tag}
+            </span>
+          ))}
         </div>
       </div>
     </>

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -63,7 +63,7 @@ export default function RootLayout({
     >
       <body className="font-zenKakuGothicNew">
         <Header />
-        <main className="max-w-screen-md mx-auto text-xs sm:px-12 lg:text-base">
+        <main className="max-w-screen-md mx-auto text-xs sm:px-12 sm:text-sm md:text-base">
           {children}
           {modal}
           <ScrollToTop />

diff --git a/app/partner/page.tsx b/app/partner/page.tsx
@@ -46,7 +46,7 @@ export default function SponserPage(): JSX.Element {
       {partnerAreas.map((area) => (
         <section
           key={area.menu.name}
-          className={`bg-amber-50 border-8 border-double mx-auto py-2 rounded-2xl shadow-lg space-y-4 w-72 lg:w-96 ${area.color.border}`}
+          className={`bg-amber-50 border-8 border-double mx-auto py-2 rounded-2xl shadow-lg space-y-4 w-72 sm:w-96 ${area.color.border}`}
         >
           <h2 className="font-bold font-zenMaruGothic text-3xl">
             <Link