From 247ad0a47099b772fb89ff36532da46829b837e0 Mon Sep 17 00:00:00 2001
From: Infinite <infinitekittens@protonmail.com>
Date: Wed, 29 Jan 2020 10:52:10 +0100
Subject: [PATCH] Style fixes

---
 ui/v2.5/src/components/MainNavbar.tsx         |   2 +-
 .../Settings/SettingsConfigurationPanel.tsx   | 102 ++++++++++--------
 .../Settings/SettingsInterfacePanel.tsx       |  31 +++---
 .../components/Settings/SettingsLogsPanel.tsx |  40 ++++---
 .../SettingsTasksPanel/GenerateButton.tsx     |  68 ++++++------
 .../SettingsTasksPanel/SettingsTasksPanel.tsx |  31 ++++--
 ui/v2.5/src/components/Settings/styles.scss   |  33 ++++++
 .../src/components/Shared/DurationInput.tsx   |   3 +-
 .../Shared/FolderSelect/FolderSelect.tsx      |  30 +++---
 ui/v2.5/src/components/Shared/Select.tsx      |   8 +-
 ui/v2.5/src/components/Shared/styles.scss     |  12 +++
 ui/v2.5/src/components/Studios/StudioCard.tsx |   7 +-
 ui/v2.5/src/components/list/ListFilter.tsx    |   2 +-
 .../scenes/SceneDetails/SceneMarkerForm.tsx   |  40 +++----
 .../scenes/ScenePlayer/ScenePlayer.tsx        |   2 +-
 ui/v2.5/src/components/styles.scss            |  15 +++
 ui/v2.5/src/index.scss                        |  43 ++------
 ui/v2.5/src/styles/_theme.scss                |   4 +-
 18 files changed, 272 insertions(+), 201 deletions(-)
 create mode 100644 ui/v2.5/src/components/Settings/styles.scss
 create mode 100644 ui/v2.5/src/components/styles.scss

diff --git a/ui/v2.5/src/components/MainNavbar.tsx b/ui/v2.5/src/components/MainNavbar.tsx
index d29319ec4..df68779ab 100644
--- a/ui/v2.5/src/components/MainNavbar.tsx
+++ b/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>
         ))}
diff --git a/ui/v2.5/src/components/Settings/SettingsConfigurationPanel.tsx b/ui/v2.5/src/components/Settings/SettingsConfigurationPanel.tsx
index 3ab11fa12..7d6775467 100644
--- a/ui/v2.5/src/components/Settings/SettingsConfigurationPanel.tsx
+++ b/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,45 +197,45 @@ export const SettingsConfigurationPanel: React.FC = () => {
         </Form.Group>
 
         <Form.Group>
-          <Form.Label>Excluded Patterns</Form.Label>
-          {excludes
-            ? excludes.map((regexp, i) => (
-                <InputGroup>
-                  <Form.Control
-                    value={regexp}
-                    onChange={(e: any) =>
-                      excludeRegexChanged(i, e.target.value)
-                    }
-                  />
-                  <InputGroup.Append>
-                    <Button
-                      variant="danger"
-                      onClick={() => excludeRemoveRegex(i)}
-                    >
-                      <Icon icon="minus" />
-                    </Button>
-                  </InputGroup.Append>
-                </InputGroup>
-              ))
-            : ""}
-
-          <Button variant="danger" onClick={() => excludeAddRegex()}>
+          <h6>Excluded Patterns</h6>
+          <Form.Group>
+            {excludes
+              && excludes.map((regexp, i) => (
+                  <InputGroup>
+                    <Form.Control
+                      className="col-6"
+                      value={regexp}
+                      onChange={(e: any) =>
+                        excludeRegexChanged(i, e.target.value)
+                      }
+                    />
+                    <InputGroup.Append>
+                      <Button
+                        variant="danger"
+                        onClick={() => excludeRemoveRegex(i)}
+                      >
+                        <Icon icon="minus" />
+                      </Button>
+                    </InputGroup.Append>
+                  </InputGroup>
+                ))
+            }
+          </Form.Group>
+          <Button className="minimal" onClick={() => excludeAddRegex()}>
             <Icon icon="plus" />
           </Button>
-          <div>
-            <p>
-              <a
-                href="https://github.com/stashapp/stash/wiki/Exclude-file-configuration"
-                rel="noopener noreferrer"
-                target="_blank"
-              >
-                <span>
-                  Regexps of files/paths to exclude from Scan and add to Clean
-                </span>
-                <Icon icon="question-circle" />
-              </a>
-            </p>
-          </div>
+          <Form.Text>
+            <a
+              href="https://github.com/stashapp/stash/wiki/Exclude-file-configuration"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <span>
+                Regexps of files/paths to exclude from Scan and add to Clean
+              </span>
+              <Icon icon="question-circle" />
+            </a>
+          </Form.Text>
         </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)}
