Added friend design

2 files changed, 38 insertions, 3 deletions

diff --git a/main/app/sprinkles/core/assets/SiteAssets/css/main.css b/main/app/sprinkles/core/assets/SiteAssets/css/main.css
index 0c43d55..311b507 100644
--- a/main/app/sprinkles/core/assets/SiteAssets/css/main.css
+++ b/main/app/sprinkles/core/assets/SiteAssets/css/main.css
@@ -162,7 +162,7 @@ EXPLORE WINDOW
     width: 100%;
 }
 
-.SearchResults .avatar {
+.SearchResults .Avatar {
     grid-column-start: 2;
     justify-self: center;
     align-self: center;
@@ -173,7 +173,7 @@ EXPLORE WINDOW
     border-radius: 100%;
 }
 
-.SearchResults .full_name {
+.SearchResults .UsersFullName {
     grid-column-start: 3;
     justify-self: center; /* OR start */
     align-self: center;
@@ -337,6 +337,41 @@ hr.ChatHeaderDivider {
       }
 }
 
+/*********
+FRIEND TAB
+*********/
+.FriendsTabWindow {
+    position: relative;
+    height: 100%;
+    margin: 5px;
+}
+
+.FriendList {
+    display: grid;
+    grid-template-columns: 10% 20% auto 10%;
+    overflow-y: auto;
+    max-height: 45%;
+    width: 100%;
+}
+
+.FriendList .Avatar {
+    grid-column-start: 2;
+    justify-self: center;
+    align-self: center;
+    height: 50px;
+    width: 50px;
+    -webkit-border-radius: 100%;
+    -moz-border-radius: 100%;
+    border-radius: 100%;
+}
+
+.FriendList .FriendName {
+    grid-column-start: 3;
+    justify-self: center; /* OR start */
+    align-self: center;
+}
+
+
 /***********
 PERSONAL TAB
 ***********/
diff --git a/main/app/sprinkles/core/assets/SiteAssets/js/main.js b/main/app/sprinkles/core/assets/SiteAssets/js/main.js
index 8125811..71ea3b3 100644
--- a/main/app/sprinkles/core/assets/SiteAssets/js/main.js
+++ b/main/app/sprinkles/core/assets/SiteAssets/js/main.js
@@ -118,7 +118,7 @@ UserSearchBar.keyup(function () {
             alerts.ufAlerts().ufAlerts('fetch');
 
             SearchResults.empty();
-            SearchResults.append("<img class='avatar' src='" + answer.avatar + "'/><div class='full_name'>" + answer.full_name + "</div>");
+            SearchResults.append("<img class='Avatar' src='" + answer.avatar + "'/><div class='UsersFullName'>" + answer.full_name + "</div>");
         },
         error: function () {
             console.log("[SEARCH LOGGER] 404s are not a bug - they're a feature!");