outfactor color-schemes

Amsterdam-Music-Lab · Nov 14, 2023 · 20b099a · 20b099a
1 parent 6ad1253
commit 20b099a
Show file tree

Hide file tree

Showing 11 changed files with 110 additions and 72 deletions.
diff --git a/backend/experiment/actions/form.py b/backend/experiment/actions/form.py
@@ -1,7 +1,7 @@
 from django.conf import settings
 from django.utils.translation import gettext_lazy as _
 
-from .styles import STYLE_NEUTRAL, STYLE_BOOLEAN_NEGATIVE_FIRST
+from .styles import STYLE_NEUTRAL, STYLE_BOOLEAN_NEGATIVE_FIRST, STYLE_GRADIENT_7
 from .base_action import BaseAction
 
 class Question(BaseAction):
@@ -68,7 +68,7 @@ def __init__(self, choices=None, **kwargs):
             'yes': _('Yes')
         }
         self.view = 'BUTTON_ARRAY'
-        self.style = STYLE_BOOLEAN_NEGATIVE_FIRST
+        self.style = {STYLE_BOOLEAN_NEGATIVE_FIRST: True, 'buttons-large-gap': True}
 
 class ChoiceQuestion(Question):
     def __init__(self, choices, min_values=1, **kwargs):
@@ -157,15 +157,7 @@ def __init__(self, scale_steps=7, likert_view='ICON_RANGE', **kwargs):
                 6: 'fa-face-frown-open',
                 7: 'fa-face-angry',
             }