diff --git a/ui/v2.5/src/components/Settings/SettingsInterfacePanel.tsx b/ui/v2.5/src/components/Settings/SettingsInterfacePanel.tsx
index f3e699942..5146afc16 100644
--- a/ui/v2.5/src/components/Settings/SettingsInterfacePanel.tsx
+++ b/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
-            type="number"
-            defaultValue={maximumLoopDuration}
-            onChange={(event: React.FormEvent<HTMLInputElement>) =>
-              setMaximumLoopDuration(
-                Number.parseInt(event.currentTarget.value, 10) ?? 0
-              )
-            }
-            min={0}
-            step={1}
+          <DurationInput
+            className="col-4"
+            numericValue={maximumLoopDuration}
+            onValueChange={duration => setMaximumLoopDuration(duration)}
           />
           <Form.Text className="text-muted">
-            Maximum scene duration - in seconds - where scene player will loop
-            the video - 0 to disable
+            Maximum scene duration where scene player will loop 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.
diff --git a/ui/v2.5/src/components/Settings/SettingsLogsPanel.tsx b/ui/v2.5/src/components/Settings/SettingsLogsPanel.tsx
index 4a4d7d8bc..1ab59465e 100644
--- a/ui/v2.5/src/components/Settings/SettingsLogsPanel.tsx
+++ b/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 (
-    <>
-      <span>{logEntry.time}</span>&nbsp;
-      <span className={levelClass(logEntry.level)}>{level}</span>&nbsp;
-      <span>{logEntry.message}</span>
-      <br />
-    </>
+    <div className="row">
+      <span className="log-time">{logEntry.time}</span>
+      <span className={`${levelClass(logEntry.level)}`}>{level}</span>
+      <span className="col-9">{logEntry.message}</span>
+    </div>
   );
 };
 
