From edfb44d7a803ba7a976a4930ff60302d526c71b4 Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Mon, 19 Dec 2022 11:57:49 -0800
Subject: [PATCH] Change style of compose post button + remove thumbnail
 preview. Closes #2463

---
 web/components/MainLayout.tsx | 29 ++++++++++-------------------
 1 file changed, 10 insertions(+), 19 deletions(-)

diff --git a/web/components/MainLayout.tsx b/web/components/MainLayout.tsx
index 7d4999363..5bb697a69 100644
--- a/web/components/MainLayout.tsx
+++ b/web/components/MainLayout.tsx
@@ -100,12 +100,9 @@ export const MainLayout: FC<MainLayoutProps> = ({ children }) => {
   const streamDurationString = broadcaster
     ? parseSecondsToDurationString(differenceInSeconds(new Date(), new Date(broadcaster.time)))
     : '';
-  const currentThumbnail = online ? (
-    <img src="/thumbnail.jpg" className="online-thumbnail" alt="current thumbnail" width="1rem" />
-  ) : null;
+
   const statusIcon = online ? <PlayCircleFilled /> : <MinusSquareFilled />;
   const statusMessage = online ? `Online ${streamDurationString}` : 'Offline';
-  const popoverTitle = <Typography.Text>Thumbnail</Typography.Text>;
 
   const statusIndicator = (
     <div className="online-status-indicator">
@@ -113,13 +110,6 @@ export const MainLayout: FC<MainLayoutProps> = ({ children }) => {
       <span className="status-icon">{statusIcon}</span>
     </div>
   );
-  const statusIndicatorWithThumb = online ? (
-    <Popover content={currentThumbnail} title={popoverTitle} trigger="hover">
-      {statusIndicator}
-    </Popover>
-  ) : (
-    statusIndicator
-  );
 
   const integrationsMenu = [
     {
@@ -288,28 +278,29 @@ export const MainLayout: FC<MainLayoutProps> = ({ children }) => {
       <Layout className="layout-main">
         <Header className="layout-header">
           <Space direction="horizontal">
-            <Tooltip title="Compose post to your followers">
+            <Tooltip title="Compose post to your social followers">
               <Button
-                type="primary"
-                shape="circle"
+                type="link"
                 icon={<EditOutlined />}
-                size="large"
+                size="small"
                 onClick={handleCreatePostButtonPressed}
-                style={{ display: federationEnabled ? 'block' : 'none' }}
-              />
+                style={{ display: federationEnabled ? 'block' : 'none', margin: '10px' }}
+              >
+                Compose Post
+              </Button>
             </Tooltip>
           </Space>
           <div className="global-stream-title-container">
             <TextFieldWithSubmit
               fieldName="streamTitle"
               {...TEXTFIELD_PROPS_STREAM_TITLE}
-              placeholder="What are you streaming now"
+              placeholder="What are you streaming now? (Stream title)"
               value={currentStreamTitle}
               initialValue={instanceDetails.streamTitle}
               onChange={handleStreamTitleChanged}
             />
           </div>
-          <Space direction="horizontal">{statusIndicatorWithThumb}</Space>
+          <Space direction="horizontal">{statusIndicator}</Space>
         </Header>
 
         {headerAlertMessage}