From ded6a0c7b022637c2bab1633a8c5e4d4c216b5e9 Mon Sep 17 00:00:00 2001
From: javstash <admin@javstash.org>
Date: Sun, 12 Jan 2025 07:51:09 -0500
Subject: [PATCH 1/5] Switch to javstash themeing

---
 frontend/src/components/editImages/styles.scss |  2 +-
 frontend/src/components/fragments/styles.scss  |  2 +-
 frontend/src/styles/theme.scss                 | 12 ++++++------
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/editImages/styles.scss b/frontend/src/components/editImages/styles.scss
index 55cf211c3..6a533be68 100644
--- a/frontend/src/components/editImages/styles.scss
+++ b/frontend/src/components/editImages/styles.scss
@@ -11,7 +11,7 @@
     width: 400px;
 
     &:hover {
-      background-color: #394b59;
+      background-color: #1f1a24; // #394b59
     }
   }
 
diff --git a/frontend/src/components/fragments/styles.scss b/frontend/src/components/fragments/styles.scss
index 6b85486b5..cd038050c 100644
--- a/frontend/src/components/fragments/styles.scss
+++ b/frontend/src/components/fragments/styles.scss
@@ -134,7 +134,7 @@
     width: 100%;
     height: 100%;
     color: var(--bs-gray-400);
-    background-color: #394b59;
+    background-color: #1f1a24; // #394b59
     align-items: center;
     justify-content: center;
     border-radius: 4px;
diff --git a/frontend/src/styles/theme.scss b/frontend/src/styles/theme.scss
index 6e94052cd..cbeaffa50 100644
--- a/frontend/src/styles/theme.scss
+++ b/frontend/src/styles/theme.scss
@@ -3,11 +3,11 @@
 
 // 2. Include any default variable overrides here
 $primary: #137cbd;
-$secondary: #394b59;
+$secondary: #1f1a24; // #394b59
 $success: #0f9960;
 $warning: #d9822b;
 $danger: #db3737;
-$dark: #394b59;
+$dark: #1f1a24; // #394b59
 $text-color: #f5f8fa;
 $muted-gray: #bfccd6;
 $text-muted: $muted-gray;
@@ -79,9 +79,9 @@ $textfield-bg: rgba(16 22 26 / 30%);
   --bs-success: #{$success};
   --bs-warning: #{$warning};
   --bs-danger: #{$danger};
-  --bs-body-bg: #202b33;
+  --bs-body-bg: #292929; // #202b33
   --bs-dark: #{$dark};
