From 49bafc87ed2fdcca1b8c4dd28c57c3b74b984feb Mon Sep 17 00:00:00 2001
From: Kenneth Jao <ksjdragon@gmail.com>
Date: Thu, 19 Jan 2017 01:11:17 -0500
Subject: [PATCH] More sign-in page, CSS/text fixes, calendar refectching fix

---
 hourglass/client/main/main.css        |  25 +-
 hourglass/client/main/main.html       |   8 +-
 hourglass/client/main/main.js         | 321 +++++++++++++-------------
 hourglass/client/menus/menus.css      |  36 +--
 hourglass/client/menus/menus.html     |  56 +++--
 hourglass/client/profile/profile.css  |  54 +++--
 hourglass/client/profile/profile.html |  54 +++--
 hourglass/client/profile/profile.js   |  82 ++++++-
 hourglass/lib/constants.js            |   4 +-
 9 files changed, 374 insertions(+), 266 deletions(-)

diff --git a/hourglass/client/main/main.css b/hourglass/client/main/main.css
index e883c3f..0ae8e65 100644
--- a/hourglass/client/main/main.css
+++ b/hourglass/client/main/main.css
@@ -38,19 +38,23 @@ html {
 }
 
 ::-webkit-input-placeholder {
-   font-size: 70%;
+	color: #FCF0F0;
+	font-size: 70%;
 }
 
 :-moz-placeholder {
-   font-size: 70%;  
+	color: #FCF0F0;
+	font-size: 70%;  
 }
 
 ::-moz-placeholder {
-   font-size: 70%;  
+	color: #FCF0F0;
+	font-size: 70%;  
 }
 
