Move version label to top right for plugin (#941)

webapp/src/components/sidebar/sidebarUserMenu.tsx

@@ -46,12 +46,13 @@ const SidebarUserMenu = React.memo(() => {
                                     <LogoIcon/>
                                     <span>{'Boards'}</span>
                                 </>}
-                            <div className='versionFrame'>
+                            {focalboardTitle &&
-                                <div className='version'>
+                                <div className='versionFrame'>
-                                    {`v${Constants.versionString}`}
+                                    <div className='version'>
-                                </div>
+                                        {`v${Constants.versionString}`}
-                                {showVersionBadge && <div className='versionBadge'>{'BETA'}</div>}
+                                    </div>
-                            </div>
+                                    {showVersionBadge && <div className='versionBadge'>{'BETA'}</div>}
+                                </div>}
                         </div>
                     </div>
                     <Menu>

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);
+    }
 }

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'