Rabbits and a very bad attempt at optimization.

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "caniuse-lite": "^1.0.30001699",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-player": "^2.16.0",

src/App.css

@@ -48,6 +48,11 @@
   pointer-events: none;
 }
 
+.grayout {
+  opacity: 0.6; /* Real browsers */
+  filter: alpha(opacity = 60); /* MSIE */
+}
+
 .PubP {
   font-size: larger;
   user-select: none;

src/components/About.js

@@ -1,6 +1,3 @@
-import BottomBar from "./BottomBar";
-import TopBar from "./TopBar";
-
 const AboutPage = () => {
     return(  
         <div className="flex justify-center items-center w-screen h-screen text-xl text-secondary MainBG">

src/components/BottomBar.js

@@ -1,10 +1,11 @@
 import PageLoadTime from "./PageLoadTime";
+import React from "react";
 
 const BottomBar = () => {
     return (
         <div className="fixed bottom-0 left-0 h-8 w-screen flex flex-row backdrop-brightness-50 text-secondary justify-center items-center">
             <div className="fixed right-5">
-                <p className="text-sm">Powered by React.</p>
+                <p className="text-sm">Powered by Rabbits.</p>
             </div>
             <div className="fixed flex justify-center">
                 <p className="text-sm">&copy; LibreBun 2023-2025</p>
@@ -16,4 +17,4 @@ const BottomBar = () => {
     );
 };
 
-export default BottomBar;
+export default React.memo(BottomBar);

src/components/Home.js

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+import React from 'react';
 
 function Home() {
   const [Versions, setVersions] = useState('');
@@ -59,4 +60,4 @@ function Home() {
   
 }
 
-export default Home;
+export default React.memo(Home);

src/components/Stream.js

@@ -1,5 +1,4 @@
-import BottomBar from "./BottomBar";
-import TopBar from "./TopBar";
+import React from "react";
 
 const StreamPage = () => {
     return(  
@@ -19,9 +18,9 @@ const StreamPage = () => {
                     height="100%" width="30%">
                 </iframe>
             </div>
-            <a href="https://cast.librebun.com/" className="my-5">Join me on my actual Owncast site!</a>
+            <p className="mt-2">Join me on my actual</p><a href="https://cast.librebun.com/" className="font-bold text-slate-50">Owncast site!</a>
         </div>
     );
 }
 
-export default StreamPage;
+export default React.memo(StreamPage);

src/components/TopBar.js

@@ -27,4 +27,4 @@ const TopBar = () => {
     );
 };
 
-export default TopBar;
+export default React.memo(TopBar);