Convert connected-status-indicator to button (#8428)

ui/app/components/app/connected-status-indicator/index.scss

@@ -5,7 +5,16 @@
 
   background: none;
   font-size: inherit;
-  padding: 8px 0;
+  padding: 8px;
+  border-radius: 100px;
+
+  &:hover {
+    background-color: #F2F3F4;
+  }
+
+  &:active {
+    background-color: #EDEDED;
+  }
 
   &__green-circle, &__yellow-circle, &__grey-circle {
     border-radius: 4px;
@@ -28,6 +37,7 @@
   &__text {
     font-size: 10px;
     color: $Grey-500;
-    margin-left: 8px;
+    margin-left: 6px;
+    white-space: nowrap;
   }
 }

ui/app/components/app/menu-bar/index.scss

@@ -4,13 +4,13 @@
   column-gap: 5px;
 
   margin-bottom: 24px;
-  padding: 0 24px;
+  padding: 0 8px;
   border-bottom: 1px solid $Grey-100;
 
   .menu-bar__account-options {
     background: none;
     font-size: inherit;
-    padding: 0 0 0 5px;
+    padding: 0 8px 0 5px;
 
     position: relative; // to allow the dropdown to position itself absolutely
     place-self: center end;