bootstrap changes and updates

packages/fakeyou.com/package.json

@@ -32,6 +32,7 @@
     "@types/react-dom": "^16.9.8",
     "axios": "^0.21.0",
     "bulma": "^0.9.0",
+    "bootstrap": "5.1.3",
     "craco": "^0.0.3",
     "date-fns": "2.22.1",
     "framer-motion": "^6.5.1",

packages/fakeyou.com/src/App.tsx

@@ -1,4 +1,5 @@
 import "./AppNew.scss";
+import "scss/custom-bootstrap.scss";
 
 import React from "react";
 import { ApiConfig } from "@storyteller/components";
@@ -184,12 +185,15 @@ function newVocodes() {
   return discord || twitter || alphaCookie;
 }
 
-function initInferenceJobsByCategoryMap() : Map<FrontendInferenceJobType, InferenceJob[]> {
-    let inferenceJobsByCategory = new Map();
-    inferenceJobsByCategory.set(FrontendInferenceJobType.FaceAnimation, []);
-    inferenceJobsByCategory.set(FrontendInferenceJobType.TextToSpeech, []);
-    inferenceJobsByCategory.set(FrontendInferenceJobType.VoiceConversion, []);
-    return inferenceJobsByCategory;
+function initInferenceJobsByCategoryMap(): Map<
+  FrontendInferenceJobType,
+  InferenceJob[]
+> {
+  let inferenceJobsByCategory = new Map();
+  inferenceJobsByCategory.set(FrontendInferenceJobType.FaceAnimation, []);
+  inferenceJobsByCategory.set(FrontendInferenceJobType.TextToSpeech, []);
+  inferenceJobsByCategory.set(FrontendInferenceJobType.VoiceConversion, []);
+  return inferenceJobsByCategory;
 }
 
 function isMacOs() {

packages/fakeyou.com/src/index.tsx

@@ -1,32 +1,40 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import * as serviceWorker from './serviceWorker';
-import AppTranslated from './AppTranslated';
+import React from "react";
+import ReactDOM from "react-dom";
+import * as serviceWorker from "./serviceWorker";
+import AppTranslated from "./AppTranslated";
 
-const IS_IOS : boolean = /iPad|iPhone|iPod/.test(navigator.platform || "");
+const IS_IOS: boolean = /iPad|iPhone|iPod/.test(navigator.platform || "");
 
 const enableSpectrograms = !IS_IOS;
 
-const flashVocodesNotice = new URLSearchParams(window.location.search).has('vocodes');
+const flashVocodesNotice = new URLSearchParams(window.location.search).has(
+  "vocodes"
+);
 
-const designSystemClass = 'fakeyou-refresh';
+const designSystemClass = "fakeyou-refresh";
 
-document.getElementsByTagName('html')[0].classList.add(designSystemClass);
+document.getElementsByTagName("html")[0].classList.add(designSystemClass);
 
 // We can't include Bootstrap CSS along with Bulma since some of the class names conflict.
 // TODO(echelon): Once ported, statically move CSS to "index.html".
-const bootstrapCss = document.createElement("link");
-bootstrapCss.setAttribute("rel", "stylesheet");
-bootstrapCss.setAttribute("crossorigin", "anonymous");
-bootstrapCss.setAttribute("integrity", "sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3");
-bootstrapCss.setAttribute("href", "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css");
-document.getElementsByTagName("head")[0].appendChild(bootstrapCss);
+// const bootstrapCss = document.createElement("link");
+// bootstrapCss.setAttribute("rel", "stylesheet");
+// bootstrapCss.setAttribute("crossorigin", "anonymous");
+// bootstrapCss.setAttribute("integrity", "sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3");
+// bootstrapCss.setAttribute("href", "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css");
+// document.getElementsByTagName("head")[0].appendChild(bootstrapCss);
 
 const bootstrapJs = document.createElement("script");
 bootstrapJs.setAttribute("rel", "stylesheet");
 bootstrapJs.setAttribute("crossorigin", "anonymous");
-bootstrapJs.setAttribute("integrity", "sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p");
-bootstrapJs.setAttribute("src", "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js");
+bootstrapJs.setAttribute(
+  "integrity",
+  "sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
+);
+bootstrapJs.setAttribute(
+  "src",
+  "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
+);
 document.getElementsByTagName("body")[0].appendChild(bootstrapJs);
 
 // NB: Posthog turned off for most users (anonymous users) due to cost.
@@ -37,11 +45,11 @@ document.getElementsByTagName("body")[0].appendChild(bootstrapJs);
 ReactDOM.render(
   <React.StrictMode>
     <AppTranslated
-        enableSpectrograms={enableSpectrograms} 
-        flashVocodesNotice={flashVocodesNotice}
-      />
+      enableSpectrograms={enableSpectrograms}
+      flashVocodesNotice={flashVocodesNotice}
+    />
   </React.StrictMode>,
-  document.getElementById('root')
+  document.getElementById("root")
 );
 
 // If you want your app to work offline and load faster, you can change

packages/fakeyou.com/src/scss/custom-bootstrap.scss

@@ -0,0 +1,11 @@
+// Override the $spacers variable
+$spacers: (
+  0: 0,
+  1: 0.25rem,
+  2: 0.5rem,
+  3: 1rem,
+  4: 1.75rem,
+  5: 2rem,
+);
+
+@import "~bootstrap/scss/bootstrap";

packages/fakeyou.com/src/scss/site-refresh.scss

@@ -168,11 +168,6 @@ styles with important tags:
     padding-bottom: 0.4rem !important;
   }
 
-  .py-4 {
-    padding-top: 2rem !important;
-    padding-bottom: 2rem !important;
-  }
-
   .lead {
     color: rgba($white, 0.8);
     font-size: 17px;
@@ -288,6 +283,10 @@ styles with important tags:
     border-radius: 50px;
   }
 
+  .bg-panel {
+    background-color: lighten($panel, 1%);
+  }
+
   .panel {
     position: relative;
     width: 100%;
@@ -1481,10 +1480,6 @@ textarea {
       }
     }
 
-    .p-lg-4 {
-      padding: 2rem !important;
-    }
-
     .lead {
       font-size: 18px;
     }
@@ -1551,9 +1546,5 @@ textarea {
       height: 100%;
       border-radius: 0.5rem;
     }
-
-    .p-md-4 {
-      padding: 2rem !important;
-    }
   }
 }

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