@@ -100,22 +99,19 @@ export const SettingsLogsPanel: React.FC = () => {
     <>
       <h4>Logs</h4>
       <Form.Row id="log-level">
-        <Col xs={1}>
-          <Form.Label>Log Level</Form.Label>
-        </Col>
-        <Col xs={2}>
-          <Form.Control
-            as="select"
-            defaultValue={logLevel}
-            onChange={event => setLogLevel(event.currentTarget.value)}
-          >
-            {logLevels.map(level => (
-              <option key={level} value={level}>
-                {level}
-              </option>
-            ))}
+        <Form.Label className="col-2">Log Level</Form.Label>
+        <Form.Control
+          className="col-2"
+          as="select"
+          defaultValue={logLevel}
+          onChange={event => setLogLevel(event.currentTarget.value)}
+        >
+          {logLevels.map(level => (
+            <option key={level} value={level}>
+              {level}
+            </option>
+          ))}
           </Form.Control>
-        </Col>
       </Form.Row>
       <div className="logs">
         {maybeRenderError}
diff --git a/ui/v2.5/src/components/Settings/SettingsTasksPanel/GenerateButton.tsx b/ui/v2.5/src/components/Settings/SettingsTasksPanel/GenerateButton.tsx
index af280ce33..331cc6263 100644
--- a/ui/v2.5/src/components/Settings/SettingsTasksPanel/GenerateButton.tsx
+++ b/ui/v2.5/src/components/Settings/SettingsTasksPanel/GenerateButton.tsx
@@ -25,37 +25,41 @@ export const GenerateButton: React.FC = () => {
   }
 
   return (
-    <Form.Group>
-      <Form.Check
-        id="sprite-task"
-        checked={sprites}
-        label="Sprites (for the scene scrubber)"
-        onChange={() => setSprites(!sprites)}
-      />
-      <Form.Check
-        id="preview-task"
-        checked={previews}
-        label="Previews (video previews which play when hovering over a scene)"
-        onChange={() => setPreviews(!previews)}
-      />
-      <Form.Check
-        id="marker-task"
-        checked={markers}
-        label="Markers (20 second videos which begin at the given timecode)"
-        onChange={() => setMarkers(!markers)}
-      />
-      <Form.Check
-        id="transcode-task"
-        checked={transcodes}
-        label="Transcodes (MP4 conversions of unsupported video formats)"
-        onChange={() => setTranscodes(!transcodes)}
-      />
-      <Button id="generate" type="submit" onClick={() => onGenerate()}>
-        Generate
-      </Button>
-      <Form.Text className="text-muted">
-        Generate supporting image, sprite, video, vtt and other files.
-      </Form.Text>
-    </Form.Group>
+    <>
+      <Form.Group>
+        <Form.Check
+          id="sprite-task"
+          checked={sprites}
+          label="Sprites (for the scene scrubber)"
+          onChange={() => setSprites(!sprites)}
+        />
+        <Form.Check
+          id="preview-task"
+          checked={previews}
+          label="Previews (video previews which play when hovering over a scene)"
+          onChange={() => setPreviews(!previews)}
+        />
+        <Form.Check
+          id="marker-task"
+          checked={markers}
+          label="Markers (20 second videos which begin at the given timecode)"
+          onChange={() => setMarkers(!markers)}
+        />
+        <Form.Check
+          id="transcode-task"
+          checked={transcodes}
+          label="Transcodes (MP4 conversions of unsupported video formats)"
+          onChange={() => setTranscodes(!transcodes)}
+        />
+      </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>
+    </>
   );
 };
diff --git a/ui/v2.5/src/components/Settings/SettingsTasksPanel/SettingsTasksPanel.tsx b/ui/v2.5/src/components/Settings/SettingsTasksPanel/SettingsTasksPanel.tsx
index c5e1494a3..cf2f0bb72 100644
--- a/ui/v2.5/src/components/Settings/SettingsTasksPanel/SettingsTasksPanel.tsx
+++ b/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">Scene Filename Parser</Link>
-        </Button>
+        <Link to="/sceneFilenameParser">
+          <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(() => {
diff --git a/ui/v2.5/src/components/Settings/styles.scss b/ui/v2.5/src/components/Settings/styles.scss
new file mode 100644
index 000000000..07befbb4a
--- /dev/null
+++ b/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;
+}
diff --git a/ui/v2.5/src/components/Shared/DurationInput.tsx b/ui/v2.5/src/components/Shared/DurationInput.tsx
index 10699f3fe..b85f399ec 100644
--- a/ui/v2.5/src/components/Shared/DurationInput.tsx
+++ b/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}
diff --git a/ui/v2.5/src/components/Shared/FolderSelect/FolderSelect.tsx b/ui/v2.5/src/components/Shared/FolderSelect/FolderSelect.tsx
index f0f626788..40a77a5e6 100644
--- a/ui/v2.5/src/components/Shared/FolderSelect/FolderSelect.tsx
+++ b/ui/v2.5/src/components/Shared/FolderSelect/FolderSelect.tsx
@@ -62,21 +62,25 @@ export const FolderSelect: React.FC<IProps> = (props: IProps) => {
                 )}
               </InputGroup.Append>
             </InputGroup>
