ui: update logo

Update the logo image and favicon. Adjust the logo dimensions to account
for the changed aspect ratio. Simplify the heading structure a little.

ui/dist/index.css

@@ -233,6 +233,10 @@ a:hover {
   width: 100%;
 }
 
+.hostname {
+  flex: 1;
+}
+
 .statuses {
   float: left;
 }
@@ -241,10 +245,10 @@ a:hover {
   display: inline-block;
   position: relative;
   background: url(/img/logo-long.svg) no-repeat;
-  width: 230px;
-  height: 26px;
+  width: 162px;
+  height: 32px;
   cursor: pointer;
-  margin-right: 8px;
+  margin-right: 12px;
 }
 
 .logo:hover {

ui/dist/index.html

@@ -7,7 +7,7 @@
       content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
     />
     <link rel="stylesheet" type="text/css" href="/index.css" />
-    <link rel="icon" type="image/png" href="/img/logo-only.svg" />
+    <link rel="icon" href="/img/favicon.ico" />
 
     {{ with .GoogleTagManagerID }}
     <!-- Google Tag Manager -->

ui/src/components/Verify.tsx

@@ -20,15 +20,11 @@ const Verify: FC = () => {
     <div className="inner">
       <div className="header clearfix">
         <div className="heading">
-          <div>
-            <a href="/" className="logo"></a>
-            <span>{info?.request?.host}</span>
-          </div>
-          <div>
-            <a href="/.pomerium/sign_out" title={'Logout'}>
-              <LogoutIcon />
-            </a>
-          </div>
+          <a href="/" className="logo"></a>
+          <span className="hostname">{info?.request?.host}</span>
+          <a href="/.pomerium/sign_out" title={'Logout'}>
+            <LogoutIcon />
+          </a>
         </div>
       </div>