diff --git a/webapp/src/components/sidebar.scss b/webapp/src/components/sidebar.scss index 44f8ae9f3..677292572 100644 --- a/webapp/src/components/sidebar.scss +++ b/webapp/src/components/sidebar.scss @@ -30,10 +30,21 @@ flex: 0 0 auto; } - .LogoWithNameIcon, .LogoWithNameWhiteIcon { - max-height: 24px; - margin-top: 6px; - width: auto; + .logo { + display: flex; + flex-direction: row; + align-items: center; + + .LogoWithNameIcon, .LogoWithNameWhiteIcon { + max-height: 24px; + width: auto; + } + + .version { + font-size: 11px; + font-weight: 500; + color: rgba(var(--sidebar-fg), 0.8); + } } .octo-sidebar-list { @@ -68,6 +79,7 @@ >.heading { line-height: 30px; cursor: default; + flex-grow: 1; } >.IconButton { diff --git a/webapp/src/components/sidebar.tsx b/webapp/src/components/sidebar.tsx index 9e14ae98e..a8aec911a 100644 --- a/webapp/src/components/sidebar.tsx +++ b/webapp/src/components/sidebar.tsx @@ -6,6 +6,7 @@ import {FormattedMessage, injectIntl, IntlShape} from 'react-intl' import {Archiver} from '../archiver' import {Board, MutableBoard} from '../blocks/board' import {BoardView, IViewType, MutableBoardView} from '../blocks/boardView' +import {Constants} from '../constants' import mutator from '../mutator' import octoClient from '../octoClient' import {darkTheme, defaultTheme, lightTheme, loadTheme, setTheme, Theme} from '../theme' @@ -364,7 +365,13 @@ class Sidebar extends React.Component { return ( - {this.state.whiteLogo ? : } +
+ {this.state.whiteLogo ? : } +
+
+ {`v${Constants.versionString}`} +
+
{user && user.username !== 'single-user' && <> {user.username} diff --git a/webapp/src/constants.ts b/webapp/src/constants.ts index 25fc0c83a..9633c152e 100644 --- a/webapp/src/constants.ts +++ b/webapp/src/constants.ts @@ -18,6 +18,8 @@ class Constants { static readonly minColumnWidth = 100 static readonly defaultTitleColumnWidth = 280 static readonly titleColumnId = '__title' + + static readonly versionString = '0.5.0' } export {Constants}