✨feat: add scale down up animation to button (#961)

OpenUp-LabTakizawa · Sep 19, 2024 · 593542d · 593542d
1 parent 9ff65f8
commit 593542d
Show file tree

Hide file tree

Showing 9 changed files with 56 additions and 43 deletions.
diff --git a/app/components/layout/heading.tsx b/app/components/layout/heading.tsx
@@ -9,7 +9,7 @@ export function Heading({
   menus: Menu[]
 }>): JSX.Element {
   return (
-    <section className="px-4 space-y-6">
+    <section className="px-3 space-y-6">
       <Breadcrumb menus={menus} />
       <h1
         className={`fade-in-up font-bold font-zenMaruGothic text-4xl text-center ${menus.length === 1 ? menus[0].textColor : menus.at(-1)?.textColor}`}
@@ -29,19 +29,25 @@ function Breadcrumb({
     <div className="breadcrumbs text-sm">
       <ul>
         <li>
-          <Link href="/" className="gap-1 underline">
+          <Link
+            href="/"
+            className="block gap-1 p-1 rounded-xl scale-down-up underline hover:bg-gray-200"
+          >
             <HomeIcon className="size-5 text-sky-400" />
             ホーム
           </Link>
         </li>
         {menus.map((menu, index) => (
           <li key={menu.name} className={menu.textColor}>
             {menus.length > 1 && index === 0 ? (
-              <Link href={menu.pathname} className="underline">
+              <Link
+                href={menu.pathname}
+                className="block p-1 rounded-xl scale-down-up underline hover:bg-gray-200"
+              >
                 {menu.name}
               </Link>
             ) : (
-              menu.name
+              <span className="p-1">{menu.name}</span>
             )}
           </li>
         ))}

diff --git a/app/footer.tsx b/app/footer.tsx
@@ -5,14 +5,14 @@ import { NAVIGATION } from "./lib/constant.ts"
 
 export function Footer(): JSX.Element {
   return (
-    <footer className="bg-base-300 space-y-2 text-center text-sm">
+    <footer className="bg-stone-200 space-y-2 text-center text-sm">
       <nav>
-        <ul className="gap-4 grid grid-cols-3 justify-center mx-auto p-2 w-fit sm:gap-6 sm:grid-cols-5">
+        <ul className="gap-4 grid grid-cols-3 justify-center mx-auto p-1 w-fit sm:gap-6 sm:grid-cols-5">
           {NAVIGATION.map((menu) => (
             <li key={menu.name}>
               <Link
                 href={menu.pathname}
-                className="font-bold text-orange-400 hover:underline"
+                className="block font-bold px-3 py-1 rounded-xl scale-down-up text-orange-400 hover:bg-gray-300"
               >
                 {menu.name}
               </Link>

diff --git a/app/globals.css b/app/globals.css
@@ -25,6 +25,13 @@ img {
   animation-range: contain 0% contain 50%;
 }
 
+.scale-down-up:focus {
+  animation: scale-down-up 200ms;
+  & > img {
+    animation: scale-down-up 200ms;
+  }
+}
+
 .scale-up-down {
   animation: scale-up-down 2s;
   &:nth-child(2) {
@@ -110,6 +117,16 @@ img {
   }
 }
 
+@keyframes scale-down-up {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(0.9);
+  }
+}
+
 @keyframes scale-up-down {
   0%,
   100% {

diff --git a/app/header.tsx b/app/header.tsx
@@ -42,10 +42,10 @@ export function Header(): JSX.Element {
 
   return (
     <header
-      className={`bg-white navbar${pathname !== "/" && headerHeight < scrollState.scrollY && scrollState.isScrollDown ? " transition sticky top-0 z-20 -translate-y-20" : ""}${pathname !== "/" && (scrollState.scrollY < headerHeight || !scrollState.isScrollDown) ? " transition sticky top-0 z-20" : ""}`}
+      className={`bg-white flex items-center p-2 w-full${pathname !== "/" && headerHeight < scrollState.scrollY && scrollState.isScrollDown ? " transition sticky top-0 z-20 -translate-y-20" : ""}${pathname !== "/" && (scrollState.scrollY < headerHeight || !scrollState.isScrollDown) ? " transition sticky top-0 z-20" : ""}`}
     >
-      <div className="navbar-start grow">
-        <Link href="/" className="px-4 tilt-shaking">
+      <div className="grow">
+        <Link href="/" className="block mx-4 tilt-shaking w-fit">
           <Image
             src="/caravan-kidstec_logo_line.avif"
             width={192}
@@ -55,24 +55,17 @@ export function Header(): JSX.Element {
           />
         </Link>
       </div>
-      <nav className="navbar-end w-max z-30">
-        <DropdownMenu
-          className="lg:hidden"
-          isScrollDown={scrollState.isScrollDown}
-        />
-        <Navigation
-          className="hidden lg:flex"
-          isScrollDown={scrollState.isScrollDown}
-        />
+      <nav className="w-fit z-30">
+        <DropdownMenu isScrollDown={scrollState.isScrollDown} />
+        <Navigation isScrollDown={scrollState.isScrollDown} />
       </nav>
     </header>
   )
 }
 
 function DropdownMenu({
-  className = "",
   isScrollDown,
-}: Readonly<{ className?: string; isScrollDown: boolean }>): JSX.Element {
+}: Readonly<{ isScrollDown: boolean }>): JSX.Element {
   const ref: RefObject<HTMLDetailsElement> = useRef<HTMLDetailsElement>(null)
 
   useEffect(() => {
@@ -95,20 +88,17 @@ function DropdownMenu({
   })
 
   return (
-    <details
-      ref={ref}
-      className={`dropdown dropdown-end${className === "" ? "" : ` ${className}`}`}
-    >
-      <summary role="button" className="btn btn-ghost lg:hidden">
+    <details ref={ref} className="inline-block relative lg:hidden">
+      <summary role="button" className="btn btn-ghost h-fit min-h-0 p-1">
         <Bars3BottomRightIcon className="size-7" />
       </summary>
       <nav>
-        <ul className="bg-white dropdown-content menu menu-sm rounded-2xl shadow">
+        <ul className="absolute bg-white end-0 flex flex-col gap-1 p-3 rounded-2xl shadow text-sm">
           {NAVIGATION.map((menu) => (
             <li key={menu.name}>
               <Link
                 href={menu.pathname}
-                className="font-bold text-nowrap text-orange-400"
+                className="block font-bold px-3 py-1 rounded-xl scale-down-up text-nowrap text-orange-400 focus:bg-gray-400 hover:bg-gray-200"
               >
                 {menu.name}
               </Link>
@@ -121,9 +111,8 @@ function DropdownMenu({
 }
 
 function Navigation({
-  className = "",
   isScrollDown,
-}: Readonly<{ className?: string; isScrollDown: boolean }>): JSX.Element {
+}: Readonly<{ isScrollDown: boolean }>): JSX.Element {
   const ref: RefObject<Map<string, HTMLDetailsElement>> = useRef<
     Map<string, HTMLDetailsElement>
   >(new Map<string, HTMLDetailsElement>())
@@ -157,12 +146,13 @@ function Navigation({
   }
 
   return (
-    <ul
-      className={`flex-nowrap menu menu-horizontal p-0${className === "" ? "" : ` ${className}`}`}
-    >
+    <ul className="flex flex-nowrap gap-1 hidden p-0 lg:flex">
       {NAVIGATION.map((menu) => (
         <li key={menu.name}>
-          <Link href={menu.pathname} className="font-bold text-orange-400">
+          <Link
+            href={menu.pathname}
+            className="block font-bold px-3 py-1 rounded-xl scale-down-up text-orange-400 hover:bg-gray-200"
+          >
             {menu.name}
           </Link>
         </li>

diff --git a/app/kanto_event/privacy-policy/page.tsx b/app/kanto_event/privacy-policy/page.tsx
@@ -19,7 +19,7 @@ export default function PrivacyPolicy(): JSX.Element {
       <p className="px-4 text-xs sm:text-sm">
         こどもテックキャラバンの個人情報は、株式会社オープンアップグループ（以下「当社」）が代表して取得しておりますので、当社の個人情報保護方針を以下にお知らせします。
       </p>
-      <section className="bg-base-200 leading-5 m-4 p-4 rounded-2xl space-y-4 text-xs sm:leading-7 sm:text-sm">
+      <section className="bg-gray-100 leading-5 m-4 p-4 rounded-2xl space-y-4 text-xs sm:leading-7 sm:text-sm">
         <h1 className="font-bold text-2xl text-center">個人情報保護方針</h1>
         <p>
           当社は、個人情報を大切に取り扱い、個人の権利利益を保護することを重要な社会的責務と考えています。
@@ -84,7 +84,7 @@ export default function PrivacyPolicy(): JSX.Element {
           </p>
         </section>
       </section>
-      <section className="bg-base-200 leading-5 m-4 p-4 rounded-2xl space-y-4  text-xs sm:leading-7 sm:text-sm">
+      <section className="bg-gray-100 leading-5 m-4 p-4 rounded-2xl space-y-4  text-xs sm:leading-7 sm:text-sm">
         <h2 className="font-bold text-2xl text-center">
           特定個人情報の適正な取扱いに関する基本方針
         </h2>
@@ -126,7 +126,7 @@ export default function PrivacyPolicy(): JSX.Element {
           </p>
         </section>
       </section>
-      <section className="bg-base-200 leading-5 m-4 p-4 rounded-2xl space-y-4 text-xs sm:leading-7 sm:text-sm">
+      <section className="bg-gray-100 leading-5 m-4 p-4 rounded-2xl space-y-4 text-xs sm:leading-7 sm:text-sm">
         <h2 className="font-bold text-2xl text-center">
           個人情報の取り扱いに関して
         </h2>

diff --git a/app/kanto_event/tablist.tsx b/app/kanto_event/tablist.tsx
@@ -157,15 +157,15 @@ function TabCard({
             ? schedule.tags.am.map((tag) => (
                 <span
                   key={tag}
-                  className="badge badge-outline bg-base-200 text-xs"
+                  className="badge badge-outline bg-gray-100 text-xs"
                 >
                   {tag}
                 </span>
               ))
             : schedule.tags.pm.map((tag) => (
                 <span
                   key={tag}
-                  className="badge badge-outline bg-base-200 text-xs"
+                  className="badge badge-outline bg-gray-100 text-xs"
                 >
                   {tag}
                 </span>

diff --git a/app/page.tsx b/app/page.tsx
@@ -13,13 +13,13 @@ export default function Home(): JSX.Element {
       {/* block className is necessary for Safari behavior */}
       <Link
         href={KANTO_EVENT.pathname}
-        className="block sticky top-0 w-full z-20 sm:inline sm:static"
+        className="block scale-down-up sticky top-0 w-full z-20 sm:inline sm:static"
       >
         <Image
           src="/202410_kanto_banner_start.avif"
           width={540}
           height={162}
-          alt="イベント詳細はこちら"
+          alt="こどもテックキャラバン-関東イベントバナー"
           priority={true}
           className="w-full"
         />

diff --git a/app/partner/partners.tsx b/app/partner/partners.tsx
@@ -12,7 +12,7 @@ export function Partners({
       {partners.map((partner) => (
         <section
           key={partner.name}
-          className="bg-base-200 p-2 rounded-2xl shadow-lg space-y-2"
+          className="bg-gray-100 p-2 rounded-2xl shadow-lg space-y-2"
         >
           <div className="bg-white col-span-2 flex h-full items-center rounded-2xl sm:col-span-1">
             <Image

diff --git a/app/sponser/page.tsx b/app/sponser/page.tsx
@@ -36,7 +36,7 @@ export default function SponserPage(): JSX.Element {
         {sponsers.map((sponser) => (
           <section
             key={sponser.name}
-            className="bg-base-200 gap-1 grid grid-cols-6 items-center min-h-32 p-1 rounded-2xl shadow-lg sm:grid-cols-2"
+            className="bg-gray-100 gap-1 grid grid-cols-6 items-center min-h-32 p-1 rounded-2xl shadow-lg sm:grid-cols-2"
           >
             <div className="bg-white col-span-2 flex h-full items-center rounded-2xl sm:px-0 sm:col-span-1">
               <Image