From 8a29fff01e57a623e1a39be22096e4a860280026 Mon Sep 17 00:00:00 2001
From: Chen-I Lim <46905241+chenilim@users.noreply.github.com>
Date: Wed, 12 May 2021 03:03:10 -0700
Subject: [PATCH] Beta badge (#404)

---
 webapp/src/components/sidebar/sidebar.tsx          |  5 ++++-
 webapp/src/components/sidebar/sidebarUserMenu.scss | 14 ++++++++++++++
 webapp/src/components/sidebar/sidebarUserMenu.tsx  | 12 +++++++++---
 3 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/webapp/src/components/sidebar/sidebar.tsx b/webapp/src/components/sidebar/sidebar.tsx
index c311bcf69e5..1609938402f 100644
--- a/webapp/src/components/sidebar/sidebar.tsx
+++ b/webapp/src/components/sidebar/sidebar.tsx
@@ -68,7 +68,10 @@ const Sidebar = React.memo((props: Props) => {
         <div className='Sidebar octo-sidebar'>
             <div className='octo-sidebar-header'>
                 <div className='heading'>
-                    <SidebarUserMenu whiteLogo={whiteLogo}/>
+                    <SidebarUserMenu
+                        whiteLogo={whiteLogo}
+                        showVersionBadge={Boolean(workspace && workspace.id !== '0')}
+                    />
                 </div>
 
                 <div className='octo-spacer'/>
diff --git a/webapp/src/components/sidebar/sidebarUserMenu.scss b/webapp/src/components/sidebar/sidebarUserMenu.scss
index dd26452347d..d065b7619da 100644
--- a/webapp/src/components/sidebar/sidebarUserMenu.scss
+++ b/webapp/src/components/sidebar/sidebarUserMenu.scss
@@ -10,8 +10,22 @@
             width: auto;
         }
 
+        .versionFrame {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+
         .version {
             font-size: 11px;
+            line-height: 11px;
+            font-weight: 500;
+            color: rgba(var(--sidebar-fg), 0.8);
+        }
+
+        .versionBadge {
+            font-size: 10px;
+            line-height: 11px;
             font-weight: 500;
             color: rgba(var(--sidebar-fg), 0.8);
         }
diff --git a/webapp/src/components/sidebar/sidebarUserMenu.tsx b/webapp/src/components/sidebar/sidebarUserMenu.tsx
index 119b9e6ba4e..d5e5fe2b3ed 100644
--- a/webapp/src/components/sidebar/sidebarUserMenu.tsx
+++ b/webapp/src/components/sidebar/sidebarUserMenu.tsx
@@ -20,12 +20,13 @@ import './sidebarUserMenu.scss'
 
 type Props = {
     whiteLogo: boolean
+    showVersionBadge: boolean
 }
 
 const SidebarUserMenu = React.memo((props: Props) => {
     const history = useHistory()
     const [showRegistrationLinkDialog, setShowRegistrationLinkDialog] = useState(false)
-    const {whiteLogo} = props
+    const {whiteLogo, showVersionBadge} = props
     const intl = useIntl()
     return (
         <div className='SidebarUserMenu'>
@@ -34,8 +35,13 @@ const SidebarUserMenu = React.memo((props: Props) => {
                     <div className='logo'>
                         {whiteLogo ? <LogoWithNameWhiteIcon/> : <LogoWithNameIcon/>}
                         <div className='octo-spacer'/>
-                        <div className='version'>
-                            {`v${Constants.versionString}`}
+                        <div className='versionFrame'>
+                            <div className='version'>
+                                {`v${Constants.versionString}`}
+                            </div>
+                            <div className='versionBadge'>
+                            &nbsp;{showVersionBadge ? 'BETA' : ''}&nbsp;
+                            </div>
                         </div>
                     </div>
                     <UserContext.Consumer>