Manage class menu start layout

This commit is contained in:
Kenneth Jao 2016-11-03 23:12:57 -04:00
parent 31e8ded42e
commit 313f79044b
9 changed files with 380 additions and 326 deletions

View File

@ -55,7 +55,7 @@ html {
.formInvalid::-webkit-input-placeholder {
color: red;
}s
}
.formInvalid:-moz-placeholder {
color: red;
@ -135,7 +135,7 @@ body {
width: 36vh;
z-index: 5;
}
a
.noScroll h1,.noScroll h2,.noScroll h3,.noScroll h4,.noScroll h5,
.gu-mirror h1,.gu-mirror h2,.gu-mirror h3,.gu-mirror h4,.gu-mirror h5 {
margin: 0;
@ -148,7 +148,6 @@ a
.noScroll h4, .gu-mirror h4 {
font-size: 1.9vh;
font-weight: 200;
padding: 5%;
display: inline-block;
@ -261,20 +260,9 @@ a
margin-top: 6vh;
}
.sectionTitle {
font-weight: 200;
font-size: 2vh;
width: 100%;
padding: 6%;
background-color: rgba(255,255,255,0.1);
}
.sectionTitle h3 {
font-size: 2vh;
}
.mode {
width: 100%;
height: 6vh;
display: table;
background-color: rgba(0,0,0,0.1);
@ -308,16 +296,19 @@ a
.mode .fa {
width: 10%;
padding: 6%;
padding: 0 6% 0 6%;
line-height: 6vh;
display: table-cell;
}
.mode h4 {
width: 74%;
line-height: 6vh;
display: table-cell;
}
#divLeftBar .fa-university, #divLeftBar .fa-calendar, #divLeftBar .fa-download, #divLeftBar .fa-tasks {
#divLeftBar .fa-university, #divLeftBar .fa-calendar, #divLeftBar .fa-download, #divLeftBar .fa-tasks,
#divLeftBar .fa-graduation-cap, #divLeftBar .fa-book {
font-size: 2vh;
}
@ -364,7 +355,7 @@ a
}
.sideClass span {
font-weight: 400;
font-weight: 200;
margin: 0;
font-size: 1.7vh;
padding: 5%;
@ -407,73 +398,6 @@ a
white-space: nowrap;
}
#filterWrapper {
width: 100%;
}
.openable {
font-weight: 200;
padding: 0;
cursor: pointer;
-webkit-transition: background-color 0.4s ease;
-moz-transition: background-color 0.4s ease;
-ms-transition: background-color 0.4s ease;
transition: background-color 0.4s ease;
}
.openable:hover {
background-color: rgba(255,255,255,0.2);
}
.openable h3:first-child {
font-weight: 200;
padding: 5%;
display: inline-block;
pointer-events: none;
}
.openable .fa {
padding: 5%;
float: right;
display: inline-block;
pointer-events: none;
}
#filterHead h3:first-child, #filterWrapper .sectionTitle h3:first-child {
font-weight: 200;
padding: 5%;
display: inline-block;
pointer-events: none;
}
#disableFilter {
font-weight: 200;
font-size: 90%;
margin-left: 10%;
padding: 4%;
background-color: rgba(255,255,255,0.2);
display: inline-block;
cursor: pointer;
pointer-events: all;
z-index: 2;
-webkit-transition: background-color 0.4s ease;
-moz-transition: background-color 0.4s ease;
-ms-transition: background-color 0.4s ease;
transition: background-color 0.4s ease;
}
#disableFilter:hover {
background-color: rgba(0,0,0,0.1);
}
#filterWrapper {
display: none;
}
.mainClass {
width: 100%;
padding-bottom: 1%;
@ -504,10 +428,6 @@ a
cursor: pointer;
}
.sectionTitle.downOffset {
margin-top: 6vh;
}
.mainClassName {
font-size: 160%;
white-space: normal;
@ -704,10 +624,14 @@ textarea.clickModify {
}
.prefText {
padding: 4%;
height: 5vh;
background-color: rgba(255,255,255,0.15);
}
.prefText h3 {
line-height: 5vh;
}
.noneLeft {
color: red;
}

View File

@ -53,6 +53,9 @@
</div>
{{/if}}
{{#if currSettingMode 'manageClass'}}
{{> manageClass}}
{{/if}}
</div>
</div>

View File

@ -302,8 +302,11 @@ Template.main.helpers({
if (Session.get("requests")) return "0px";
return openValues.requests;
},
currMode(name) { // Status of display mode.
return (Session.equals("sidebarMode", "option")) ? Session.equals("settingMode", mode) : Session.equals("mode", name);
currMode(mode) { // Status of display mode.
return Session.equals("mode", mode);
},
currSettingMode(mode) {
return Session.equals("settingMode", mode) && Session.equals("sidebarMode", "option");
},
calendarOptions() { // Settings for the calendar, including work displaying.
return {
@ -386,9 +389,6 @@ Template.main.helpers({
var width = window.innerWidth * 0.85;
return "width:" + width.toString() + "px;margin-left:" + (0.5 * window.innerWidth - 0.5 * width).toString() + "px;";
},
filterOn() {
return Session.get("classDisp").length !== 0 || Session.get("typeFilter").length !== 0;
},
highlight() { // Calendar highlight/scale option.
var hoverHighlight = Session.get("classDispHover");
var typeHighlight = Session.get("typeFilterHover");
@ -456,14 +456,14 @@ Template.main.events({
}
if (!e.includes("fa-cog") && // Sidebar closing.
!e.includes("fa-bars") &&
!e.includes("fa-question") &&
!document.getElementById("menuContainer").contains(event.target) &&
!document.getElementById("menuBar").contains(event.target)) {
if(!(e.includes("fc-day") && !e.includes("fc-past"))) {
toggleToSidebar(false);
}
!e.includes("fa-bars") &&
!e.includes("fa-question") &&
!document.getElementById("menuContainer").contains(event.target) &&
!document.getElementById("menuBar").contains(event.target)) {
if(!(e.includes("fc-day") && !e.includes("fc-past")) &&
!Session.equals("sidebarMode", "option")) {
toggleToSidebar(false);
}
}
if (e === "overlay") { // Overlay closing.
@ -731,80 +731,6 @@ Template.main.events({
'click #markReport' () { // Click report button.
serverData = [Session.get("currentWork")._id, "reports"];
sendData("toggleWork");
},
// CLASS FILTERS
'click .sideClass' (event) { // Click class list in sidebar.
var div = event.target;
while (div.getAttribute("classid") === null) div = div.parentNode;
var classid = div.getAttribute("classid");
if (Session.equals("sidebarMode","create")) { // If creating work from calendar.
var newSetting = Session.get("currentWork");
newSetting.class = classid;
Session.set("currentWork", newSetting);
openDivFade(document.getElementsByClassName("overlay")[0]);
} else { // Normal clicking turns on filter.
var array = Session.get("classDisp");
if (array.indexOf(classid) !== -1) {
array.splice(array.indexOf(classid), 1);
} else {
array.push(classid);
}
Session.set("classDisp", array);
}
},
'click .sideFilter' (event) {
var div = event.target;
while (div.getAttribute("type") === null) div = div.parentNode;
var type = div.getAttribute("type");
var array = Session.get("typeFilter");
if (array.indexOf(type) !== -1) {
array.splice(array.indexOf(type), 1);
} else {
array.push(type);
}
Session.set("typeFilter", array);
},
'click #disableFilter' () {
Session.set("classDisp", []);
Session.set("typeFilter", []);
},
'mouseover .sideClass' (event) { // Highlight/scale filter on-hover.
var div;
if (event.target.className !== "sideClass") {
div = event.target.parentNode;
} else {
div = event.target;
}
while (div.getAttribute("classid") === null) div = div.parentNode;
var classid = div.getAttribute("classid");
Session.set("classDispHover", classid);
},
'mouseleave .sideClass' (event) { // Turn off highlight/scale filter on-leave.
if (event.target.className !== "sideClass") {
var div = event.target.parentNode;
if (div.contains(event.target)) return;
}
Session.set("classDispHover", null);
},
'mouseover .sideFilter' (event) {
var div;
if (event.target.className !== "sideFilter") {
div = event.target.parentNode;
} else {
div = event.target;
}
while (div.getAttribute("type") === null) div = div.parentNode;
var type = div.getAttribute("type");
Session.set("typeFilterHover", type);
},
'mouseleave .sideFilter' (event) {
if (event.target.className !== "sideFilter") {
var div = event.target.parentNode;
if (div.contains(event.target)) return;
}
Session.set("typeFilterHover", null);
}
});
@ -830,6 +756,9 @@ function toggleOptionMenu(toggle, menu) {
}
function toggleToSidebar(sidebar) {
try {
$("#backgroundOverlay").fadeOut(250);
} catch(err) {}
if(Session.equals("sidebarMode", sidebar) || !sidebar) {
$("#menuContainer").hide("slide", {direction: "left"}, 250);
$("#divCenter").stop().animate({left: '6vh'}, 250, function() {
@ -895,6 +824,7 @@ function sendData(funcName) { // Call Meteor function, and do actions after func
timeout: 2500
});
}
document.getElementsByTagName("body")[0].style.color = Session.get("user").preferences.theme.textColor;
});
}

View File

@ -0,0 +1,175 @@
#filterWrapper {
width: 100%;
}
.sectionTitle {
font-weight: 200;
font-size: 2vh;
width: 100%;
height: 6vh;
background-color: rgba(255,255,255,0.1);
}
.sectionTitle h3 {
font-weight: 200;
font-size: 2vh;
padding-left: 6%;
line-height: 6vh;
}
.sectionTitle.downOffset {
margin-top: 6vh;
}
.openable {
cursor: pointer;
-webkit-transition: background-color 0.4s ease;
-moz-transition: background-color 0.4s ease;
-ms-transition: background-color 0.4s ease;
transition: background-color 0.4s ease;
}
.openable:hover {
background-color: rgba(255,255,255,0.2);
}
.openable h3:first-child {
font-weight: 200;
display: inline-block;
pointer-events: none;
}
.openable .fa {
padding: 6%;
float: right;
display: inline-block;
pointer-events: none;
}
#disableFilter {
font-weight: 200;
font-size: 90%;
margin-left: 10%;
padding: 4%;
background-color: rgba(255,255,255,0.2);
display: inline-block;
cursor: pointer;
line-height: normal;
pointer-events: all;
z-index: 2;
-webkit-transition: background-color 0.4s ease;
-moz-transition: background-color 0.4s ease;
-ms-transition: background-color 0.4s ease;
transition: background-color 0.4s ease;
}
#disableFilter:hover {
background-color: rgba(0,0,0,0.1);
}
#filterWrapper {
display: none;
}
#backgroundOverlay {
width: 100%;
height: 100%;
position: absolute;
top: 0;
}
#colLeft, #colRight {
height: 100%;
display: inline-block;
}
#colLeft h2, #colRight h2 {
padding: 2% 2% 0 3%;
font-size: 4vh;
font-weight: 300;
}
#colLeft {
width: 52%;
}
#colRight {
border-left: 1px solid #666;
float: right;
width: 40%;
box-shadow: inset 0 0 0 99999px rgba(0,0,0,0.2);
}
#settingClassWrapper {
width: 100%;
padding: 2% 0 0 5%;
}
#label {
background-color: rgba(0,0,0,0.2);
box-shadow: none;
border: none;
display: table;
cursor: default;
}
.classBox {
font-size: 1.3vw;
width: 100%;
margin-bottom: 3%;
padding: 2%;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
display: table;
table-layout: fixed;
cursor: pointer;
-webkit-transition: background-color 0.4s ease;
-moz-transition: background-color 0.4s ease;
-ms-transition: background-color 0.4s ease;
transition: background-color 0.4s ease;
}
.classBox:hover {
background-color: rgba(0,0,0,0.3);
}
.owned {
box-shadow: inset 0 0 0 99999px rgba(255,255,255,0.3);
-webkit-transition: background-color 0.4s ease;
-moz-transition: background-color 0.4s ease;
-ms-transition: background-color 0.4s ease;
transition: background-color 0.4s ease;
}
.owned:hover {
background-color: rgba(0,0,0,0.3);
}
.classText {
margin-left: .5%;
margin-right: 10%;
display: table-cell;
text-align: left;
}
.classBox .fa-times {
display: table-cell;
width: 5%;
}
.name {
width: 40%;
}
.hour.classText, .subscribers.classText {
text-align: center;
}

