small improvements (#4452)

Co-authored-by: Jeremy Letto <jeremy.letto@datasite.com>

webclient/src/components/Header/Header.tsx

@@ -13,11 +13,11 @@ import MenuRoundedIcon from '@material-ui/icons/MenuRounded';
 import * as _ from "lodash";
 
 import { AuthenticationService, RoomsService } from "api";
+import { Images } from 'images';
 import {  RoomsSelectors, ServerSelectors } from "store";
 import { Room, RouteEnum, User } from "types";
 
 import "./Header.css";
-import logo from "./logo.png";
 
 import CardImportDialog from '../CardImportDialog/CardImportDialog';
 
@@ -100,7 +100,7 @@ class Header extends Component<HeaderProps> {
         <Toolbar variant="dense">
           <div className="Header__logo">
             <NavLink to={RouteEnum.SERVER}>
-              <img src={logo} alt="logo" />
+              <img src={Images.Logo} alt="logo" />
             </NavLink>
             { AuthenticationService.isConnected(state) && (
               <span className="Header-server__indicator"></span>

webclient/src/components/KnownHosts/KnownHosts.css

@@ -1,3 +1,20 @@
 .KnownHosts {
   width: 100%;
 }
+
+.KnownHosts-item__label {
+  position: relative;
+}
+
+.KnownHosts-item__label svg {
+  display: none;
+  position: absolute;
+  left: -.1em;
+  top: 50%;
+  transform: translate(-100%, -50%);
+  font-size: .9em;
+}
+
+.Mui-selected .KnownHosts-item__label svg {
+  display: block;
+}

webclient/src/components/KnownHosts/KnownHosts.tsx

@@ -5,6 +5,7 @@ import Button from '@material-ui/core/Button';
 import FormControl from '@material-ui/core/FormControl';
 import IconButton from '@material-ui/core/IconButton';
 import InputLabel from '@material-ui/core/InputLabel';
+import Check from '@material-ui/icons/Check';
 import EditRoundedIcon from '@material-ui/icons/Edit';
 
 import { HostDTO } from 'services';
@@ -64,10 +65,16 @@ const KnownHosts = ({ onChange }) => {
         {
           state.hosts.map((host, index) => (
             <MenuItem className='KnownHosts-item' value={index} key={index}>
-              <span>{host.name} ({ getHostPort(state.hosts[index]).host }:{getHostPort(state.hosts[index]).port})</span>
-              <IconButton size='small' color='primary' disabled={!host.editable} onClick={() => editKnownHost(index)}>
-                <EditRoundedIcon fontSize='small' />
-              </IconButton>
+              <div className='KnownHosts-item__label'>
+                <Check />
+                <span>{host.name} ({ getHostPort(state.hosts[index]).host }:{getHostPort(state.hosts[index]).port})</span>
+              </div>
+
+              { host.editable && (
+                <IconButton size='small' color='primary' onClick={() => editKnownHost(index)}>
+                  <EditRoundedIcon fontSize='small' />
+                </IconButton>
+              ) }
             </MenuItem>
           ))
         }

webclient/src/components/ThreePaneLayout/ThreePaneLayout.tsx

@@ -6,6 +6,8 @@ import Hidden from "@material-ui/core/Hidden";
 
 import "./ThreePaneLayout.css";
 
+// @DEPRECATED
+// This component sucks balls, dont use it. It will be removed sooner than later.
 class ThreePaneLayout extends Component<ThreePaneLayoutProps> {
   render() {
     return (