Revert "SDA-4725 - Update SDA title bar branding (#2234)" (#2241)

This reverts commit 4c366bcf2f.

config/titleBarStyles.css

@@ -1,3 +1,4 @@
+
 /*---
 title:   Tile bar
 section: div
@@ -14,7 +15,7 @@ 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);
+    background: rgba(74,74,74,1);
     top: 0;
     left: 0;
     width: 100%;
@@ -62,7 +63,7 @@ Typically you'll want to set content: url("") and adjust the width property
 }
 
 .hamburger-menu-button {
-  color: rgba(255, 255, 255, 1);
+    color: rgba(255,255,255,1);
     text-align: center;
     width: 40px;
     height: 32px;
@@ -90,13 +91,8 @@ Typically you'll want to set content: url("") and adjust the width property
     overflow: hidden;
 }
 
-.symphony-messaging-logo {
-  width: 20px;
-  height: 20px;
-}
-
 #title-bar-title {
-  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
     color: white;
     margin: 0;
     padding-left: 10px;
@@ -107,7 +103,7 @@ Typically you'll want to set content: url("") and adjust the width property
     justify-content: center;
     align-items: center;
     right: 0;
-  color: rgba(255, 255, 255, 1);
+    color: rgba(255,255,255,1);
     -webkit-app-region: no-drag;
     text-align: center;
     width: 45px;
@@ -118,7 +114,7 @@ Typically you'll want to set content: url("") and adjust the width property
 }
 
 .title-bar-button {
-  color: rgba(255, 255, 255, 1);
+    color: rgba(255,255,255,1);
     text-align: center;
     width: 45px;
     height: 32px;
@@ -133,7 +129,7 @@ Typically you'll want to set content: url("") and adjust the width property
 }
 
 .title-bar-button:hover {
-  background-color: rgba(255, 255, 255, 0.2);
+    background-color: rgba(255,255,255,0.2);
 }
 
 .title-bar-button:focus {
@@ -141,17 +137,17 @@ Typically you'll want to set content: url("") and adjust the width property
 }
 
 .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-left: 1px solid rgba(74,74,74,1);
-  border-right: 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);
+    border-bottom: 1px solid rgba(74,74,74,1);
     width: 100%;
     z-index: 3000;
     bottom: 0;

spec/__snapshots__/windowsTitleBar.spec.ts.snap

@@ -43,15 +43,44 @@ exports[`windows title bar should render correctly 1`] = `
   <div
     className="title-container"
   >
-    <img
+    <svg
-      alt="Symphony Messaging Logo"
+      fill="none"
-      className="symphony-messaging-logo"
+      viewBox="-10 0 60 60"
-      src="../renderer/assets/symphony-messaging.png"
+      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>
     <p
       id="title-bar-title"
     >
-      Symphony Messaging
+      Symphony
     </p>
   </div>
   <div

src/locale/en-US.json

@@ -199,7 +199,6 @@
   "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",

src/locale/en.json

@@ -198,7 +198,6 @@
   "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",

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 || i18n.t('Symphony Messaging')(),
+      title: document.title || 'Symphony',
       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
-        : i18n.t('Symphony Messaging')();
+        : 'Symphony';
       this.setState({ title });
     });
     if (target) {
@@ -118,11 +118,7 @@ export default class WindowsTitleBar extends React.Component<{}, IState> {
           </button>
         </div>
         <div className='title-container'>
-          <img
+          {this.getSymphonyLogo()}
-            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'>
@@ -283,6 +279,37 @@ 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
    *

src/renderer/styles/windows-title-bar.less

@@ -50,11 +50,6 @@
   overflow: hidden;
 }
 
-.symphony-messaging-logo {
-  width: 20px;
-  height: 20px;
-}
-
 #title-bar-title {
   font-family: @font-family;
   color: @color_2;