Beta badge (#404)

mattermost-community · May 12, 2021 · 8a29fff · 8a29fff
1 parent bff7d67
commit 8a29fff
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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>