Style changes

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

@@ -79,7 +79,6 @@ export const MainNavbar: React.FC = () => {
         {menuItems.map(i => (
           <LinkContainer
             activeClassName="active"
-            exact
             to={i.href}
             key={i.href}
           >

ui/v2.5/src/components/Wall/WallPanel.tsx

@@ -104,7 +104,7 @@ export const WallPanel: React.FC<IWallPanelProps> = (
     return (
       <>
         <div className={`wall-overlay ${overlayClassName}`} />
-        <div className="wall grid row">
+        <div className="wall row justify-content-center">
           {maybeRenderScenes()}
           {maybeRenderSceneMarkers()}
         </div>

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

@@ -25,7 +25,7 @@ export const PerformerCard: React.FC<IPerformerCardProps> = (
   }
 
   return (
-    <Card>
+    <Card className="performer-card">
       <Link
         to={`/performers/${performer.id}`}
       >

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

@@ -55,7 +55,7 @@ export const PerformerList: React.FC = () => {
     }
     if (filter.displayMode === DisplayMode.Grid) {
       return (
-        <div className="grid row">
+        <div className="row justify-content-center">
           {result.data.findPerformers.performers.map(p => (
             <PerformerCard key={p.id} performer={p} />
           ))}

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

@@ -48,7 +48,7 @@ export const PerformerListTable: React.FC<IPerformerListTableProps> = (
   );
 
   return (
-    <div className="grid">
+    <div className="row justify-content-center table-list">
       <Table bordered striped>
         <thead>
           <tr>

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

@@ -17,13 +17,6 @@
     float: right;
     margin-right: .5rem;
   }
-
-  &-tabpane-scenes {
-    .grid {
-      margin-right: 0;
-      padding: 0;
-    }
-  }
 }
 
 #url-field {
@@ -79,3 +72,9 @@
     width: 100%;
   }
 }
+
+.card {
+  &.performer-card {
+    padding: 0 0 1rem 0;
+  }
+}

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

@@ -19,7 +19,7 @@ export const ScenePerformerPanel: FunctionComponent<IScenePerformerPanelProps> =
 
   return (
     <>
-      <div className="grid">{cards}</div>
+      <div className="row justify-content-center">{cards}</div>
     </>
   );
 };

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

@@ -55,7 +55,7 @@ export const SceneListTable: React.FC<ISceneListTableProps> = (
   )
 
   return (
-    <div className="grid">
+    <div className="row justify-content-center table-list">
       <Table striped bordered>
         <thead>
           <tr>

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://localhost:9999/jwplayer/jwplayer.js"
+        playerScript="http://192.168.1.65:9999/jwplayer/jwplayer.js"
         customProps={config}
         onReady={this.onReady}
         onSeeked={this.onSeeked}

ui/v2.5/src/index.scss

@@ -18,26 +18,14 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
 }
 
-.grid {
+.table-list td {
-  display: flex;
+  text-align: center;
-  flex-flow: row wrap;
+  vertical-align: middle;
-  justify-content: center;
-  margin: $pt-grid-size $pt-grid-size 0 0;
-  padding: 0;
-
-  &.wall {
-    margin: 0;
-    padding: 0;
-  }
-
-  table td {
-    text-align: center;
-    vertical-align: middle;
-  }
 }
 
 .card {
   margin: 5px;
+  overflow: hidden;
 }
 
 @media (min-width: 576px) {

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

@@ -30,7 +30,6 @@ $sepia1: #63411e;
 $dark-gray2: #202b33;
 $dark-gray5: #394b59;
 
-$pt-grid-size: 10px;
 $pt-navbar-height: 4rem;
 
 .btn.active:not(.disabled),
@@ -66,15 +65,21 @@ button.minimal {
 }
 
 .nav-tabs {
-  border-bottom-color: gray;
+  border: none;
+  margin: auto;
 
-  .nav-link.active {
+  .nav-link {
-    border-color: gray;
+    border: none;
-    border-bottom-color: transparent;
     color: $text-color;
+    padding: 8px;
 
-    &:hover {
+    &.active {
-      cursor: default;
+      border-bottom: 2px solid;
+      color: $link-color;
+
+      &:hover {
+        cursor: default;
+      }
     }
   }
 }