Minor UI design changes

chat/ConversationView.vue

@@ -786,6 +786,11 @@
 
 
     .user-view {
+        .user-rank {
+          font-size: 80%;
+          margin-right: 2px;
+        }
+
         .match-found {
             margin-left: 3px;
             padding-left: 2px;

chat/SettingsView.vue

@@ -138,7 +138,7 @@
             <div class="form-group">
                 <label class="control-label" for="risingComparisonInSearch">
                     <input type="checkbox" id="risingComparisonInSearch" v-model="risingComparisonInSearch"/>
-                    Show quick match results in search results
+                    Show quick match results in the search results
                 </label>
             </div>
 
@@ -162,7 +162,7 @@
             <div class="form-group">
                 <label class="control-label" for="risingCharacterPreview">
                     <input type="checkbox" id="risingCharacterPreview" v-model="risingCharacterPreview"/>
-                    Show a character preview when mouse hovers over a character name
+                    Show a character preview when the mouse hovers over a character name
                 </label>
             </div>
 

chat/UserView.vue

@@ -92,8 +92,8 @@ export function getStatusClasses(
     const userClass = `user-view gender-${gender}${isBookmark ? ' user-bookmark' : ''}`;
 
     return {
-      rankIcon,
-      statusClass,
+      rankIcon: rankIcon ? `user-rank ${rankIcon}` : null,
+      statusClass: statusClass ? `user-status ${statusClass}` : null,
       matchClass,
       matchScore,
       userClass,