-:-ms-input-placeholder {  
-   font-size: 70%;  
+:-ms-input-placeholder { 
+	color: #FCF0F0;
+	font-size: 70%;  
 }
 
 .formInvalid::-webkit-input-placeholder {
@@ -163,9 +167,8 @@ input {
 
 .noScroll input, .noScroll textarea {
 	font-family: 'Raleway';
-	background-color: #EBEBEB;
-	border: 3px solid #CECECE;
-	border-radius: 3px;
+	background-color: rgba(0,0,0,0.2);
+	border: 0;
 	resize: none;
 }
 
@@ -1287,12 +1290,14 @@ textarea.clickModify {
 }
 
 #requestArea {
-	font-size: 1.8vh;
-	width: 85%;
+	font-size: 1.5vh;
+	width: 80%;
 	height: 35%;
+	padding: 4%;
 	margin-left: calc(7.5% - 6px);
 	margin-bottom: 5px;
 
+	display: inline;
 	outline: none;
 }
 
diff --git a/hourglass/client/main/main.html b/hourglass/client/main/main.html
index 89ae751..8428ad9 100644
--- a/hourglass/client/main/main.html
+++ b/hourglass/client/main/main.html
@@ -31,7 +31,7 @@
             </div>
         </div>
         <div id="divCenter">
-            <header id="mainHeader" style="background-color:{{divColor 'mainColor'}}{{refetchEvents}}">
+            <header id="mainHeader" style="background-color:{{divColor 'mainColor'}}">
                 <h1>Hourglass</h1><h2>{{schoolName}}</h2>
                 <div id="dropdown">
                     <img src="{{avatar}}">
@@ -81,7 +81,7 @@
                                 <div id="workComments">
                                     <h3>Comments</h3>
                                     <div>
-                                        <textarea id="workComment" class="restrict" rows="4" cols="50" maxlength="200"></textarea><br>
+                                        <textarea id="workComment" class="restrict" rows="4" cols="50" maxlength="200" style="color:{{divColor 'textColor'}}"></textarea><br>
                                         <div>
                                             <span class="resText">{{restrict 'workComment'}}</span>
                                             <div id="commentSubmit">Submit</div>
@@ -155,10 +155,6 @@
                 <p>{{username}}</p>
             </div>
             <div id="userFunctions" style="background-color:{{divColor 'userDropdownColor'}}">
-                <div id="myprofile" class="userFunction" onclick="window.location='/profile';">
-                    <i class="fa fa-user" aria-hidden="true"></i>
-                    <p>My Profile</p>
-                </div>
                 {{#if admin}}
                     <div id="myprofile" class="userFunction" onclick="window.location='/admin';">
                         <i class="fa fa-cogs" aria-hidden="true"></i>
diff --git a/hourglass/client/main/main.js b/hourglass/client/main/main.js
index fe3a541..a661fbf 100644
--- a/hourglass/client/main/main.js
+++ b/hourglass/client/main/main.js
@@ -18,7 +18,8 @@ var defaultWork = {
 
 // Reactive variables.
 Session.set("user", {}); // Stores user preferences.
-Session.set("calendarClasses", []); // Stores calendar classes.
+Session.set("calendarEvents", []); // Stores calendar classes.
+Session.set("myClasses", []); // Stores user classes.
 Session.set("requests", false); // Status of requests.
 Session.set("sidebarMode", ""); // Status of sidebars.
 Session.set("newWork", null); // If user creating new work.
@@ -27,7 +28,6 @@ Session.set("classDisp", []); // Stores current filter for classes.
 Session.set("typeFilter", []); // Stores type filters for classes.
 Session.set("typeFilterHover", null); // Stores current hovered type filter.
 Session.set("classDispHover", null); // Stores current hovered class filter.
-Session.set("refetchEvents", null); // Stores whether to get calendar events again.
 Session.set("restrictText", {}); // Stores text for comment character restriction.
 Session.set("confirmText", ""); // Stores text for confirmations.
 
@@ -85,120 +85,11 @@ Template.registerHelper('myClasses', () => { // Gets all classes and respective
     if (Session.get("user").classes.length === 0) { // Null checking.
         return [];
     } else {
-        var array = [];
-        var refetch = true;
-        var courses = Session.get("user").classes;
-        var classDisp = Session.get("classDisp"); // Get sidebar class filter.
-        var sideFilter = Session.get("typeFilter"); // Get sidebar type filter.
-        var hide = Session.get("user").preferences.timeHide;
-
-        for (var i = 0; i < courses.length; i++) { // For each user class.
-            if (courses[i] === Meteor.userId()) {
-                found = {
-                    _id: courses[i],
-                    name: "Personal",
-                    subscribers: 1,
-                    mine: false,
-                    box: " owned"
-                };
-            } else {
-                found = classes.findOne({
-                    _id: courses[i]
-                });
-                found.subscribers = found.subscribers.length;
-                found.teachershort = found.teacher.split(" ").slice(1).reduce(function(a,b) { return a+ " " + b;});
-                found.mine = true;
-                if (found.admin === Meteor.userId()) { // If user owns this class.
-                    found.box = " owned";
-                    found.mine = false;
-                }
-            }
-
-            found.selected = ((classDisp.indexOf(courses[i]) !== -1)) ? Session.get("user").preferences.theme.modeHighlight : "rgba(0,0,0,0)"; // Filter selected.
-            array.push(found);
-
-            var thisWork = work.find({
-                class: courses[i]
-            }).fetch();
-
-            if (classDisp.length !== 0 && classDisp.indexOf(found._id) === -1) { // Filter classes based on filter.
-                array[i].thisClassWork = [];
-                continue;
-            }
-
-            for (var j = 0; j < thisWork.length; j++) { // For each work in class.
-                if (hide !== 0) { // Time to hide isn't never.
-                    var due = (moment(thisWork[j].dueDate))._d;
-                    var offset = (moment().subtract(hide, 'days'))._d;
-                    if (offset > due) { // If due is before hide days before today
-                        thisWork[j] = "no";
-                    }
-                }
-
-                if (thisWork[j] !== "no" && Session.get("user").preferences.done) { // If done filter is true
-                    if (thisWork[j].done.indexOf(Meteor.userId()) !== -1) { // If user marked this work done.
-                        thisWork[j] = "no";
-                    }
-                }
-
-                if (thisWork[j] !== "no" && sideFilter.length !== 0 && !_.contains(sideFilter, thisWork[j].type)) {
-                    thisWork[j] = "no";
-                }
-
-                if (thisWork[j] !== "no" && Session.get("user").preferences.hideReport && (thisWork[j].confirmations.length / thisWork[j].reports.length) <= 0.9) {
-                    thisWork[j] = "no";
-                }
-
-            }
-            while (thisWork.indexOf("no") !== -1) thisWork.splice(thisWork.indexOf("no"), 1); // Splice all filtered works.
-
-            for (j = 0; j < thisWork.length; j++) {
-                thisWork[j].classid = courses[i];
-                thisWork[j].realDate = thisWork[j].dueDate;
-                thisWork[j].dueDate = moment(thisWork[j].dueDate).calendar(null, {
-                    sameDay: '[Today]',
-                    nextDay: '[Tomorrow]',
-                    nextWeek: 'dddd',
-                    lastDay: '[Yesterday]',
-                    lastWeek: '[Last] dddd',
-                    sameElse: 'MMMM Do'
-                });
-
-                if (thisWork[j].dueDate === "Today") { // Font weight based on date proximity.
-                    thisWork[j].cardDate = "600";
-                } else if (thisWork[j].dueDate === "Tomorrow") {
-                    thisWork[j].cardDate = "400";
-                }
-                thisWork[j].typeColor = workColors[thisWork[j].type];
-
-                thisWork[j].confirmationLength = thisWork[j].confirmations.length; // Counts the number of confirmations and reports for a particular work.
-                thisWork[j].reportLength = thisWork[j].reports.length;
-
-                thisWork[j].creator = Meteor.users.findOne({
-                    _id: thisWork[j].creator
-                }).profile.name;
-                var conf = thisWork[j].confirmations.length;
-                var repo = thisWork[j].reports.length;
-                var ratio = conf / repo;
-                var normalColor = Session.get("user").preferences.theme.text;
-                if (Math.abs(conf - repo)) {
-                    if ((conf + repo) <= 1) {
-                        thisWork[j].doneRatio = normalColor;
-                    } else {
-                        thisWork[j].doneRatio = "#F9F906";
-                    }
-                } else if (ratio >= 2) {
-                    thisWork[j].doneRatio = "#33DD33";
-                } else if (ratio <= 0.9) {
-                    thisWork[j].doneRatio = "#FF1A1A";
-                }
-            }
-            array[i].thisClassWork = thisWork.sort(function(a, b) {
-                return Date.parse(a.realDate) - Date.parse(b.realDate);
-            });
-        }
-        Session.set("calendarClasses", array);
-        Session.set("refetchEvents", refetch);
+        var array = myClasses();
+        Session.set("myClasses", array);
+        calendarEvents(array);
+        $("#fullcalendar").fullCalendar("removeEvents");
+        $("#fullcalendar").fullCalendar("addEventSource", Session.get("calendarEvents"))
         return array;
     }
 });
@@ -308,38 +199,7 @@ Template.main.helpers({
                 day: 'Day'
             },
             eventLimit: 3,
-            events: function(start, end, timezone, callback) {
-                var events = [];
-                var userClasses = Session.get("calendarClasses");
-
-                for (var i = 0; i < userClasses.length; i++) {
-                    var works = userClasses[i].thisClassWork;
-                    for (var j = 0; j < works.length; j++) {
-                        var work = works[j];
-                        var currClass = classes.findOne({
-                            _id: work.class
-                        });
-                        var inRole = false;
-
-                        if (work.class === Meteor.userId() ||
-                            Meteor.userId() === work.creator ||
-                            Roles.userIsInRole(Meteor.userId(), ['superadmin', 'admin']) ||
-                            currClass.moderators.indexOf(Meteor.userId()) !== -1 ||
-                            currClass.banned.indexOf(Meteor.userId()) !== -1
-                           ) inRole = true;
-                        events.push({
-                            id: work._id,
-                            start: work.realDate.toISOString().slice(0, 10),
-                            title: work.name,
-                            backgroundColor: workColors[work.type],
-                            borderColor: "#444",
-                            startEditable: inRole,
-                            className: work.type + " workevent " + work.class
-                        });
-                    }
-                }
-                callback(events);
-            },
+            events: Session.get("calendarEvents"),
             eventDrop: function(event, delta, revertFunc) { // When user drops from click-dragging.
                 var current = work.findOne({
                     _id: event.id
@@ -420,12 +280,6 @@ Template.main.helpers({
     },
     admin() {
         return Roles.userIsInRole(Meteor.userId(), ['admin', 'superadmin']);
-    },
-    refetchEvents() {
-        if (Session.get("refetchEvents")) {
-            $("#fullcalendar").fullCalendar('refetchEvents');
-            Session.set("refetchEvents", null);
-        }
     }
 });
 
@@ -536,7 +390,7 @@ Template.main.events({
         array.info = {
             "users": Meteor.users.find().fetch(),
             "userInfo": Meteor.user(),
-            "userClasses": Session.get("calendarClasses")
+            "userClasses": Session.get("myClasses")
         };
         Meteor.call("createRequest", array, function(err, result) {
             area.value = "";
@@ -553,7 +407,7 @@ Template.main.events({
     },
     'click #exportDiv' (event) {
         var events = "BEGIN:VCALENDAR\nVERSION:2.0\nPRODID:-//hacksw/handcal//NONSGML v1.0//EN";
-        var userClasses = Session.get("calendarClasses");
+        var userClasses = Session.get("myClasses");
         var timestamp = new Date().toJSON().replace(/-|:|\./gi, "");
         for (var i = 0; i < userClasses.length; i++) {
             var works = userClasses[i].thisClassWork;
@@ -784,11 +638,11 @@ sendData = function(funcName) { // Call Meteor function, and do actions after fu
                 position: 'top'
             });
         } else {
-            sAlert.success("Success!", {
+            /*sAlert.success("Success!", {
                 effect: 'stackslide',
                 position: 'bottom-right',
                 timeout: 2500
-            });
+            });*/
             if(funcName === "createClass") {
                 var inputs = document.getElementsByClassName("creInput");
                 for(var i = 0; i < inputs.length; i++) {
@@ -797,6 +651,9 @@ sendData = function(funcName) { // Call Meteor function, and do actions after fu
                 toggleToMode("manageClass");
             }
         }
+        calendarEvents(myClasses());
+        $("#fullcalendar").fullCalendar("removeEvents");
+        $("#fullcalendar").fullCalendar("addEventSource", Session.get("calendarEvents"));
         document.getElementsByTagName("body")[0].style.color = Session.get("user").preferences.theme.textColor;
     });
 }
@@ -1000,3 +857,151 @@ startDragula = function() {
             Meteor.call("reorderClasses", final);
         });
 };
+
+function myClasses() {
+    var array = [];
+    var courses = Session.get("user").classes;
+    var classDisp = Session.get("classDisp"); // Get sidebar class filter.
+    var sideFilter = Session.get("typeFilter"); // Get sidebar type filter.
+    var hide = Session.get("user").preferences.timeHide;
+
+    for (var i = 0; i < courses.length; i++) { // For each user class.
+        if (courses[i] === Meteor.userId()) {
+            found = {
+                _id: courses[i],
+                name: "Personal",
+                subscribers: 1,
+                mine: false,
+                box: " owned"
+            };
+        } else {
+            found = classes.findOne({
+                _id: courses[i]
+            });
+            found.subscribers = found.subscribers.length;
+            found.teachershort = found.teacher.split(" ").slice(1).reduce(function(a,b) { return a+ " " + b;});
+            found.mine = true;
+            if (found.admin === Meteor.userId()) { // If user owns this class.
+                found.box = " owned";
+                found.mine = false;
+            }
+        }
+
+        found.selected = ((classDisp.indexOf(courses[i]) !== -1)) ? Session.get("user").preferences.theme.modeHighlight : "rgba(0,0,0,0)"; // Filter selected.
+        array.push(found);
+
+        var thisWork = work.find({
+            class: courses[i]
+        }).fetch();
+
+        if (classDisp.length !== 0 && classDisp.indexOf(found._id) === -1) { // Filter classes based on filter.
+            array[i].thisClassWork = [];
+            continue;
+        }
+
+        for (var j = 0; j < thisWork.length; j++) { // For each work in class.
+            if (hide !== 0) { // Time to hide isn't never.
+                var due = (moment(thisWork[j].dueDate))._d;
+                var offset = (moment().subtract(hide, 'days'))._d;
+                if (offset > due) { // If due is before hide days before today
+                    thisWork[j] = "no";
+                }
+            }
+
+            if (thisWork[j] !== "no" && Session.get("user").preferences.done) { // If done filter is true
+                if (thisWork[j].done.indexOf(Meteor.userId()) !== -1) { // If user marked this work done.
+                    thisWork[j] = "no";
+                }
+            }
+
+            if (thisWork[j] !== "no" && sideFilter.length !== 0 && !_.contains(sideFilter, thisWork[j].type)) {
+                thisWork[j] = "no";
+            }
+
+            if (thisWork[j] !== "no" && Session.get("user").preferences.hideReport && (thisWork[j].confirmations.length / thisWork[j].reports.length) <= 0.9) {
+                thisWork[j] = "no";
+            }
+
+        }
+        while (thisWork.indexOf("no") !== -1) thisWork.splice(thisWork.indexOf("no"), 1); // Splice all filtered works.
+
+        for (j = 0; j < thisWork.length; j++) {
+            thisWork[j].classid = courses[i];
+            thisWork[j].realDate = thisWork[j].dueDate;
+            thisWork[j].dueDate = moment(thisWork[j].dueDate).calendar(null, {
+                sameDay: '[Today]',
+                nextDay: '[Tomorrow]',
+                nextWeek: 'dddd',
+                lastDay: '[Yesterday]',
+                lastWeek: '[Last] dddd',
+                sameElse: 'MMMM Do'
+            });
+
+            if (thisWork[j].dueDate === "Today") { // Font weight based on date proximity.
+                thisWork[j].cardDate = "600";
+            } else if (thisWork[j].dueDate === "Tomorrow") {
+                thisWork[j].cardDate = "400";
+            }
+            thisWork[j].typeColor = workColors[thisWork[j].type];
+
+            thisWork[j].confirmationLength = thisWork[j].confirmations.length; // Counts the number of confirmations and reports for a particular work.
+            thisWork[j].reportLength = thisWork[j].reports.length;
+
+            thisWork[j].creator = Meteor.users.findOne({
+                _id: thisWork[j].creator
+            }).profile.name;
+            var conf = thisWork[j].confirmations.length;
+            var repo = thisWork[j].reports.length;
+            var ratio = conf / repo;
+            var normalColor = Session.get("user").preferences.theme.text;
+            if (Math.abs(conf - repo)) {
+                if ((conf + repo) <= 1) {
+                    thisWork[j].doneRatio = normalColor;
+                } else {
+                    thisWork[j].doneRatio = "#F9F906";
+                }
+            } else if (ratio >= 2) {
+                thisWork[j].doneRatio = "#33DD33";
+            } else if (ratio <= 0.9) {
+                thisWork[j].doneRatio = "#FF1A1A";
+            }
+        }
+        array[i].thisClassWork = thisWork.sort(function(a, b) {
+            return Date.parse(a.realDate) - Date.parse(b.realDate);
+        });
+    }
+    return array;
+}
+
+function calendarEvents(array) {
+    var events = [];
+    var userClasses = array;
+
+    for (var i = 0; i < userClasses.length; i++) {
+        var works = userClasses[i].thisClassWork;
+        for (var j = 0; j < works.length; j++) {
+            var work = works[j];
+            var currClass = classes.findOne({
+                _id: work.class
+            });
+            var inRole = false;
+
+            if (work.class === Meteor.userId() ||
+                Meteor.userId() === work.creator ||
+                Roles.userIsInRole(Meteor.userId(), ['superadmin', 'admin']) ||
+                currClass.moderators.indexOf(Meteor.userId()) !== -1 ||
+                currClass.banned.indexOf(Meteor.userId()) !== -1
+               ) inRole = true;
+            events.push({
+                id: work._id,
+                start: work.realDate.toISOString().slice(0, 10),
+                title: work.name,
+                backgroundColor: workColors[work.type],
+                borderColor: "#444",
+                startEditable: inRole,
+                className: work.type + " workevent " + work.class
+            });
+        }
+    }
+    Session.set("calendarEvents", events);
+}
diff --git a/hourglass/client/menus/menus.css b/hourglass/client/menus/menus.css
index 76e4aa7..433d24e 100644
--- a/hourglass/client/menus/menus.css
+++ b/hourglass/client/menus/menus.css
@@ -113,7 +113,8 @@
 
 #settingClassWrapper {
 	width: 90%;
-	padding: 2% 0 0 3%;
+	margin: auto;
+	padding-top: 2%;
 }
 
 #label {
@@ -125,6 +126,12 @@
 	cursor: default;
 }
 
+#classBody {
+	height: 64vh;
+	overflow-y: auto;
+	overflow-x: hidden;
+}
+
 #settingClassWrapper h3 {
 	font-weight: 300;
 	font-style: italic;
@@ -133,7 +140,7 @@
 
 .classBox {
 	font-size: 1.3vw;
-	width: 100%;
+	width: 95%;
 	margin-bottom: 3%;
 	padding: 2%;
 
@@ -492,7 +499,7 @@
 
 #classSearch, #privateCode {
 	font-size: 2vh;
-	padding: 1%;
+	padding: 1% !important;
 	outline: none;
 }
 
@@ -534,7 +541,11 @@
 }
 
 #createWrapper {
+	margin: auto;
+	margin-top: 3%;
+	width: 80%;
 	padding: 3%;
+	background-color: rgba(0,0,0,0.1);
 }
 
 #creRules p {
@@ -542,12 +553,12 @@
 }
 
 .formDiv {
-	margin-left: 25%;
-	padding: 1% 2% 1% 2%;
-	width: 30%;
-	background-color: rgba(255,255,255,0.1);
+	width: 100%;
+	margin: 0;
+	padding: 2%;
+	background-color: transparent;
 	position: relative;
-	display: table;
+	display: inline;
 }
 
 .formDiv:first-child {
@@ -562,11 +573,6 @@
 	font-size: 2vh;
 	width: calc(98% - 8px) !important;
 	padding: 1%;
-	margin: 1%;
-}
-
-.formDiv .optionHolder {
-	width: 89%;
 }
 
 .formDiv .-autocomplete-container {
@@ -585,9 +591,9 @@
 	font-weight: 200;
 	width: 30%;
 	padding: 2%;
+	margin: auto;
 	margin-top: 2%;
-	margin-left: 25%;
-
+	
 	-moz-border-radius: 3px;
 	-webkit-border-radius: 3px;
 	border-radius: 3px;
diff --git a/hourglass/client/menus/menus.html b/hourglass/client/menus/menus.html
index 712531e..4afaa2f 100644
--- a/hourglass/client/menus/menus.html
+++ b/hourglass/client/menus/menus.html
@@ -130,7 +130,7 @@
         <h3>Requests</h3>
     </div>
     <p class="sidebarDesc">Ask for help, submit a bug, or request a feature! We won't bite.</p>
-    <textarea id="requestArea" class="restrict" rows="4" cols="50" maxlength="500" placeholder="Enter request here..."></textarea><br>
+    <textarea id="requestArea" class="restrict" rows="4" cols="50" maxlength="500" placeholder="Enter request here..." style="color:{{divColor 'textColor'}}"></textarea><br>
     <span id="requestRes" class="resText">{{restrict 'requestArea'}}</span>
     <span style="opacity:0">.</span>
     <div id="requestSubmit">
@@ -142,7 +142,7 @@
 
 <template name="sidebarCreatePlate">
     <div class="sectionTitle downOffset">
-        <h3>Requests</h3>
+        <h3>Classes</h3>
     </div>
     <p class="sidebarDesc">Pick a class to create work for.</p>
     {{#each myClasses}}
@@ -223,27 +223,31 @@
                 <input id="privateCode" placeholder="Enter code here...">
             </div>
             <div id="settingClassWrapper">
-                <div id="label" class="classBox">
-                    <span class="name classText">Class Name</span>
-                    <span class="teacher classText">Teacher</span>
-                    <span class="hour classText">Hour</span>
-                    <span class="subscriptions classText">Members</span>
+                <div id="classHeader">
+                    <div id="label" class="classBox">
+                        <span class="name classText">Class Name</span>
+                        <span class="teacher classText">Teacher</span>
+                        <span class="hour classText">Hour</span>
+                        <span class="subscriptions classText">Members</span>
+                    </div>
                 </div>
-                {{#if notsearching}}
-                    {{#each classes}}
-                        {{> classDisplay}}
-                    {{/each}}
-                    {{#if noclass}}
-                        <h3>No results found...</h3>
+                <div id="classBody">
+                    {{#if notsearching}}
+                        {{#each classes}}
+                            {{> classDisplay}}
+                        {{/each}}
+                        {{#if noclass}}
+                            <h3>No results found...</h3>
+                        {{/if}}
+                    {{else}}
+                        {{#each autocompleteClasses}}
+                            {{> classDisplay}}
+                        {{/each}}
+                        {{#if notfound}}
+                            <h3>No results found...</h3>
+                        {{/if}}
                     {{/if}}
-                {{else}}
-                    {{#each autocompleteClasses}}
-                        {{> classDisplay}}
-                    {{/each}}
-                    {{#if notfound}}
-                        <h3>No results found...</h3>
-                    {{/if}}
-                {{/if}}
+                </div>
             </div>
         </div>
         <div id="colRight" style="background-color:{{divColor 'sidebarColor'}}">
@@ -294,15 +298,19 @@
                 </div>
                 <div id="formContainer">
                     <div class="formDiv">
-                       {{> inputAutocomplete settings=schoolComplete class="form-control creInput"         type="text" form="school" placeholder="**School | Ex: International Academy" }}
+                        <p class="profTitle">**School:</p>
+                        {{> inputAutocomplete settings=schoolComplete class="form-control creInput"         type="text" form="school" placeholder="**School | Ex: International Academy" }}
                    </div>
                    <div class="formDiv">
+                    <p class="profTitle">Hour:</p>
                        <input class="creInput" type="text" form="hour" placeholder="Hour">
                    </div>
                    <div class="formDiv">
-                       {{> inputAutocomplete settings=teacherComplete class="form-control creInput" type="text" form="teacher" placeholder="Teacher | Ex: Marc DeZwaan" }}
+                        <p class="profTitle">Teacher:</p>
+                        {{> inputAutocomplete settings=teacherComplete class="form-control creInput" type="text" form="teacher" placeholder="Teacher | Ex: Marc DeZwaan" }}
                    </div>
                    <div class="formDiv">
+                        <p class="profTitle">**Class Name:</p>
                        <input class="creInput" type="text" form="name" placeholder="**Class Name">
                    </div>
                    <div class="formDiv">
@@ -324,7 +332,7 @@
                        </div>
                    </div>
                    <h3 id="creSubmit" style="border:1px solid {{divColor 'textColor'}}">Submit Request</h3>
-               </div>
+                </div>
             </div>
         </div>
     </div>
diff --git a/hourglass/client/profile/profile.css b/hourglass/client/profile/profile.css
index d962527..5905859 100644
--- a/hourglass/client/profile/profile.css
+++ b/hourglass/client/profile/profile.css
@@ -34,12 +34,12 @@
 	background-color: rgba(0,0,0,0.2);
 }
 
-#profPageWrapper .classBox:not(:first-child) {
+#profPageWrapper .classBox:not(#label) {
 	border: 1px solid #FCF0F0 !important;
 }
 
-#profPageWrapper #createWrapper {
-
+#profPageWrapper .optionHolder {
+	width: 100%;
 }
 
 #basicInfo {
@@ -50,28 +50,17 @@
 
 #newUserWrapper {
 	width: 25%;
-	padding: 2.5%;
+	padding: 2%;
 	margin: auto;
 
 	background-color: rgba(255,255,255,0.2);
 }
 
-#newUserWrapper .formDiv {
-	width: 100%;
-	margin: 0;
-	padding: 0;
-	background-color: transparent;
-}
-
 .opTitle {
 	font-weight: 200;
 	margin: 0;
 }
 
-#newUserWrapper .optionHolder {
-	width: 100% !important;
-}
-
 #basicNext {
 	padding: 2%;
 	border: 1px solid #FCF0F0;
@@ -142,11 +131,14 @@
 
 #enrollUserWrapper {
 	width: 60%;
-	height: 42vh;
+	height: 60vh;
 	margin: auto;
 	padding: 1%;
 	background-color: rgba(255,255,255,0.2);
-	overflow-y: auto;
+}
+
+#enrollUserWrapper #classBody {
+	height: 40vh;
 }
 
 #enrollClassList {
@@ -236,25 +228,43 @@
 	top: 150%;
 }
 
-#createWrapper {
+#profPageWrapper #createWrapper {
 	margin: auto;
+	padding: 3%;
+	padding-bottom: 2%;
 	width: 30%;
 
 	background-color: rgba(255,255,255,0.2);
 }
 
-#createWrapper .formDiv {
+.formDiv {
 	width: 100%;
 	margin: 0;
+	padding: 2%;
 	background-color: transparent;
+	display: inline;
 }
 
-#createWrapper #creSubmit {
-	width: 30%;
-	margin: auto;
+#profPageWrapper #creSubmit {
 	border: 1px solid #FCF0F0 !important;
 }
 
+#profPageWrapper .profTitle {
+	margin-bottom: 1%;
+}
+
 #createWrapper p {
 	margin: 0;
 }
+
+#profPageWrapper input {
+	margin: 0;
+	padding: 2%;
+	background-color: rgba(0,0,0,0.1);
+	border: 0;
+}
+
+#profileSubmit {
+	position:absolute;
+	top: 5%;
+}
\ No newline at end of file
diff --git a/hourglass/client/profile/profile.html b/hourglass/client/profile/profile.html
index 0e9ab61..b8179e7 100644
--- a/hourglass/client/profile/profile.html
+++ b/hourglass/client/profile/profile.html
@@ -35,27 +35,31 @@
                     <span id="createActivate">Class not here?</span>
                 </div>
                 <div id="settingClassWrapper">
-                    <div id="label" class="classBox">
-                        <span class="name classText">Class Name</span>
-                        <span class="teacher classText">Teacher</span>
-                        <span class="hour classText">Hour</span>
-                        <span class="subscriptions classText">Members</span>
+                    <div id="classHeader">
+                        <div id="label" class="classBox">
+                            <span class="name classText">Class Name</span>
+                            <span class="teacher classText">Teacher</span>
+                            <span class="hour classText">Hour</span>
+                            <span class="subscriptions classText">Members</span>
+                        </div>
                     </div>
-                    {{#if notsearching}}
-                        {{#each classes}}
-                            {{> classDisplay}}
-                        {{/each}}
-                        {{#if noclass}}
-                            <h3>No results found...</h3>
+                    <div id="classBody">
+                        {{#if notsearching}}
+                            {{#each classes}}
+                                {{> classDisplay}}
+                            {{/each}}
+                            {{#if noclass}}
+                                <h3>No results found...</h3>
+                            {{/if}}
+                        {{else}}
+                            {{#each autocompleteClasses}}
+                                {{> classDisplay}}
+                            {{/each}}
+                            {{#if notfound}}
+                                <h3>No results found...</h3>
+                            {{/if}}
                         {{/if}}
-                    {{else}}
-                        {{#each autocompleteClasses}}
-                            {{> classDisplay}}
-                        {{/each}}
-                        {{#if notfound}}
-                            <h3>No results found...</h3>
-                        {{/if}}
-                    {{/if}}
+                    </div>
                 </div>
             </div>
         </div>
@@ -73,15 +77,19 @@
                 </div>
                 <div id="formContainer">
                     <div class="formDiv">
-                       {{> inputAutocomplete settings=schoolComplete class="form-control creInput"         type="text" form="school" placeholder="**School | Ex: International Academy" }}
+                        <p class="profTitle">**School:</p>
+                        {{> inputAutocomplete settings=schoolComplete class="form-control creInput"         type="text" form="school" placeholder="**School | Ex: International Academy" }}
                    </div>
                    <div class="formDiv">
+                    <p class="profTitle">Hour:</p>
                        <input class="creInput" type="text" form="hour" placeholder="Hour">
                    </div>
                    <div class="formDiv">
-                       {{> inputAutocomplete settings=teacherComplete class="form-control creInput" type="text" form="teacher" placeholder="Teacher | Ex: Marc DeZwaan" }}
+                        <p class="profTitle">Teacher:</p>
+                        {{> inputAutocomplete settings=teacherComplete class="form-control creInput" type="text" form="teacher" placeholder="Teacher | Ex: Marc DeZwaan" }}
                    </div>
                    <div class="formDiv">
+                        <p class="profTitle">**Class Name:</p>
                        <input class="creInput" type="text" form="name" placeholder="**Class Name">
                    </div>
                    <div class="formDiv">
@@ -106,6 +114,10 @@
                </div>
             </div>
         </div>
+        <div id="profileSubmit">
+            <h3>Finish!</h3>
+            <i class="fa fa-chevron-right" aria-hidden="true"></i>
+        </div>
         <div id="forwardArrow" class="circleIcon moveArrow" style="display:{{showArrow 'forward'}}">
             <i class="fa fa-chevron-down" aria-hidden="true"></i>
         </div>
diff --git a/hourglass/client/profile/profile.js b/hourglass/client/profile/profile.js
index b633ab5..f9d8954 100644
--- a/hourglass/client/profile/profile.js
+++ b/hourglass/client/profile/profile.js
@@ -6,6 +6,7 @@ import {
 
 Session.set("sections", [0,0]) // [Completed, Viewing] 
 Session.set("profile", {classes: []});
+Session.set("newClasses", []);
 Session.set("autocompleteDivs", null);
 Session.set("notsearching", true); // If user isn't searching
 Session.set("noclass", null); // If user doesn't have classes.
@@ -132,8 +133,15 @@ Template.profile.helpers({
     },
     enrollClass() {
         var myClasses = Session.get("profile").classes;
-        if(myClasses === undefined || myClasses.length === 0) return [{name:"Enroll!",x:false}];
-        return myClasses.map(function(a){return {name:classes.findOne({_id:a}).name,x:true,_id:a}});
+        var newClasses = Session.get("newClasses");
+        if((myClasses === undefined || myClasses.length === 0) && newClasses.length === 0) return [{name:"Enroll!",x:false}];
+        var array = myClasses.map(function(a) {
+            return {name:classes.findOne({_id:a}).name,x:true,_id:a}
+        });
+        array.push.apply(array,newClasses.map(function(a){
+            return {name:a.name,_id:(Math.floor(Math.random()*1000)).toString(),x:true};
+        }));
+        return array;
     }
 });
 
@@ -172,6 +180,58 @@ Template.profile.events({
         Session.set("sections", [(Session.get("sections")[0] < 2) ? 2 : Session.get("sections")[0], Session.get("sections")[1]]);
         slideToField(2);
     },
+    'click #creSubmit' () {
+        var inputs = document.getElementsByClassName("creInput");
+        var required = ["school", "name", "privacy", "category"];
+        var alert = checkComplete(required, inputs);
+        var values = alert[2];
+        if(!alert[0]) {
+            sAlert.error("Missing " + alert[1], {
+                effect: 'stackslide',
+                position: 'top',
+                timeout: 3000
+            });
+            return;
+        }
+        values.privacy = (values.privacy === "Public") ? false : true;
+        values.status = false;
+        values.category.toLowerCase();
+        values.code = "";
+        var newClasses = Session.get("newClasses");
+        var duplicate = false;
+        for(var i = 0; i < newClasses.length; i++) {
+            if(JSON.stringify(newClasses[i]) === JSON.stringify(values)) duplicate = true;
+        }
+        if(!duplicate && newClasses.length < 8) newClasses.push(values);
+        if(duplicate) sAlert.error("You already created this class!", {
+            effect: 'stackslide',
+            position: 'bottom-right',
+            timeout: 3000
+        });
+        if(newClasses.length === 8) sAlert.error("You already created 8 classes!", {
+            effect: 'stackslide',
+            position: 'bottom-right',
+            timeout: 3000
+        });
+        Session.set("newClasses", newClasses);
+        $(".creInput").each(function(){$(this).val('');});
+        /*if (!teachers.findOne({
+                name: values.teacher
+            })) {
+            Meteor.call("createTeacher", values.teacher, values.school, function(error, result) {
+                if (error !== undefined) {
+                    sAlert.error(error.message, {
+                        effect: 'stackslide',
+                        position: 'top'
+                    });
+                } else {
+                    sendData("createClass");
+                }
+            });
+        } else {
+            sendData("createClass");
+        }*/
+    },
     'click #backArrow' () {
         slideToField(Session.get("sections")[1]-1);
     },
@@ -300,6 +360,14 @@ Template.profile.events({
     'click #ESCWrapper .fa-times' (event) {
         var profile = Session.get("profile");
         var id = event.target.parentNode.getAttribute("classid");
+        if(id.length < 17) {
+            var newClasses = Session.get("newClasses");
+            newClasses.splice(newClasses.map(function(a) {
+                return a._id;
+            }).indexOf(id),1);
+            Session.set("newClasses", newClasses);
+            return;
+        }
         if(profile.classes.indexOf(id) !== -1) {
             profile.classes.splice(profile.classes.indexOf(id),1);
             Session.set("profile", profile);
@@ -320,19 +388,17 @@ Template.profile.events({
 function slideToField(field) {
     var order = ["basicInfo", "enrollInfo", "createInfo"];
     $(".moveArrow").animate({"opacity":0})
-    $("#enrollClassList").fadeOut(200);
+    if(field === 0) $("#enrollClassList").fadeOut(200);
     var viewing = Session.get("sections")[1]
-    var move = (viewing-field < 0) ? "-50%" : "150%";
+    var move = (viewing-field < 0) ? "-100%" : "150%";
     $("#"+order[viewing]).animate({top: move});
     $("#"+order[field]).animate({
-        top:"20%"
+        top:"17%"
     },{
         complete: function() {
             Session.set("sections", [Session.get("sections")[0],field]);
             $(".moveArrow").animate({"opacity":1});
-            if(field === 1) {
-                $("#enrollClassList").fadeIn(200);
-            }
+            if(field === 1) $("#enrollClassList").fadeIn(200);
         }
     });
 }
diff --git a/hourglass/lib/constants.js b/hourglass/lib/constants.js
index 3649b06..1af0f98 100644
--- a/hourglass/lib/constants.js
+++ b/hourglass/lib/constants.js
@@ -2,8 +2,8 @@ themeColors =  {
     "lux": {
         "background": "White.jpg",
         "mainColor": "#DBDBDB",
-        "secondaryColor": "#E8E8E8",
-        "sidebarColor": "#799CB8",
+        "secondaryColor": "#567393",
+        "sidebarColor": "#6C94B4",
         "userDropdownColor": "#E6E6E6",
         "iconHighlight": "#FFF",
         "modeHighlight": "#D34949",