SDA-4725 - Update SDA title bar branding (#2234)

* SDA-4725 - Update SDA title bar branding * SDA-4725 - Update snap file
finos · Dec 4, 2024 · 4c366bc · 4c366bc
1 parent 9e6e551
commit 4c366bc
Show file tree

Hide file tree

Showing 7 changed files with 98 additions and 143 deletions.
diff --git 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
@@ -43,44 +43,15 @@ exports[`windows title bar should render correctly 1`] = `
   <div
     className="title-container"
   >
-    <svg
-      fill="none"
-      viewBox="-10 0 60 60"
-      width="20"
-    >
-      <path
-        d="M40 20.111V9.653c0-2.142-1.1-4.153-2.883-5.255C34.458 2.754 28.7 0 20 0 11.3 0 5.542 2.754 2.883 4.407 1.1 5.5 0 7.511 0 9.653v15.705l31.667 9.618v6.995c0 .945-.567 1.61-1.534 2.108L20 49.404 9.808 44.052c-.908-.472-1.475-1.136-1.475-2.08v-5.247L0 34.102v7.87c0 4.319 2.358 7.991 6.108 9.906L20 59.46l13.833-7.546C37.642 49.963 40 46.291 40 41.971V28.855L8.333 19.237v-7.983C10.6 10.108 14.45 8.744 20 8.744s9.4 1.364 11.667 2.51v6.234L40 20.111z"
-        fill="#0098FF"
-      />
-      <path
-        d="M40 20.111V9.653c0-2.142-1.1-4.153-2.883-5.255C34.458 2.754 28.7 0 20 0 11.3 0 5.542 2.754 2.883 4.407 1.1 5.5 0 7.511 0 9.653v15.705l31.667 9.618v6.995c0 .945-.567 1.61-1.534 2.108L20 49.404 9.808 44.052c-.908-.472-1.475-1.136-1.475-2.08v-5.247L0 34.102v7.87c0 4.319 2.358 7.991 6.108 9.906L20 59.46l13.833-7.546C37.642 49.963 40 46.291 40 41.971V28.855L8.333 19.237v-7.983C10.6 10.108 14.45 8.744 20 8.744s9.4 1.364 11.667 2.51v6.234L40 20.111z"
-        fill="url(#prefix__paint0_radial)"
-      />
-      <defs>
-        <radialGradient
-          cx={0}
-          cy={0}
-          gradientTransform="matrix(0 40.259 -50.3704 0 20.07 0)"
-          gradientUnits="userSpaceOnUse"
-          id="prefix__paint0_radial"
-          r={1}
-        >
-          <stop
-            stopColor="#fff"
-            stopOpacity={0.4}
-          />
-          <stop
-            offset={1}
-            stopColor="#fff"
-            stopOpacity={0}
-          />
-        </radialGradient>
-      </defs>
-    </svg>
+    <img
+      alt="Symphony Messaging Logo"
+      className="symphony-messaging-logo"
+      src="../renderer/assets/symphony-messaging.png"
+    />
     <p
       id="title-bar-title"
     >
-      Symphony
+      Symphony Messaging
     </p>
   </div>
   <div

diff --git a/src/locale/en-US.json b/src/locale/en-US.json
@@ -199,6 +199,7 @@
   "Client 2.0 channel": "Client 2.0 channel",
   "SDA update channel": "SDA update channel",
   "Stable": "Stable",
+  "Symphony Messaging": "Symphony Messaging",
   "Latest": "Latest",
   "Daily": "Daily",
   "Beta": "Beta",

diff --git a/src/locale/en.json b/src/locale/en.json
@@ -198,6 +198,7 @@
   "Client 2.0 channel": "Client 2.0 channel",
   "SDA update channel": "SDA update channel",
   "Stable": "Stable",
+  "Symphony Messaging": "Symphony Messaging",
   "Latest": "Latest",
   "Daily": "Daily",
   "Beta": "Beta",

diff --git a/src/renderer/assets/symphony-messaging.png b/src/renderer/assets/symphony-messaging.png
diff --git a/src/renderer/components/windows-title-bar.tsx b/src/renderer/components/windows-title-bar.tsx
@@ -25,7 +25,7 @@ export default class WindowsTitleBar extends React.Component<{}, IState> {
   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> {
           </button>
         </div>
         <div className='title-container'>
-          {this.getSymphonyLogo()}
+          <img
+            className='symphony-messaging-logo'
+            alt={'Symphony Messaging Logo'}
+            src={'../renderer/assets/symphony-messaging.png'}
+          />
           <p id='title-bar-title'>{title}</p>
         </div>
         <div className='title-bar-button-container'>
@@ -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 (
-      <svg width='20' viewBox='-10 0 60 60' fill='none'>
-        <path
-          d='M40 20.111V9.653c0-2.142-1.1-4.153-2.883-5.255C34.458 2.754 28.7 0 20 0 11.3 0 5.542 2.754 2.883 4.407 1.1 5.5 0 7.511 0 9.653v15.705l31.667 9.618v6.995c0 .945-.567 1.61-1.534 2.108L20 49.404 9.808 44.052c-.908-.472-1.475-1.136-1.475-2.08v-5.247L0 34.102v7.87c0 4.319 2.358 7.991 6.108 9.906L20 59.46l13.833-7.546C37.642 49.963 40 46.291 40 41.971V28.855L8.333 19.237v-7.983C10.6 10.108 14.45 8.744 20 8.744s9.4 1.364 11.667 2.51v6.234L40 20.111z'
-          fill='#0098FF'
-        />
-        <path
-          d='M40 20.111V9.653c0-2.142-1.1-4.153-2.883-5.255C34.458 2.754 28.7 0 20 0 11.3 0 5.542 2.754 2.883 4.407 1.1 5.5 0 7.511 0 9.653v15.705l31.667 9.618v6.995c0 .945-.567 1.61-1.534 2.108L20 49.404 9.808 44.052c-.908-.472-1.475-1.136-1.475-2.08v-5.247L0 34.102v7.87c0 4.319 2.358 7.991 6.108 9.906L20 59.46l13.833-7.546C37.642 49.963 40 46.291 40 41.971V28.855L8.333 19.237v-7.983C10.6 10.108 14.45 8.744 20 8.744s9.4 1.364 11.667 2.51v6.234L40 20.111z'
-          fill='url(#prefix__paint0_radial)'
-        />
-        <defs>
-          <radialGradient
-            id='prefix__paint0_radial'
-            cx={0}
-            cy={0}
-            r={1}
-            gradientUnits='userSpaceOnUse'
-            gradientTransform='matrix(0 40.259 -50.3704 0 20.07 0)'
-          >
-            <stop stopColor='#fff' stopOpacity={0.4} />
-            <stop offset={1} stopColor='#fff' stopOpacity={0} />
-          </radialGradient>
-        </defs>
-      </svg>
-    );
-  }
-
   /**
    * Disables context menu for action buttons
    *

diff --git 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;