@@ -111,31 +111,61 @@ export default function MediaPage({ sessionWrapper }: MediaPageProps) {
 
   if (isLoading)
     return (
-      <Container type="panel">
-        <PageHeader
-          title={<Skeleton type="medium" />}
-          subText={<Skeleton type="short" />}
-        />
-        <Panel padding={true} mb={true}>
-          <div className="row">
+      <>
+        <Container type="padded">
+          <div className="pt-4 pb-4">
+            <h2 className="fw-bold mb-1 pt-0 pt-lg-1">
+              <Skeleton type="medium" />
+            </h2>
+            <p className="mb-0">
+              <Skeleton type="short" />
+            </p>
+          </div>
+        </Container>
+
+        <Container type="padded">
+          <div className="row g-4">
             <div className="col-12 col-xl-8">
+              <div className="panel p-3 py-4 p-md-4">
+                <h1 className="mb-0">
+                  <Skeleton />
+                </h1>
+              </div>
+
+              <div className="panel p-3 py-4 p-md-4 mt-4 d-none d-xl-block">
+                <h4 className="fw-semibold mb-3">
+                  <Skeleton />
+                </h4>
+                <h1>
+                  <Skeleton />
+                </h1>
+              </div>
+            </div>
+            <div className="col-12 col-xl-4 d-flex flex-column gap-2">
+              <h1 className="mb-0">
+                <Skeleton />
+              </h1>
               <h1 className="mb-0">
                 <Skeleton />
               </h1>
-            </div>
-            <div className="col-12 col-xl-4">
               <h1 className="mb-0">
                 <Skeleton />
               </h1>
             </div>
           </div>
-        </Panel>
-        <Panel padding={true}>
-          <h1 className="mb-0">
-            <Skeleton />
-          </h1>
-        </Panel>
-      </Container>
+        </Container>
+
+        <div className="d-xl-none mt-4">
+          <Panel padding>
+            <h4 className="fw-semibold mb-3">
+              <Skeleton />
+            </h4>
+            <h1 className="mb-0">
+              <Skeleton />
+            </h1>
+          </Panel>
+        </div>
+      </>
     );
 
   if (error || !mediaData)
@@ -259,14 +289,29 @@ export default function MediaPage({ sessionWrapper }: MediaPageProps) {
   // );
 
   return (
-    <Container type="panel">
-      <PageHeader title={pageTitle} subText={pageSubText} />
-      <Panel padding={true}>
+    <>
+      <Container>
+        <div className="container py-5">
+          <h2 className="fw-bold mb-1">{pageTitle}</h2>
+          <p className="mb-0">{pageSubText}</p>
+        </div>
+      </Container>
+
+      <Container type="padded">
         <div className="row g-4">
           <div className="col-12 col-xl-8">
-            <div className="media-wrapper">
+            <div className="panel media-wrapper rounded">
               {renderMediaComponent(mediaData)}
             </div>
+
+            <div className="panel p-3 py-4 p-md-4 mt-4 d-none d-xl-block">
+              <h4 className="fw-semibold mb-3">Comments</h4>
+              <CommentComponent
+                entityType="user"
+                entityToken={mediaData.token}
+                sessionWrapper={sessionWrapper}
+              />
+            </div>
           </div>
           <div className="col-12 col-xl-4 d-flex flex-column gap-4">
             <div className="d-flex gap-2">
@@ -322,15 +367,18 @@ export default function MediaPage({ sessionWrapper }: MediaPageProps) {
             </Accordion>
           </div>
         </div>
-      </Panel>
-      <Panel padding={true} mt={true} mb={true}>
-        <h4 className="fw-semibold mb-3">Comments</h4>
-        <CommentComponent
-          entityType="user"
-          entityToken={mediaData.token}
-          sessionWrapper={sessionWrapper}
-        />
-      </Panel>
-    </Container>
+      </Container>
+
+      <div className="d-xl-none mt-4">
+        <Panel padding>
+          <h4 className="fw-semibold mb-3">Comments</h4>
+          <CommentComponent
+            entityType="user"
+            entityToken={mediaData.token}
+            sessionWrapper={sessionWrapper}
+          />
+        </Panel>
+      </div>
+    </>
   );
 }

yarn.lock

@@ -4569,8 +4569,8 @@ __metadata:
   resolution: "@storyteller/root@workspace:."
   dependencies:
     "@react-spring/types": ^9.7.3
+    bootstrap: 5.1.3
     craco: ^0.0.3
-    date-fns: 2.22.1
     lerna: ^4.0.0
     yarn: ^1.22.19
   languageName: unknown
@@ -7281,6 +7281,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"bootstrap@npm:5.1.3":
+  version: 5.1.3
+  resolution: "bootstrap@npm:5.1.3"
+  peerDependencies:
+    "@popperjs/core": ^2.10.2
+  checksum: 301b5ed872efba061104cf22ac93568e3837867fb5527ab9326a51510fb752bd4883e1d488225c8be72f86d9d3a55ef5b166aa7fa62c2fdd077c3f05b65752f8
+  languageName: node
+  linkType: hard
+
 "brace-expansion@npm:^1.1.7":
   version: 1.1.11
   resolution: "brace-expansion@npm:1.1.11"