Fix color mode responsiveness of skeleton and hint

rucio · Sep 3, 2024 · dd96cb0 · dd96cb0
1 parent 0aeef31
commit dd96cb0
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 2 deletions.
diff --git a/src/component-library/outputtailwind.css b/src/component-library/outputtailwind.css
@@ -3270,6 +3270,11 @@ html {
   color: rgb(167 139 250 / var(--tw-text-opacity));
 }
 
+.dark .hover\:dark\:text-brand-500:hover {
+  --tw-text-opacity: 1;
+  color: rgb(139 92 246 / var(--tw-text-opacity));
+}
+
 .dark .dark\:focus\:border-brand-500:focus {
   --tw-border-opacity: 1;
   border-color: rgb(139 92 246 / var(--tw-border-opacity));

diff --git a/src/component-library/ui/hint-link.tsx b/src/component-library/ui/hint-link.tsx
@@ -6,7 +6,7 @@ export const HintLink = ({ className, href, ...props }: { className?: string; hr
             href={href}
             target="_blank"
             rel="noreferrer"
-            className={cn('text-neutral-500 dark:text-neutral-400 font-semibold hover:text-brand-500', className)}
+            className={cn('text-neutral-500 dark:text-neutral-400 font-semibold hover:text-brand-500 hover:dark:text-brand-500', className)}
             {...props}
         >
             ?

diff --git a/src/component-library/ui/skeleton.tsx b/src/component-library/ui/skeleton.tsx
@@ -1,7 +1,7 @@
 import { cn } from '@/component-library/utils';
 
 function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-    return <div className={cn('animate-pulse rounded-md bg-neutral-800', className)} {...props} />;
+    return <div className={cn('animate-pulse rounded-md bg-neutral-100 dark:bg-neutral-800', className)} {...props} />;
 }
 
 export { Skeleton };