CR - Move CSS inside of component folder

FilecoinFoundationWeb · Feb 11, 2025 · 5efed44 · 5efed44
1 parent 266526c
commit 5efed44
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 27 deletions.
diff --git a/apps/site/src/app/_components/CopyToClipboard.tsx b/apps/site/src/app/_components/CopyToClipboard.tsx
@@ -13,7 +13,7 @@ import type { TouchTarget } from '@/types/touchTargetType'
 import { NOTIFICATION_DIALOG_DURATION_MS } from '@/constants/notificationDialogDuration'
 
 import { Icon } from '@/components/Icon'
-import { NotificationDialog } from '@/components/NotificationDialog'
+import { NotificationDialog } from '@/components/NotificationDialog/NotificationDialog'
 
 type CopyToClipboardProps = {
   text: string

diff --git a/apps/site/src/app/_components/NewsletterForm.tsx b/apps/site/src/app/_components/NewsletterForm.tsx
@@ -14,7 +14,7 @@ import { Button } from '@/components/Button'
 import { ControlledForm } from '@/components/Form/ControlledForm'
 import { ControlledFormInput } from '@/components/Form/ControlledFormInput'
 import type { IconProps } from '@/components/Icon'
-import { NotificationDialog } from '@/components/NotificationDialog'
+import { NotificationDialog } from '@/components/NotificationDialog/NotificationDialog'
 
 const NewsletterSchema = z.object({
   email: z

diff --git a/apps/site/src/app/_components/NotificationDialog/NotificationDialog.css b/apps/site/src/app/_components/NotificationDialog/NotificationDialog.css
@@ -0,0 +1,29 @@
+/* animations.css */
+@keyframes slide-in-from-top {
+    from {
+      transform: translateY(-100%);
+    }
+    to {
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes shrink-and-fade-out {
+    from {
+      transform: scale(1);
+      opacity: 1;
+    }
+    to {
+      transform: scale(0.9);
+      opacity: 0;
+    }
+  }
+
+  .animate-slide-in-from-top {
+    animation: slide-in-from-top 300ms cubic-bezier(0.41, 0.73, 0.51, 1.02);
+  }
+
+  .animate-shrink-and-fade-out {
+    animation: shrink-and-fade-out 150ms ease-in forwards;
+  }
+
diff --git a/...rc/app/_components/NotificationDialog.tsx → ...NotificationDialog/NotificationDialog.tsx b/...rc/app/_components/NotificationDialog.tsx → ...NotificationDialog/NotificationDialog.tsx
@@ -9,6 +9,8 @@ import { clsx } from 'clsx'
 
 import { Icon, type IconProps } from '@/components/Icon'
 
+import './NotificationDialog.css'
+
 type NotificationDialogProps = {
   isOpen: boolean
   setIsOpen: (arg: boolean) => void

diff --git a/apps/site/src/app/_styles/globals.css b/apps/site/src/app/_styles/globals.css
@@ -21,30 +21,6 @@
   --color-brand-800: #08072e;
 
   --spacing-readable: 60ch;
-
-  --animate-slide-in-from-top: slide-in-from-top 300ms
-    cubic-bezier(0.41, 0.73, 0.51, 1.02);
-  --animate-shrink-and-fade-out: shrink-and-fade-out 150ms ease-in forwards;
-
-  @keyframes slide-in-from-top {
-    from {
-      transform: translateY(-100%);
-    }
-    to {
-      transform: translateY(0);
-    }
-  }
-
-  @keyframes shrink-and-fade-out {
-    from {
-      transform: scale(1);
-      opacity: 1;
-    }
-    to {
-      transform: scale(0.9);
-      opacity: 0;
-    }
-  }
 }
 
 @utility brand-outline {

diff --git a/apps/site/src/app/ecosystem-explorer/project-form/components/ErrorNotification.tsx b/apps/site/src/app/ecosystem-explorer/project-form/components/ErrorNotification.tsx
@@ -8,7 +8,7 @@ import { NOTIFICATION_DIALOG_ERROR_DURATION_MS } from '@/constants/notificationD
 
 import { useUpdateSearchParams } from '@/hooks/useUpdateSearchParams'
 
-import { NotificationDialog } from '@/components/NotificationDialog'
+import { NotificationDialog } from '@/components/NotificationDialog/NotificationDialog'
 
 type ErrorMessageProps = {
   message: string