Styling

ui/src/App.css

@@ -1,28 +1 @@
-.App {
-  text-align: center;
-}
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
-}
-
-.App-header {
-  background-color: #222;
-  height: 150px;
-  padding: 20px;
-  color: white;
-}
-
-.App-title {
-  font-size: 1.5em;
-}
-
-.App-intro {
-  font-size: large;
-}
-
-@keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}

ui/src/MobileClientOverviewList.js

@@ -1,6 +1,8 @@
 import React, { Component } from 'react';
 import { Row, ListView, DropdownKebab, MenuItem} from 'patternfly-react';
 
+import './OverviewListItemHeader.css';
+
 const actions = () => (
   <DropdownKebab id="mobile-client-actions" pullRight>
     <MenuItem>Edit</MenuItem>
@@ -10,13 +12,13 @@ const actions = () => (
 
 const headings = mobileClient => (
     <div className="pull-left text-left">
-        <div>
-            <span>{mobileClient.spec.clientType}</span>
+        <div className="detail">
+            <span className="text-uppercase">{mobileClient.spec.clientType}</span>
         </div>
-        <a>
-         <span>{mobileClient.spec.name}</span>
+        <a className="name">
+            <span>{mobileClient.spec.name}</span>
         </a>
-        <div>{mobileClient.spec.appIdentifier}</div>
+        <div className="detail">{mobileClient.spec.appIdentifier}</div>
     </div>
 );
 
@@ -30,6 +32,7 @@ class MobileClientOverviewList extends Component {
                     {mobileClients.map(
                         mobileClient => (
                             <ListView.Item
+                                className="mobile-client-list-view-item overview-list-view-item"
                                 key={mobileClient.metadata.uid}
                                 actions={actions()}
                                 checkboxInput={false}

ui/src/OverviewListItemHeader.css

@@ -0,0 +1,30 @@
+.overview-list-view-item .list-group-item-heading {
+    color: #757575;
+    font-size: 11px;
+    font-weight: 500;
+    line-height: 1;
+    border-left: 1px solid #d1d1d1;
+    padding-left: 20px;
+}
+
+.overview-list-view-item .list-group-item-heading a {
+    font-size: 16px;
+    margin: 0;
+    color: #0088ce;
+    text-decoration: none;
+}
+
+.overview-list-view-item .list-group-item-heading .detail {
+    margin-top: 3px;
+}
+
+.overview-list-view-item .list-group-item-heading .name {
+    word-break: break-word;
+    overflow-wrap: break-word;
+    min-width: 0;
+    word-wrap: break-word;
+}
+
+.overview-list-view-item .list-group-item-heading span {
+    margin: 0;
+}

ui/src/index.css

@@ -1,2 +1,3 @@
 @import url("~patternfly/dist/css/patternfly.min.css");
 @import url("~patternfly/dist/css/patternfly-additions.min.css");
+@import url("./styles/MobileClientListViewItem.css");

ui/src/styles/MobileClientListViewItem.css

@@ -0,0 +1,41 @@
+.mobile-client-list-view-item.list-group-item.list-view-pf-expand-active {
+    background-color: #ededed;
+}
+
+.mobile-client-list-view-item .list-group-item-heading {
+    overflow: visible;
+}
+
+.mobile-client-list-view-item .list-view-pf-expand.active,
+.mobile-client-list-view-item .list-view-pf-expand:hover {
+    color: unset;;
+}
+
+.mobile-client-list-view-item .list-group-item-header {
+    position: relative;
+}
+
+.mobile-client-list-view-item .list-group-item-header .list-view-pf-expand {
+    margin: 0;
+} 
+
+.mobile-client-list-view-item .list-group-item-header .list-view-pf-expand .fa.fa-angle-right {
+    margin: 0;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.mobile-client-list-view-item .list-group-item-header .list-view-pf-actions {
+    margin: 0;
+    position: absolute;
+    right: 32px;
+    top: 50%;
+    transform: translateY(-50%);
+
+}
+
+.mobile-client-list-view-item .list-group-item-header .list-view-pf-main-info {
+    margin-left: 26px;
+    margin-right: 40px;
+}