Minor styling changes

web/components/action-buttons/NotifyButton.tsx

@@ -1,5 +1,5 @@
 import { Button } from 'antd';
-import { NotificationFilled } from '@ant-design/icons';
+import { BellFilled } from '@ant-design/icons';
 import s from './ActionButton.module.scss';
 
 interface Props {
@@ -8,12 +8,7 @@ interface Props {
 
 export default function NotifyButton({ onClick }: Props) {
   return (
-    <Button
+    <Button type="primary" className={`${s.button}`} icon={<BellFilled />} onClick={onClick}>
-      type="primary"
-      className={`${s.button}`}
-      icon={<NotificationFilled />}
-      onClick={onClick}
-    >
       Notify
     </Button>
   );

web/components/chat/ChatContainer/ChatContainer.tsx

@@ -1,15 +1,15 @@
-import { Button, Spin } from 'antd';
+import { Button } from 'antd';
 import { Virtuoso } from 'react-virtuoso';
 import { useState, useMemo, useRef } from 'react';
-import { EditFilled, LoadingOutlined, VerticalAlignBottomOutlined } from '@ant-design/icons';
+import { EditFilled, VerticalAlignBottomOutlined } from '@ant-design/icons';
 import { MessageType, NameChangeEvent } from '../../../interfaces/socket-events';
 import s from './ChatContainer.module.scss';
 import { ChatMessage } from '../../../interfaces/chat-message.model';
-import { ChatUserMessage } from '..';
+import { ChatTextField, ChatUserMessage } from '..';
 
 interface Props {
   messages: ChatMessage[];
-  loading: boolean;
+  // loading: boolean;
   usernameToHighlight: string;
   chatUserId: string;
   isModerator: boolean;
@@ -17,12 +17,12 @@ interface Props {
 }
 
 export default function ChatContainer(props: Props) {
-  const { messages, loading, usernameToHighlight, chatUserId, isModerator, isMobile } = props;
+  const { messages, usernameToHighlight, chatUserId, isModerator, isMobile } = props;
 
   const [atBottom, setAtBottom] = useState(false);
   // const [showButton, setShowButton] = useState(false);
   const chatContainerRef = useRef(null);
-  const spinIcon = <LoadingOutlined style={{ fontSize: '32px' }} spin />;
+  // const spinIcon = <LoadingOutlined style={{ fontSize: '32px' }} spin />;
 
   const getNameChangeViewForMessage = (message: NameChangeEvent) => {
     const { oldName, user } = message;
@@ -65,9 +65,9 @@ export default function ChatContainer(props: Props) {
 
   const MessagesTable = useMemo(
     () => (
-      <div style={{ height: '100%' }}>
+      <>
         <Virtuoso
-          style={{ height: '100%', width: 'auto' }}
+          style={{ height: 'calc(100% - 110px)', width: 'auto' }}
           ref={chatContainerRef}
           initialTopMostItemIndex={messages.length - 1} // Force alignment to bottom
           data={messages}
@@ -92,21 +92,21 @@ export default function ChatContainer(props: Props) {
             </Button>
           </div>
         )}
-      </div>
+      </>
     ),
     [messages, usernameToHighlight, chatUserId, isModerator, atBottom, isMobile],
   );
 
   return (
-    <div>
+    <div style={{ height: '100%' }}>
       {
         // <div className={s.chatHeader}>
         //   <span>stream chat</span>
         // </div>
+        //
       }
-      <Spin spinning={loading} indicator={spinIcon}>
+      {MessagesTable}
-        {MessagesTable}
+      <ChatTextField />
-      </Spin>
     </div>
   );
 }

web/components/chat/ChatUserMessage/ChatUserMessage.module.scss

@@ -1,4 +1,6 @@
 .root {
+  * {
+    z-index: 100; }
   position: relative;
   font-size: 0.9rem;
   padding: 5px 15px 5px 5px;

web/components/ui/Content/Content.tsx

@@ -24,7 +24,7 @@ import Sidebar from '../Sidebar';
 import Footer from '../Footer';
 import ChatContainer from '../../chat/ChatContainer';
 import { ChatMessage } from '../../../interfaces/chat-message.model';
-import ChatTextField from '../../chat/ChatTextField/ChatTextField';
+// import ChatTextField from '../../chat/ChatTextField/ChatTextField';
 import ActionButtonRow from '../../action-buttons/ActionButtonRow';
 import ActionButton from '../../action-buttons/ActionButton';
 import { Follower } from '../../../interfaces/follower';
@@ -150,7 +150,7 @@ export default function ContentComponent() {
           <StreamInfo isMobile={isMobile} />
         </div>
         <div className={s.lowerHalf}>
-          <Tabs defaultActiveKey="0">
+          <Tabs defaultActiveKey="0" style={{ height: '100%' }}>
             {isChatVisible && isMobile && (
               <TabPane
                 tab="Chat"
@@ -162,13 +162,12 @@ export default function ContentComponent() {
                   <div className={s.mobileChat}>
                     <ChatContainer
                       messages={messages}
-                      loading={appState.chatLoading}
+                      // loading={appState.chatLoading}
                       usernameToHighlight={chatDisplayName}
                       chatUserId={chatUserId}
                       isModerator={false}
                       isMobile={isMobile}
                     />
-                    <ChatTextField />
                   </div>
                 </div>
               </TabPane>

web/components/ui/Sidebar/Sidebar.tsx

@@ -1,7 +1,7 @@
 import Sider from 'antd/lib/layout/Sider';
 import { useRecoilValue } from 'recoil';
 import { ChatMessage } from '../../../interfaces/chat-message.model';
-import { ChatContainer, ChatTextField } from '../../chat';
+import { ChatContainer } from '../../chat';
 import s from './Sidebar.module.scss';
 
 import {
@@ -28,7 +28,6 @@ export default function Sidebar() {
         isModerator={false}
         isMobile={false}
       />
-      <ChatTextField />
     </Sider>
   );
 }

web/style-definitions/tokens/color/default-theme.yaml

@@ -25,7 +25,7 @@ theme:
     value: '{color.owncast.background-secondary.value}'
     comment: 'A secondary background color used in sections and controls.'
   rounded-corners:
-    value: '.5rem'
+    value: '.4rem'
     comment: 'The radius of rounded corners used in places.'
 
   success-color:

web/styles/ant-overrides.scss

@@ -5,20 +5,17 @@
 .ant-btn {
   height: 2rem;
   padding: .3rem 1rem;
-  background-color: var(--owncast-purple-25);
   font-size: .85rem;
   font-weight: bold;
   border-radius: var(--theme-rounded-corners);
   border-color: transparent;
-  color: var(--white-75);
+  background-color: var(--color-owncast-gray-500);
+  color: var(--color-owncast-gray-100);
   &:hover,
   &:focus {
-    background-color: var(--color-owncast-purple-700);
+    background-color: var(--color-owncast-gray-700);
     border-color: transparent;
-    color: var(--white);
+    color: inherit;
-  }
-  &:focus {
-    border-color: var(--owncast-purple-25);
   }
   &[ant-click-animating-without-extra-node]:after {
     animation: 0s !important;
@@ -26,20 +23,25 @@
 }
 
 .ant-btn-primary {
-  background-color: var(--owncast-purple-50);
+  background-color: var(--color-owncast-purple-700);
+  &:hover,
+  &:focus {
+    background-color: var(--color-owncast-purple-500);
+    border-color: transparent;
+  }
 }
 
 .ant-btn-primary[disabled] {
   background-color: var(--white-25);
-  color: var(--white-50);
   &:hover {
     background-color: var(--white-35);
   }
 }
 
-.ant-btn-background-ghost {
+.ant-btn-ghost {
   border: 0px;
   box-shadow: none !important;
+  background-color: transparent !important;
   &:hover,
   &:focus {
     background-color: var(--theme-info-color);
@@ -54,3 +56,22 @@
   border-radius: var(--theme-rounded-corners);
   background-color: var(--color-owncast-background-secondary);
 }
+
+/* ------------------------- //
+  TABS
+// ------------------------- */
+
+@media (max-width: 768px) {
+  .ant-tabs-content {
+    height: 100%;
+  }
+}
+
+/* ------------------------- //
+  TOOLTIP
+// ------------------------- */
+
+.ant-tooltip {
+  // border-radius: var(--theme-rounded-corners);
+  // overflow: hidden;
+}

web/styles/theme.less

@@ -1,9 +1,9 @@
 
 // Do not edit directly
-// Generated on Wed, 29 Jun 2022 00:29:51 GMT
+// Generated on Sun, 10 Jul 2022 05:37:28 GMT
 // 
 // How to edit these values:
-// Edit the corresponding tokens file under the style-definitions directory
+// Edit the corresponding token file under the style-definitions directory
 // in the Owncast web project.
 
 @text-color: var(--theme-text-color);
@@ -29,7 +29,7 @@
 @theme-header-font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 @theme-background: #202232; // The main background color of the page.
 @theme-background-secondary: #282a30; // A secondary background color used in sections and controls.
-@theme-rounded-corners: 5px; // The radius of rounded corners used in places.
+@theme-rounded-corners: .5rem; // The radius of rounded corners used in places.
 @theme-success-color: #12b76a;
 @theme-info-color: #d6bbfb;
 @theme-warning-color: #f79009;
@@ -65,6 +65,7 @@
 @color-owncast-gray-100: #f2f4f7;
 @color-owncast-gray-300: #d0d5dd;
 @color-owncast-gray-500: #667085;
+@color-owncast-gray-600: #4b4c4d;
 @color-owncast-gray-700: #344054;
 @color-owncast-gray-900: #101828;
 @color-owncast-logo-purple: #7871ff;

web/styles/variables.css

@@ -1,9 +1,9 @@
 /**
  * Do not edit directly
- * Generated on Wed, 29 Jun 2022 00:29:51 GMT
+ * Generated on Sun, 10 Jul 2022 05:37:28 GMT
  * 
  * How to edit these values:
- * Edit the corresponding tokens file under the style-definitions directory
+ * Edit the corresponding token file under the style-definitions directory
  * in the Owncast web project.
  */
 
@@ -31,7 +31,7 @@
   --theme-header-font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
   --theme-background: #202232; /* The main background color of the page. */
   --theme-background-secondary: #282a30; /* A secondary background color used in sections and controls. */
-  --theme-rounded-corners: 5px; /* The radius of rounded corners used in places. */
+  --theme-rounded-corners: .5rem; /* The radius of rounded corners used in places. */
   --theme-success-color: #12b76a;
   --theme-info-color: #d6bbfb;
   --theme-warning-color: #f79009;
@@ -67,6 +67,7 @@
   --color-owncast-gray-100: #f2f4f7;
   --color-owncast-gray-300: #d0d5dd;
   --color-owncast-gray-500: #667085;
+  --color-owncast-gray-600: #4b4c4d;
   --color-owncast-gray-700: #344054;
   --color-owncast-gray-900: #101828;
   --color-owncast-logo-purple: #7871ff;