View File

@ -1,44 +1,42 @@
<template name="sidebarMenuPlate">
<div id="modes">
<h3 class="sectionTitle">Main</h3>
<div class="mode classes">
<div class="status" style="background-color:{{modeStatus 'classes'}}"></div>
<i class="fa fa-university" aria-hidden="true"></i>
<h4>Classes</h4>
</div>
<div class="mode calendar">
<div class="status" style="background-color:{{modeStatus 'calendar'}}"></div>
<i class="fa fa-calendar" aria-hidden="true"></i>
<h4>Calendar</h4>
</div>
<div class="sectionTitle downOffset">
<h3>Main</h3>
</div>
<div id="filters">
<div id="filterHead" class="sectionTitle openable">
<h3>Filters</h3>
{{#if filterOn}}
<h3 id="disableFilter">Disable All</h3>
{{/if}}
<div class="mode classes">
<div class="status" style="background-color:{{modeStatus 'classes'}}"></div>
<i class="fa fa-university" aria-hidden="true"></i>
<h4>Classes</h4>
</div>
<div class="mode calendar">
<div class="status" style="background-color:{{modeStatus 'calendar'}}"></div>
<i class="fa fa-calendar" aria-hidden="true"></i>
<h4>Calendar</h4>
</div>
<div id="filterHead" class="sectionTitle openable">
<h3>Filters</h3>
{{#if filterOn}}
<h3 id="disableFilter">Disable All</h3>
{{/if}}
<i class="fa fa-angle-down" aria-hidden="true"></i>
</div>
<div id="filterWrapper">
<div id="typeFilterWrapper" class="sectionTitle openable">
<h3>By Type</h3>
<i class="fa fa-angle-down" aria-hidden="true"></i>
</div>
<div id="filterWrapper">
<div id="typeFilterWrapper" class="sectionTitle openable">
<h3>By Type</h3>
<div id="classFilterHolder">
{{#each types}}
{{> sideTypeFilter}}
{{/each}}
</div>
<div id="classFilterWrapper" class="sectionTitle openable">
<h3>By Class</h3>
<i class="fa fa-angle-down" aria-hidden="true"></i>
</div>
<div id="classFilterHolder">
{{#each types}}
{{> sideTypeFilter}}
{{/each}}
</div>
<div id="classFilterWrapper" class="sectionTitle openable">
<h3>By Class</h3>
<i class="fa fa-angle-down" aria-hidden="true"></i>
</div>
<div id="classListHolder">
{{#each myClasses}}
{{> sidebarClasses}}
{{/each}}
</div>
</div>
<div id="classListHolder">
{{#each myClasses}}
{{> sidebarClasses}}
{{/each}}
</div>
</div>
<div id="exportDiv" class="mode">
@ -75,7 +73,9 @@
</div>
<div id="prefCont">
<div class="prefWrapper">
<h3 class="sectionTitle prefText">Theme:</h3>
<div class="sectionTitle prefText">
<h3>Theme</h3>
</div>
<div id="theme" class="clickModify dropdown" tabindex="1">
<span>{{pref 'theme'}}</span>
<i class="fa fa-angle-down" aria-hidden="true"></i>
@ -83,7 +83,9 @@
{{> selectOptionMenu optionName="theme"}}
</div>
<div class="prefWrapper">
<h3 class="sectionTitle prefText">Default Mode:</h3>
<div class="sectionTitle prefText">
<h3>Default Mode</h3>
</div>
<div id="mode" class="clickModify dropdown" tabindex="2">
<span>{{pref 'mode'}}</span>
<i class="fa fa-angle-down" aria-hidden="true"></i>
@ -91,7 +93,9 @@
{{> selectOptionMenu optionName="mode"}}
</div>
<div class="prefWrapper">
<h3 class="sectionTitle prefText">Hide Homework:</h3>
<div class="sectionTitle prefText">
<h3>Hide Homework</h3>
</div>
<div id="timeHide" class="clickModify dropdown" tabindex="3">
<span>{{pref 'timeHide'}}</span>
<i class="fa fa-angle-down" aria-hidden="true"></i>
@ -99,7 +103,9 @@
{{> selectOptionMenu optionName="timeHide"}}
</div>
<div class="prefWrapper">
<h3 class="sectionTitle prefText">Hide Done:</h3>
<div class="sectionTitle prefText">
<h3>Hide Done</h3>
</div>
<div id="done" class="clickModify dropdown" tabindex="4">
<span>{{pref 'done'}}</span>
<i class="fa fa-angle-down" aria-hidden="true"></i>
@ -107,7 +113,9 @@
{{> selectOptionMenu optionName="done"}}
</div>
<div class="prefWrapper">
<h3 class="sectionTitle prefText">Hide Reported:</h3>
<div class="sectionTitle prefText">
<h3>Hide Reported</h3>
</div>
<div id="hideReport" class="clickModify dropdown" tabindex="5">
<span>{{pref 'hideReport'}}</span>
<i class="fa fa-angle-down" aria-hidden="true"></i>
@ -118,7 +126,9 @@
</template>
<template name="sidebarRequestPlate">
<h3 class="sectionTitle downOffset">Requests</h3>
<div class="sectionTitle downOffset">
<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>
<span id="requestRes" class="resText">{{restrict 'requestArea'}}</span>
@ -136,4 +146,40 @@
{{#each myClasses}}
{{> sidebarClasses}}
{{/each}}
</template>
</template>
<template name="manageClass">
<div id="backgroundOverlay" style="background-color:{{divColor 'secondaryColor'}}">
<div id="colLeft">
<h2>My Classes</h2>
<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>
{{#each myClasses}}
{{> classDisplay}}
{{/each}}
</div>
</div>
<div id="colRight" style="background-color:{{divColor 'sidebarColor'}}">
<h2>Information</h2>
</div>
</div>
</template>
<template name="classDisplay">
<div class="classBox{{box}}" classid="{{_id}}" style="border:1px solid {{divColor 'textColor'}}">
<span class="name classText">{{name}}</span>
<span class="teacher classText">{{teacher}}</span>
<span class="hour classText">{{hour}}</span>
<span class="subscribers classText">{{subscribers}}</span>
{{#if mine}}
<i class="fa fa-times" aria-hidden="true"></i>
{{else}}
<i class="fa fa-times" aria-hidden="true" style="visibility:hidden"></i>
{{/if}}
</div>
</template>

View File

@ -23,7 +23,10 @@ Template.sidebarMenuPlate.helpers({
});
}
return array;
}
},
filterOn() {
return Session.get("classDisp").length !== 0 || Session.get("typeFilter").length !== 0;
},
});
Template.sidebarMenuPlate.events({
@ -62,6 +65,80 @@ Template.sidebarMenuPlate.events({
$("#classListHolder").slideUp(300);
}
filterOpen[2] = !filterOpen[2];
},
// CLASS FILTERS
'click .sideClass' (event) { // Click class list in sidebar.
var div = event.target;
while (div.getAttribute("classid") === null) div = div.parentNode;
var classid = div.getAttribute("classid");
if (Session.equals("sidebarMode","create")) { // If creating work from calendar.
var newSetting = Session.get("currentWork");
newSetting.class = classid;
Session.set("currentWork", newSetting);
openDivFade(document.getElementsByClassName("overlay")[0]);
} else { // Normal clicking turns on filter.
var array = Session.get("classDisp");
if (array.indexOf(classid) !== -1) {
array.splice(array.indexOf(classid), 1);
} else {
array.push(classid);
}
Session.set("classDisp", array);
}
},
'click .sideFilter' (event) {
var div = event.target;
while (div.getAttribute("type") === null) div = div.parentNode;
var type = div.getAttribute("type");
var array = Session.get("typeFilter");
if (array.indexOf(type) !== -1) {
array.splice(array.indexOf(type), 1);
} else {
array.push(type);
}
Session.set("typeFilter", array);
},
'click #disableFilter' () {
Session.set("classDisp", []);
Session.set("typeFilter", []);
},
'mouseover .sideClass' (event) { // Highlight/scale filter on-hover.
var div;
if (event.target.className !== "sideClass") {
div = event.target.parentNode;
} else {
div = event.target;
}
while (div.getAttribute("classid") === null) div = div.parentNode;
var classid = div.getAttribute("classid");
Session.set("classDispHover", classid);
},
'mouseleave .sideClass' (event) { // Turn off highlight/scale filter on-leave.
if (event.target.className !== "sideClass") {
var div = event.target.parentNode;
if (div.contains(event.target)) return;
}
Session.set("classDispHover", null);
},
'mouseover .sideFilter' (event) {
var div;
if (event.target.className !== "sideFilter") {
div = event.target.parentNode;
} else {
div = event.target;
}
while (div.getAttribute("type") === null) div = div.parentNode;
var type = div.getAttribute("type");
Session.set("typeFilterHover", type);
},
'mouseleave .sideFilter' (event) {
if (event.target.className !== "sideFilter") {
var div = event.target.parentNode;
if (div.contains(event.target)) return;
}
Session.set("typeFilterHover", null);
}
});

View File

@ -235,62 +235,6 @@
100% { width: 30%; }
}
#label {
margin-top: 2.5%;
margin-bottom: 2%;
background-color: rgba(0,0,0,0.2);
box-shadow: none;
display: table;
cursor: default;
}
.classHolder {
width: 100%;
max-height: 41vh;
padding: 1%;
padding-right: 100%;
display: inline-block;
overflow-x: hidden;
overflow-y: scroll;
}
.classHolder h3 {
font-style: italic;
font-weight: 200;
margin-left: 1%;
color: #999;
-webkit-filter :none;
filter: none;
}
.classBox {
font-size: 1.3vw;
width: 94%;
margin-bottom: 3%;
padding: 2%;
background-color: #19B3B3;
box-shadow: 2px 2px 5px 3px #666;
display: table;
table-layout: fixed;
cursor: pointer;
-webkit-transition: background-color 0.4s ease;
-moz-transition: background-color 0.4s ease;
-ms-transition: background-color 0.4s ease;
transition: background-color 0.4s ease;
}
.classBox:hover {
background-color: #138686;
}
#joinTop .fa-search {
font-size: 1.3vw;
margin-right: 3%;
@ -315,38 +259,7 @@
background-color: rgba(0,0,0,0.1);
}
.owned {
background-color: #27646D;
-webkit-transition: background-color 0.4s ease;
-moz-transition: background-color 0.4s ease;
-ms-transition: background-color 0.4s ease;
transition: background-color 0.4s ease;
}
.owned:hover {
background-color: #52848B;
}
.classText {
margin-left: .5%;
margin-right: 10%;
display: table-cell;
text-align: left;
}
.classBox .fa-times {
display: table-cell;
width: 5%;
}
.name {
width: 40%;
}
.hour.classText, .subscribers.classText {
text-align: center;
}
#creRules {
margin: 5%;

View File

@ -292,20 +292,6 @@
</div>
</template>
<template name="classDisplay">
<div class="classBox{{box}}" classid="{{_id}}">
<span class="name classText">{{name}}</span>
<span class="teacher classText">{{teacher}}</span>
<span class="hour classText">{{hour}}</span>
<span class="subscribers classText">{{subscribers}}</span>
{{#if mine}}
<i class="fa fa-times" aria-hidden="true"></i>
{{else}}
<i class="fa fa-times" aria-hidden="true" style="visibility:hidden"></i>
{{/if}}
</div>
</template>
<template name="userDisplay">
<div class="userBox" userid="{{_id}}">
<span class="email" onclick="window.location='/user/{{email}}'">{{email}}</span>

View File

@ -1,8 +1,8 @@
themeColors = {
"lux": {
"background": "White.jpg",
"mainColor": "#D9D9D9",
"secondaryColor": "#E8E8E8",
"mainColor": "#EEE",
"secondaryColor": "#D5D5D5",
"sidebarColor": "#65839A",
"userDropdownColor": "#E6E6E6",
"iconHighlight": "#8695CF",
@ -57,9 +57,9 @@ themeColors = {
"atlaneon": {
"background": "NeonBlue.jpg",
"mainColor": "#1D1C23",
"secondaryColor": "#1F212f",
"secondaryColor": "#1F212F",
"sidebarColor": "#312E32",
"userDropdownColor": "#2e312b",
"userDropdownColor": "#2E312B",
"iconHighlight": "#70E6E6",
"modeHighlight": "#70E6E6",
"classCardColor":"#1FAAB1",