Decrese size

assets/base.css

@@ -98,3 +98,37 @@ body {
 a {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
+
+.animated {
+  -webkit-animation-duration: 1s;
+  animation-duration: 1s;
+  -webkit-animation-duration: 1s;
+  animation-duration: 1s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+
+.fadeIn {
+  -webkit-animation-name: fadeIn;
+  animation-name: fadeIn;
+}
+
+@-webkit-keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}

components/core/Toggle/Toggle.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from 'react'
 import { Switch } from '@headlessui/react'
-import { HiSun, HiMoon } from 'react-icons/hi'
+import { Moon, Sun } from '@components/icon'
 interface Props {
   className?: string
   checked: boolean
@@ -35,7 +35,7 @@ const Toggle: FC<Props> = ({ className, checked, onChange }) => {
                 : 'opacity-100 ease-in duration-150'
             } absolute inset-0 h-full w-full flex items-center justify-center transition-opacity`}
           >
-            <HiSun className="h-3 w-3 text-gray-400" />
+            <Sun className="h-3 w-3 text-gray-400" />
           </span>
           <span
             className={`${
@@ -44,7 +44,7 @@ const Toggle: FC<Props> = ({ className, checked, onChange }) => {
                 : 'opacity-0 ease-out duration-150'
             } opacity-0 ease-out duration-150 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity`}
           >
-            <HiMoon className="h-3 w-3 text-yellow-400" />
+            <Moon className="h-3 w-3 text-yellow-400" />
           </span>
         </span>
       </span>

package.json

@@ -22,10 +22,7 @@
     "@headlessui/react": "^0.2.0",
     "@react-aria/overlays": "^3.4.0",
     "@tailwindcss/ui": "^0.6.2",
-    "animate.css": "^4.1.1",
     "bowser": "^2.11.0",
-    "bunyan": "^1.8.14",
-    "bunyan-prettystream": "^0.1.3",
     "classnames": "^2.2.6",
     "cookie": "^0.4.1",
     "js-cookie": "^2.2.1",
@@ -35,16 +32,12 @@
     "next": "^9.5.6-canary.14",
     "next-seo": "^4.11.0",
     "next-themes": "^0.0.4",
-    "nextjs-progressbar": "^0.0.6",
     "postcss-import": "^13.0.0",
     "postcss-nesting": "^7.0.1",
     "react": "^16.14.0",
     "react-aria": "^3.0.0",
     "react-dom": "^16.14.0",
-    "react-icons": "^3.11.0",
     "react-merge-refs": "^1.1.0",
-    "react-swipeable-views": "^0.13.9",
-    "react-swipeable-views-utils": "^0.14.0-alpha.0",
     "react-ticker": "^1.2.2",
     "swr": "^0.3.3",
     "tailwindcss": "^1.9"
@@ -69,7 +62,9 @@
     "postcss-flexbugs-fixes": "^4.2.1",
     "postcss-preset-env": "^6.7.0",
     "prettier": "^2.1.2",
-    "typescript": "^4.0.3"
+    "typescript": "^4.0.3",
+    "bunyan": "^1.8.14",
+    "bunyan-prettystream": "^0.1.3"
   },
   "resolutions": {
     "webpack": "^5.0.0-beta.30"

pages/search.tsx

@@ -111,12 +111,12 @@ export default function Search({
           </ul>
         </div>
         <div className="col-span-8">
-          <div className="mb-12 animate__animated animate__fadeIn">
+          <div className="mb-12 transition ease-in duration-75">
             {data ? (
               <>
                 <span
-                  className={cn('animate__animated', {
+                  className={cn('animated', {
-                    animate__fadeIn: data.found,
+                    fadeIn: data.found,
                     hidden: !data.found,
                   })}
                 >
@@ -124,8 +124,8 @@ export default function Search({
                   <strong>{q}</strong>"
                 </span>
                 <span
-                  className={cn('animate__animated', {
+                  className={cn('animated', {
-                    animate__fadeIn: !data.found,
+                    fadeIn: !data.found,
                     hidden: data.found,
                   })}
                 >
@@ -145,7 +145,7 @@ export default function Search({
                 <ProductCard
                   variant="simple"
                   key={node.path}
-                  className="animate__animated animate__fadeIn"
+                  className="animated fadeIn"
                   product={node}
                   imgWidth={480}
                   imgHeight={480}
@@ -157,7 +157,7 @@ export default function Search({
               {rangeMap(12, (i) => (
                 <Skeleton
                   key={i}
-                  className="w-full animate__animated animate__fadeIn"
+                  className="w-full animated fadeIn"
                   height={325}
                 />
               ))}