style: color adjustments

components/custom/background/tile/tile.tsx

@@ -14,7 +14,7 @@ export function Tile({ newsA, newsB }: CardProps) {
   const [delayed, setDelayed] = useState(true);
 
   useEffect(() => {
-    const randomDelay = Math.floor(Math.random() * 5000);
+    const randomDelay = Math.floor(Math.random() * 10000);
 
     const interval = setInterval(
       () => {
@@ -26,7 +26,7 @@ export function Tile({ newsA, newsB }: CardProps) {
           setDelayed(false);
         }, 500 / 2);
       },
-      delayed ? randomDelay : randomDelay + 3000
+      delayed ? randomDelay : randomDelay + 10000
     );
 
     return () => clearInterval(interval);

components/custom/background/tile/tileContent.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { z } from 'zod';
-import { getRandomColor } from '../../../../utils/getRandomColor';
+import { getRandomGrey } from '../../../../utils/getRandomGrey';
 import { NewsTileSchema } from '../../../../utils/schemas';
 
 type CardContentProps = {
@@ -9,13 +9,13 @@ type CardContentProps = {
 };
 
 export function TileContent({ story, side }: CardContentProps) {
-  const [firstColor, setFirstColor] = useState(getRandomColor());
-  const [secondColor, setSecondColor] = useState(getRandomColor());
+  const [firstColor, setFirstColor] = useState(getRandomGrey());
+  const [secondColor, setSecondColor] = useState(getRandomGrey());
   const [switched, setSwitched] = useState(true);
 
   if (switched !== side) {
-    setFirstColor(getRandomColor());
-    setSecondColor(getRandomColor());
+    setFirstColor(getRandomGrey());
+    setSecondColor(getRandomGrey());
 
     setSwitched(side);
   }
@@ -26,7 +26,8 @@ export function TileContent({ story, side }: CardContentProps) {
     <div
       className={`h-40 w-40 overflow-hidden rounded-lg p-6 shadow-sm`}
       style={{
-        backgroundColor: `${color}`
+        backgroundColor: `${color}`,
+        color: '#808080'
       }}
     >
       <h1 className='overflow-auto font-semibold'>{story.title}</h1>