🦄 Capitlised words on splash screen and fixed rainbow route for remix v2 main

app/src/components/Login/Login.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Flex, Button, FormControl, Input, Spinner } from '@chakra-ui/react';
+import { Flex, Button, FormControl, Input, Spinner, Link } from '@chakra-ui/react';
 import { useFetcher } from '@remix-run/react';
 
 export const Login = (props) => {
@@ -65,7 +65,7 @@ export const Login = (props) => {
               borderRadius="5px"
               outline="none"
               onChange={(e) => setUsername(e?.target?.value)}
-              placeholder="💌 Email"
+              placeholder="Email 💌"
               type="email"
               value={username}
             />
@@ -84,7 +84,7 @@ export const Login = (props) => {
               borderRadius="5px"
               outline="none"
               onChange={(e) => setPassword(e?.target?.value)}
-              placeholder="🔑 Password"
+              placeholder="Password 🔑"
               type="password"
               value={password}
             />

app/src/components/textAnimation1.tsx

@@ -1,56 +1,65 @@
-import React from "react"
+import React from 'react';
-import { Box } from "@chakra-ui/react"
+import { Box } from '@chakra-ui/react';
 
-import { RainbowText } from "./rainbowText"
+import { RainbowText } from './rainbowText';
 
 export const TextAnimation1 = (props) => {
   const texts = React.useMemo(() => {
     if (props?.texts?.length) {
-      return props?.texts
+      return props?.texts;
     }
 
     return [
-      "thingtime",
+      'Thingtime',
-      "vibrant",
+      'Vibrant',
-      "infinite",
+      'Infinite',
-      "creative",
+      'Creative',
-      "powerful",
+      'Powerful',
-      "magical",
+      'Magical',
-      "inspiring",
+      'Inspiring',
-      "love",
+      'Love'
       // 'tt'
-    ]
+    ];
-  }, [props?.texts])
+  }, [props?.texts]);
 
-  const [titleText, setTitleText] = React.useState(texts[0])
+  const [titleText, setTitleText] = React.useState(texts[0]);
 
-  const [usedTexts, setUsedTexts] = React.useState(["thingtime"])
+  const [usedTexts, setUsedTexts] = React.useState(['Thingtime']);
 
-  const state = React.useRef({})
+  const state: any = React.useRef({});
 
   React.useEffect(() => {
-    state.current = { titleText, texts, usedTexts }
+    state.current = { titleText, texts, usedTexts };
-  }, [titleText, texts, usedTexts])
+  }, [titleText, texts, usedTexts]);
 
   React.useEffect(() => {
-    const newTimeout =
+    const newTimeout = Math.random() * 1500 + 2500 + (titleText === 'thingtime' ? 750 : 0);
-      Math.random() * 1500 + 2500 + (titleText === "thingtime" ? 750 : 0)
 
-    setTimeout(() => {
+    const timeout = setTimeout(() => {
       // choose an unused text or pick texts[0]
-      const usedTexts = state.current.usedTexts
+      const usedTexts = state.current?.usedTexts;
-      const unusedTexts = texts.filter((text) => !usedTexts.includes(text))
+      const unusedTexts = texts.filter((text) => !usedTexts.includes(text));
       // pick a random unused text
-      const randomIdx = Math.floor(Math.random() * unusedTexts.length)
+      const randomIdx = Math.floor(Math.random() * unusedTexts.length);
-      const newText = unusedTexts.length > 0 ? unusedTexts[randomIdx] : texts[0]
+      const wasThingtime = false && titleText === 'Thingtime';
+      const newText = wasThingtime ? 'is' : unusedTexts.length > 0 ? unusedTexts[randomIdx] : texts[0];
+      console.log('nik newText', newText);
+      console.log('nik wasThingtime', wasThingtime);
+      console.log('nik usedTexts', usedTexts);
       if (!unusedTexts.length) {
-        setUsedTexts(["thingtime"])
+        setUsedTexts(['Thingtime']);
       } else {
-        setUsedTexts([...usedTexts, newText])
+        setUsedTexts([...usedTexts, newText]);
       }
-      setTitleText(newText)
+      setTitleText(newText);
-    }, newTimeout)
+    }, newTimeout);
-  }, [titleText])
 
-  return <RainbowText ce={props?.ce}>{titleText}</RainbowText>
+    return () => {
-}
+      // cleanup
+
+      clearTimeout(timeout);
+    };
+  }, [titleText]);
+
+  return <RainbowText ce={props?.ce}>{titleText}</RainbowText>;
+};

app/src/routes/rainbow.$.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Flex } from '@chakra-ui/react';
+import { useLocation } from '@remix-run/react';
+
+import { Splash } from '~/components/Splash/Splash';
+import { useThingtime } from '~/components/Thingtime/useThingtime';
+
+export default function Index() {
+  const location = useLocation();
+  const { pathname } = location;
+
+  const strippedPathname = React.useMemo(() => {
+    // modify /rainbow/* to just *
+
+    const ret = pathname.split('/')[2];
+
+    if (ret) {
+      return decodeURI(ret);
+    }
+
+    return 'rainbow';
+  }, [pathname]);
+
+  const texts = React.useMemo(() => {
+    const ret = [strippedPathname];
+
+    return ret;
+  }, [strippedPathname]);
+
+  console.log('texts', texts);
+
+  return (
+    <Flex
+      sx={{
+        '::selection': {
+          background: 'transparent'
+        },
+        '::-moz-selection': {
+          background: 'transparent'
+        },
+        '*': {
+          '::selection': {
+            background: 'transparent'
+          },
+          '::-moz-selection': {
+            background: 'transparent'
+          }
+        },
+        '* grammarly-extension': {
+          display: 'none !important'
+        }
+      }}
+      alignItems="center"
+      justifyContent="center"
+      flexDirection="column"
+      maxWidth="100%"
+    >
+      <Splash texts={texts} ce={true}></Splash>
+    </Flex>
+  );
+}

app/src/routes/rainbow/$.tsx

@@ -1,59 +0,0 @@
-import React from "react"
-import { Flex } from "@chakra-ui/react"
-import { useLocation } from "@remix-run/react"
-
-import { Splash } from "~/components/Splash/Splash"
-import { useThingtime } from "~/components/Thingtime/useThingtime"
-
-export default function Index() {
-  const location = useLocation()
-  const { pathname } = location
-
-  const strippedPathname = React.useMemo(() => {
-    // modify /rainbow/* to just *
-
-    const ret = pathname.split("/")[2]
-
-    if (ret) {
-      return decodeURI(ret)
-    }
-
-    return "rainbow"
-  }, [pathname])
-
-  const texts = React.useMemo(() => {
-    const ret = [strippedPathname]
-
-    return ret
-  }, [strippedPathname])
-
-  return (
-    <Flex
-      sx={{
-        "::selection": {
-          background: "transparent",
-        },
-        "::-moz-selection": {
-          background: "transparent",
-        },
-        "*": {
-          "::selection": {
-            background: "transparent",
-          },
-          "::-moz-selection": {
-            background: "transparent",
-          },
-        },
-        "* grammarly-extension": {
-          display: "none !important",
-        },
-      }}
-      alignItems="center"
-      justifyContent="center"
-      flexDirection="column"
-      maxWidth="100%"
-    >
-      <Splash texts={texts} ce={true}></Splash>
-    </Flex>
-  )
-}