From 1fab3683284eca6cb3f72b7d2b8dc48ac33a3243 Mon Sep 17 00:00:00 2001
From: WithoutPants <53250216+WithoutPants@users.noreply.github.com>
Date: Sun, 20 Feb 2022 11:05:51 +1100
Subject: [PATCH] Add missing card classes (#2327)

* Move performer flag and add classes
* Add class to interactive heat map
* Add classes to scene card
* Add missing class names
---
 .../src/components/Galleries/GalleryCard.tsx  |  2 +-
 ui/v2.5/src/components/Images/ImageCard.tsx   |  4 +--
 ui/v2.5/src/components/Movies/MovieCard.tsx   | 14 +++++-----
 ui/v2.5/src/components/Movies/styles.scss     |  4 +++
 .../components/Performers/PerformerCard.tsx   | 26 ++++++++++++++++---
 ui/v2.5/src/components/Performers/styles.scss | 14 ++++++++++
 ui/v2.5/src/components/Scenes/SceneCard.tsx   | 16 +++++++-----
 ui/v2.5/src/components/Scenes/styles.scss     |  4 +++
 ui/v2.5/src/components/Shared/GridCard.tsx    |  8 +++++-
 ui/v2.5/src/components/Studios/StudioCard.tsx |  8 +++---
 10 files changed, 75 insertions(+), 25 deletions(-)

diff --git a/ui/v2.5/src/components/Galleries/GalleryCard.tsx b/ui/v2.5/src/components/Galleries/GalleryCard.tsx
index 5a72a737c..933278b8b 100644
--- a/ui/v2.5/src/components/Galleries/GalleryCard.tsx
+++ b/ui/v2.5/src/components/Galleries/GalleryCard.tsx
@@ -111,7 +111,7 @@ export const GalleryCard: React.FC<IProps> = (props) => {
   function maybeRenderOrganized() {
     if (props.gallery.organized) {
       return (
-        <div>
+        <div className="organized">
           <Button className="minimal">
             <Icon icon="box" />
           </Button>
diff --git a/ui/v2.5/src/components/Images/ImageCard.tsx b/ui/v2.5/src/components/Images/ImageCard.tsx
index 76b490682..e56733643 100644
--- a/ui/v2.5/src/components/Images/ImageCard.tsx
+++ b/ui/v2.5/src/components/Images/ImageCard.tsx
@@ -50,7 +50,7 @@ export const ImageCard: React.FC<IImageCardProps> = (
   function maybeRenderOCounter() {
     if (props.image.o_counter) {
       return (
-        <div>
+        <div className="o-count">
           <Button className="minimal">
             <span className="fa-icon">
               <SweatDrops />
@@ -65,7 +65,7 @@ export const ImageCard: React.FC<IImageCardProps> = (
   function maybeRenderOrganized() {
     if (props.image.organized) {
       return (
-        <div>
+        <div className="organized">
           <Button className="minimal">
             <Icon icon="box" />
           </Button>
diff --git a/ui/v2.5/src/components/Movies/MovieCard.tsx b/ui/v2.5/src/components/Movies/MovieCard.tsx
index 28a1d8252..423768872 100644
--- a/ui/v2.5/src/components/Movies/MovieCard.tsx
+++ b/ui/v2.5/src/components/Movies/MovieCard.tsx
@@ -85,12 +85,14 @@ export const MovieCard: FunctionComponent<IProps> = (props: IProps) => {
         </>
       }
       details={
-        <>
-          <span>{props.movie.date}</span>
-          <p>
-            <TruncatedText text={props.movie.synopsis} lineCount={3} />
-          </p>
-        </>
+        <div className="movie-card__details">
+          <span className="movie-card__date">{props.movie.date}</span>
+          <TruncatedText
+            className="movie-card__description"
+            text={props.movie.synopsis}
+            lineCount={3}
+          />
+        </div>
       }
       selected={props.selected}
       selecting={props.selecting}
diff --git a/ui/v2.5/src/components/Movies/styles.scss b/ui/v2.5/src/components/Movies/styles.scss
index 773b04392..09cfa97da 100644
--- a/ui/v2.5/src/components/Movies/styles.scss
+++ b/ui/v2.5/src/components/Movies/styles.scss
@@ -17,6 +17,10 @@
   .movie-scene-number {
     text-align: center;
   }
+
+  &__details {
+    margin-bottom: 1rem;
+  }
 }
 
 .movie-images {
diff --git a/ui/v2.5/src/components/Performers/PerformerCard.tsx b/ui/v2.5/src/components/Performers/PerformerCard.tsx
index 115ba8363..937a2d81b 100644
--- a/ui/v2.5/src/components/Performers/PerformerCard.tsx
+++ b/ui/v2.5/src/components/Performers/PerformerCard.tsx
@@ -180,6 +180,22 @@ export const PerformerCard: React.FC<IPerformerCardProps> = ({
     );
   }
 
+  function maybeRenderFlag() {
+    if (performer.country) {
+      return (
+        <Link to={NavUtils.makePerformersCountryUrl(performer)}>
+          <CountryFlag
+            className="performer-card__country-flag"
+            country={performer.country}
+          />
+          <span className="performer-card__country-string">
+            {performer.country}
+          </span>
+        </Link>
+      );
+    }
+  }
+
   return (
     <GridCard
       className="performer-card"
@@ -197,14 +213,16 @@ export const PerformerCard: React.FC<IPerformerCardProps> = ({
           />
           {maybeRenderFavoriteIcon()}
           {maybeRenderRatingBanner()}
+          {maybeRenderFlag()}
         </>
       }
       details={
         <>
-          {age !== 0 ? <div className="text-muted">{ageString}</div> : ""}
-          <Link to={NavUtils.makePerformersCountryUrl(performer)}>
-            <CountryFlag country={performer.country} />
-          </Link>
+          {age !== 0 ? (
+            <div className="performer-card__age">{ageString}</div>
+          ) : (
+            ""
+          )}
           {maybeRenderPopoverButtonGroup()}
         </>
       }
diff --git a/ui/v2.5/src/components/Performers/styles.scss b/ui/v2.5/src/components/Performers/styles.scss
index 6ca209092..a36e9263a 100644
--- a/ui/v2.5/src/components/Performers/styles.scss
+++ b/ui/v2.5/src/components/Performers/styles.scss
@@ -60,6 +60,10 @@
 .performer-card {
   width: 20rem;
 
+  .thumbnail-section {
+    position: relative;
+  }
+
   &-image {
     height: 30rem;
     min-width: 11.25rem;
@@ -70,6 +74,7 @@
 
   .flag-icon {
     bottom: 1rem;
+    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.9));
     height: 2rem;
     position: absolute;
     right: 1rem;
@@ -83,6 +88,15 @@
     right: 5px;
     top: 10px;
   }
+
+  &__age {
+    color: $muted-gray;
+  }
+
+  // allow country string to be shown, but disable by default
+  &__country-string {
+    display: none;
+  }
 }
 
 .card {
diff --git a/ui/v2.5/src/components/Scenes/SceneCard.tsx b/ui/v2.5/src/components/Scenes/SceneCard.tsx
index 3abd2f1b3..36b99ad8c 100644
--- a/ui/v2.5/src/components/Scenes/SceneCard.tsx
+++ b/ui/v2.5/src/components/Scenes/SceneCard.tsx
@@ -228,7 +228,7 @@ export const SceneCard: React.FC<ISceneCardProps> = (
   function maybeRenderOCounter() {
     if (props.scene.o_counter) {
       return (
-        <div className="o-counter">
+        <div className="o-count">
           <Button className="minimal">
             <span className="fa-icon">
               <SweatDrops />
@@ -354,12 +354,14 @@ export const SceneCard: React.FC<ISceneCardProps> = (
       }
       overlays={maybeRenderSceneStudioOverlay()}
       details={
-        <>
-          <span>{props.scene.date}</span>
-          <p>
-            <TruncatedText text={props.scene.details} lineCount={3} />
-          </p>
-        </>
+        <div className="scene-card__details">
+          <span className="scene-card__date">{props.scene.date}</span>
+          <TruncatedText
+            className="scene-card__description"
+            text={props.scene.details}
+            lineCount={3}
+          />
+        </div>
       }
       popovers={maybeRenderPopoverButtonGroup()}
       selected={props.selected}
diff --git a/ui/v2.5/src/components/Scenes/styles.scss b/ui/v2.5/src/components/Scenes/styles.scss
index 4a96a555c..353d57913 100644
--- a/ui/v2.5/src/components/Scenes/styles.scss
+++ b/ui/v2.5/src/components/Scenes/styles.scss
@@ -208,6 +208,10 @@ textarea.scene-description {
     }
   }
 
+  &__details {
+    margin-bottom: 1rem;
+  }
+
   &:hover,
   &:active {
     .scene-specs-overlay,
diff --git a/ui/v2.5/src/components/Shared/GridCard.tsx b/ui/v2.5/src/components/Shared/GridCard.tsx
index 03974fd32..3248ab2db 100644
--- a/ui/v2.5/src/components/Shared/GridCard.tsx
+++ b/ui/v2.5/src/components/Shared/GridCard.tsx
@@ -80,7 +80,13 @@ export const GridCard: React.FC<ICardProps> = (props: ICardProps) => {
 
   function maybeRenderInteractiveHeatmap() {
     if (props.interactiveHeatmap) {
-      return <img src={props.interactiveHeatmap} alt="interactive heatmap" />;
+      return (
+        <img
+          src={props.interactiveHeatmap}
+          alt="interactive heatmap"
+          className="interactive-heatmap"
+        />
+      );
     }
   }
 
diff --git a/ui/v2.5/src/components/Studios/StudioCard.tsx b/ui/v2.5/src/components/Studios/StudioCard.tsx
index fc915e156..8d58130fa 100644
--- a/ui/v2.5/src/components/Studios/StudioCard.tsx
+++ b/ui/v2.5/src/components/Studios/StudioCard.tsx
@@ -22,7 +22,7 @@ function maybeRenderParent(
 ) {
   if (!hideParent && studio.parent_studio) {
     return (
-      <div>
+      <div className="studio-parent-studios">
         <FormattedMessage
           id="part_of"
           values={{
@@ -41,7 +41,7 @@ function maybeRenderParent(
 function maybeRenderChildren(studio: GQL.StudioDataFragment) {
   if (studio.child_studios.length > 0) {
     return (
-      <div>
+      <div className="studio-child-studios">
         <FormattedMessage
           id="parent_of"
           values={{
@@ -151,12 +151,12 @@ export const StudioCard: React.FC<IProps> = ({
         />
       }
       details={
-        <>
+        <div className="studio-card__details">
           {maybeRenderParent(studio, hideParent)}
           {maybeRenderChildren(studio)}
           <RatingBanner rating={studio.rating} />
           {maybeRenderPopoverButtonGroup()}
-        </>
+        </div>
       }
       selected={selected}
       selecting={selecting}