styling stuff

GTBitsOfGood · Apr 9, 2024 · 0b18fbe · 0b18fbe
1 parent 42234cb
commit 0b18fbe
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 47 deletions.
diff --git a/src/components/GameScreen/WebGL/EmbeddedGame.tsx b/src/components/GameScreen/WebGL/EmbeddedGame.tsx
@@ -10,8 +10,8 @@ interface EmbeddedGameProps {
 export default function EmbeddedGame({ gameId }: EmbeddedGameProps) {
   const ref = useRef<HTMLIFrameElement | null>(null);
   const [height, setHeight] = useState("0px");
-  const [loadGame, setLoadGame] = useState(false);
-  const [iframeLoading, setIframeLoading] = useState(false);
+  // const [loadGame, setLoadGame] = useState(false);
+  const [iframeLoaded, setIframeLoaded] = useState(false);
 
   const updateHeight = () => {
     const iframe = ref.current;
@@ -21,13 +21,14 @@ export default function EmbeddedGame({ gameId }: EmbeddedGameProps) {
     if (frameHeight) {
       setHeight(frameHeight + "px");
     }
-    setIframeLoading(false);
   };
 
   const handleLoad = () => {
     const iframe = ref.current;
     if (!iframe) return;
 
+    setIframeLoaded(true);
+
     const observer = new MutationObserver(updateHeight);
 
     if (iframe.contentWindow?.document) {
@@ -41,49 +42,46 @@ export default function EmbeddedGame({ gameId }: EmbeddedGameProps) {
     };
   };
 
+  useEffect(() => {
+    if (iframeLoaded) {
+      updateHeight();
+    }
+  }, [iframeLoaded]);
+
   useEffect(() => {
     window.addEventListener("resize", updateHeight);
     return () => {
       window.removeEventListener("resize", updateHeight);
     };
   }, []);
 
-  const RunGame = () => (
-    <div className="m-auto my-6 flex aspect-video w-10/12 items-center justify-center border-2 border-solid border-black">
-      <Button
-        type="button"
-        variant="mainblue"
-        className="flex h-12 rounded-xl text-lg font-semibold text-white"
-        onClick={() => {
-          setLoadGame(true);
-          setIframeLoading(true);
-        }}
-      >
-        <div className="flex items-center gap-2 font-sans">
-          <p>Run Game</p>
-          <Play />
-        </div>
-      </Button>
-    </div>
-  );
+  // const RunGame = () => (
+  //   <div className="m-auto my-6 flex aspect-video w-10/12 items-center justify-center border-2 border-solid border-black">
+  //     <Button
+  //       type="button"
+  //       variant="mainblue"
+  //       className="flex h-12 rounded-xl text-lg font-semibold text-white"
+  //       onClick={() => {
+  //         setLoadGame(true);
+  //       }}
+  //     >
+  //       <div className="flex items-center gap-2 font-sans">
+  //         <p>Run Game</p>
+  //         <Play />
+  //       </div>
+  //     </Button>
+  //   </div>
+  // );
 
   return (
-    <div>
-      {loadGame ? (
-        <iframe
-          ref={ref}
-          onLoad={handleLoad}
-          height={height}
-          src={`/games/${gameId}/raw`}
-          className={cn({
-            "m-auto my-6 w-10/12 border-2 border-solid border-black":
-              height !== "0px",
-          })}
-        />
-      ) : (
-        <RunGame />
-      )}
-      {iframeLoading && <RunGame />}
-    </div>
+    <iframe
+      ref={ref}
+      onLoad={handleLoad}
+      height={height}
+      src={`/games/${gameId}/raw`}
+      className={cn("m-auto my-6 w-10/12", {
+        "border-2 border-solid border-black": height !== "0px",
+      })}
+    />
   );
 }
diff --git a/src/components/Navigation/Footer.tsx b/src/components/Navigation/Footer.tsx
@@ -54,7 +54,7 @@ export const Footer = () => {
               )}
             </div>
           </div>
-          <div className="mb-5 ml-5 mr-5 mt-7 shrink lg:ml-[20vw] lg:mr-[5vw]">
+          <div className="m-5 shrink lg:ml-[15vw] lg:mr-[5vw]">
             <div className="mb-10 font-dm-sans text-xl font-bold leading-snug text-indigo-950">
               Mission
             </div>
@@ -63,7 +63,7 @@ export const Footer = () => {
               advocacy.
             </div>
           </div>
-          <div className="m-5 mt-7 flex shrink-0 flex-col gap-6">
+          <div className="m-5 flex shrink-0 flex-col gap-6">
             <div className="mb-[14px] font-dm-sans text-xl font-bold leading-snug text-indigo-950">
               Contact us
             </div>

diff --git a/src/components/Navigation/Header.tsx b/src/components/Navigation/Header.tsx
@@ -97,7 +97,12 @@ const Header = () => {
   return (
     <div className="flex w-full justify-center">
       <div className="mx-auto flex h-16 w-[calc(100%-4rem)] max-w-[90%] items-center justify-between bg-white p-12">
-        <div className="flex items-center">
+        <div
+          className="flex items-center hover:cursor-pointer"
+          onClick={() => {
+            router.push("/");
+          }}
+        >
           <img className="w-50 h-auto" src="/logo_gray.svg" alt="Logo" />
           <div className="ml-6 font-open-sans text-xl font-semibold text-stone-900 opacity-70">
             Jennifer Ann&apos;s Group

diff --git a/src/components/ThemesTags/FilterPopover.tsx b/src/components/ThemesTags/FilterPopover.tsx
@@ -7,7 +7,6 @@ import {
 } from "@/components/ui/popover";
 import { ITag } from "@/server/db/models/TagModel";
 import { ITheme } from "@/server/db/models/ThemeModel";
-import { Spinner } from "@chakra-ui/react";
 import { useQuery } from "@tanstack/react-query";
 import { useState } from "react";
 import { PageRequiredGameQuery } from "./GamesSection";
@@ -45,7 +44,7 @@ function FilterPopover(props: Props) {
   });
 
   if (themesStatus === "pending" || tagsStatus === "pending") {
-    return <Spinner />;
+    return <></>;
   }
 
   function handleSubmit(e: React.FormEvent<HTMLFormElement>) {

diff --git a/src/components/ThemesTags/GamesSection.tsx b/src/components/ThemesTags/GamesSection.tsx
@@ -13,7 +13,6 @@ import {
   PaginationNext,
   PaginationPrevious,
 } from "../ui/pagination";
-import { Spinner } from "@chakra-ui/react";
 import FilterPopover from "./FilterPopover";
 
 export type PageRequiredGameQuery = GameQuery &
@@ -138,7 +137,7 @@ function GamesSection() {
         <FilterPopover filters={filters} setFilters={setFilters} />
       </div>
       <div className="w-full">
-        {games ? <DataTable columns={columns} data={games} /> : <Spinner />}
+        {games && <DataTable columns={columns} data={games} />}
       </div>
       {gamesStatus === "success" ? (
         <Pagination>

diff --git a/src/components/ThemesTags/Table/EditPopover.tsx b/src/components/ThemesTags/Table/EditPopover.tsx
@@ -15,7 +15,6 @@ import {
   GetGameContextOutput,
   GetGameContextThemesOutput,
 } from "@/pages/api/games/[id]/themes";
-import { Spinner } from "@chakra-ui/react";
 import { PopoverClose } from "@radix-ui/react-popover";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { Pencil } from "lucide-react";
@@ -108,7 +107,7 @@ function EditPopover(props: Props) {
   }
 
   if (status === "pending" || nestedSource === undefined) {
-    return <Spinner />;
+    return <></>;
   }
 
   return (