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

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>

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>

ui/v2.5/src/components/Movies/MovieCard.tsx

@@ -85,12 +85,14 @@ export const MovieCard: FunctionComponent<IProps> = (props: IProps) => {
         </>
       }
       details={
-        <>
+        <div className="movie-card__details">
-          <span>{props.movie.date}</span>
+          <span className="movie-card__date">{props.movie.date}</span>
-          <p>
+          <TruncatedText
-            <TruncatedText text={props.movie.synopsis} lineCount={3} />
+            className="movie-card__description"
-          </p>
+            text={props.movie.synopsis}
-        </>
+            lineCount={3}
+          />
+        </div>
       }
       selected={props.selected}
       selecting={props.selecting}

ui/v2.5/src/components/Movies/styles.scss

@@ -17,6 +17,10 @@
   .movie-scene-number {
     text-align: center;
   }
+
+  &__details {
+    margin-bottom: 1rem;
+  }
 }
 
 .movie-images {

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> : ""}
+          {age !== 0 ? (
-          <Link to={NavUtils.makePerformersCountryUrl(performer)}>
+            <div className="performer-card__age">{ageString}</div>
-            <CountryFlag country={performer.country} />
+          ) : (
-          </Link>
+            ""
+          )}
           {maybeRenderPopoverButtonGroup()}
         </>
       }

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 {

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={
-        <>
+        <div className="scene-card__details">
-          <span>{props.scene.date}</span>
+          <span className="scene-card__date">{props.scene.date}</span>
-          <p>
+          <TruncatedText
-            <TruncatedText text={props.scene.details} lineCount={3} />
+            className="scene-card__description"
-          </p>
+            text={props.scene.details}
-        </>
+            lineCount={3}
+          />
+        </div>
       }
       popovers={maybeRenderPopoverButtonGroup()}
       selected={props.selected}

ui/v2.5/src/components/Scenes/styles.scss

@@ -208,6 +208,10 @@ textarea.scene-description {
     }
   }
 
+  &__details {
+    margin-bottom: 1rem;
+  }
+
   &:hover,
   &:active {
     .scene-specs-overlay,

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"
+        />
+      );
     }
   }
 

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}