-            self.config = {'icons':True, 'colors': ['#d843e2', '#c863e8', '#bb7ae9','#ab86f1', '#8b9bfa', '#42b5ff', '#0CC7F1']}
-        elif scale_steps == 5:
-            self.choices = {
-                1: _("Strongly Disagree"),
-                2: _("Disagree"),
-                3: _("Neither Agree nor Disagree"),  # Undecided
-                4: _("Agree"),
-                5: _("Strongly Agree"),
-            }
+            self.style = STYLE_GRADIENT_7
 
 class Form(BaseAction):
     ''' Form is a view which brings together an array of questions with submit and optional skip button

diff --git a/backend/experiment/actions/styles.py b/backend/experiment/actions/styles.py
@@ -3,4 +3,5 @@
 STYLE_BLUE = 'blue'
 STYLE_PINK = 'pink'
 STYLE_BOOLEAN = 'boolean'
-STYLE_BOOLEAN_NEGATIVE_FIRST = 'boolean-negative-first'
+STYLE_BOOLEAN_NEGATIVE_FIRST = 'boolean-negative-first'
+STYLE_GRADIENT_7 = 'gradient-7'
diff --git a/backend/experiment/actions/wrappers.py b/backend/experiment/actions/wrappers.py
@@ -21,7 +21,7 @@ def two_alternative_forced(session, section, choices, expected_response=None, st
         'BUTTON'
     )
     key = 'choice'
-    button_style = {'invisible-text': True, 'buttons-large-gap': True}
+    button_style = {'invisible-text': True, 'buttons-large-gap': True, 'buttons-large-text': True}
     button_style.update(style)
     question = ChoiceQuestion(
         key=key,

diff --git a/backend/experiment/rules/categorization.py b/backend/experiment/rules/categorization.py
@@ -510,5 +510,5 @@ def get_title(self, session):
     },
     submits=True,
     is_skippable=False,
-    style={'buttons-large-gap': True, 'boolean': True}
+    style={'buttons-large-gap': True, 'buttons-large-text': True, 'boolean': True}
 )
diff --git a/frontend/src/components/Question/Question.js b/frontend/src/components/Question/Question.js
@@ -28,7 +28,6 @@ const Question = ({
     onChange,
     id,
     active,
-    style,
     emphasizeTitle = false,
 }) => {
     const [value, setValue] = useState(question.value || "");
@@ -44,7 +43,7 @@ const Question = ({
             value,
             question,
             active,
-            style,
+            style: question.style,
             emphasizeTitle,
             onChange: registerChange,
         };

diff --git a/frontend/src/components/Question/_ButtonArray.scss b/frontend/src/components/Question/_ButtonArray.scss
@@ -14,7 +14,20 @@
 
     .btn-group-toggle-custom{
         display: flex;
-        column-gap: 20px;
+        column-gap: 3rem;
+
+        &.buttons-large-gap {
+            column-gap: 5rem;
+        }
+
+        &.buttons-large-text {
+            font-size: 1.3rem;
+        }
+
+        .btn {
+            min-width: 4rem;
+        }
+
 
         input{
             display: none;
@@ -26,54 +39,4 @@
             }
         }
     }
-
-    .buttons-large-gap {
-        column-gap: 5rem;
-        font-size: 1.3rem;
-    }
-}
-
-.boolean {
-    .btn-secondary:nth-of-type(1) {
-        @include btn-style($teal);
-    }
-    .btn-secondary:nth-of-type(2) {
-        @include btn-style($yellow);
-    }
-    .btn-secondary:last-of-type {
-        @include btn-style($red);
-    }
 }
-
-.boolean-negative-first {
-    .btn-secondary:nth-of-type(1) {
-        @include btn-style($red);
-    }
-    .btn-secondary:nth-of-type(2) {
-        @include btn-style($yellow);
-    }
-    .btn-secondary:last-of-type {
-        @include btn-style($teal);
-    }
-}
-
-.neutral {
-    .btn:nth-of-type(1) {
-        @include btn-style($blue);
-        &.submit {
-            @include btn-style($pink);
-        }
-    }
-    .btn:nth-of-type(2) {
-        @include btn-style($yellow);
-    }
-}
-
-.neutral-inverted {
-    .btn:nth-of-type(1) {
-        @include btn-style($yellow);
-    }
-    .btn:nth-of-type(2) {
-        @include btn-style($blue);
-    }
-}
diff --git a/frontend/src/components/Question/_IconRange.js b/frontend/src/components/Question/_IconRange.js
@@ -2,11 +2,9 @@ import React from "react";
 import Slider from "react-rangeslider";
 import classNames from "classnames";
 
-import RangeLimits from "./_RangeLimits";
 import RangeTitle from "./_RangeTitle";
-import { renderLabel } from "../../util/label";
 
-const IconRange = ({ question, value, onChange, emphasizeTitle }) => {
+const IconRange = ({ question, value, style, onChange, emphasizeTitle }) => {
     const emptyValue = !value;
 
     const keys = Object.keys(question.choices);
@@ -24,7 +22,7 @@ const IconRange = ({ question, value, onChange, emphasizeTitle }) => {
     }
 
     return (
-        <div className={classNames("aha__text-range", { empty: emptyValue })}>
+        <div className={classNames("aha__text-range", style, { empty: emptyValue })}>
             <RangeTitle
                 emphasizeTitle={emphasizeTitle}
                 question={question}

diff --git a/frontend/src/components/Question/_RangeTitle.js b/frontend/src/components/Question/_RangeTitle.js
@@ -11,7 +11,7 @@ const RangeTitle = ({question, value, sliderValue, emptyValue, changePosition=fa
             { emptyValue ? (
                 renderLabel("fa-arrows-left-right", "fa-2x")
             ) : (
-                <span style={{color: question.config && question.config.colors[sliderValue]}}> {renderLabel(question.choices[value], "fa-2x")}</span>
+                <span className={`is-${value}`}> {renderLabel(question.choices[value], "fa-2x")}</span>
             )
             }
             </h4>

diff --git a/frontend/src/index.scss b/frontend/src/index.scss
@@ -4,6 +4,7 @@
 @import "scss/layout";
 @import "scss/animations";
 @import "scss/elements";
+@import "scss/color-schemes";
 
 @import "scss/fontawesome/include.scss";
 

diff --git a/frontend/src/scss/color-schemes.scss b/frontend/src/scss/color-schemes.scss
@@ -0,0 +1,81 @@
+.boolean {
+    // buttons
+    .btn-secondary {
+        &:first-of-type {
+            @include btn-style($positive);
+        }
+        &:nth-of-type(2) {
+            @include btn-style($yellow);
+        }
+        &:last-of-type {
+            @include btn-style($negative);
+        }
+    }
+}
+
+.boolean-negative-first {
+    // buttons
+    .btn-secondary {
+        &:first-of-type {
+            @include btn-style($negative);
+        }
+        &:nth-of-type(2) {
+            @include btn-style($yellow);
+        }
+        &:last-of-type {
+            @include btn-style($positive);
+        }
+    }
+}
+
+.neutral {
+    // buttons
+    .btn-secondary {
+        &:first-of-type {
+            @include btn-style($yellow);
+        }
+        &:last-of-type {
+            @include btn-style($blue);
+        }
+    }
+}
+
+.neutral-inverted {
+    // buttons
+    .btn-secondary {
+        &:first-of-type {
+            @include btn-style($blue);
+        }
+        &:last-of-type {
+            @include btn-style($yellow);
+        }
+    }
+}
+
+.btn.submit {
+    @include btn-style($primary);
+}
+
+.gradient-7 {
+    .is-1 {
+        color: #d843e2;
+    }
+    .is-2 {
+        color: #c863e8;
+    }
+    .is-3 {
+        color: #bb7ae9;
+    }
+    .is-4 {
+        color: #ab86f1;
+    }
+    .is-5 {
+        color: #8b9bfa;
+    }
+    .is-6 {
+        color: #42b5ff;
+    }
+    .is-7 {
+        color: #0cc7f1;
+    }
+}
diff --git a/frontend/src/scss/variables.scss b/frontend/src/scss/variables.scss
@@ -10,8 +10,11 @@ $indigo: #2b2bee;
 $gray: #bdbebf;
 $gray-900: #212529;
 $black: $gray-900;
+
 $primary: $pink;
 $success: $teal;
+$positive: $teal;
+$negative: $red;
 $secondary: $gray-900;
 $info: $blue;