Add classnames to count popovers (#1813)

ui/v2.5/src/components/Galleries/GalleryCard.tsx

@@ -36,7 +36,11 @@ export const GalleryCard: React.FC<IProps> = (props) => {
     ));
 
     return (
-      <HoverPopover placement="bottom" content={popoverContent}>
+      <HoverPopover
+        className="scene-count"
+        placement="bottom"
+        content={popoverContent}
+      >
         <Button className="minimal">
           <Icon icon="play-circle" />
           <span>{props.gallery.scenes.length}</span>
@@ -53,7 +57,11 @@ export const GalleryCard: React.FC<IProps> = (props) => {
     ));
 
     return (
-      <HoverPopover placement="bottom" content={popoverContent}>
+      <HoverPopover
+        className="tag-count"
+        placement="bottom"
+        content={popoverContent}
+      >
         <Button className="minimal">
           <Icon icon="tag" />
           <span>{props.gallery.tags.length}</span>
@@ -73,6 +81,7 @@ export const GalleryCard: React.FC<IProps> = (props) => {
 
     return (
       <PopoverCountButton
+        className="image-count"
         type="image"
         count={props.gallery.image_count}
         url={NavUtils.makeGalleryImagesUrl(props.gallery)}

ui/v2.5/src/components/Images/ImageCard.tsx

@@ -27,7 +27,11 @@ export const ImageCard: React.FC<IImageCardProps> = (
     ));
 
     return (
-      <HoverPopover placement="bottom" content={popoverContent}>
+      <HoverPopover
+        className="tag-count"
+        placement="bottom"
+        content={popoverContent}
+      >
         <Button className="minimal">
           <Icon icon="tag" />
           <span>{props.image.tags.length}</span>

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

@@ -41,7 +41,11 @@ export const MovieCard: FunctionComponent<IProps> = (props: IProps) => {
     ));
 
     return (
-      <HoverPopover placement="bottom" content={popoverContent}>
+      <HoverPopover
+        className="scene-count"
+        placement="bottom"
+        content={popoverContent}
+      >
         <Button className="minimal">
           <Icon icon="play-circle" />
           <span>{props.movie.scenes.length}</span>

ui/v2.5/src/components/Performers/PerformerCard.tsx

@@ -74,6 +74,7 @@ export const PerformerCard: React.FC<IPerformerCardProps> = ({
 
     return (
       <PopoverCountButton
+        className="scene-count"
         type="scene"
         count={performer.scene_count}
         url={NavUtils.makePerformerScenesUrl(performer, extraCriteria?.scenes)}
@@ -86,6 +87,7 @@ export const PerformerCard: React.FC<IPerformerCardProps> = ({
 
     return (
       <PopoverCountButton
+        className="image-count"
         type="image"
         count={performer.image_count}
         url={NavUtils.makePerformerImagesUrl(performer, extraCriteria?.images)}
@@ -98,6 +100,7 @@ export const PerformerCard: React.FC<IPerformerCardProps> = ({
 
     return (
       <PopoverCountButton
+        className="gallery-count"
         type="gallery"
         count={performer.gallery_count}
         url={NavUtils.makePerformerGalleriesUrl(
@@ -117,7 +120,7 @@ export const PerformerCard: React.FC<IPerformerCardProps> = ({
 
     return (
       <HoverPopover placement="bottom" content={popoverContent}>
-        <Button className="minimal">
+        <Button className="minimal tag-count">
           <Icon icon="tag" />
           <span>{performer.tags.length}</span>
         </Button>
@@ -130,6 +133,7 @@ export const PerformerCard: React.FC<IPerformerCardProps> = ({
 
     return (
       <PopoverCountButton
+        className="movie-count"
         type="movie"
         count={performer.movie_count}
         url={NavUtils.makePerformerMoviesUrl(performer, extraCriteria?.movies)}

ui/v2.5/src/components/Scenes/SceneCard.tsx

@@ -139,7 +139,11 @@ export const SceneCard: React.FC<ISceneCardProps> = (
     ));
 
     return (
-      <HoverPopover placement="bottom" content={popoverContent}>
+      <HoverPopover
+        className="tag-count"
+        placement="bottom"
+        content={popoverContent}
+      >
         <Button className="minimal">
           <Icon icon="tag" />
           <span>{props.scene.tags.length}</span>
@@ -181,7 +185,7 @@ export const SceneCard: React.FC<ISceneCardProps> = (
       <HoverPopover
         placement="bottom"
         content={popoverContent}
-        className="tag-tooltip"
+        className="movie-count tag-tooltip"
       >
         <Button className="minimal">
           <Icon icon="film" />
@@ -200,7 +204,11 @@ export const SceneCard: React.FC<ISceneCardProps> = (
     });
 
     return (
-      <HoverPopover placement="bottom" content={popoverContent}>
+      <HoverPopover
+        className="marker-count"
+        placement="bottom"
+        content={popoverContent}
+      >
         <Button className="minimal">
           <Icon icon="map-marker-alt" />
           <span>{props.scene.scene_markers.length}</span>
@@ -212,7 +220,7 @@ export const SceneCard: React.FC<ISceneCardProps> = (
   function maybeRenderOCounter() {
     if (props.scene.o_counter) {
       return (
-        <div>
+        <div className="o-counter">
           <Button className="minimal">
             <span className="fa-icon">
               <SweatDrops />
@@ -232,7 +240,11 @@ export const SceneCard: React.FC<ISceneCardProps> = (
     ));
 
     return (
-      <HoverPopover placement="bottom" content={popoverContent}>
+      <HoverPopover
+        className="gallery-count"
+        placement="bottom"
+        content={popoverContent}
+      >
         <Button className="minimal">
           <Icon icon="images" />
           <span>{props.scene.galleries.length}</span>
@@ -244,7 +256,7 @@ export const SceneCard: React.FC<ISceneCardProps> = (
   function maybeRenderOrganized() {
     if (props.scene.organized) {
       return (
-        <div>
+        <div className="organized">
           <Button className="minimal">
             <Icon icon="box" />
           </Button>

ui/v2.5/src/components/Shared/PerformerPopoverButton.tsx

@@ -30,7 +30,11 @@ export const PerformerPopoverButton: React.FC<IProps> = ({ performers }) => {
   ));
 
   return (
-    <HoverPopover placement="bottom" content={popoverContent}>
+    <HoverPopover
+      className="performer-count"
+      placement="bottom"
+      content={popoverContent}
+    >
       <Button className="minimal">
         <Icon icon="user" />
         <span>{performers.length}</span>

ui/v2.5/src/components/Shared/PopoverCountButton.tsx

@@ -7,12 +7,18 @@ import Icon from "./Icon";
 type PopoverLinkType = "scene" | "image" | "gallery" | "movie";
 
 interface IProps {
+  className?: string;
   url: string;
   type: PopoverLinkType;
   count: number;
 }
 
-export const PopoverCountButton: React.FC<IProps> = ({ url, type, count }) => {
+export const PopoverCountButton: React.FC<IProps> = ({
+  className,
+  url,
+  type,
+  count,
+}) => {
   const intl = useIntl();
 
   function getIcon() {
@@ -61,7 +67,7 @@ export const PopoverCountButton: React.FC<IProps> = ({ url, type, count }) => {
   }
 
   return (
-    <Link to={url} title={getTitle()}>
+    <Link className={className} to={url} title={getTitle()}>
       <Button className="minimal">
         <Icon icon={getIcon()} />
         <span>{count}</span>

ui/v2.5/src/components/Studios/StudioCard.tsx

@@ -58,6 +58,7 @@ export const StudioCard: React.FC<IProps> = ({
 
     return (
       <PopoverCountButton
+        className="scene-count"
         type="scene"
         count={studio.scene_count}
         url={NavUtils.makeStudioScenesUrl(studio)}
@@ -70,6 +71,7 @@ export const StudioCard: React.FC<IProps> = ({
 
     return (
       <PopoverCountButton
+        className="image-count"
         type="image"
         count={studio.image_count}
         url={NavUtils.makeStudioImagesUrl(studio)}
@@ -82,6 +84,7 @@ export const StudioCard: React.FC<IProps> = ({
 
     return (
       <PopoverCountButton
+        className="gallery-count"
         type="gallery"
         count={studio.gallery_count}
         url={NavUtils.makeStudioGalleriesUrl(studio)}
@@ -94,6 +97,7 @@ export const StudioCard: React.FC<IProps> = ({
 
     return (
       <PopoverCountButton
+        className="movie-count"
         type="movie"
         count={studio.movie_count}
         url={NavUtils.makeStudioMoviesUrl(studio)}

ui/v2.5/src/components/Tags/TagCard.tsx

@@ -75,6 +75,7 @@ export const TagCard: React.FC<IProps> = ({
 
     return (
       <PopoverCountButton
+        className="scene-count"
         type="scene"
         count={tag.scene_count}
         url={NavUtils.makeTagScenesUrl(tag)}
@@ -86,7 +87,7 @@ export const TagCard: React.FC<IProps> = ({
     if (!tag.scene_marker_count) return;
 
     return (
-      <Link to={NavUtils.makeTagSceneMarkersUrl(tag)}>
+      <Link className="marker-count" to={NavUtils.makeTagSceneMarkersUrl(tag)}>
         <Button className="minimal">
           <Icon icon="map-marker-alt" />
           <span>{tag.scene_marker_count}</span>
@@ -100,6 +101,7 @@ export const TagCard: React.FC<IProps> = ({
 
     return (
       <PopoverCountButton
+        className="image-count"
         type="image"
         count={tag.image_count}
         url={NavUtils.makeTagImagesUrl(tag)}
@@ -112,6 +114,7 @@ export const TagCard: React.FC<IProps> = ({
 
     return (
       <PopoverCountButton
+        className="gallery-count"
         type="gallery"
         count={tag.gallery_count}
         url={NavUtils.makeTagGalleriesUrl(tag)}
@@ -123,7 +126,7 @@ export const TagCard: React.FC<IProps> = ({
     if (!tag.performer_count) return;
 
     return (
-      <Link to={NavUtils.makeTagPerformersUrl(tag)}>
+      <Link className="performer-count" to={NavUtils.makeTagPerformersUrl(tag)}>
         <Button className="minimal">
           <Icon icon="user" />
           <span>{tag.performer_count}</span>