- Splash screens

src/pages/grid/grid.html

@@ -2,7 +2,7 @@
   <ion-grid no-padding>
     <ion-row align-items-stretch>
       <ion-col col-4 class="profile" *ngFor="let current of profiles" (tap)="profileTapped($event, current)" [style.backgroundImage]="getBackgroundThumbnail(current.details.pic)">
-        <span class="username">{{current.details.name}}</span>
+        <span class="username" [ngClass]="{ 'online': (current.messages?.length > 0) }">{{current.details.name}}</span>
       </ion-col>
     </ion-row>
   </ion-grid>

src/pages/grid/grid.scss

@@ -12,24 +12,35 @@ page-grid {
       .username {
         bottom: 0.25rem;
         box-sizing: border-box;
+        color: #acacac;
         display: inline-block;
-        left: 0.25rem;
+        left: 0.5rem;
         overflow: hidden;
         position: absolute;
         right: 0.25rem;
         text-overflow: ellipsis;
-        text-shadow: rgba(0, 0, 0, 0.75);
+        text-shadow: rgba(0, 0, 0, 1);
+        white-space: nowrap;
 
         &::before {
-          border: 2px solid #acacac;
+          border: 0.125rem solid #acacac;
           border-radius: 1rem;
-          color: #acacac;
+          bottom: 0.125rem;
           content: '';
           display: inline-block;
-          height: 1rem;
-          margin-right: 0.25rem;
-          vertical-align: top;
-          width: 1rem;
+          height: 0.8rem;
+          margin-right: 0.5rem;
+          position: relative;
+          vertical-align: middle;
+          width: 0.8rem;
+        }
+
+        &.online {
+
+          &::before {
+            background-color: #00FF00;
+            border-color: #00FF00;
+          }
         }
       }
     }