Fix tagger result styling (#4222)

* Fix tagger result styling
* Fix DEFAULT_SLIDESHOW_DELAY

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

@@ -208,10 +208,7 @@
 
 .performer-disambiguation {
   color: $text-muted;
-  /* stylelint-disable */
   font-size: 0.875em;
-  /* stylelint-enable */
-  padding-right: 0.5rem;
 }
 
 .performer-result .performer-details > span {

ui/v2.5/src/components/Tagger/scenes/PerformerResult.tsx

@@ -15,16 +15,14 @@ import { getStashboxBase } from "src/utils/stashbox";
 
 interface IPerformerName {
   performer: GQL.ScrapedPerformer | Performer;
-  className?: string;
-  baseURL: string | undefined;
   id: string | undefined | null;
+  baseURL: string | undefined;
 }
 
 const PerformerName: React.FC<IPerformerName> = ({
   performer,
-  className,
-  baseURL,
   id,
+  baseURL,
 }) => {
   const name =
     baseURL && id ? (
@@ -36,14 +34,14 @@ const PerformerName: React.FC<IPerformerName> = ({
     );
 
   return (
-    <span className={className}>
+    <>
       <span>{name}</span>
       {performer.disambiguation && (
         <span className="performer-disambiguation">
           {` (${performer.disambiguation})`}
         </span>
       )}
-    </span>
+    </>
   );
 };
 
@@ -117,12 +115,13 @@ const PerformerResult: React.FC<IPerformerResultProps> = ({
       <div className="row no-gutters my-2">
         <div className="entity-name">
           <FormattedMessage id="countables.performers" values={{ count: 1 }} />:
+          <b className="ml-2">
             <PerformerName
               performer={performer}
-            className="ml-2"
               id={performer.remote_site_id}
               baseURL={stashboxPerformerPrefix}
             />
+          </b>
         </div>
         <span className="ml-auto">
           <OptionalField
@@ -135,12 +134,13 @@ const PerformerResult: React.FC<IPerformerResultProps> = ({
               <span className="mr-2">
                 <FormattedMessage id="component_tagger.verb_matched" />:
               </span>
+              <b className="col-3 text-right">
                 <PerformerName
                   performer={matchedPerformer}
-                className="ml-3 text-right"
                   id={matchedPerformer.id}
                   baseURL={performerURLPrefix}
                 />
+              </b>
             </div>
           </OptionalField>
         </span>
@@ -169,12 +169,13 @@ const PerformerResult: React.FC<IPerformerResultProps> = ({
     <div className="row no-gutters align-items-center mt-2">
       <div className="entity-name">
         <FormattedMessage id="countables.performers" values={{ count: 1 }} />:
+        <b className="ml-2">
           <PerformerName
             performer={performer}
-          className="ml-2"
             id={performer.remote_site_id}
             baseURL={stashboxPerformerPrefix}
           />
+        </b>
       </div>
       <ButtonGroup>
         <Button variant="secondary" onClick={() => onCreate()}>

ui/v2.5/src/components/Tagger/scenes/StudioResult.tsx

@@ -12,6 +12,25 @@ import { OptionalField } from "../IncludeButton";
 import { faSave } from "@fortawesome/free-solid-svg-icons";
 import { getStashboxBase } from "src/utils/stashbox";
 
+interface IStudioName {
+  studio: GQL.ScrapedStudio | GQL.SlimStudioDataFragment;
+  id: string | undefined | null;
+  baseURL: string | undefined;
+}
+
+const StudioName: React.FC<IStudioName> = ({ studio, id, baseURL }) => {
+  const name =
+    baseURL && id ? (
+      <a href={`${baseURL}${id}`} target="_blank" rel="noreferrer">
+        {studio.name}
+      </a>
+    ) : (
+      studio.name
+    );
+
+  return <span>{name}</span>;
+};
+
 interface IStudioResultProps {
   studio: GQL.ScrapedStudio;
   selectedID: string | undefined;
@@ -58,24 +77,6 @@ const StudioResult: React.FC<IStudioResultProps> = ({
 
   if (stashLoading) return <div>Loading studio</div>;
 
-  const StudioName = ({
-    name,
-    baseURL,
-    id,
-  }: {
-    name: string;
-    baseURL: string | undefined;
-    id: string | undefined | null;
-  }) => {
-    return baseURL && id ? (
-      <a href={`${baseURL}${id}`} target="_blank" rel="noreferrer">
-        {name}
-      </a>
-    ) : (
-      <span>name</span>
-    );
-  };
-
   if (matchedStudio && matchedStashID) {
     return (
       <div className="row no-gutters my-2">
@@ -83,9 +84,9 @@ const StudioResult: React.FC<IStudioResultProps> = ({
           <FormattedMessage id="countables.studios" values={{ count: 1 }} />:
           <b className="ml-2">
             <StudioName
-              name={studio.name}
+              studio={studio}
-              baseURL={stashboxStudioPrefix}
               id={studio.remote_site_id}
+              baseURL={stashboxStudioPrefix}
             />
           </b>
         </div>
@@ -102,9 +103,9 @@ const StudioResult: React.FC<IStudioResultProps> = ({
               </span>
               <b className="col-3 text-right">
                 <StudioName
-                  name={matchedStudio.name}
+                  studio={matchedStudio}
-                  baseURL={studioURLPrefix}
                   id={matchedStudio.id}
+                  baseURL={studioURLPrefix}
                 />
               </b>
             </div>
@@ -137,9 +138,9 @@ const StudioResult: React.FC<IStudioResultProps> = ({
         <FormattedMessage id="countables.studios" values={{ count: 1 }} />:
         <b className="ml-2">
           <StudioName
-            name={studio.name}
+            studio={studio}
-            baseURL={stashboxStudioPrefix}
             id={studio.remote_site_id}
+            baseURL={stashboxStudioPrefix}
           />
         </b>
       </div>

ui/v2.5/src/hooks/Lightbox/Lightbox.tsx

@@ -70,7 +70,7 @@ const CLASSNAME_NAV = `${CLASSNAME}-nav`;
 const CLASSNAME_NAVIMAGE = `${CLASSNAME_NAV}-image`;
 const CLASSNAME_NAVSELECTED = `${CLASSNAME_NAV}-selected`;
 
-const DEFAULT_SLIDESHOW_DELAY = 5;
+const DEFAULT_SLIDESHOW_DELAY = 5000;
 const SECONDS_TO_MS = 1000;
 const MIN_VALID_INTERVAL_SECONDS = 1;
 const MIN_ZOOM = 0.1;