-  --bs-dark-rgb: 57, 75, 89;
+  --bs-dark-rgb: 31, 26, 36; // 57, 75, 89;
 }
 
 body {
@@ -256,7 +256,7 @@ hr {
   &-header,
   &-body,
   &-footer {
-    background-color: #30404d;
+    background-color: #423d46; // #30404d
     border-color: transparent;
     color: $text-color;
   }
@@ -267,7 +267,7 @@ hr {
 }
 
 .card {
-  background-color: #30404d;
+  background-color: #423d46; // #30404d
   border: none;
   border-radius: 3px;
   box-shadow:

From 3a1961296aa8e5b3381afe00a9ba560fc2538f7f Mon Sep 17 00:00:00 2001
From: javstash <admin@javstash.org>
Date: Sun, 12 Jan 2025 09:06:41 -0500
Subject: [PATCH 2/5] Add performer name to SceneCard

---
 .../src/components/sceneCard/SceneCard.tsx    | 101 +++++++++++-------
 1 file changed, 60 insertions(+), 41 deletions(-)

diff --git a/frontend/src/components/sceneCard/SceneCard.tsx b/frontend/src/components/sceneCard/SceneCard.tsx
index 61d56651a..d9a201d02 100644
--- a/frontend/src/components/sceneCard/SceneCard.tsx
+++ b/frontend/src/components/sceneCard/SceneCard.tsx
@@ -7,15 +7,16 @@ import { Scene, Studio } from "src/graphql";
 import {
   getImage,
   sceneHref,
+  performerHref,
   studioHref,
   formatDuration,
   imageType,
 } from "src/utils";
-import { Icon, Thumbnail } from "src/components/fragments";
+import { Icon, Thumbnail, PerformerName } from "src/components/fragments";
 
 type Performance = Pick<
   Scene,
-  "id" | "title" | "images" | "duration" | "code" | "release_date"
+  "id" | "title" | "images" | "duration" | "code" | "release_date" | "performers"
 > & {
   studio?: Pick<Studio, "id" | "name"> | null;
 };
@@ -24,50 +25,68 @@ const CLASSNAME = "SceneCard";
 const CLASSNAME_IMAGE = `${CLASSNAME}-image`;
 const CLASSNAME_BODY = `${CLASSNAME}-body`;
 
-const SceneCard: FC<{ scene: Performance }> = ({ scene }) => (
-  <Card className={CLASSNAME}>
-    <Card.Body className={CLASSNAME_BODY}>
-      <Link className={CLASSNAME_IMAGE} to={sceneHref(scene)}>
-        <Thumbnail
-          alt={scene.title}
-          className={imageType(scene.images[0])}
-          image={getImage(scene.images, "landscape")}
-          size={300}
-        />
-      </Link>
-    </Card.Body>
-    <Card.Footer>
-      <div className="d-flex">
+const SceneCard: FC<{ scene: Performance }> = ({ scene }) => {
+
+  const performers = scene.performers
+    .map((performance) => {
+      const { performer } = performance;
+      return (
         <Link
-          className="text-truncate w-100"
-          to={sceneHref(scene)}
-          title={scene.title ?? ""}
+          key={performer.id}
+          to={performerHref(performer)}
+          className="scene-performer"
         >
-          <h6 className="text-truncate">{scene.title}</h6>
+          <PerformerName performer={performer} />
         </Link>
-      </div>
-      <div className="text-muted">
-        <Link className="text-truncate w-100" to={sceneHref(scene)}>
-          <strong>{scene.code}</strong>
+      );
+    })
+    .map((p, index) => (index % 2 === 2 ? [" • ", p] : p));
+
+    return (
+    <Card className={CLASSNAME}>
+      <Card.Body className={CLASSNAME_BODY}>
+        <Link className={CLASSNAME_IMAGE} to={sceneHref(scene)}>
+          <Thumbnail
+            alt={scene.title}
+            className={imageType(scene.images[0])}
+            image={getImage(scene.images, "landscape")}
+            size={300}
+          />
         </Link>
-        <span className="text-muted float-end">
-          {scene.duration ? formatDuration(scene.duration) : ""}
-        </span>
-      </div>
-      <div className="text-muted">
-        {scene.studio && (
+      </Card.Body>
+      <Card.Footer>
+        <div className="d-flex">
           <Link
-            to={studioHref(scene.studio)}
-            className="float-end text-truncate SceneCard-studio-name"
+            className="text-truncate w-100"
+            to={sceneHref(scene)}
+            title={scene.title ?? ""}
           >
-            <Icon icon={faVideo} className="me-1" />
-            {scene.studio.name}
+            <h6 className="text-truncate">{scene.title}</h6>
           </Link>
-        )}
-        <strong>{scene.release_date}</strong>
-      </div>
-    </Card.Footer>
-  </Card>
-);
-
+        </div>
+        <div className="text-truncate w-100 scene-performers me-auto">{performers}</div>
+        <div className="text-muted">
+          <Link className="text-truncate w-100" to={sceneHref(scene)}>
+            <strong>{scene.code}</strong>
+          </Link>
+          <span className="text-muted float-end">
+            {scene.duration ? formatDuration(scene.duration) : ""}
+          </span>
+        </div>
+        <div className="text-muted">
+          {scene.studio && (
+            <Link
+              to={studioHref(scene.studio)}
+              className="float-end text-truncate SceneCard-studio-name"
+            >
+              <Icon icon={faVideo} className="me-1" />
+              {scene.studio.name}
+            </Link>
+          )}
+          <strong>{scene.release_date}</strong>
+        </div>
+      </Card.Footer>
+    </Card>
+  );
+};
 export default SceneCard;

From 95879f1734c8a08a3a25a6df026c6ca1b61058fe Mon Sep 17 00:00:00 2001
From: javstash <admin@javstash.org>
Date: Sun, 12 Jan 2025 09:29:43 -0500
Subject: [PATCH 3/5] Remove performer disamb from SceneCard

---
 .../fragments/SceneCardPerformerName.tsx      | 20 +++++++++++++++++++
 frontend/src/components/fragments/index.ts    |  1 +
 .../src/components/sceneCard/SceneCard.tsx    |  6 +++---
 3 files changed, 24 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/components/fragments/SceneCardPerformerName.tsx

diff --git a/frontend/src/components/fragments/SceneCardPerformerName.tsx b/frontend/src/components/fragments/SceneCardPerformerName.tsx
new file mode 100644
index 000000000..d78dfe892
--- /dev/null
+++ b/frontend/src/components/fragments/SceneCardPerformerName.tsx
@@ -0,0 +1,20 @@
+import { FC } from "react";
+import { PerformerFragment } from "src/graphql";
+
+interface PerformerNameProps {
+  performer: Pick<PerformerFragment, "name" | "disambiguation" | "deleted">;
+}
+
+const SceneCardPerformerName: FC<PerformerNameProps> = ({ performer }) => {
+    return (
+      <>
+        {performer.deleted ? (
+          <del>{performer.name}</del>
+        ) : (
+          <span>{performer.name}</span>
+        )}
+      </>
+    );
+};
+
+export default SceneCardPerformerName;
diff --git a/frontend/src/components/fragments/index.ts b/frontend/src/components/fragments/index.ts
index 5c1f28cdf..d722cee18 100644
--- a/frontend/src/components/fragments/index.ts
+++ b/frontend/src/components/fragments/index.ts
@@ -4,6 +4,7 @@ export { default as Icon } from "./Icon";
 export { default as TagLink } from "./TagLink";
 export { default as SiteLink } from "./SiteLink";
 export { default as PerformerName } from "./PerformerName";
+export { default as SceneCardPerformerName } from "./SceneCardPerformerName";
 export { default as ErrorMessage } from "./ErrorMessage";
 export { default as Help } from "./Help";
 export { default as Tooltip } from "./Tooltip";
diff --git a/frontend/src/components/sceneCard/SceneCard.tsx b/frontend/src/components/sceneCard/SceneCard.tsx
index d9a201d02..90fc7eabd 100644
--- a/frontend/src/components/sceneCard/SceneCard.tsx
+++ b/frontend/src/components/sceneCard/SceneCard.tsx
@@ -12,7 +12,7 @@ import {
   formatDuration,
   imageType,
 } from "src/utils";
-import { Icon, Thumbnail, PerformerName } from "src/components/fragments";
+import { Icon, Thumbnail, SceneCardPerformerName } from "src/components/fragments";
 
 type Performance = Pick<
   Scene,
@@ -36,11 +36,11 @@ const SceneCard: FC<{ scene: Performance }> = ({ scene }) => {
           to={performerHref(performer)}
           className="scene-performer"
         >
-          <PerformerName performer={performer} />
+          <SceneCardPerformerName performer={performer} />
         </Link>
       );
     })
-    .map((p, index) => (index % 2 === 2 ? [" • ", p] : p));
+    .map((p, index) => (index % 2 === 2 ? [", ", p] : p));
 
     return (
     <Card className={CLASSNAME}>

From 9cef10b7d19d66c76a442ed9883b08a41803cd12 Mon Sep 17 00:00:00 2001
From: javstash <admin@javstash.org>
Date: Mon, 13 Jan 2025 06:20:15 -0500
Subject: [PATCH 4/5] fix lint

---
 .../fragments/SceneCardPerformerName.tsx      | 18 +++++-----
 .../src/components/sceneCard/SceneCard.tsx    | 33 ++++++++++++-------
 2 files changed, 31 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/fragments/SceneCardPerformerName.tsx b/frontend/src/components/fragments/SceneCardPerformerName.tsx
index d78dfe892..9d9482d52 100644
--- a/frontend/src/components/fragments/SceneCardPerformerName.tsx
+++ b/frontend/src/components/fragments/SceneCardPerformerName.tsx
@@ -6,15 +6,15 @@ interface PerformerNameProps {
 }
 
 const SceneCardPerformerName: FC<PerformerNameProps> = ({ performer }) => {
-    return (
-      <>
-        {performer.deleted ? (
-          <del>{performer.name}</del>
-        ) : (
-          <span>{performer.name}</span>
-        )}
-      </>
-    );
+  return (
+    <>
+      {performer.deleted ? (
+        <del>{performer.name}</del>
+      ) : (
+        <span>{performer.name}</span>
+      )}
+    </>
+  );
 };
 
 export default SceneCardPerformerName;
diff --git a/frontend/src/components/sceneCard/SceneCard.tsx b/frontend/src/components/sceneCard/SceneCard.tsx
index 90fc7eabd..fdd85917a 100644
--- a/frontend/src/components/sceneCard/SceneCard.tsx
+++ b/frontend/src/components/sceneCard/SceneCard.tsx
@@ -12,11 +12,21 @@ import {
   formatDuration,
   imageType,
 } from "src/utils";
-import { Icon, Thumbnail, SceneCardPerformerName } from "src/components/fragments";
+import {
+  Icon,
+  Thumbnail,
+  SceneCardPerformerName,
+} from "src/components/fragments";
 
 type Performance = Pick<
   Scene,
-  "id" | "title" | "images" | "duration" | "code" | "release_date" | "performers"
+  | "id"
+  | "title"
+  | "images"
+  | "duration"
+  | "code"
+  | "release_date"
+  | "performers"
 > & {
   studio?: Pick<Studio, "id" | "name"> | null;
 };
@@ -26,7 +36,6 @@ const CLASSNAME_IMAGE = `${CLASSNAME}-image`;
 const CLASSNAME_BODY = `${CLASSNAME}-body`;
 
 const SceneCard: FC<{ scene: Performance }> = ({ scene }) => {
-
   const performers = scene.performers
     .map((performance) => {
       const { performer } = performance;
@@ -40,9 +49,9 @@ const SceneCard: FC<{ scene: Performance }> = ({ scene }) => {
         </Link>
       );
     })
-    .map((p, index) => (index % 2 === 2 ? [", ", p] : p));
+    .map((p, index) => (index % 2 === 2 ? [" ", p] : p));
 
-    return (
+  return (
     <Card className={CLASSNAME}>
       <Card.Body className={CLASSNAME_BODY}>
         <Link className={CLASSNAME_IMAGE} to={sceneHref(scene)}>
@@ -64,16 +73,10 @@ const SceneCard: FC<{ scene: Performance }> = ({ scene }) => {
             <h6 className="text-truncate">{scene.title}</h6>
           </Link>
         </div>
-        <div className="text-truncate w-100 scene-performers me-auto">{performers}</div>
         <div className="text-muted">
           <Link className="text-truncate w-100" to={sceneHref(scene)}>
             <strong>{scene.code}</strong>
           </Link>
-          <span className="text-muted float-end">
-            {scene.duration ? formatDuration(scene.duration) : ""}
-          </span>
-        </div>
-        <div className="text-muted">
           {scene.studio && (
             <Link
               to={studioHref(scene.studio)}
@@ -83,7 +86,15 @@ const SceneCard: FC<{ scene: Performance }> = ({ scene }) => {
               {scene.studio.name}
             </Link>
           )}
+        </div>
+        <div className="text-muted">
           <strong>{scene.release_date}</strong>
+          <span className="text-muted float-end">
+            {scene.duration ? formatDuration(scene.duration) : ""}
+          </span>
+          <div className="scene-performers me-auto">
+            <strong>{performers}</strong>
+          </div>
         </div>
       </Card.Footer>
     </Card>

From 0b58155d31781ea7ecef8c995c76f16afa2371a7 Mon Sep 17 00:00:00 2001
From: javstash <admin@javstash.org>
Date: Mon, 13 Jan 2025 06:33:47 -0500
Subject: [PATCH 5/5] final cleanup

---
 frontend/src/components/sceneCard/SceneCard.tsx | 15 ++++-----------
 1 file changed, 4 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/sceneCard/SceneCard.tsx b/frontend/src/components/sceneCard/SceneCard.tsx
index fdd85917a..08ea5c75e 100644
--- a/frontend/src/components/sceneCard/SceneCard.tsx
+++ b/frontend/src/components/sceneCard/SceneCard.tsx
@@ -19,14 +19,7 @@ import {
 } from "src/components/fragments";
 
 type Performance = Pick<
-  Scene,
-  | "id"
-  | "title"
-  | "images"
-  | "duration"
-  | "code"
-  | "release_date"
-  | "performers"
+  Scene, | "id" | "title" | "images" | "duration" | "code" | "release_date" | "performers"
 > & {
   studio?: Pick<Studio, "id" | "name"> | null;
 };
@@ -73,6 +66,9 @@ const SceneCard: FC<{ scene: Performance }> = ({ scene }) => {
             <h6 className="text-truncate">{scene.title}</h6>
           </Link>
         </div>
+        <div className="text-truncate w-100 scene-performers me-auto">
+          <strong>{performers}</strong>
+        </div>
         <div className="text-muted">
           <Link className="text-truncate w-100" to={sceneHref(scene)}>
             <strong>{scene.code}</strong>
@@ -92,9 +88,6 @@ const SceneCard: FC<{ scene: Performance }> = ({ scene }) => {
           <span className="text-muted float-end">
             {scene.duration ? formatDuration(scene.duration) : ""}
           </span>
-          <div className="scene-performers me-auto">
-            <strong>{performers}</strong>
-          </div>
         </div>
       </Card.Footer>
     </Card>