logo image change + toolbar button color change

index.html

@@ -51,7 +51,7 @@
   <!-- viewer ui start -->
   <div class="viewer-header-wrapper">
     <button class="viewer-logo-start-editor-button" onclick="startEditor()">
-      <img class="viewer-logo-img" alt="3DStreet Viewer" src="ui_assets/3DStreet-Viewer-Start-Editor.svg">
+      <img class="viewer-logo-img" alt="3DStreet Viewer" src="ui_assets/3D-St-stacked-128.png">
     </button>
   </div>
 

src/editor/components/components/Logo/Logo.component.jsx

@@ -1,5 +1,3 @@
-import { EditorLogo, ViewerLogo } from './logos.jsx';
-
 import { Button } from '../Button';
 import PropTypes from 'prop-types';
 import styles from './Logo.module.scss';
@@ -13,9 +11,9 @@ import styles from './Logo.module.scss';
 const Logo = ({ onToggleEdit, isEditor }) => (
   <div className={styles.wrapper}>
     <div className={styles.logo} id="logoImg">
-      {isEditor ? <EditorLogo /> : <ViewerLogo />}
+      <img src="ui_assets/3D-St-stacked-128.png" alt="3DStreet Logo" />
     </div>
-    <Button onClick={onToggleEdit} className={styles.btn}>
+    <Button onClick={onToggleEdit} className={styles.btn} variant="toolbtn">
       {isEditor ? 'Enter Viewer mode' : 'Enter Editor mode'}
     </Button>
   </div>

src/editor/components/components/Logo/Logo.module.scss

@@ -12,15 +12,17 @@
   column-gap: 1.5rem;
 }
 
+.logo {
+  img {
+    width: 48px;
+    height: 48px;
+    object-fit: contain;
+  }
+}
 @media screen and (max-width: 1268px) {
   .wrapper {
-    column-gap: 0rem;
-    flex-direction: column;
+    column-gap: 1.5rem;
     row-gap: 12px;
     left: 20px;
-    top: 24px;
-    .btn {
-      width: 100%;
-    }
   }
 }

src/editor/components/scenegraph/Toolbar.js

@@ -309,6 +309,7 @@ export default class Toolbar extends Component {
               leadingIcon={<Edit24Icon />}
               onClick={this.newHandler}
               disabled={this.state.isSavingScene}
+              variant="toolbtn"
             >
               <div className="hideInLowResolution">New</div>
             </Button>
@@ -319,6 +320,7 @@ export default class Toolbar extends Component {
                 leadingIcon={<Save24Icon />}
                 onClick={this.toggleSaveActionState.bind(this)}
                 disabled={this.state.isSavingScene}
+                variant="toolbtn"
               >
                 <div className="hideInLowResolution">Save</div>
               </Button>
@@ -348,6 +350,7 @@ export default class Toolbar extends Component {
               leadingIcon={<Save24Icon />}
               onClick={this.handleUnsignedSaveClick}
               disabled={this.state.isSavingScene}
+              variant="toolbtn"
             >
               <div className="hideInLowResolution">Save</div>
             </Button>
@@ -356,6 +359,7 @@ export default class Toolbar extends Component {
             <Button
               leadingIcon={<Upload24Icon />}
               onClick={() => Events.emit('openscenesmodal')}
+              variant="toolbtn"
             >
               <div className="hideInLowResolution">Open</div>
             </Button>
@@ -366,6 +370,7 @@ export default class Toolbar extends Component {
               this.makeScreenshot();
               Events.emit('openscreenshotmodal');
             }}
+            variant="toolbtn"
           >
             <div className="hideInLowResolution">Share</div>
           </Button>

src/editor/viewer-styles.css

@@ -31,11 +31,6 @@ body {
   align-items: center;
 }
 
-.viewer-logo-img {
-  height: 43px;
-  width: 370px;
-}
-
 .viewer-logo-start-editor-button {
   border: none;
   background: none;

src/viewer-styles.css

@@ -96,11 +96,6 @@ body {
 	align-items: center;
 }
 
-.viewer-logo-img {
-	height: 43px;
-	width: 370px;
-}
-
 .viewer-logo-start-editor-button {
 	border: none;
 	background: none;