Style fixes

ui/v2.5/src/components/MainNavbar.tsx

@@ -80,7 +80,7 @@ export const MainNavbar: React.FC = () => {
           >
             <Button className="minimal">
               <Icon icon={i.icon} />
-              {i.text}
+              <span>{i.text}</span>
             </Button>
           </LinkContainer>
         ))}

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

@@ -161,7 +161,7 @@ export const SettingsConfigurationPanel: React.FC = () => {
       <h4>Library</h4>
       <Form.Group>
         <Form.Group id="stashes">
-          <Form.Label>Stashes</Form.Label>
+          <h6>Stashes</h6>
           <FolderSelect
             directories={stashes}
             onDirectoriesChanged={onStashesChanged}
@@ -172,8 +172,9 @@ export const SettingsConfigurationPanel: React.FC = () => {
         </Form.Group>
 
         <Form.Group id="database-path">
-          <Form.Label>Database Path</Form.Label>
+          <h6>Database Path</h6>
           <Form.Control
+            className="col-6"
             defaultValue={databasePath}
             onChange={(e: any) => setDatabasePath(e.target.value)}
           />
@@ -183,8 +184,9 @@ export const SettingsConfigurationPanel: React.FC = () => {
         </Form.Group>
 
         <Form.Group id="generated-path">
-          <Form.Label>Generated Path</Form.Label>
+          <h6>Generated Path</h6>
           <Form.Control
+            className="col-6"
             defaultValue={generatedPath}
             onChange={(e: any) => setGeneratedPath(e.target.value)}
           />
@@ -195,11 +197,13 @@ export const SettingsConfigurationPanel: React.FC = () => {
         </Form.Group>
 
         <Form.Group>
-          <Form.Label>Excluded Patterns</Form.Label>
+          <h6>Excluded Patterns</h6>
+          <Form.Group>
             {excludes
-            ? excludes.map((regexp, i) => (
+              && excludes.map((regexp, i) => (
                   <InputGroup>
                     <Form.Control
+                      className="col-6"
                       value={regexp}
                       onChange={(e: any) =>
                         excludeRegexChanged(i, e.target.value)
@@ -215,13 +219,12 @@ export const SettingsConfigurationPanel: React.FC = () => {
                     </InputGroup.Append>
                   </InputGroup>
                 ))
-            : ""}
+            }
-
+          </Form.Group>
-          <Button variant="danger" onClick={() => excludeAddRegex()}>
+          <Button className="minimal" onClick={() => excludeAddRegex()}>
             <Icon icon="plus" />
           </Button>
-          <div>
+          <Form.Text>
-            <p>
             <a
               href="https://github.com/stashapp/stash/wiki/Exclude-file-configuration"
               rel="noopener noreferrer"
@@ -232,8 +235,7 @@ export const SettingsConfigurationPanel: React.FC = () => {
               </span>
               <Icon icon="question-circle" />
             </a>
-            </p>
+          </Form.Text>
-          </div>
         </Form.Group>
       </Form.Group>
 
@@ -242,8 +244,9 @@ export const SettingsConfigurationPanel: React.FC = () => {
       <Form.Group>
         <h4>Video</h4>
         <Form.Group id="transcode-size">
-          <Form.Label>Maximum transcode size</Form.Label>
+          <h6>Maximum transcode size</h6>
           <Form.Control
+            className="col-6"
             as="select"
             onChange={(event: React.FormEvent<HTMLSelectElement>) =>
               setMaxTranscodeSize(translateQuality(event.currentTarget.value))
@@ -261,8 +264,9 @@ export const SettingsConfigurationPanel: React.FC = () => {
           </Form.Text>
         </Form.Group>
         <Form.Group id="streaming-transcode-size">
-          <Form.Label>Maximum streaming transcode size</Form.Label>
+          <h6>Maximum streaming transcode size</h6>
           <Form.Control
+            className="col-6"
             as="select"
             onChange={(event: React.FormEvent<HTMLSelectElement>) =>
               setMaxStreamingTranscodeSize(
@@ -288,8 +292,9 @@ export const SettingsConfigurationPanel: React.FC = () => {
       <Form.Group>
         <h4>Authentication</h4>
         <Form.Group id="username">
-          <Form.Label>Username</Form.Label>
+          <h6>Username</h6>
           <Form.Control
+            className="col-6"
             defaultValue={username}
             onChange={(e: React.FormEvent<HTMLInputElement>) =>
               setUsername(e.currentTarget.value)
@@ -300,8 +305,9 @@ export const SettingsConfigurationPanel: React.FC = () => {
           </Form.Text>
         </Form.Group>
         <Form.Group id="password">
-          <Form.Label>Password</Form.Label>
+          <h6>Password</h6>
           <Form.Control
+            className="col-6"
             type="password"
             defaultValue={password}
             onChange={(e: React.FormEvent<HTMLInputElement>) =>
@@ -318,8 +324,9 @@ export const SettingsConfigurationPanel: React.FC = () => {
 
       <h4>Logging</h4>
       <Form.Group id="log-file">
-        <Form.Label>Log file</Form.Label>
+        <h6>Log file</h6>
         <Form.Control
+          className="col-6"
           defaultValue={logFile}
           onChange={(e: React.FormEvent<HTMLInputElement>) =>
             setLogFile(e.currentTarget.value)
@@ -333,6 +340,7 @@ export const SettingsConfigurationPanel: React.FC = () => {
 
       <Form.Group>
         <Form.Check
+          id="log-terminal"
           checked={logOut}
           label="Log to terminal"
           onChange={() => setLogOut(!logOut)}
@@ -344,8 +352,9 @@ export const SettingsConfigurationPanel: React.FC = () => {
       </Form.Group>
 
       <Form.Group id="log-level">
-        <Form.Label>Log Level</Form.Label>
+        <h6>Log Level</h6>
         <Form.Control
+          className="col-6"
           as="select"
           onChange={(event: React.FormEvent<HTMLSelectElement>) =>
             setLogLevel(event.currentTarget.value)
@@ -362,6 +371,7 @@ export const SettingsConfigurationPanel: React.FC = () => {
 
       <Form.Group>
         <Form.Check
+          id="log-http"
           checked={logAccess}
           label="Log http access"
           onChange={() => setLogAccess(!logAccess)}

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { Button, Form } from "react-bootstrap";
-import { LoadingIndicator } from 'src/components/Shared';
+import { DurationInput, LoadingIndicator } from 'src/components/Shared';
 import { StashService } from "src/core/StashService";
 import { useToast } from "src/hooks";
 
@@ -61,11 +61,13 @@ export const SettingsInterfacePanel: React.FC = () => {
       <Form.Group>
         <Form.Label>Scene / Marker Wall</Form.Label>
         <Form.Check
+          id="wall-show-title"
           checked={wallShowTitle}
           label="Display title and tags"
           onChange={() => setWallShowTitle(!wallShowTitle)}
         />
         <Form.Check
+          id="wall-sound-enabled"
           checked={soundOnPreview}
           label="Enable sound"
           onChange={() => setSoundOnPreview(!soundOnPreview)}
@@ -76,8 +78,9 @@ export const SettingsInterfacePanel: React.FC = () => {
       </Form.Group>
 
       <Form.Group>
-        <Form.Label>Scene List</Form.Label>
+        <h5>Scene List</h5>
         <Form.Check
+          id="show-text-studios"
           checked={showStudioAsText}
           label="Show Studios as text"
           onChange={() => {
@@ -87,8 +90,9 @@ export const SettingsInterfacePanel: React.FC = () => {
       </Form.Group>
 
       <Form.Group>
-        <Form.Label>Scene Player</Form.Label>
+        <h5>Scene Player</h5>
         <Form.Check
+          id="auto-start-video"
           checked={autostartVideo}
           label="Auto-start video"
           onChange={() => {
@@ -98,27 +102,21 @@ export const SettingsInterfacePanel: React.FC = () => {
 
         <Form.Group id="max-loop-duration">
           <Form.Label>Maximum loop duration</Form.Label>
-          <Form.Control
+          <DurationInput
-            type="number"
+            className="col-4"
-            defaultValue={maximumLoopDuration}
+            numericValue={maximumLoopDuration}
-            onChange={(event: React.FormEvent<HTMLInputElement>) =>
+            onValueChange={duration => setMaximumLoopDuration(duration)}
-              setMaximumLoopDuration(
-                Number.parseInt(event.currentTarget.value, 10) ?? 0
-              )
-            }
-            min={0}
-            step={1}
           />
           <Form.Text className="text-muted">
-            Maximum scene duration - in seconds - where scene player will loop
+            Maximum scene duration where scene player will loop the video - 0 to disable
-            the video - 0 to disable
           </Form.Text>
         </Form.Group>
       </Form.Group>
 
       <Form.Group>
-        <Form.Label>Custom CSS</Form.Label>
+        <h5>Custom CSS</h5>
         <Form.Check
+          id="custom-css"
           checked={cssEnabled}
           label="Custom CSS enabled"
           onChange={() => {
@@ -131,6 +129,7 @@ export const SettingsInterfacePanel: React.FC = () => {
           value={css}
           onChange={(e: any) => setCSS(e.target.value)}
           rows={16}
+          className="col-6"
         ></Form.Control>
         <Form.Text className="text-muted">
           Page must be reloaded for changes to take effect.

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

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Form, Col } from "react-bootstrap";
+import { Form } from "react-bootstrap";
 import * as GQL from "src/core/generated-graphql";
 import { StashService } from "src/core/StashService";
 
@@ -37,12 +37,11 @@ const LogElement: React.FC<ILogElementProps> = ({ logEntry }) => {
   const level = logEntry.level.padEnd(GQL.LogLevel.Progress.length);
 
   return (
-    <>
+    <div className="row">
-      <span>{logEntry.time}</span>&nbsp;
+      <span className="log-time">{logEntry.time}</span>
-      <span className={levelClass(logEntry.level)}>{level}</span>&nbsp;
+      <span className={`${levelClass(logEntry.level)}`}>{level}</span>
-      <span>{logEntry.message}</span>
+      <span className="col-9">{logEntry.message}</span>
-      <br />
+    </div>
-    </>
   );
 };
 
@@ -100,11 +99,9 @@ export const SettingsLogsPanel: React.FC = () => {
     <>
       <h4>Logs</h4>
       <Form.Row id="log-level">
-        <Col xs={1}>
+        <Form.Label className="col-2">Log Level</Form.Label>
-          <Form.Label>Log Level</Form.Label>
-        </Col>
-        <Col xs={2}>
         <Form.Control
+          className="col-2"
           as="select"
           defaultValue={logLevel}
           onChange={event => setLogLevel(event.currentTarget.value)}
@@ -115,7 +112,6 @@ export const SettingsLogsPanel: React.FC = () => {
             </option>
           ))}
           </Form.Control>
-        </Col>
       </Form.Row>
       <div className="logs">
         {maybeRenderError}

ui/v2.5/src/components/Settings/SettingsTasksPanel/GenerateButton.tsx

@@ -25,6 +25,7 @@ export const GenerateButton: React.FC = () => {
   }
 
   return (
+    <>
       <Form.Group>
         <Form.Check
           id="sprite-task"
@@ -50,12 +51,15 @@ export const GenerateButton: React.FC = () => {
           label="Transcodes (MP4 conversions of unsupported video formats)"
           onChange={() => setTranscodes(!transcodes)}
         />
-      <Button id="generate" type="submit" onClick={() => onGenerate()}>
+      </Form.Group>
+      <Form.Group>
+        <Button id="generate" variant="secondary" type="submit" onClick={() => onGenerate()}>
           Generate
         </Button>
         <Form.Text className="text-muted">
           Generate supporting image, sprite, video, vtt and other files.
         </Form.Text>
       </Form.Group>
+    </>
   );
 };

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

@@ -183,20 +183,23 @@ export const SettingsTasksPanel: React.FC = () => {
       {renderImportAlert()}
       {renderCleanAlert()}
 
-      <h4>Running Jobs</h4>
+      <h5>Running Jobs</h5>
 
       {renderJobStatus()}
 
       <hr />
 
-      <h4>Library</h4>
+      <h5>Library</h5>
       <Form.Group>
         <Form.Check
+          id="use-file-metadata"
           checked={useFileMetadata}
           label="Set name, date, details from metadata (if present)"
           onChange={() => setUseFileMetadata(!useFileMetadata)}
         />
-        <Button id="scan" type="submit" onClick={() => onScan()}>
+      </Form.Group>
+      <Form.Group>
+        <Button variant="secondary" type="submit" onClick={() => onScan()}>
           Scan
         </Button>
         <Form.Text className="text-muted">
@@ -206,25 +209,30 @@ export const SettingsTasksPanel: React.FC = () => {
 
       <hr />
 
-      <h4>Auto Tagging</h4>
+      <h5>Auto Tagging</h5>
 
       <Form.Group>
         <Form.Check
+          id="autotag-performers"
           checked={autoTagPerformers}
           label="Performers"
           onChange={() => setAutoTagPerformers(!autoTagPerformers)}
         />
         <Form.Check
+          id="autotag-studios"
           checked={autoTagStudios}
           label="Studios"
           onChange={() => setAutoTagStudios(!autoTagStudios)}
         />
         <Form.Check
+          id="autotag-tags"
           checked={autoTagTags}
           label="Tags"
           onChange={() => setAutoTagTags(!autoTagTags)}
         />
-        <Button id="autoTag" type="submit" onClick={() => onAutoTag()}>
+      </Form.Group>
+      <Form.Group>
+        <Button variant="secondary" type="submit" onClick={() => onAutoTag()}>
           Auto Tag
         </Button>
         <Form.Text className="text-muted">
@@ -233,14 +241,16 @@ export const SettingsTasksPanel: React.FC = () => {
       </Form.Group>
 
       <Form.Group>
-        <Button>
+        <Link to="/sceneFilenameParser">
-          <Link to="/sceneFilenameParser">Scene Filename Parser</Link>
+          <Button variant="secondary">
+            Scene Filename Parser
           </Button>
+        </Link>
       </Form.Group>
 
       <hr />
 
-      <h4>Generated Content</h4>
+      <h5>Generated Content</h5>
       <GenerateButton />
       <Form.Group>
         <Button
@@ -258,10 +268,11 @@ export const SettingsTasksPanel: React.FC = () => {
 
       <hr />
 
-      <h4>Metadata</h4>
+      <h5>Metadata</h5>
       <Form.Group>
         <Button
           id="export"
+          variant="secondary"
           type="submit"
           onClick={() =>
             StashService.queryMetadataExport().then(() => {

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

@@ -0,0 +1,33 @@
+.logs {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
+  font-size: smaller;
+  max-height: 100vh;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding-top: 1rem;
+  white-space: pre-wrap;
+
+  .debug {
+    color: lightgreen;
+    font-weight: bold;
+  }
+
+  .info {
+    color: white;
+    font-weight: bold;
+  }
+
+  .warning {
+    color: orange;
+    font-weight: bold;
+  }
+
+  .error {
+    color: red;
+    font-weight: bold;
+  }
+}
+
+.log-time {
+  margin-right: 1rem;
+}

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

@@ -8,6 +8,7 @@ interface IProps {
   numericValue: number;
   onValueChange(valueAsNumber: number): void;
   onReset?(): void;
+  className?: string;
 }
 
 export const DurationInput: React.FC<IProps> = (props: IProps) => {
@@ -61,7 +62,7 @@ export const DurationInput: React.FC<IProps> = (props: IProps) => {
   }
 
   return (
-    <Form.Group>
+    <Form.Group className={props.className}>
       <InputGroup>
         <Form.Control
           disabled={props.disabled}

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

@@ -62,8 +62,10 @@ export const FolderSelect: React.FC<IProps> = (props: IProps) => {
                 )}
               </InputGroup.Append>
             </InputGroup>
+            <ul className="folder-list">
               {selectableDirectories.map(path => {
                 return (
+                  <li className="folder-item">
                     <Button
                       variant="link"
                       key={path}
@@ -71,12 +73,14 @@ export const FolderSelect: React.FC<IProps> = (props: IProps) => {
                     >
                       {path}
                     </Button>
+                  </li>
                 );
               })}
+            </ul>
           </div>
         </Modal.Body>
         <Modal.Footer>
-          <Button onClick={() => onSelectDirectory()}>Add</Button>
+          <Button variant="success" onClick={() => onSelectDirectory()}>Add</Button>
         </Modal.Footer>
       </Modal>
     );
@@ -99,7 +103,7 @@ export const FolderSelect: React.FC<IProps> = (props: IProps) => {
         })}
       </Form.Group>
 
-      <Button onClick={() => setIsDisplayingDialog(true)}>Add Directory</Button>
+      <Button variant="secondary" onClick={() => setIsDisplayingDialog(true)}>Add Directory</Button>
     </>
   );
 };

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

@@ -324,9 +324,13 @@ const SelectComponent: React.FC<ISelectProps & ITypeProps> = ({
   }] : items;
 
   const styles = {
-    option: (provided:CSSProperties) => ({
+    option: (base:CSSProperties) => ({
-      ...provided,
+      ...base,
       color: "#000"
+    }),
+    container: (base:CSSProperties, state:any) => ({
+      ...base,
+      zIndex: state.isFocused ? 10 : base.zIndex
     })
   };
 

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

@@ -47,3 +47,15 @@
   margin-left: 0 !important;
   padding: 1px 7px;
 }
+
+.folder-list {
+  margin-top: .5rem 0 0 0;
+  max-height: 30vw;
+  overflow-x: auto;
+}
+
+.folder-item {
+  button {
+    padding: 0;
+  }
+}

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

@@ -12,9 +12,10 @@ export const StudioCard: React.FC<IProps> = ({ studio }) => {
     <Card className="studio-card">
       <Link
         to={`/studios/${studio.id}`}
-        className="studio previewable image"
+        className="studio-image"
-        style={{ backgroundImage: `url(${studio.image_path})` }}
+      >
-      />
+        <img alt={studio.name} src={studio.image_path ?? ''} />
+      </Link>
       <div className="card-section">
         <h5 className="text-truncate">{studio.name}</h5>
         <span>{studio.scene_count} scenes.</span>

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

@@ -256,7 +256,7 @@ export const ListFilter: React.FC<IListFilterProps> = (
             as="select"
             onChange={onChangePageSize}
             value={props.filter.itemsPerPage.toString()}
-            className="filter-item"
+            className="filter-item col-1"
           >
             {PAGE_SIZE_OPTIONS.map(s => (
               <option value={s} key={s}>{s}</option>

ui/v2.5/src/components/scenes/SceneDetails/SceneMarkerForm.tsx

@@ -64,7 +64,7 @@ export const SceneMarkerForm: React.FC<ISceneMarkerForm> = ({ sceneID, editingMa
         .catch(err => Toast.error(err));
   }
   const renderTitleField = (fieldProps: FieldProps<string>) => (
-    <div className="col-6">
+    <div className="col-10">
       <MarkerTitleSuggest
         initialMarkerTitle={fieldProps.field.value}
         onChange={(query: string) =>
@@ -75,6 +75,7 @@ export const SceneMarkerForm: React.FC<ISceneMarkerForm> = ({ sceneID, editingMa
   );
 
   const renderSecondsField = (fieldProps: FieldProps<string>) => (
+    <div className="col-3">
       <DurationInput
         onValueChange={s => fieldProps.form.setFieldValue("seconds", s)}
         onReset={() =>
@@ -85,6 +86,7 @@ export const SceneMarkerForm: React.FC<ISceneMarkerForm> = ({ sceneID, editingMa
         }
         numericValue={Number.parseInt(fieldProps.field.value ?? '0', 10)}
       />
+    </div>
   );
 
   const renderPrimaryTagField = (fieldProps: FieldProps<string>) => (
@@ -129,25 +131,27 @@ export const SceneMarkerForm: React.FC<ISceneMarkerForm> = ({ sceneID, editingMa
             <Form.Label htmlFor="title" className="col-2">
               Scene Marker Title
             </Form.Label>
-            <Field name="title" className="col-6">
+            <Field name="title">
               {renderTitleField}
             </Field>
-            <Form.Label htmlFor="seconds" className="col-1">Time</Form.Label>
-            <Field name="seconds" className="col-2">
-              {renderSecondsField}
-            </Field>
           </Form.Group>
           <Form.Group className="row">
             <Form.Label htmlFor="primaryTagId" className="col-2">
               Primary Tag
             </Form.Label>
-            <div className="col-4">
+            <div className="col-6">
               <Field name="primaryTagId">
                 {renderPrimaryTagField}
               </Field>
             </div>
+            <Form.Label htmlFor="seconds" className="col-1">Time</Form.Label>
+            <Field name="seconds">
+              {renderSecondsField}
+            </Field>
+          </Form.Group>
+          <Form.Group className="row">
             <Form.Label htmlFor="tagIds" className="col-2">Tags</Form.Label>
-            <div className="col-4">
+            <div className="col-10">
               <Field name="tagIds">
                 {renderTagsField}
               </Field>

ui/v2.5/src/components/scenes/ScenePlayer/ScenePlayer.tsx

@@ -194,7 +194,7 @@ export class ScenePlayerImpl extends React.Component<
     return (
       <ReactJWPlayer
         playerId={JWUtils.playerID}
-        playerScript="http://192.168.1.65:9999/jwplayer/jwplayer.js"
+        playerScript="http://localhost:9999/jwplayer/jwplayer.js"
         customProps={config}
         onReady={this.onReady}
         onSeeked={this.onSeeked}

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

@@ -0,0 +1,15 @@
+.studio-card {
+  padding: .5rem;
+}
+
+.studio-image {
+  height: 150px;
+  line-height: 150px;
+  text-align: center;
+
+  img {
+    max-height: 100%;
+    max-width: 100%;
+    vertical-align: middle;
+  }
+}

ui/v2.5/src/index.scss

@@ -332,37 +332,6 @@ video.preview.portrait {
   white-space: pre-line;
 }
 
-.logs {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
-  font-size: smaller;
-  max-height: 100vh;
-  overflow-y: auto;
-  padding-right: 10px;
-  white-space: pre-wrap;
-  width: 120ch;
-  word-break: break-all;
-
-  .debug {
-    color: lightgreen;
-    font-weight: bold;
-  }
-
-  .info {
-    color: white;
-    font-weight: bold;
-  }
-
-  .warning {
-    color: orange;
-    font-weight: bold;
-  }
-
-  .error {
-    color: red;
-    font-weight: bold;
-  }
-}
-
 .studio {
   .image {
     background-position: center !important;
@@ -507,8 +476,6 @@ video.preview.portrait {
 
 /* BOOTSTRAP OVERRIDES */
 .form-control {
-  width: inherit;
-
   &-plaintext {
     color: $text-color;
 
@@ -564,3 +531,13 @@ video.preview.portrait {
 .tab-content {
   padding-bottom: 2rem;
 }
+
+.svg-inline--fa {
+  margin: 0 .4rem;
+}
+
+.btn .svg-inline--fa {
+  &:last-child:first-child {
+    margin: 0;
+  }
+}

ui/v2.5/src/styles/_theme.scss

@@ -51,8 +51,8 @@ button.minimal {
   content: none;
 }
 
-nav .svg-inline--fa {
+.nav-link {
-  margin-right: 7px;
+  color: $text-color;
 }
 
 .nav-tabs {