[CORL-586] update logos to match new branding (#2540)

* update logos to match new branding

* update styles of logo

* move version number to bottom of admin

* update specs

src/core/client/admin/App/Main.tsx

@@ -1,7 +1,7 @@
 import React, { FunctionComponent } from "react";
 
 import { PropTypesOf } from "coral-framework/types";
-import { Logo } from "coral-ui/components";
+import { LogoHorizontal } from "coral-ui/components";
 import { AppBar, Begin, Divider, End } from "coral-ui/components/AppBar";
 
 import { DecisionHistoryButton } from "./DecisionHistory";
@@ -22,8 +22,7 @@ const Main: FunctionComponent<Props> = ({ children, viewer }) => (
     <AppBar gutterBegin gutterEnd>
       <Begin itemGutter="double">
         <div className={styles.logoContainer}>
-          <Logo />
-          <Version />
+          <LogoHorizontal />
         </div>
         <NavigationContainer viewer={viewer} />
       </Begin>
@@ -34,6 +33,7 @@ const Main: FunctionComponent<Props> = ({ children, viewer }) => (
       </End>
     </AppBar>
     {children}
+    <Version />
   </div>
 );
 

src/core/client/admin/App/Version.css

@@ -1,6 +1,6 @@
 .version {
-  position: absolute;
-  right: 0;
-  top: 23px;
   font-size: calc(10rem / var(--rem-base));
+  color: var(--palette-text-secondary);
+  text-align: center;
+  padding-bottom: var(--spacing-3);
 }

src/core/client/admin/App/__snapshots__/Main.spec.tsx.snap

@@ -14,8 +14,7 @@ exports[`renders correctly 1`] = `
       <div
         className="Main-logoContainer"
       >
-        <withPropsOnChange(Logo) />
-        <Version />
+        <withPropsOnChange(LogoHorizontal) />
       </div>
       <withContext(createMutationContainer(Relay(NavigationContainer)))
         viewer={Object {}}
@@ -30,5 +29,6 @@ exports[`renders correctly 1`] = `
     </withPropsOnChange(End)>
   </withPropsOnChange(AppBar)>
   child
+  <Version />
 </div>
 `;