low hanging style edits on checklistginger/recordings-schedule-mock

5 files changed, 48 insertions, 36 deletions

diff --git a/webroot/js/app.js b/webroot/js/app.js
index 0f49cf552..7a1360eb4 100644
--- a/webroot/js/app.js
+++ b/webroot/js/app.js
@@ -25,6 +25,7 @@ import {
   makeLastOnlineString,
   parseSecondsToDurationString,
   pluralize,
+  ROUTE_RECORDINGS,
   setLocalStorage,
 } from './utils/helpers.js';
 import {
@@ -527,6 +528,8 @@ export default class App extends Component {
       windowWidth,
       externalAction,
       lastDisconnectTime,
+      section,
+      sectionId,
     } = state;
 
     const {
@@ -560,7 +563,8 @@ export default class App extends Component {
     const shortHeight = windowHeight <= HEIGHT_SHORT_WIDE && !isPortrait;
     const singleColMode = windowWidth <= WIDTH_SINGLE_COL && !shortHeight;
 
-    const shouldDisplayChat = displayChat && !chatDisabled;
+    const noVideoContent = !playerActive || (section === ROUTE_RECORDINGS && sectionId !== '');
+    const shouldDisplayChat = displayChat && !chatDisabled && !noVideoContent;
     const usernameStyle = chatDisabled ? 'none' : 'flex';
 
     const extraAppClasses = classNames({
@@ -568,6 +572,7 @@ export default class App extends Component {
 
       chat: shouldDisplayChat,
       'no-chat': !shouldDisplayChat,
+      'no-video': noVideoContent,
       'single-col': singleColMode,
       'bg-gray-800': singleColMode && shouldDisplayChat,
       'short-wide': shortHeight && windowWidth > WIDTH_SINGLE_COL,
@@ -584,7 +589,7 @@ export default class App extends Component {
       externalActions &&
       html`<div
         id="external-actions-container"
-        class="flex flex-row align-center"
+        class="flex flex-row justify-end"
       >
         ${externalActions.map(
           function (action) {
@@ -684,26 +689,29 @@ export default class App extends Component {
           </section>
         </main>
 
-        <section id="user-content" aria-label="User information" class="p-8">
+        <section id="user-content" aria-label="User information" class="p-2">
+
+          ${externalActionButtons && html`${externalActionButtons}`}
+
+
           <div class="user-content flex flex-row p-8">
-            <div
-              class="user-image rounded-full bg-white p-4 mr-8 bg-no-repeat bg-center"
-              style=${bgUserLogo}
-            >
-              <img class="logo visually-hidden" alt="" src=${logo} />
+            <div class="flex flex-col align-center justify-start mr-8">
+              <div
+                class="user-image rounded-full bg-white p-4 bg-no-repeat bg-center"
+                style=${bgUserLogo}
+              >
+                <img class="logo visually-hidden" alt="" src=${logo} />
+              </div>
+              <${SocialIconsList} handles=${socialHandles} />
             </div>
-            <div
-              class="user-content-header border-b border-gray-500 border-solid"
-            >
+
+            <div class="user-content-header">
               <h2 class="font-semibold text-5xl">
                 <span class="streamer-name text-indigo-600">${name}</span>
               </h2>
-              ${externalActionButtons &&
-              html`<div>${externalActionButtons}</div>`}
               <h3 class="font-semibold text-3xl">
                 ${streamOnline && streamTitle}
               </h3>
-              <${SocialIconsList} handles=${socialHandles} />
               <div
                 id="stream-summary"
                 class="stream-summary my-4"
@@ -714,6 +722,13 @@ export default class App extends Component {
               </div>
             </div>
           </div>
+
+
+          <!-- tab bar -->
+          <div class="mx-8 border-b border-gray-500 border-solid" id="tab-bar">
+            tab bar
+          </div>
+
           <div
             id="extra-user-content"
             class="extra-user-content px-8"
diff --git a/webroot/js/components/external-action-modal.js b/webroot/js/components/external-action-modal.js
index 5811d203a..e4dc9d41c 100644
--- a/webroot/js/components/external-action-modal.js
+++ b/webroot/js/components/external-action-modal.js
@@ -106,7 +106,7 @@ export function ExternalActionButton({ action, onClick }) {
   const handleClick = () => onClick(action);
   return html`
     <button
-      class="external-action-button rounded-sm flex flex-row justify-center items-center overflow-hidden bg-gray-800"
+      class="external-action-button rounded-sm flex flex-row justify-center items-center overflow-hidden m-1 px-3 py-1 text-base  text-white bg-gray-800 rounded"
       onClick=${handleClick}
       style=${bgcolor}
     >
diff --git a/webroot/js/components/platform-logos-list.js b/webroot/js/components/platform-logos-list.js
index 51fa3e604..01ed8f7fd 100644
--- a/webroot/js/components/platform-logos-list.js
+++ b/webroot/js/components/platform-logos-list.js
@@ -18,7 +18,7 @@ function SocialIcon(props) {
     "flex": true,
     "justify-start": true,
     "items-center": true,
-    "-mr-1": true,
+    "mx-1": true,
   });
   const labelClass = classNames({
     "platform-label": true,
@@ -54,11 +54,8 @@ export default function (props) {
   `);
 
   return html`
-    <ul
-      id="social-list"
-      class="social-list flex flex-row items-center justify-start flex-wrap">
-      <span
-        class="follow-label text-xs font-bold mr-2 uppercase">Follow me:</span>
-      ${list}
+    <ul id="social-list" class="social-list m-4 text-center">
+      <p class="follow-label text-xs font-bold uppercase m-1">Follow me:</p>
+      <p class="flex flex-row items-center justify-center flex-wrap">${list}</p>
     </ul>`;
 }
diff --git a/webroot/styles/app.css b/webroot/styles/app.css
index 58e3d9f60..fa8803c4c 100644
--- a/webroot/styles/app.css
+++ b/webroot/styles/app.css
@@ -10,6 +10,13 @@ May have overrides for other components with own stylesheets.
   --video-container-height: calc((9 / 16) * 100vw);
   --header-bg-color: rgba(20,0,40,1);
   --user-image-width: 10em;
+
+  --novideo-container-height: 16em;
+}
+
+.no-video,
+.single-col.no-video {
+  --video-container-height: var(--novideo-container-height);
 }
 
 html {
@@ -78,20 +85,8 @@ header {
   display: none;
 }
 
-#external-actions-container {
-  margin: 1em 0;
-
-}
 .external-action-button {
-  border-radius: 4px;
-  color: #fff;
-  font-size: .88em;
-  padding: .25em .75em;
-  margin: .35em;
-  margin-left: 0;
-  display: flex;
   max-width: 250px;
-  padding-top: .3em;
 }
 .external-action-button:hover {
   text-decoration: underline;
@@ -246,8 +241,13 @@ header {
     display: none;
   }
 }
+/* ************************************************ */
 
 
+.no-video #video-container {
+  min-height: var(--video-container-height);
+}
+
 /* ************************************************ */
 
 
diff --git a/webroot/styles/user-content.css b/webroot/styles/user-content.css
index 21960cf78..410c1b564 100644
--- a/webroot/styles/user-content.css
+++ b/webroot/styles/user-content.css
@@ -6,9 +6,9 @@
   background-size: cover;
 }
 
-.user-social-item {
+/* .user-social-item {
   margin-right: .85rem;
-}
+} */
 
 .user-social-item .platform-icon {
   --icon-width: 28px;