Add moffit-colors.css

t4c/app.R

@@ -48,6 +48,7 @@ phone_container <- function(...) {
 ui <- fixedPage(
   includeCSS("devices.min.css"),
   includeCSS("t4c.css"),
+  includeCSS("moffitt-colors.css"),
   includeCSS("animate.css"),
   shinyjs::useShinyjs(),
   tags$link(rel = "stylesheet", type = "text/css", href = "https://fonts.googleapis.com/css?family=IBM+Plex+Sans:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i"),
@@ -70,12 +71,12 @@ ui <- fixedPage(
     div(
         id = "app-main",
         class = "app-main animated",
-        h1(APP_TITLE, class = "app-title"),
-        p(HELP_TEXT, class = "help-text"),
+        h1(APP_TITLE, class = "app-title text-white bg-moffitt-blue"),
+        p(HELP_TEXT, class = "help-text text-moffitt-grey"),
         shinyswiprUI(
             "card_swipe_ui",
             div(class = "swiperCard-header",
-                h4(class = "card-title",
+                h4(class = "card-title text-white bg-moffitt-light-blue",
                    textOutput("question_category")
                 )
             ),
@@ -86,7 +87,7 @@ ui <- fixedPage(
             )
         ),
         div(
-            class = "bottom-help",
+            class = "bottom-help text-moffitt-grey",
             div(class = "bottom-help-left", img(src = "/images/swipe-left.svg", width = "50px"), p("Bad")),
             div(class = "bottom-help-right", img(src = "/images/swipe-right.svg", width = "50px"), p("Okay")),
             div(class = "bottom-help-middle", span("Swipe Card", class = "bottom-help-middle-text"))

t4c/moffitt-colors.css

@@ -0,0 +1,59 @@
+.bg-moffitt-blue {
+  background-color: #00589a;
+}
+
+.text-moffitt-blue {
+  color: #00589a;
+}
+
+.bg-moffitt-light-blue {
+  background-color: #58b0e3;
+}
+
+.text-moffitt-light-blue {
+  color: #58b0e3;
+}
+
+.bg-moffitt-green {
+  background-color: #82c878;
+}
+
+.text-moffitt-green {
+  color: #82c878;
+}
+
+.bg-moffit-orange {
+  background-color: #faa555;
+}
+
+.text-moffitt-orange {
+  color: #faa555;
+}
+
+.bg-moffit-grey {
+  background-color: #bec3c3;
+}
+
+.text-moffitt-grey {
+  color: #bec3c3;
+}
+
+.bg-moffit-yellow {
+  background-color: #ffcd5a;
+}
+
+.text-moffitt-yellow {
+  color: #ffcd5a;
+}
+
+.bg-moffit-red {
+  background-color: #eb1455;
+}
+
+.text-moffitt-red {
+  color: #eb1455;
+}
+
+.text-white {
+  color: white;
+}

t4c/t4c.css

@@ -35,8 +35,6 @@
 }
 
 .card-title {
-    color: white;
-    background: #00589a;
     padding: 15px 10px;
     height: 50px;
     margin: 0px;
@@ -45,8 +43,6 @@
 }
 
 .app-title {
-    background: #58b0e3;
-    color: white;
     padding: 10px;
     margin-top: 0;
     font-weight: 200;
@@ -58,7 +54,6 @@
     padding-left: 15px;
     text-align: center;
     padding-top: 30px;
-    color: #bec3c3;
     font-weight: 400;
     font-size: 1.25em;
 }
@@ -74,7 +69,6 @@
   width: 90%;
   text-align: center;
   margin-left: 5%;
-  color: #bec3c3;
   z-index: -100;
 }
 .bottom-help-left {
@@ -109,8 +103,6 @@
 }
 
 .overlay.splash {
-  background: #00589a;
-  color: white;
   vertical-align: middle;
   text-align: center;
   background-image: url("/images/splash-bg.png");