diff --git a/config/titleBarStyles.css b/config/titleBarStyles.css index 9d441b85..06ab8637 100644 --- a/config/titleBarStyles.css +++ b/config/titleBarStyles.css @@ -1,4 +1,3 @@ - /*--- title: Tile bar section: div @@ -13,20 +12,20 @@ Typically you'll want to set background-image: url(""); and background-size: cov */ #title-bar { - display: flex; - position: fixed; - background: rgba(74,74,74,1); - top: 0; - left: 0; - width: 100%; - height: 32px; - padding-left: 0; - justify-content: center; - align-items: center; - -webkit-app-region: drag; - -webkit-user-select: none; - box-sizing: content-box; - z-index: 1000; + display: flex; + position: fixed; + background: rgba(74, 74, 74, 1); + top: 0; + left: 0; + width: 100%; + height: 32px; + padding-left: 0; + justify-content: center; + align-items: center; + -webkit-app-region: drag; + -webkit-user-select: none; + box-sizing: content-box; + z-index: 1000; } /*--- @@ -59,96 +58,101 @@ Typically you'll want to set content: url("") and adjust the width property ``` */ .branding-logo { - height: 32px; + height: 32px; } .hamburger-menu-button { - color: rgba(255,255,255,1); - text-align: center; - width: 40px; - height: 32px; - background: center; - border: none; - border-image: initial; - display: inline-grid; - border-radius: 0; - padding: 11px; - box-sizing: border-box; - cursor: default; + color: rgba(255, 255, 255, 1); + text-align: center; + width: 40px; + height: 32px; + background: center; + border: none; + border-image: initial; + display: inline-grid; + border-radius: 0; + padding: 11px; + box-sizing: border-box; + cursor: default; } .hamburger-menu-button:focus { - outline: none; + outline: none; } .title-container { - height: 32px; - flex: 1; - display: flex; - justify-content: flex-start; - align-items: center; - white-space: nowrap; - overflow: hidden; + height: 32px; + flex: 1; + display: flex; + justify-content: flex-start; + align-items: center; + white-space: nowrap; + overflow: hidden; +} + +.symphony-messaging-logo { + width: 20px; + height: 20px; } #title-bar-title { - font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif; - color: white; - margin: 0; - padding-left: 10px; - font-size: 13px; + font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; + color: white; + margin: 0; + padding-left: 10px; + font-size: 13px; } .title-bar-button-container { - justify-content: center; - align-items: center; - right: 0; - color: rgba(255,255,255,1); - -webkit-app-region: no-drag; - text-align: center; - width: 45px; - height: 32px; - margin: 0; - box-sizing: border-box !important; - cursor: default; + justify-content: center; + align-items: center; + right: 0; + color: rgba(255, 255, 255, 1); + -webkit-app-region: no-drag; + text-align: center; + width: 45px; + height: 32px; + margin: 0; + box-sizing: border-box !important; + cursor: default; } .title-bar-button { - color: rgba(255,255,255,1); - text-align: center; - width: 45px; - height: 32px; - background: center; - border: none; - border-image: initial; - display: inline-grid; - border-radius: 0; - padding: 10px 15px; - cursor: default; - align-content: center; + color: rgba(255, 255, 255, 1); + text-align: center; + width: 45px; + height: 32px; + background: center; + border: none; + border-image: initial; + display: inline-grid; + border-radius: 0; + padding: 10px 15px; + cursor: default; + align-content: center; } .title-bar-button:hover { - background-color: rgba(255,255,255,0.2); + background-color: rgba(255, 255, 255, 0.2); } .title-bar-button:focus { - outline: none; + outline: none; } .title-bar-button-container:hover { - background-color: rgba(255,255,255,0.2); + background-color: rgba(255, 255, 255, 0.2); } .window-border { - border-left: 1px solid rgba(74,74,74,1); - border-right: 1px solid rgba(74,74,74,1); + border-left: 1px solid rgba(74, 74, 74, 1); + border-right: 1px solid rgba(74, 74, 74, 1); } .bottom-window-border { - position: fixed; - border-bottom: 1px solid rgba(74,74,74,1); - width: 100%; - z-index: 3000; - bottom: 0; + position: fixed; + border-bottom: 1px solid rgba(74, 74, 74, 1); + width: 100%; + z-index: 3000; + bottom: 0; } diff --git a/spec/__snapshots__/windowsTitleBar.spec.ts.snap b/spec/__snapshots__/windowsTitleBar.spec.ts.snap index b6b95e99..efc5c961 100644 --- a/spec/__snapshots__/windowsTitleBar.spec.ts.snap +++ b/spec/__snapshots__/windowsTitleBar.spec.ts.snap @@ -43,44 +43,15 @@ exports[`windows title bar should render correctly 1`] = `
- - - - - - - - - - + Symphony Messaging Logo

- Symphony + Symphony Messaging

{ constructor(props) { super(props); this.state = { - title: document.title || 'Symphony', + title: document.title || i18n.t('Symphony Messaging')(), isMaximized: false, isDisabled: false, }; @@ -55,7 +55,7 @@ export default class WindowsTitleBar extends React.Component<{}, IState> { this.observer = new MutationObserver((mutations) => { const title: string = mutations[0].target.textContent ? mutations[0].target.textContent - : 'Symphony'; + : i18n.t('Symphony Messaging')(); this.setState({ title }); }); if (target) { @@ -118,7 +118,11 @@ export default class WindowsTitleBar extends React.Component<{}, IState> {
- {this.getSymphonyLogo()} + {'Symphony

{title}

@@ -279,37 +283,6 @@ export default class WindowsTitleBar extends React.Component<{}, IState> { document.body.classList.add('window-border'); } - /** - * Returns the title bar logo - */ - private getSymphonyLogo(): JSX.Element { - return ( - - - - - - - - - - - ); - } - /** * Disables context menu for action buttons * diff --git a/src/renderer/styles/windows-title-bar.less b/src/renderer/styles/windows-title-bar.less index ace70151..eee6bde4 100644 --- a/src/renderer/styles/windows-title-bar.less +++ b/src/renderer/styles/windows-title-bar.less @@ -50,6 +50,11 @@ overflow: hidden; } +.symphony-messaging-logo { + width: 20px; + height: 20px; +} + #title-bar-title { font-family: @font-family; color: @color_2;