fixed styling for glb and ron cards

packages/fakeyou.com/src/components/common/Card/GLBCard/GLBCard.tsx

@@ -48,26 +48,33 @@ export default function GLBCard({
 
           <div className="d-flex align-items-center">
             <div className="d-flex flex-grow-1">
-              <Badge {...{ className: "fy-entity-type-glb", label: "GLB", overlay: true }}/>
+              <Badge
+                {...{
+                  className: "fy-entity-type-glb",
+                  label: "GLB",
+                  overlay: true,
+                }}
+              />
             </div>
           </div>
-          
-          <h6 className="fw-semibold text-white mb-1 mt-3">
-            {title}
-          </h6>
 
           <div className="card-img-overlay-text">
             <div>
+              <h6 className="fw-semibold text-white mb-1 mt-3">{title}</h6>
               <p className="fs-7 opacity-75 mb-0">{timeAgo}</p>
             </div>
-            <CardFooter {...{
-              creator: data?.maybe_creator || data.details?.maybe_media_file_data?.maybe_creator,
-              entityToken: data.details?.entity_token || data.token,
-              entityType: "media_file",
-              makeBookmarksProps: bookmarks?.makeProps,
-              makeRatingsProps: ratings?.makeProps,
-              showCreator
-            }}/>
+            <CardFooter
+              {...{
+                creator:
+                  data?.maybe_creator ||
+                  data.details?.maybe_media_file_data?.maybe_creator,
+                entityToken: data.details?.entity_token || data.token,
+                entityType: "media_file",
+                makeBookmarksProps: bookmarks?.makeProps,
+                makeRatingsProps: ratings?.makeProps,
+                showCreator,
+              }}
+            />
           </div>
         </div>
       </Card>

packages/fakeyou.com/src/components/common/Card/SceneRonCard/SceneRonCard.tsx

@@ -57,13 +57,10 @@ export default function SceneRonCard({
               />
             </div>
           </div>
-          
-          <h6 className="fw-semibold text-white mb-1 mt-3">
-            {title}
-          </h6>
 
           <div className="card-img-overlay-text">
             <div>
+              <h6 className="fw-semibold text-white mb-1 mt-3">{title}</h6>
               <p className="fs-7 opacity-75 mb-0">{timeAgo}</p>
             </div>
             <CardFooter

packages/fakeyou.com/src/hooks/useMedia/useMedia.tsx

@@ -1,18 +1,24 @@
-import { useEffect, useState } from 'react';
-import { GetMedia, MediaFile } from "@storyteller/components/src/api/media_files/GetMedia";
-import { GetPrompts, Prompt } from "@storyteller/components/src/api/prompts/GetPrompts";
+import { useEffect, useState } from "react";
+import {
+  GetMedia,
+  MediaFile,
+} from "@storyteller/components/src/api/media_files/GetMedia";
+import {
+  GetPrompts,
+  Prompt,
+} from "@storyteller/components/src/api/prompts/GetPrompts";
 import { DeleteMedia } from "@storyteller/components/src/api/media_files/DeleteMedia";
 import { FetchStatus } from "@storyteller/components/src/api/_common/SharedFetchTypes";
-import {usePrevious} from "hooks";
+import { usePrevious } from "hooks";
 
 export default function useMedia({
   mediaToken = "",
-  onSuccess = (res:MediaFile) => {},
+  onSuccess = (res: MediaFile) => {},
   onRemove = (res: any) => {},
 }) {
   const [status, statusSet] = useState(FetchStatus.ready);
   const [writeStatus, writeStatusSet] = useState(FetchStatus.paused);
-  const [media,mediaSet] = useState<MediaFile | undefined>();
+  const [media, mediaSet] = useState<MediaFile | undefined>();
   const [prompt, promptSet] = useState<Prompt | undefined>();
   const remove = (as_mod: boolean) => {
     writeStatusSet(FetchStatus.in_progress);
@@ -24,42 +30,39 @@ export default function useMedia({
       onRemove(res);
     });
   };
-  
+
   const previousToken = usePrevious(mediaToken);
-  
+
   useEffect(() => {
-    if (
-      mediaToken &&
-      (!media || previousToken !== mediaToken )
-    ) {
+    if (mediaToken && (!media || previousToken !== mediaToken)) {
       statusSet(FetchStatus.in_progress);
-      GetMedia(mediaToken,{})
-      .then((res) => {
-        if (res.success && res.media_file) {
-          statusSet(FetchStatus.success);
-          onSuccess(res.media_file);
-          mediaSet(res.media_file);
-          if (res.media_file.maybe_prompt_token) {
-            GetPrompts(res.media_file.maybe_prompt_token,{})
-            .then((promptRes) => {
-              if (promptRes.prompt) {
-                promptSet(promptRes.prompt);
-              }
-            });
+      GetMedia(mediaToken, {})
+        .then(res => {
+          if (res.success && res.media_file) {
+            statusSet(FetchStatus.success);
+            onSuccess(res.media_file);
+            mediaSet(res.media_file);
+            if (res.media_file.maybe_prompt_token) {
+              GetPrompts(res.media_file.maybe_prompt_token, {}).then(
+                promptRes => {
+                  if (promptRes.prompt) {
+                    promptSet(promptRes.prompt);
+                  }
+                }
+              );
+            }
           }
-        }
-      })
-      .catch((err) => {
-        statusSet(FetchStatus.error);
-      });
+        })
+        .catch(err => {
+          statusSet(FetchStatus.error);
+        });
     }
 
     if (media && media.token !== mediaToken) {
       mediaSet(undefined);
       statusSet(FetchStatus.ready);
     }
+  }, [media, mediaToken, previousToken, prompt, onSuccess, status, statusSet]);
 
-  },[media, mediaToken, previousToken, prompt, onSuccess, status, statusSet]);
-
- return { media, mediaSet, prompt, remove, status, writeStatus };
-};
+  return { media, mediaSet, prompt, remove, status, writeStatus };
+}

packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx

@@ -231,7 +231,7 @@ export default function MediaPage() {
           <>
             <EngineMediaPanel mediaFile={mediaFile} />
           </>
-        )
+        );
       case MediaFileType.FBX:
         return (
           <Panel padding={true}>
@@ -463,9 +463,7 @@ export default function MediaPage() {
           <div className="d-flex flex-column flex-lg-row gap-3 gap-lg-2">
             <div>
               <div className="d-flex gap-2 align-items-center flex-wrap">
-                <h1 className="fw-bold mb-2">
-                  {title}
-                </h1>
+                <h1 className="fw-bold mb-2">{title}</h1>
               </div>
               <div className="d-flex gap-3 flex-wrap align-items-center">
                 <div className="d-flex gap-2 align-items-center flex-wrap">
@@ -766,7 +764,9 @@ export default function MediaPage() {
                 </div>
               </Panel>
 
-              {canEditMediaFile(mediaFile?.maybe_creator_user?.user_token || "") && (
+              {canEditMediaFile(
+                mediaFile?.maybe_creator_user?.user_token || ""
+              ) && (
                 <>
                   <div className="d-flex gap-2">
                     <Button
@@ -775,8 +775,6 @@ export default function MediaPage() {
                       label="Delete Media"
                       onClick={openDeleteModal}
                     />
-                  </div>
-                  <div className="d-flex gap-2">
                     <Button
                       full={true}
                       variant="secondary"

packages/fakeyou.com/src/v2/view/pages/media/MediaRenamePage.tsx

@@ -1,19 +1,14 @@
 import React, { useEffect, useState } from "react";
 import { useHistory, useParams } from "react-router-dom";
-import {
-  faCircleExclamation,
-  faEdit,
-} from "@fortawesome/pro-solid-svg-icons";
+import { faCircleExclamation, faEdit } from "@fortawesome/pro-solid-svg-icons";
 import { usePrefixedDocumentTitle } from "common/UsePrefixedDocumentTitle";
 import PageHeader from "components/layout/PageHeader";
-import {
-  Button,
-  Container,
-  SplitPanel,
-  TempInput,
-} from "components/common";
+import { Button, Container, SplitPanel, TempInput } from "components/common";
 import { useSession } from "hooks";
-import { GetMedia, MediaFile } from "@storyteller/components/src/api/media_files/GetMedia";
+import {
+  GetMedia,
+  MediaFile,
+} from "@storyteller/components/src/api/media_files/GetMedia";
 import { RenameMedia } from "@storyteller/components/src/api/media_files/RenameMedia";
 
 export default function MediaRenamePage() {
@@ -21,25 +16,24 @@ export default function MediaRenamePage() {
   const history = useHistory();
 
   const { canEditMediaFile } = useSession();
-  const [ mediaFile, setMediaFile ] = useState<MediaFile|undefined>(undefined);
+  const [mediaFile, setMediaFile] = useState<MediaFile | undefined>(undefined);
 
-  const [ mediaTitle,  setMediaTitle ] = useState("");
+  const [mediaTitle, setMediaTitle] = useState("");
 
   usePrefixedDocumentTitle("Rename Media");
 
   useEffect(() => {
-    GetMedia(media_file_token,{})
-    .then((res) => {
+    GetMedia(media_file_token, {}).then(res => {
       if (res.success && res.media_file) {
-        let currentTitle = 
-          res.media_file.maybe_title || 
-          res.media_file.maybe_original_filename || 
+        let currentTitle =
+          res.media_file.maybe_title ||
+          res.media_file.maybe_original_filename ||
           "";
         setMediaFile(res.media_file);
         setMediaTitle(currentTitle);
       }
-    })
-  },[setMediaFile, media_file_token]);
+    });
+  }, [setMediaFile, media_file_token]);
 
   const performRename = async () => {
     const newTitle = mediaTitle.trim();
@@ -49,14 +43,12 @@ export default function MediaRenamePage() {
     }).then((res: any) => {
       history.replace(`/media/${media_file_token}`);
     });
-  }
+  };
 
-  const onChange = (
-    ev: React.FormEvent<HTMLInputElement>
-  ) => {
+  const onChange = (ev: React.FormEvent<HTMLInputElement>) => {
     const value = (ev.target as HTMLInputElement).value;
     setMediaTitle(value);
-  }
+  };
 
   if (!canEditMediaFile(mediaFile?.maybe_creator_user?.user_token || "")) {
     return (
@@ -91,36 +83,36 @@ export default function MediaRenamePage() {
         backbuttonLabel="Back"
         backbuttonTo={`/media/${media_file_token}`}
       />
-        <SplitPanel {...{ busy: false, dividerFooter: true }}>
-          <SplitPanel.Body padding={true}>
-              <TempInput
-                {...{
-                  label: "New Name",
-                  name: "title",
-                  onChange: onChange,
-                  placeholder: "File name",
-                  value: mediaTitle,
-                }}
-              />
-          </SplitPanel.Body>
-          <SplitPanel.Footer padding={true}>
-            <div className="d-flex gap-2 justify-content-end">
-              <Button
-                {...{
-                  label: "Cancel",
-                  to: `/media/${media_file_token}`,
-                  variant: "secondary",
-                }}
-              />
-              <Button
-                {...{
-                  label: "Rename File",
-                  onClick: performRename,
-                }}
-              />
-            </div>
-          </SplitPanel.Footer>
-        </SplitPanel>
+      <SplitPanel {...{ busy: false }}>
+        <SplitPanel.Body padding={true}>
+          <TempInput
+            {...{
+              label: "New Name",
+              name: "title",
+              onChange: onChange,
+              placeholder: "File name",
+              value: mediaTitle,
+            }}
+          />
+        </SplitPanel.Body>
+        <SplitPanel.Footer padding={true}>
+          <div className="d-flex gap-2 justify-content-end">
+            <Button
+              {...{
+                label: "Cancel",
+                to: `/media/${media_file_token}`,
+                variant: "secondary",
+              }}
+            />
+            <Button
+              {...{
+                label: "Rename File",
+                onClick: performRename,
+              }}
+            />
+          </div>
+        </SplitPanel.Footer>
+      </SplitPanel>
     </Container>
   );
   //}