Styling

ui/v2.5/src/App.tsx

@@ -15,8 +15,6 @@ import Studios from "./components/Studios/Studios";
 import Tags from "./components/Tags/Tags";
 import { SceneFilenameParser } from "./components/scenes/SceneFilenameParser";
 
-import "bootstrap/dist/css/bootstrap.min.css";
-
 library.add(fas);
 
 export const App: React.FC = () => (

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Spinner } from 'react-bootstrap';
+
+interface LoadingProps {
+    message: string;
+}
+
+const CLASSNAME = 'LoadingIndicator';
+const CLASSNAME_MESSAGE = `${CLASSNAME}-message`;
+
+const LoadingIndicator: React.FC<LoadingProps> = ({ message }) => (
+    <div className={CLASSNAME}>
+        <Spinner animation="border" role="status">
+            <span className="sr-only">Loading...</span>
+        </Spinner>
+        <h4 className={CLASSNAME_MESSAGE}>
+            { message }
+        </h4>
+    </div>
+);
+
+export default LoadingIndicator;

ui/v2.5/src/components/Shared/index.ts

@@ -14,3 +14,4 @@ export { DetailsEditNavbar } from "./DetailsEditNavbar";
 export { DurationInput } from "./DurationInput";
 export { TagLink } from "./TagLink";
 export { HoverPopover } from "./HoverPopover";
+export { default as LoadingIndicator } from './LoadingIndicator';

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

@@ -0,0 +1,17 @@
+.LoadingIndicator {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    height: 70vh;
+    justify-content: center;
+    width: 100%;
+
+    &-message {
+        margin-top: 1rem;
+    }
+
+    .spinner-border {
+        height: 3rem;
+        width: 3rem;
+    }
+}

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

@@ -1,63 +1,52 @@
-import { Spinner } from "react-bootstrap";
-import React, { FunctionComponent } from "react";
-import { StashService } from "../core/StashService";
+import React from "react";
+import { StashService } from "src/core/StashService";
+import { LoadingIndicator } from "src/components/Shared";
 
-export const Stats: FunctionComponent = () => {
+export const Stats: React.FC = () => {
   const { data, error, loading } = StashService.useStats();
 
-  function renderStats() {
-    if (!data || !data.stats) {
-      return;
-    }
-    return (
-      <nav id="details-container" className="level">
-        <div className="level-item has-text-centered">
+  if (loading || !data)
+    return <LoadingIndicator message="Loading..." />
+
+  if (error)
+    return <span>error.message</span> ;
+
+  return (
+    <div className="w-75 m-auto">
+      <nav className="w-75 m-auto d-flex flex-row">
+        <div className="flex-grow-1">
           <div>
             <p className="heading">Scenes</p>
             <p className="title">{data.stats.scene_count}</p>
           </div>
         </div>
-        <div className="level-item has-text-centered">
+        <div className="flex-grow-1">
           <div>
             <p className="heading">Galleries</p>
             <p className="title">{data.stats.gallery_count}</p>
           </div>
         </div>
-        <div className="level-item has-text-centered">
+        <div className="flex-grow-1">
           <div>
             <p className="heading">Performers</p>
             <p className="title">{data.stats.performer_count}</p>
           </div>
         </div>
-        <div className="level-item has-text-centered">
+        <div className="flex-grow-1">
           <div>
             <p className="heading">Studios</p>
             <p className="title">{data.stats.studio_count}</p>
           </div>
         </div>
-        <div className="level-item has-text-centered">
+        <div className="flex-grow-1">
           <div>
             <p className="heading">Tags</p>
             <p className="title">{data.stats.tag_count}</p>
           </div>
         </div>
       </nav>
-    );
-  }
 
-  return (
-    <div id="details-container">
-      {!data || loading ? (
-        <Spinner animation="border" role="status" size="sm">
-          <span className="sr-only">Loading...</span>
-        </Spinner>
-      ) : (
-        undefined
-      )}
-      {error ? <span>error.message</span> : undefined}
-      {renderStats()}
-
-      <h3>Notes</h3>
+      <h5>Notes</h5>
       <pre>
         {`
         This is still an early version, some things are still a work in progress.

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

@@ -209,9 +209,7 @@ export const ListFilter: React.FC<IListFilterProps> = (
       return (
         <Dropdown>
           <Dropdown.Toggle variant="secondary" id="more-menu">
-            <Button>
-              <Icon icon="ellipsis-h" />
-            </Button>
+            <Icon icon="ellipsis-h" />
           </Dropdown.Toggle>
           <Dropdown.Menu>{options}</Dropdown.Menu>
         </Dropdown>
@@ -245,12 +243,13 @@ export const ListFilter: React.FC<IListFilterProps> = (
   function render() {
     return (
       <>
-        <div className="filter-container">
+        <div className="d-flex justify-content-center m-auto">
           <Form.Control
             placeholder="Search..."
             value={props.filter.searchTerm}
             onChange={onChangeQuery}
             className="filter-item"
+            style={{ width: 'inherit' }}
           />
           <Form.Control
             as="select"
@@ -265,7 +264,7 @@ export const ListFilter: React.FC<IListFilterProps> = (
           <ButtonGroup className="filter-item">
             <Dropdown>
               <Dropdown.Toggle variant="secondary" id="more-menu">
-                <Button>{props.filter.sortBy}</Button>
+                {props.filter.sortBy}
               </Dropdown.Toggle>
               <Dropdown.Menu>{renderSortByOptions()}</Dropdown.Menu>
             </Dropdown>

ui/v2.5/src/components/performers/PerformerCard.tsx

@@ -25,7 +25,7 @@ export const PerformerCard: React.FC<IPerformerCardProps> = (
   }
 
   return (
-    <Card className="col-3">
+    <Card className="grid-item">
       <Link
         to={`/performers/${props.performer.id}`}
         className="performer previewable image"
@@ -34,15 +34,14 @@ export const PerformerCard: React.FC<IPerformerCardProps> = (
         {maybeRenderFavoriteBanner()}
       </Link>
       <div className="card-section">
-        <h4 className="text-truncate">{props.performer.name}</h4>
-        {age !== 0 ? <div>{ageString}</div> : ""}
-        <span>
-          Stars in {props.performer.scene_count}{" "}
+        <h5 className="text-truncate">{props.performer.name}</h5>
+        {age !== 0 ? <div className="text-muted">{ageString}</div> : ""}
+        <div className="text-muted">Stars in {props.performer.scene_count}{" "}
           <Link to={NavUtils.makePerformerScenesUrl(props.performer)}>
             scenes
           </Link>
           .
-        </span>
+        </div>
       </div>
     </Card>
   );

ui/v2.5/src/index.scss

@@ -1,5 +1,4 @@
-@import "~normalize.css";
-
+@import "styles/theme";
 @import "styles/form/grid";
 
 @import "styles/shared/details";
@@ -583,3 +582,8 @@ span.block {
 .scrubber-button:hover {
   text-decoration: underline;
 }
+
+/* BOOTSTRAP OVERRIDES */
+.form-control {
+  width: inherit;
+}

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

@@ -0,0 +1,9 @@
+
+/* Blueprint dark theme */
+$text-muted: #bfccd6;
+$link-color: #48aff0;
+$link-hover-color: #48aff0;
+$text-color: f5f8fa;
+$pre-color: $text-color;
+
+@import "node_modules/bootstrap/scss/bootstrap";