Update select location button on main screen

2 files changed, 11 insertions, 45 deletions

diff --git a/app/components/Connect.css b/app/components/Connect.css
index dc9a070c99..37d0328511 100644
--- a/app/components/Connect.css
+++ b/app/components/Connect.css
@@ -30,46 +30,15 @@
   margin-top: 16px;
 }
 
-.connect__server {
-  padding: 7px 12px 9px;
-  background-color: rgba(255,255,255,0.2);
-  border-radius: 4px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  backdrop-filter: blur(4px);
-}
-
 .connect__server-label {
-  font-family: "Open Sans";
-  font-size: 12px;
-  font-weight: 800;
-  line-height: 17px;
-  color: rgba(255,255,255,0.8);
-  text-transform: uppercase;
-  flex: 0 0 auto;
-}
-
-.connect__server-value {
   flex: 1 1 auto;
-  margin-left: 8px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-end;
-}
-
-.connect__server-name {
-  font-family: DINPro;
-  font-size: 20px;
-  font-weight: 900;
-  line-height: 26px;
-  color: #FFFFFF;
-  text-align: right;
+  text-align: center;
 }
 
-.connect__server-icon + .connect__server-name {
-  margin-left: 8px;
+.connect__server-chevron {
+  flex: 0 0 auto;
+  width: 7px;
+  margin-left: -7px; /* let .connect__server-label extend to occupy the entire space */
 }
 
 .connect__footer-button {
diff --git a/app/components/Connect.js b/app/components/Connect.js
index 5267f3e190..dc8e06c1da 100644
--- a/app/components/Connect.js
+++ b/app/components/Connect.js
@@ -5,7 +5,9 @@ import React, { Component } from 'react';
 import { If, Then } from 'react-if';
 import { Layout, Container, Header } from './Layout';
 import { BackendError } from '../lib/backend';
+
 import ExternalLinkSVG from '../assets/images/icon-extLink.svg';
+import ChevronRightSVG from '../assets/images/icon-chevron.svg';
 
 import type { HeaderBarStyle } from './HeaderBar';
 import type { ConnectionReduxState } from '../redux/connection/reducers';
@@ -239,15 +241,10 @@ export default class Connect extends Component {
             <Then>
               <div className="connect__footer">
                 <div className="connect__row">
-
-                  <div className="connect__server" onClick={ this.props.onSelectLocation }>
-                    <div className="connect__server-label">Connect to</div>
-                    <div className="connect__server-value">
-
-                      <div className="connect__server-name">{ this._getLocationName() }</div>
-
-                    </div>
-                  </div>
+                  <button className="connect__server button button--neutral button--blur" onClick={ this.props.onSelectLocation }>
+                    <div className="connect__server-label">{ this._getLocationName() }</div>
+                    <div className="connect__server-chevron"><ChevronRightSVG /></div>
+                  </button>
                 </div>
 
                 <div className="connect__row">