Change the icons on the home page to red (#1170)

lookit · Apr 6, 2023 · c543ddc · c543ddc
1 parent 36ac72e
commit c543ddc
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 5 deletions.
diff --git a/scss/base.scss b/scss/base.scss
@@ -1,9 +1,15 @@
-@import "custom";
 @import "2fa-setup";
 @import "all-json-and-csv-data";
 @import "navigation";
 @import "study-fields";
 @import "study-responses";
 @import "superuser";
-// This import should always be last.
+
+// Add imports to adjust default colors and theme maps
+@import "bootstrap-5.2.0/scss/functions";
+@import "custom-variables";
+@import "bootstrap-5.2.0/scss/variables";
+@import "custom-maps";
+
+// Add all bootstrap features
 @import "bootstrap-5.2.0/scss/bootstrap";
diff --git a/scss/custom-maps.scss b/scss/custom-maps.scss
@@ -0,0 +1,7 @@
+// Add custom color name
+$custom-colors: (
+    "red": $red
+);
+
+// Merge the maps
+$theme-colors: map-merge($theme-colors, $custom-colors);
diff --git a/scss/custom.scss → scss/custom-variables.scss b/scss/custom.scss → scss/custom-variables.scss
@@ -1,5 +1,7 @@
+// Colors
 $blue: #147899;
 $yellow: #f3c90f;
 $red: #ff5f5c;
 
+// Font
 $font-family-sans-serif: "Noto Sans", sans-serif;
diff --git a/web/static/custom_bootstrap5.css b/web/static/custom_bootstrap5.css
@@ -68,6 +68,7 @@ body.superuser {
   --bs-danger: #ff5f5c;
   --bs-light: #f8f9fa;
   --bs-dark: #212529;
+  --bs-red: #ff5f5c;
   --bs-primary-rgb: 20, 120, 153;
   --bs-secondary-rgb: 108, 117, 125;
   --bs-success-rgb: 25, 135, 84;
@@ -76,6 +77,7 @@ body.superuser {
   --bs-danger-rgb: 255, 95, 92;
   --bs-light-rgb: 248, 249, 250;
   --bs-dark-rgb: 33, 37, 41;
+  --bs-red-rgb: 255, 95, 92;
   --bs-white-rgb: 255, 255, 255;
   --bs-black-rgb: 0, 0, 0;
   --bs-body-color-rgb: 33, 37, 41;
@@ -2368,6 +2370,22 @@ textarea.form-control-lg {
   --bs-btn-disabled-bg: #212529;
   --bs-btn-disabled-border-color: #212529; }
 
+.btn-red {
+  --bs-btn-color: #000;
+  --bs-btn-bg: #ff5f5c;
+  --bs-btn-border-color: #ff5f5c;
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: #ff7774;
+  --bs-btn-hover-border-color: #ff6f6c;
+  --bs-btn-focus-shadow-rgb: 217, 81, 78;
+  --bs-btn-active-color: #000;
+  --bs-btn-active-bg: #ff7f7d;
+  --bs-btn-active-border-color: #ff6f6c;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: #000;
+  --bs-btn-disabled-bg: #ff5f5c;
+  --bs-btn-disabled-border-color: #ff5f5c; }
+
 .btn-outline-primary {
   --bs-btn-color: #147899;
   --bs-btn-border-color: #147899;
@@ -2496,6 +2514,22 @@ textarea.form-control-lg {
   --bs-btn-disabled-border-color: #212529;
   --bs-gradient: none; }
 
+.btn-outline-red {
+  --bs-btn-color: #ff5f5c;
+  --bs-btn-border-color: #ff5f5c;
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: #ff5f5c;
+  --bs-btn-hover-border-color: #ff5f5c;
+  --bs-btn-focus-shadow-rgb: 255, 95, 92;
+  --bs-btn-active-color: #000;
+  --bs-btn-active-bg: #ff5f5c;
+  --bs-btn-active-border-color: #ff5f5c;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: #ff5f5c;
+  --bs-btn-disabled-bg: transparent;
+  --bs-btn-disabled-border-color: #ff5f5c;
+  --bs-gradient: none; }
+
 .btn-link {
   --bs-btn-font-weight: 400;
   --bs-btn-color: var(--bs-link-color);
@@ -3833,6 +3867,13 @@ textarea.form-control-lg {
   .alert-dark .alert-link {
     color: #101214; }
 
+.alert-red {
+  --bs-alert-color: #993937;
+  --bs-alert-bg: #ffdfde;
+  --bs-alert-border-color: #ffcfce; }
+  .alert-red .alert-link {
+    color: #7a2e2c; }
+
 @keyframes progress-bar-stripes {
   0% {
     background-position-x: 1rem; } }
@@ -4150,6 +4191,17 @@ textarea.form-control-lg {
     background-color: #141619;
     border-color: #141619; }
 
+.list-group-item-red {
+  color: #993937;
+  background-color: #ffdfde; }
+  .list-group-item-red.list-group-item-action:hover, .list-group-item-red.list-group-item-action:focus {
+    color: #993937;
+    background-color: #e6c9c8; }
+  .list-group-item-red.list-group-item-action.active {
+    color: #fff;
+    background-color: #993937;
+    border-color: #993937; }
+
 .btn-close {
   box-sizing: content-box;
   width: 1em;
@@ -5412,6 +5464,10 @@ textarea.form-control-lg {
   color: #fff !important;
   background-color: RGBA(33, 37, 41, var(--bs-bg-opacity, 1)) !important; }
 
+.text-bg-red {
+  color: #000 !important;
+  background-color: RGBA(255, 95, 92, var(--bs-bg-opacity, 1)) !important; }
+
 .link-primary {
   color: #147899 !important; }
   .link-primary:hover, .link-primary:focus {
@@ -5452,6 +5508,11 @@ textarea.form-control-lg {
   .link-dark:hover, .link-dark:focus {
     color: #1a1e21 !important; }
 
+.link-red {
+  color: #ff5f5c !important; }
+  .link-red:hover, .link-red:focus {
+    color: #ff7f7d !important; }
+
 .ratio {
   position: relative;
   width: 100%; }
@@ -5816,6 +5877,10 @@ textarea.form-control-lg {
   --bs-border-opacity: 1;
   border-color: rgba(var(--bs-dark-rgb), var(--bs-border-opacity)) !important; }
 
+.border-red {
+  --bs-border-opacity: 1;
+  border-color: rgba(var(--bs-red-rgb), var(--bs-border-opacity)) !important; }
+
 .border-white {
   --bs-border-opacity: 1;
   border-color: rgba(var(--bs-white-rgb), var(--bs-border-opacity)) !important; }
@@ -6472,6 +6537,10 @@ textarea.form-control-lg {
   --bs-text-opacity: 1;
   color: rgba(var(--bs-dark-rgb), var(--bs-text-opacity)) !important; }
 
+.text-red {
+  --bs-text-opacity: 1;
+  color: rgba(var(--bs-red-rgb), var(--bs-text-opacity)) !important; }
+
 .text-black {
   --bs-text-opacity: 1;
   color: rgba(var(--bs-black-rgb), var(--bs-text-opacity)) !important; }
@@ -6544,6 +6613,10 @@ textarea.form-control-lg {
   --bs-bg-opacity: 1;
   background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important; }
 
+.bg-red {
+  --bs-bg-opacity: 1;
+  background-color: rgba(var(--bs-red-rgb), var(--bs-bg-opacity)) !important; }
+
 .bg-black {
   --bs-bg-opacity: 1;
   background-color: rgba(var(--bs-black-rgb), var(--bs-bg-opacity)) !important; }

diff --git a/web/templates/web/home.html b/web/templates/web/home.html
@@ -21,21 +21,21 @@ <h5 class="d-none d-md-block">{% trans "Fun for Families, Serious for Science" %
     </div>
     <div class="row">
         <div class="col-4">
-            <div class="text-center m-5">{% bs_icon "clipboard-data-fill" size='3.5em' %}</div>
+            <div class="text-center m-5 text-red">{% bs_icon "clipboard-data-fill" size='3.5em' %}</div>
             <h3 class="text-center">{% trans "Help Science" %}</h3>
             <p class="m-4">
                 {% trans "This website has studies you and your child can participate in from your home, brought to you by researchers from universities around the world!" %}
             </p>
         </div>
         <div class="col-4">
-            <div class="text-center m-5">{% bs_icon "cup-hot-fill" size='3.5em' %}</div>
+            <div class="text-center m-5 text-red">{% bs_icon "cup-hot-fill" size='3.5em' %}</div>
             <h3 class="text-center">{% trans "From Home" %}</h3>
             <p class="m-4">
                 {% trans "You and your child use your computer to participate. Some studies can also be done on a tablet or phone." %}
             </p>
         </div>
         <div class="col-4">
-            <div class="text-center m-5">{% bs_icon "balloon-heart-fill" size='3.5em' %}</div>
+            <div class="text-center m-5 text-red">{% bs_icon "balloon-heart-fill" size='3.5em' %}</div>
             <h3 class="text-center">{% trans "With Fun Activities" %}</h3>
             <p class="m-4">
                 {% trans "Many studies are either short games, or listening to a story and answering questions about it. Some are available at any time, and others are a scheduled video chat with a researcher." %}