Added personal information

4 files changed, 79 insertions, 10 deletions

diff --git a/main/app/sprinkles/core/assets/SiteAssets/css/main.css b/main/app/sprinkles/core/assets/SiteAssets/css/main.css
index 4f0733f..ff3295a 100644
--- a/main/app/sprinkles/core/assets/SiteAssets/css/main.css
+++ b/main/app/sprinkles/core/assets/SiteAssets/css/main.css
@@ -52,6 +52,11 @@ hr {
     padding: 0;
 }
 
+hr.ShorterLine {
+    margin: 0 auto;
+    width: 90%;
+}
+
 /*******
 FLICKITY
 *******/
@@ -203,6 +208,59 @@ CHAT WINDOW
     display: none;
 }
 
+/***********
+PERSONAL TAB
+***********/
+.PersonalTabWindow {
+    position: relative;
+    height: 100%;
+    margin: 5px;
+}
+
+.PersonalOverviewHeader {
+    display: flex;
+    justify-content: space-evenly;
+    align-items: flex-end;
+    width: 100%;
+}
+
+.GenderFab {
+    height: 50px;
+    width: 50px;
+    -webkit-border-radius: 100%;
+    -moz-border-radius: 100%;
+    border-radius: 100%;
+    color: white;
+    font-size: 25px;
+    line-height: 50px;
+    text-align: center;
+}
+
+.GenderFab.Female {
+    background: linear-gradient(to right, #ff7a88, #ff9676);
+}
+
+.AvatarImage {
+    height: 110px;
+    width: 110px;
+    -webkit-border-radius: 100%;
+    -moz-border-radius: 100%;
+    border-radius: 100%;
+}
+
+.GenderFab.Male {
+    background: linear-gradient(to right, #11c1d5, #1ddcb6);
+}
+
+.DisplayNames {
+    text-align: center;
+}
+
+.DisplayNames .FullName {
+    font-weight: bold;
+    font-size: 20px;
+}
+
 /*****
 NAVBAR
 *****/
diff --git a/main/app/sprinkles/core/assets/SiteAssets/js/main.js b/main/app/sprinkles/core/assets/SiteAssets/js/main.js
index 6f9147b..9f89394 100644
--- a/main/app/sprinkles/core/assets/SiteAssets/js/main.js
+++ b/main/app/sprinkles/core/assets/SiteAssets/js/main.js
@@ -14,7 +14,7 @@ NavbarLine
     .data("origWidth", NavbarLine.width());
 NavbarIconWrap.on("click", function () {
     NavbarIconWrap.removeClass("ActiveTab");
-    $(this).children().attr("src", $(this).children().attr("src").split('.svg')[0] + "Activated.svg");
+    //$(this).children().attr("src", $(this).children().attr("src").split('.svg')[0] + "Activated.svg");
     var index = $(this).attr('id');
     MainTabWindows.slick('slickGoTo', index);
     //$('.MainTabWindows').flickity().flickity('select', index);
diff --git a/main/app/sprinkles/core/templates/pages/abstract/mainsite.html.twig b/main/app/sprinkles/core/templates/pages/abstract/mainsite.html.twig
index 57e1ea1..2783358 100644
--- a/main/app/sprinkles/core/templates/pages/abstract/mainsite.html.twig
+++ b/main/app/sprinkles/core/templates/pages/abstract/mainsite.html.twig
@@ -24,6 +24,7 @@
                 {% block stylesheets_site %}
                     <!-- Include main CSS asset bundle -->
                     {{ assets.css('css/main-site') | raw }}
+                    {{ assets.css('css/form-widgets') | raw }}
                 {% endblock %}
 
                 {# Override this block in a child layout template or page template to specify or override stylesheets for groups of similar pages. #}
diff --git a/main/app/sprinkles/core/templates/pages/index.html.twig b/main/app/sprinkles/core/templates/pages/index.html.twig
index 3a78a16..f064cea 100644
--- a/main/app/sprinkles/core/templates/pages/index.html.twig
+++ b/main/app/sprinkles/core/templates/pages/index.html.twig
@@ -10,6 +10,7 @@
 {% block content %}
     <div class="main">
         <div class="MainTabWindows">
+
             <div class="carousel-cell FeedTab">
                 <div class="headerWrap">
                     <div class="header">
@@ -21,6 +22,7 @@
                     <hr>
                 </div>
             </div>
+
             <div class="carousel-cell ExploreTab">
                 <div class="headerWrap">
                     <div class="header">
@@ -43,18 +45,16 @@
                     </div>
                     <hr>
                 </div>
-                <div class="MainInTab">
-                    <div class="ChatWindow">
+                <div class="MainInTab ChatWindow">
                         <div id="ChatMessages" class="ChatMessages">
                             <!-- Messages -->
                         </div>
                         <input title="Type your message..." id="ChatTextInput" class="ChatInput" type="text"/>
                         <input title="Join a group..." id="SubscribeTextInput" class="ChatInput" type="text"/>
-                    </div>
                 </div>
             </div>
 
-            <div class="carousel-cell">
+            <div class="carousel-cell FriendsTab">
                 <div class="headerWrap">
                     <div class="header">
                     <span class="LeftButtonHeader"><img draggable="false" ondragstart="return false;"
@@ -65,7 +65,8 @@
                     <hr>
                 </div>
             </div>
-            <div class="carousel-cell">
+
+            <div class="carousel-cell PersonalTab">
                 <div class="headerWrap">
                     <div class="header">
                     <span class="LeftButtonHeader"><img draggable="false" ondragstart="return false;"
@@ -75,9 +76,18 @@
                     </div>
                     <hr>
                 </div>
-                <div class="MainInTab">
-                    {{current_user.first_name}} {{current_user.last_name}}
-                    <small>({{current_user.user_name}})</small>
+                <div class="MainInTab PersonalTabWindow">
+                    <div class="PersonalOverviewHeader">
+                        <div class="GenderFab Female">&#9792;</div>
+                        <img class="AvatarImage" src="{{ current_user.avatar }}" />
+                        <div class="GenderFab Male">&#9794;</div>
+                    </div>
+                    <br>
+                    <div class="DisplayNames">
+                        <span class="FullName">{{ current_user.first_name}} {{current_user.last_name}}</span><br>
+                        <small class="Username">{{current_user.user_name}}</small>
+                    </div><br>
+                    <hr class="ShorterLine" align="center">
                 </div>
             </div>
         </div>
@@ -90,7 +100,7 @@
             <img draggable="false" ondragstart="return false;" src="{{ assets.url('assets://SiteAssets/icons/ExploreGlobeOutline.svg') }}">
         </span>
             <span id="2" class="NavbarIconWrap ActiveTab">
-            <img draggable="false" ondragstart="return false;" src="{{ assets.url('assets://SiteAssets/icons/MessageBubbleOutlineActivated.svg') }}">
+            <img draggable="false" ondragstart="return false;" src="{{ assets.url('assets://SiteAssets/icons/MessageBubbleOutline.svg') }}">
         </span>
             <span id="3" class="NavbarIconWrap">
             <img draggable="false" ondragstart="return false;" src="{{ assets.url('assets://SiteAssets/icons/UserGroupOutline.svg') }}">