From 994ed01b49c6fee405c149fd12facbfb2686ca21 Mon Sep 17 00:00:00 2001
From: Chen-I Lim <46905241+chenilim@users.noreply.github.com>
Date: Wed, 11 Aug 2021 16:55:19 -0700
Subject: [PATCH] Move version label to top right for plugin (#941)

---
 .../components/sidebar/sidebarUserMenu.tsx    | 13 ++++++------
 webapp/src/components/topBar.scss             | 21 +++++++++++++++++++
 webapp/src/components/topBar.tsx              | 15 ++++++++++++-
 3 files changed, 42 insertions(+), 7 deletions(-)

diff --git a/webapp/src/components/sidebar/sidebarUserMenu.tsx b/webapp/src/components/sidebar/sidebarUserMenu.tsx
index 3e5b4e33f..8545d7f4c 100644
--- a/webapp/src/components/sidebar/sidebarUserMenu.tsx
+++ b/webapp/src/components/sidebar/sidebarUserMenu.tsx
@@ -46,12 +46,13 @@ const SidebarUserMenu = React.memo(() => {
                                     <LogoIcon/>
                                     <span>{'Boards'}</span>
                                 </>}
-                            <div className='versionFrame'>
-                                <div className='version'>
-                                    {`v${Constants.versionString}`}
-                                </div>
-                                {showVersionBadge && <div className='versionBadge'>{'BETA'}</div>}
-                            </div>
+                            {focalboardTitle &&
+                                <div className='versionFrame'>
+                                    <div className='version'>
+                                        {`v${Constants.versionString}`}
+                                    </div>
+                                    {showVersionBadge && <div className='versionBadge'>{'BETA'}</div>}
+                                </div>}
                         </div>
                     </div>
                     <Menu>
diff --git a/webapp/src/components/topBar.scss b/webapp/src/components/topBar.scss
index cd76cd46d..e2e8e7306 100644
--- a/webapp/src/components/topBar.scss
+++ b/webapp/src/components/topBar.scss
@@ -13,4 +13,25 @@
     .HelpIcon {
         font-size: 20px;
     }
+
+    .versionFrame {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+    }
+
+    .version {
+        font-size: 11px;
+        line-height: 11px;
+        font-weight: 500;
+        color: rgba(var(--center-channel-color-rgb), 0.7);
+    }
+
+    .versionBadge {
+        font-size: 10px;
+        line-height: 11px;
+        font-weight: 500;
+        margin-left: 3px;
+        color: rgba(var(--center-channel-color-rgb), 0.7);
+    }
 }
diff --git a/webapp/src/components/topBar.tsx b/webapp/src/components/topBar.tsx
index 1a7c085e4..546b89204 100644
--- a/webapp/src/components/topBar.tsx
+++ b/webapp/src/components/topBar.tsx
@@ -6,11 +6,24 @@ import React from 'react'
 import './topBar.scss'
 import HelpIcon from '../widgets/icons/help'
 import {Utils} from '../utils'
+import {Constants} from '../constants'
 
 const TopBar = React.memo((): JSX.Element => {
     if (Utils.isFocalboardPlugin()) {
-        return <></>
+        return (
+            <div
+                className='TopBar'
+            >
+                <div className='versionFrame'>
+                    <div className='version'>
+                        {`v${Constants.versionString}`}
+                    </div>
+                    <div className='versionBadge'>{'BETA'}</div>
+                </div>
+            </div>
+        )
     }
+
     return (
         <div
             className='TopBar'