Merge branch 'frontend-sidebar-connectedicon'

Author: thisconnect

frontends/web/src/components/badge/badge.module.css

@@ -18,7 +18,7 @@
 }
 
 .badgeIcon {
-  max-width: 9px;
+  max-width: 10px;
 }
 
 .withChildren .badgeIcon {

frontends/web/src/components/sidebar/sidebar.module.css

@@ -92,6 +92,14 @@
     color: var(--color-secondary);
 }
 
+.sidebarIconVisible {
+    visibility: visible;
+}
+
+.sidebarIconHidden {
+    visibility: hidden;
+}
+
 .sidebarItem {
     display: block;
 }

frontends/web/src/components/sidebar/sidebar.tsx

@@ -226,12 +226,11 @@ class Sidebar extends Component<Props> {
                       <> ({keystore.keystore.rootFingerprint})</>
                     ) : null }
                   </span>
-                  {keystore.keystore.connected ? (
-                    <Badge
-                      icon={props => <USBSuccess {...props} />}
-                      type="success"
-                      title={t('device.keystoreConnected')} />
-                  ) : null}
+                  <Badge
+                    className={keystore.keystore.connected ? style.sidebarIconVisible : style.sidebarIconHidden}
+                    icon={props => <USBSuccess {...props} />}
+                    type="success"
+                    title={t('device.keystoreConnected')} />
                 </span>
               </div>