-            {selectableDirectories.map(path => {
-              return (
-                <Button
-                  variant="link"
-                  key={path}
-                  onClick={() => setCurrentDirectory(path)}
-                >
-                  {path}
-                </Button>
-              );
-            })}
+            <ul className="folder-list">
+              {selectableDirectories.map(path => {
+                return (
+                  <li className="folder-item">
+                    <Button
+                      variant="link"
+                      key={path}
+                      onClick={() => setCurrentDirectory(path)}
+                    >
+                      {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>
     </>
   );
 };
diff --git a/ui/v2.5/src/components/Shared/Select.tsx b/ui/v2.5/src/components/Shared/Select.tsx
index 61b318c41..92dfc7c0b 100644
--- a/ui/v2.5/src/components/Shared/Select.tsx
+++ b/ui/v2.5/src/components/Shared/Select.tsx
@@ -324,9 +324,13 @@ const SelectComponent: React.FC<ISelectProps & ITypeProps> = ({
   }] : items;
 
   const styles = {
-    option: (provided:CSSProperties) => ({
-      ...provided,
+    option: (base:CSSProperties) => ({
+      ...base,
       color: "#000"
+    }),
+    container: (base:CSSProperties, state:any) => ({
+      ...base,
+      zIndex: state.isFocused ? 10 : base.zIndex
     })
   };
 
diff --git a/ui/v2.5/src/components/Shared/styles.scss b/ui/v2.5/src/components/Shared/styles.scss
index aa23b93f4..3a5b6cf9f 100644
--- a/ui/v2.5/src/components/Shared/styles.scss
+++ b/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;
+  }
+}
diff --git a/ui/v2.5/src/components/Studios/StudioCard.tsx b/ui/v2.5/src/components/Studios/StudioCard.tsx
index 8507263e8..e6f813270 100644
--- a/ui/v2.5/src/components/Studios/StudioCard.tsx
+++ b/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"
-        style={{ backgroundImage: `url(${studio.image_path})` }}
-      />
+        className="studio-image"
+      >
+        <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>
diff --git a/ui/v2.5/src/components/list/ListFilter.tsx b/ui/v2.5/src/components/list/ListFilter.tsx
index 8cca59add..89395db35 100644
--- a/ui/v2.5/src/components/list/ListFilter.tsx
+++ b/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>
diff --git a/ui/v2.5/src/components/scenes/SceneDetails/SceneMarkerForm.tsx b/ui/v2.5/src/components/scenes/SceneDetails/SceneMarkerForm.tsx
index 89c9ccf68..c21c32128 100644
--- a/ui/v2.5/src/components/scenes/SceneDetails/SceneMarkerForm.tsx
+++ b/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,16 +75,18 @@ export const SceneMarkerForm: React.FC<ISceneMarkerForm> = ({ sceneID, editingMa
   );
 
   const renderSecondsField = (fieldProps: FieldProps<string>) => (
-    <DurationInput
-      onValueChange={s => fieldProps.form.setFieldValue("seconds", s)}
-      onReset={() =>
-        fieldProps.form.setFieldValue(
-          "seconds",
-          Math.round(playerPosition ?? 0)
-        )
-      }
-      numericValue={Number.parseInt(fieldProps.field.value ?? '0', 10)}
-    />
+    <div className="col-3">
+      <DurationInput
+        onValueChange={s => fieldProps.form.setFieldValue("seconds", s)}
+        onReset={() =>
+          fieldProps.form.setFieldValue(
+            "seconds",
+            Math.round(playerPosition ?? 0)
+          )
+        }
+        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>
diff --git a/ui/v2.5/src/components/scenes/ScenePlayer/ScenePlayer.tsx b/ui/v2.5/src/components/scenes/ScenePlayer/ScenePlayer.tsx
index e795727a8..c7b86b012 100644
--- a/ui/v2.5/src/components/scenes/ScenePlayer/ScenePlayer.tsx
+++ b/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}
diff --git a/ui/v2.5/src/components/styles.scss b/ui/v2.5/src/components/styles.scss
new file mode 100644
index 000000000..32cd4d47d
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/ui/v2.5/src/index.scss b/ui/v2.5/src/index.scss
index 52464aa09..aeffadf23 100755
--- a/ui/v2.5/src/index.scss
+++ b/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;
+  }
+}
diff --git a/ui/v2.5/src/styles/_theme.scss b/ui/v2.5/src/styles/_theme.scss
index f7e27999b..610088cc7 100644
--- a/ui/v2.5/src/styles/_theme.scss
+++ b/ui/v2.5/src/styles/_theme.scss
@@ -51,8 +51,8 @@ button.minimal {
   content: none;
 }
 
-nav .svg-inline--fa {
-  margin-right: 7px;
+.nav-link {
+  color: $text-color;
 }
 
 .nav-tabs {