Merge pull request #1 from Qualli-Research-Platform/surveyThemes

Themes
Qualli-Research-Platform · Oct 25, 2023 · b7c5ef6 · b7c5ef6
2 parents 4324477 + 5dcc650
commit b7c5ef6
Show file tree

Hide file tree

Showing 16 changed files with 176 additions and 215 deletions.
diff --git a/src/assets/icons/check.png b/src/assets/icons/check.png
diff --git a/src/assets/icons/[email protected] b/src/assets/icons/[email protected]
diff --git a/src/assets/icons/[email protected] b/src/assets/icons/[email protected]
diff --git a/src/helpers/getContrastingColorForRGB.ts b/src/helpers/getContrastingColorForRGB.ts
@@ -0,0 +1,10 @@
+export default function getContrastingColorForRGB(mainColor: {
+    r: number;
+    g: number;
+    b: number;
+}) {
+    // Assuming mainColor is an object with r, g, and b properties
+    const brightness =
+        0.299 * mainColor.r + 0.587 * mainColor.g + 0.114 * mainColor.b;
+    return brightness > 128 ? 'black' : 'white';
+}
diff --git a/src/helpers/hexToRGB.ts b/src/helpers/hexToRGB.ts
@@ -0,0 +1,16 @@
+export default function hexToRgb(hex: string): {
+    r: number;
+    g: number;
+    b: number;
+} {
+    // Remove the hash at the start if it's there
+    hex = hex.replace(/^#/, '');
+
+    // Parse r, g, b values
+    let bigint = parseInt(hex, 16);
+    let r = (bigint >> 16) & 255;
+    let g = (bigint >> 8) & 255;
+    let b = bigint & 255;
+
+    return { r, g, b };
+}
diff --git a/src/survey/base/heading/heading.tsx b/src/survey/base/heading/heading.tsx
@@ -2,14 +2,12 @@ import React from 'react';
 import { TouchableOpacity, Image, StyleSheet, View } from 'react-native';
 
 interface Props {
-    colorScheme: 'light' | 'dark';
+    color: string;
     onClose: () => void;
 }
 
-import mainStyles from '../../survey.style';
-
 const SurveyHeading = (props: Props) => {
-    const { colorScheme, onClose } = props;
+    const { color, onClose } = props;
 
     return (
         <View style={styles.container}>
@@ -22,11 +20,7 @@ const SurveyHeading = (props: Props) => {
             >
                 <Image
                     source={require('./../../../assets/icons/cross.png')}
-                    tintColor={
-                        colorScheme === 'dark'
-                            ? mainStyles.colors.darkColor
-                            : mainStyles.colors.lightColor
-                    }
+                    tintColor={color}
                 />
             </TouchableOpacity>
         </View>

diff --git a/src/survey/base/panel/panel.tsx b/src/survey/base/panel/panel.tsx
@@ -78,7 +78,7 @@ const styles = StyleSheet.create({
         borderTopLeftRadius: 20,
         borderTopRightRadius: 20,
 
-        paddingBottom: 40,
+        // paddingBottom: 20,
 
         // iOS shadow properties
         shadowColor: '#000',

diff --git a/src/survey/base/slide/slide.tsx b/src/survey/base/slide/slide.tsx
@@ -17,6 +17,7 @@ import {
     type NPSSlide,
     SlideType,
     TextSlide,
+    SurveyTheme,
 } from './../../../types';
 import styles from '../../survey.style';
 
@@ -34,22 +35,16 @@ interface Props {
         | NumericSlide
         | NPSSlide
         | TextSlide;
-    colorScheme: 'light' | 'dark';
+    theme: SurveyTheme;
     onHeightLayout: (height: number) => void;
     onAnswerChange: (answer: any) => void;
     onPrevious?: () => void;
     onNext?: () => void;
 }
 
 const SurveySlide = (props: Props) => {
-    const {
-        slide,
-        colorScheme,
-        onHeightLayout,
-        onAnswerChange,
-        onPrevious,
-        onNext,
-    } = props;
+    const { slide, theme, onHeightLayout, onAnswerChange, onPrevious, onNext } =
+        props;
 
     const [contentHeight, setContentHeight] = useState(0);
 
@@ -77,7 +72,7 @@ const SurveySlide = (props: Props) => {
             case 'input':
                 return (
                     <SurveySlideInput
-                        colorScheme={colorScheme}
+                        theme={theme}
                         placeholder={slide?.placeholder}
                         onChange={(val: string) => onAnswerChange(val)}
                         multiline={!!slide?.multiline}
@@ -86,7 +81,7 @@ const SurveySlide = (props: Props) => {
             case 'multiplechoice':
                 return (
                     <SurveySlideSelect
-                        colorScheme={colorScheme}
+                        theme={theme}
                         options={slide.options}
                         multiple={!!slide.multiple}
                         onChange={(val: any[]) => onAnswerChange(val)}
@@ -95,14 +90,14 @@ const SurveySlide = (props: Props) => {
             case 'star':
                 return (
                     <SurveySlideStar
-                        colorScheme={colorScheme}
+                        theme={theme}
                         onChange={(val: number) => onAnswerChange(val)}
                     />
                 );
             case 'numeric':
                 return (
                     <SurveySlideNumeric
-                        colorScheme={colorScheme}
+                        theme={theme}
                         min={slide?.min || 0}
                         max={slide?.max || 5}
                         onChange={(val: number) => onAnswerChange(val)}
@@ -111,7 +106,7 @@ const SurveySlide = (props: Props) => {
             case 'nps':
                 return (
                     <SurveySlideNumeric
-                        colorScheme={colorScheme}
+                        theme={theme}
                         min={0}
                         max={10}
                         onChange={(val: number) => onAnswerChange(val)}
@@ -123,12 +118,12 @@ const SurveySlide = (props: Props) => {
     const _showCTA = onNext || onPrevious;
 
     return (
-        <View onLayout={handleLayout}>
+        <View onLayout={handleLayout} style={{ paddingBottom: 20 }}>
             <View style={styles.base.headerContainer}>
                 <Text
                     style={[
-                        styles.base.title,
-                        colorScheme === 'dark' && styles.base.titleDark,
+                        styles.base.title as TextStyle,
+                        { color: theme.title_color },
                         type === SlideType.text &&
                             (styles.base.titleCentered as TextStyle),
                     ]}
@@ -140,7 +135,7 @@ const SurveySlide = (props: Props) => {
                     <Text
                         style={[
                             styles.base.subtitle,
-                            colorScheme === 'dark' && styles.base.subtitleDark,
+                            { color: theme.subtitle_color },
                             type === SlideType.text &&
                                 (styles.base.subtitleCentered as TextStyle),
                         ]}
@@ -159,7 +154,8 @@ const SurveySlide = (props: Props) => {
                     <Button
                         onClick={onNext}
                         disabled={false}
-                        colorScheme={colorScheme}
+                        bgColor={theme.button_color}
+                        textColor={theme.button_text_color}
                         cta={slide.button_label || 'Next'}
                     />
                 </View>
@@ -170,11 +166,7 @@ const SurveySlide = (props: Props) => {
                     {onPrevious ? (
                         <TouchableOpacity onPress={onPrevious}>
                             <Image
-                                style={[
-                                    styles.slide.prevArrow,
-                                    colorScheme === 'dark' &&
-                                        styles.slide.prevArrowDark,
-                                ]}
+                                style={[{ tintColor: theme.title_color }]}
                                 source={require('./../../../assets/icons/arrow-left.png')}
                             />
                         </TouchableOpacity>
@@ -186,7 +178,8 @@ const SurveySlide = (props: Props) => {
                         <Button
                             onClick={onNext}
                             disabled={false}
-                            colorScheme={colorScheme}
+                            bgColor={theme.button_color}
+                            textColor={theme.button_text_color}
                             cta={slide.button_label || 'Next'}
                         />
                     )}

diff --git a/src/survey/components/button/button.tsx b/src/survey/components/button/button.tsx
@@ -1,30 +1,32 @@
 import React from 'react';
-import { TouchableOpacity, Text } from 'react-native';
+import { TouchableOpacity, Text, TextStyle } from 'react-native';
 import styles from '../../survey.style';
 
 interface Props {
     cta: string;
     onClick: () => void;
-    colorScheme: 'light' | 'dark';
+    bgColor: string;
+    textColor: string;
     underline?: boolean;
     disabled: boolean;
     style?: any;
 }
 
 const Button = (props: Props) => {
-    const { cta, onClick, colorScheme, underline, disabled, style } = props;
+    const { cta, onClick, bgColor, textColor, underline, disabled, style } =
+        props;
 
     let buttonStyles = [
         styles.base.button.full,
-        colorScheme === 'dark' ? styles.base.button.fullDark : null,
         disabled ? styles.base.button.disabled : null,
+        { backgroundColor: bgColor },
         style,
     ];
 
     const labelStyles = [
         styles.base.button.label,
-        colorScheme === 'light' ? styles.base.button.labelDark : null,
         underline ? styles.base.button.labelUnderline : null,
+        { color: textColor },
     ];
 
     if (underline) {
@@ -33,10 +35,6 @@ const Button = (props: Props) => {
             disabled ? styles.base.button.disabled : null,
             style,
         ];
-
-        if (colorScheme === 'dark') {
-            labelStyles.push(styles.base.button.labelUnderlineDark);
-        }
     }
 
     return (
@@ -46,7 +44,7 @@ const Button = (props: Props) => {
             disabled={disabled}
             hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }}
         >
-            <Text style={labelStyles}>{cta}</Text>
+            <Text style={labelStyles as TextStyle}>{cta}</Text>
         </TouchableOpacity>
     );
 };

diff --git a/src/survey/components/input/inputs.tsx b/src/survey/components/input/inputs.tsx
@@ -1,16 +1,19 @@
 import React, { useEffect, useState } from 'react';
 import { TextInput } from 'react-native';
+import { SurveyTheme } from './../../../types';
 import styles from '../../survey.style';
 
 interface Props {
     placeholder: string;
     onChange: (val: string) => void;
     multiline: boolean;
-    colorScheme: 'light' | 'dark';
+    theme: SurveyTheme;
 }
 
 const SurveySlideInput = (props: Props) => {
-    const { onChange, placeholder, multiline, colorScheme } = props;
+    const { onChange, placeholder, multiline, theme } = props;
+    const { answer_color } = theme;
+
     const [value, setValue] = useState('');
 
     useEffect(() => {
@@ -27,14 +30,14 @@ const SurveySlideInput = (props: Props) => {
             style={[
                 styles.form.input.input,
                 multiline && styles.form.input.inputMultiline,
-                colorScheme === 'dark' ? styles.form.input.inputDark : null,
+                {
+                    color: answer_color,
+                    borderColor: answer_color,
+                    backgroundColor: answer_color + '10',
+                },
             ]}
             multiline={multiline}
-            placeholderTextColor={
-                colorScheme === 'dark'
-                    ? styles.form.input.placeholderDark
-                    : styles.form.input.placeholder
-            }
+            placeholderTextColor={answer_color}
         />
     );
 };

diff --git a/src/survey/components/numeric/numeric.tsx b/src/survey/components/numeric/numeric.tsx
@@ -1,16 +1,25 @@
 import React, { useState } from 'react';
-import { TouchableOpacity, Text, View, ViewStyle } from 'react-native';
+import {
+    TouchableOpacity,
+    Text,
+    View,
+    ViewStyle,
+    TextStyle,
+} from 'react-native';
+import { SurveyTheme } from './../../../types';
+import getContrastingColorForRGB from './../../..//helpers/getContrastingColorForRGB';
+import hexToRgb from './../../../helpers/hexToRGB';
 import styles from '../../survey.style';
 
 interface Props {
     min: number;
     max: number;
     onChange: (val: number) => void;
-    colorScheme: 'light' | 'dark';
+    theme: SurveyTheme;
 }
 
 const SurveySlideNumeric = (props: Props) => {
-    const { onChange, colorScheme, min, max } = props;
+    const { onChange, theme, min, max } = props;
 
     const [value, setValue] = useState<number | null>(null);
 
@@ -19,23 +28,21 @@ const SurveySlideNumeric = (props: Props) => {
 
         const buttonStyles = [
             styles.form.numeric.button,
-            colorScheme === 'dark' ? styles.form.numeric.buttonDark : null,
-            colorScheme === 'dark' ? styles.form.numeric.buttonNPS : null,
-            isSelected
-                ? colorScheme === 'dark'
-                    ? styles.form.numeric.buttonSelectedDark
-                    : styles.form.numeric.buttonSelected
-                : null,
+            {
+                borderColor: theme.answer_color,
+                backgroundColor: isSelected
+                    ? theme.answer_color
+                    : theme.answer_color + '10',
+            },
         ];
 
         const labelStyles = [
             styles.form.numeric.label,
-            colorScheme === 'dark' ? styles.form.numeric.labelDark : null,
-            isSelected
-                ? colorScheme === 'dark'
-                    ? styles.form.numeric.labelSelectedDark
-                    : styles.form.numeric.labelSelected
-                : null,
+            {
+                color: isSelected
+                    ? getContrastingColorForRGB(hexToRgb(theme.answer_color))
+                    : theme.answer_color,
+            },
         ];
 
         return (
@@ -45,9 +52,9 @@ const SurveySlideNumeric = (props: Props) => {
                     setValue(option);
                     onChange(option);
                 }}
-                style={buttonStyles}
+                style={buttonStyles as ViewStyle}
             >
-                <Text style={labelStyles}>{option}</Text>
+                <Text style={labelStyles as TextStyle}>{option}</Text>
             </TouchableOpacity>
         );
     };