Style fixes

2025-12-17 12:24:38 +03:00 · 2020-01-29 10:52:10 +01:00
parent ac3d03715f
commit 247ad0a470
18 changed files with 272 additions and 201 deletions
--- 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>
        ))}
--- 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,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>
                ))
-            : ""}
-
-          <Button variant="danger" onClick={() => excludeAddRegex()}>
+            }
+          </Form.Group>
+          <Button className="minimal" onClick={() => excludeAddRegex()}>
            <Icon icon="plus" />
          </Button>
-          <div>
-            <p>
+          <Form.Text>
            <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>
-          </div>
+          </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)}
--- 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.
--- 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,11 +99,9 @@ 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.Label className="col-2">Log Level</Form.Label>
        <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}
--- a/ui/v2.5/src/components/Settings/SettingsTasksPanel/GenerateButton.tsx
+++ b/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>
+    </>
  );
 };
--- 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>
+        <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(() => {
--- a/ui/v2.5/src/components/Settings/styles.scss
+++ 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;
+}
--- 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}
--- a/ui/v2.5/src/components/Shared/FolderSelect/FolderSelect.tsx
+++ b/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>
    </>
  );
 };
--- 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
    })
  };

--- 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;
+  }
+}
--- 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>
--- 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>
--- 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,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>
--- 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}
--- a/ui/v2.5/src/components/styles.scss
+++ 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;
+  }
+}
--- 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;
+  }
+}
--- 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 {