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 [firstColor, setFirstColor] = useState(getRandomGrey());
-  const [secondColor, setSecondColor] = useState(getRandomColor());
+  const [secondColor, setSecondColor] = useState(getRandomGrey());
   const [switched, setSwitched] = useState(true);
 
   if (switched !== side) {
-    setFirstColor(getRandomColor());
+    setFirstColor(getRandomGrey());
-    setSecondColor(getRandomColor());
+    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>

package.json

@@ -26,7 +26,7 @@
     "@vercel/analytics": "^1.1.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "next": "^14.0.4",
+    "next": "^14.1.0",
     "react": "^18",
     "react-dom": "^18",
     "react-hook-form": "^7.48.2",

public/maintenance.html

@@ -14,7 +14,7 @@
             var square = document.createElement('div');
             square.style.width = size + 'px';
             square.style.height = size + 'px';
-            square.style.backgroundColor = getRandomColor();
+            square.style.backgroundColor = getRandomGrey();
             square.style.position = 'absolute';
             square.style.left = i * (size + margin) + 'px';
             square.style.top = j * (size + margin) + 'px';
@@ -23,11 +23,12 @@
         }
       };
 
-      function getRandomColor() {
+      function getRandomGrey() {
-        var letters = '0123456789ABCDEF';
+        const letters = 'ABCDEF';
-        var color = '#';
+        let color = '#';
-        for (var i = 0; i < 6; i++) {
+        const greyShade = Math.floor(Math.random() * 6);
-          color += letters[Math.floor(Math.random() * 16)];
+        for (let i = 0; i < 6; i++) {
+          color += letters[greyShade];
         }
         return color;
       }

utils/getRandomColor.ts

@@ -1,8 +0,0 @@
-export function getRandomColor() {
-  const letters = '6789ABCDEF';
-  let color = '#';
-  for (let i = 0; i < 6; i++) {
-    color += letters[Math.floor(Math.random() * 10)];
-  }
-  return color;
-}

utils/getRandomGrey.ts

@@ -0,0 +1,9 @@
+export function getRandomGrey() {
+  const letters = 'ABCDEF';
+  let color = '#';
+  const greyShade = Math.floor(Math.random() * 6);
+  for (let i = 0; i < 6; i++) {
+    color += letters[greyShade];
+  }
+  return color;
+}