UI fixes (#419)

ui/v2.5/src/components/List/ListFilter.tsx

@@ -276,7 +276,7 @@ export const ListFilter: React.FC<IListFilterProps> = (
           <Form.Control
             placeholder="Search..."
             defaultValue={props.filter.searchTerm}
-            onChange={onChangeQuery}
+            onInput={onChangeQuery}
             className="filter-item col-5 col-sm-2 bg-secondary text-white border-secondary"
           />
           <Form.Control

ui/v2.5/src/components/Movies/MovieDetails/Movie.tsx

@@ -182,9 +182,8 @@ export const Movie: React.FC = () => {
   return (
     <div className="row">
       <div
-        className={cx("movie-details", {
-          "col ml-sm-5": !isNew,
-          "col-8": isNew
+        className={cx("movie-details", "col", {
+          "col ml-sm-5": !isNew
         })}
       >
         {isNew && <h2>Add Movie</h2>}

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

@@ -1,23 +1,26 @@
-.card.movie-card {
-  padding: 0 0 1rem 0;
-}
-
-.movie-card {
-  &-header {
-    height: 240px;
-    line-height: 240px;
-    text-align: center;
-  }
-
-  &-image {
-    max-height: 240px;
-    object-fit: contain;
-    vertical-align: middle;
-    width: 320px;
-
-    @media (max-width: 576px) {
-      width: 100%;
-    }
-  }
-}
-  
+.card.movie-card {
+  padding: 0 0 1rem 0;
+}
+
+.movie-details {
+  max-width: 1200px;
+}
+
+.movie-card {
+  &-header {
+    height: 240px;
+    line-height: 240px;
+    text-align: center;
+  }
+
+  &-image {
+    max-height: 240px;
+    object-fit: contain;
+    vertical-align: middle;
+    width: 320px;
+
+    @media (max-width: 576px) {
+      width: 100%;
+    }
+  }
+}

ui/v2.5/src/components/Performers/PerformerDetails/PerformerDetailsPanel.tsx

@@ -103,7 +103,7 @@ export const PerformerDetailsPanel: React.FC<IPerformerDetails> = ({
 
     // image is a base64 string
     if ((state as GQL.ScrapedPerformerDataFragment).image !== undefined) {
-      let imageStr = (state as GQL.ScrapedPerformerDataFragment).image;
+      const imageStr = (state as GQL.ScrapedPerformerDataFragment).image;
       setImage(imageStr ?? undefined);
       if (onImageChange) {
         onImageChange(imageStr!);
@@ -177,7 +177,7 @@ export const PerformerDetailsPanel: React.FC<IPerformerDetails> = ({
     if (!scrapePerformerDetails) return {};
 
     // image is not supported
-    const { __typename, image, ...ret } = scrapePerformerDetails;
+    const { __typename, image: _image, ...ret } = scrapePerformerDetails;
     return ret;
   }
 

ui/v2.5/src/components/Scenes/SceneDetails/SceneOperationsPanel.tsx

@@ -19,7 +19,7 @@ export const SceneOperationsPanel: FunctionComponent<IOperationsPanelProps> = (
     await generateScreenshot({
       variables: {
         id: props.scene.id,
-        at: at
+        at
       }
     });
     Toast.success({ content: "Generating screenshot" });

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

@@ -35,12 +35,14 @@
   z-index: 1;
 }
 
-.performer-tag-container, .movie-tag-container {
+.performer-tag-container,
+.movie-tag-container {
   display: inline-block;
   margin: 5px;
 }
 
-.performer-tag.image, .movie-tag.image {
+.performer-tag.image,
+.movie-tag.image {
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
@@ -215,4 +217,4 @@
 
 .movie-table td {
   vertical-align: middle;
-}
+}

ui/v2.5/src/components/Settings/SettingsConfigurationPanel.tsx

@@ -29,7 +29,9 @@ export const SettingsConfigurationPanel: React.FC = () => {
   const [logLevel, setLogLevel] = useState<string>("Info");
   const [logAccess, setLogAccess] = useState<boolean>(true);
   const [excludes, setExcludes] = useState<string[]>([]);
-  const [scraperUserAgent, setScraperUserAgent] = useState<string | undefined>(undefined);
+  const [scraperUserAgent, setScraperUserAgent] = useState<string | undefined>(
+    undefined
+  );
 
   const { data, error, loading } = StashService.useConfiguration();
 
@@ -315,7 +317,7 @@ export const SettingsConfigurationPanel: React.FC = () => {
           <Form.Control
             className="col col-sm-6 text-input"
             defaultValue={username}
-            onChange={(e: React.FormEvent<HTMLInputElement>) =>
+            onInput={(e: React.FormEvent<HTMLInputElement>) =>
               setUsername(e.currentTarget.value)
             }
           />
@@ -329,7 +331,7 @@ export const SettingsConfigurationPanel: React.FC = () => {
             className="col col-sm-6 text-input"
             type="password"
             defaultValue={password}
-            onChange={(e: React.FormEvent<HTMLInputElement>) =>
+            onInput={(e: React.FormEvent<HTMLInputElement>) =>
               setPassword(e.currentTarget.value)
             }
           />
@@ -347,7 +349,7 @@ export const SettingsConfigurationPanel: React.FC = () => {
         <Form.Control
           className="col col-sm-6 text-input"
           defaultValue={logFile}
-          onChange={(e: React.FormEvent<HTMLInputElement>) =>
+          onInput={(e: React.FormEvent<HTMLInputElement>) =>
             setLogFile(e.currentTarget.value)
           }
         />

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

@@ -55,6 +55,7 @@ export const FolderSelect: React.FC<IProps> = (props: IProps) => {
                   setCurrentDirectory(e.currentTarget.value)
                 }
                 defaultValue={currentDirectory}
+                spellCheck={false}
               />
               <InputGroup.Append>
                 {!data || !data.directories || loading ? (

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

@@ -15,7 +15,7 @@ export const ImageInput: React.FC<IImageInput> = ({
   if (!isEditing) return <div />;
 
   return (
-    <Form.Label className="image-input">
+    <Form.Label className="image-input ml-2">
       <Button variant="secondary">{text ?? "Browse for image..."}</Button>
       <Form.Control
         type="file"

ui/v2.5/src/index.scss

@@ -186,28 +186,28 @@ div.react-select__menu {
     background-color: #fff;
     border-color: inherit;
     color: $dark-text;
-  
+
     .react-select__single-value,
     .react-select__input {
       color: $dark-text;
     }
-  
+
     .react-select__multi-value {
       background-color: #fff;
       color: $dark-text;
     }
   }
-  
+
   div.react-select__menu {
     background-color: #fff;
     color: $text-color;
-  
+
     .react-select__option {
       color: $dark-text;
     }
-  
+
     .react-select__option--is-focused {
-      background-color: rgba(167,182,194,.3);
+      background-color: rgba(167, 182, 194, .3);
     }
   }
 }
@@ -368,7 +368,8 @@ div.react-select__menu {
   overflow: hidden;
   position: relative;
 
-  &:hover {
+  input[type=file], /* FF, IE7+, chrome (except button) */
+  input[type=file]::-webkit-file-upload-button { /* chromes and blink button */
     cursor: pointer;
   }
 
@@ -383,11 +384,6 @@ div.react-select__menu {
     right: 0;
     text-align: right;
     top: 0;
-
-    &:hover {
-      cursor: pointer;
-    }
-
   }
 }