chore: removed motion from flashable elements, css-only tooltip

Author: ovflowd

apps/site/components/Common/Partners/index.tsx

@@ -40,7 +40,7 @@ const renderSmallPartner = (partner: Partner) => {
       key={partner.id}
       size="small"
       href={partner.href}
-      title={partner.name}
+      data-tooltip={partner.name}
     >
       <Logo.Favicon />
     </PartnerButton>

apps/site/components/withMetaBar.tsx

@@ -35,11 +35,7 @@ const WithMetaBar: FC = () => {
   // Since we cannot show the same number of avatars in Mobile / Tablet
   // resolution as we do on desktop and there is overflow, we are adjusting
   // the number of avatars manually for the resolutions below
-  const isMobileResolution = useMediaQuery('(max-width: 890px)');
-
-  const isTabletResolution = useMediaQuery(
-    '(min-width: 890px) and (max-width: 1280px)'
-  );
+  const isSmallerThanDesktop = useMediaQuery('(max-width: 1280px)');
 
   return (
     <MetaBar
@@ -55,7 +51,7 @@ const WithMetaBar: FC = () => {
           )]: (
             <WithAvatarGroup
               usernames={usernames}
-              limit={isMobileResolution ? 7 : isTabletResolution ? 5 : 9}
+              limit={isSmallerThanDesktop ? 5 : 8}
             />
           ),
         }),

apps/site/next-env.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
 /// <reference types="next/navigation-types/compat/navigation" />
-import './.next/types/routes.d.ts';
+import './.next/dev/types/routes.d.ts';
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

packages/ui-components/src/Common/Badge/index.module.css

@@ -38,61 +38,6 @@
     @apply bg-neutral-800;
   }
 
-  &[data-tooltip] {
-    @apply relative
-      cursor-help;
-  }
-
-  &[data-tooltip]::after {
-    @apply pointer-events-none
-      absolute
-      top-full
-      left-1/2
-      z-10
-      mt-2
-      w-max
-      -translate-x-1/2
-      rounded-md
-      bg-neutral-900
-      px-2.5
-      py-1.5
-      text-xs
-      font-medium
-      text-white
-      opacity-0
-      transition-opacity
-      dark:bg-neutral-100
-      dark:text-neutral-900;
-
-    content: attr(data-tooltip);
-  }
-
-  &[data-tooltip]::before {
-    @apply pointer-events-none
-      absolute
-      top-full
-      left-1/2
-      z-10
-      mt-1
-      h-2
-      w-2
-      -translate-x-1/2
-      rotate-45
-      bg-neutral-900
-      opacity-0
-      transition-opacity
-      dark:bg-neutral-100;
-
-    content: '';
-  }
-
-  &[data-tooltip]:hover::after,
-  &[data-tooltip]:hover::before,
-  &[data-tooltip]:focus-visible::after,
-  &[data-tooltip]:focus-visible::before {
-    @apply opacity-100;
-  }
-
   &.circular {
     @apply font-ibm-plex-mono
       inline-flex

packages/ui-components/src/Common/BaseButton/index.module.css

@@ -9,8 +9,7 @@
     px-4.5
     py-2.5
     text-center
-    font-semibold
-    motion-safe:transition-colors;
+    font-semibold;
 
   svg {
     @apply size-5;
@@ -124,7 +123,7 @@
       after:mx-auto
       after:h-px
       after:w-2/5
-      after:bg-gradient-to-r
+      after:bg-linear-to-r
       after:from-green-600/0
       after:via-green-600
       after:to-green-600/0

packages/ui-components/src/Common/DataTag/index.module.css

@@ -9,61 +9,6 @@
     font-semibold
     text-white;
 
-  &[data-tooltip] {
-    @apply relative
-      cursor-help;
-  }
-
-  &[data-tooltip]::after {
-    @apply pointer-events-none
-      absolute
-      top-full
-      left-1/2
-      z-10
-      mt-2
-      w-max
-      -translate-x-1/2
-      rounded-md
-      bg-neutral-900
-      px-2.5
-      py-1.5
-      text-xs
-      font-medium
-      text-white
-      opacity-0
-      transition-opacity
-      dark:bg-neutral-100
-      dark:text-neutral-900;
-
-    content: attr(data-tooltip);
-  }
-
-  &[data-tooltip]::before {
-    @apply pointer-events-none
-      absolute
-      top-full
-      left-1/2
-      z-10
-      mt-1
-      h-2
-      w-2
-      -translate-x-1/2
-      rotate-45
-      bg-neutral-900
-      opacity-0
-      transition-opacity
-      dark:bg-neutral-100;
-
-    content: '';
-  }
-
-  &[data-tooltip]:hover::after,
-  &[data-tooltip]:hover::before,
-  &[data-tooltip]:focus-visible::after,
-  &[data-tooltip]:focus-visible::before {
-    @apply opacity-100;
-  }
-
   &.lg {
     @apply size-12
       text-2xl;

packages/ui-components/src/Common/Search/Modal/index.module.css

@@ -24,14 +24,12 @@
     p-1.5
     text-neutral-900
     hover:bg-neutral-100
-    motion-safe:transition-colors
     dark:border-neutral-900
     dark:bg-neutral-950
     dark:text-neutral-200;
 
   &:hover {
     @apply bg-neutral-100
-      motion-safe:transition-colors
       motion-safe:duration-300
       dark:bg-neutral-900;
 

packages/ui-components/src/Common/ThemeToggle/index.module.css

@@ -5,7 +5,6 @@
     rounded-md
     p-2
     text-neutral-700
-    motion-safe:transition-colors
     dark:text-neutral-300;
 
   &:hover {

packages/ui-components/src/Containers/NavBar/NavItem/index.module.css

@@ -6,8 +6,7 @@
     gap-2
     rounded-sm
     px-3
-    py-2
-    motion-safe:transition-colors;
+    py-2;
 
   .label {
     @apply text-base

packages/ui-components/src/styles/base.css

@@ -15,3 +15,76 @@ body {
     dark:bg-neutral-950
     dark:text-white;
 }
+
+[data-tooltip] {
+  @apply relative
+    cursor-help;
+
+  &::after {
+    @apply pointer-events-none
+      absolute
+      top-full
+      left-1/2
+      z-10
+      mt-2
+      w-max
+      max-w-64
+      -translate-x-1/2
+      rounded-md
+      border
+      border-neutral-200
+      bg-white
+      px-2.5
+      py-1.5
+      text-sm
+      font-medium
+      text-neutral-900
+      opacity-0
+      shadow-lg
+      transition-opacity;
+
+    content: attr(data-tooltip);
+  }
+
+  &::before {
+    @apply pointer-events-none
+      absolute
+      top-full
+      left-1/2
+      z-10
+      mt-1
+      h-2
+      w-2
+      -translate-x-1/2
+      rotate-45
+      border
+      border-r-0
+      border-b-0
+      border-neutral-200
+      bg-white
+      opacity-0
+      transition-opacity;
+
+    content: '';
+  }
+
+  &:hover::after,
+  &:hover::before,
+  &:focus-visible::after,
+  &:focus-visible::before {
+    @apply opacity-100;
+  }
+}
+
+[data-theme='dark'] [data-tooltip] {
+  &::after {
+    @apply border-neutral-900
+      bg-neutral-950
+      text-white;
+  }
+
+  &::before {
+    @apply border-neutral-900
+      bg-neutral-950;
+  }
+}