be-components 4.2.0 → 4.2.2

package/src/Poll/components/CampaignResult.tsx

@@ -1,10 +1,9 @@
-import { TouchableOpacity, View } from "react-native"
 import React, { useState } from "react"
 import type { PollCampaignProps } from "../../types"
-import { Icons, Text } from "../../Components"
-import Colors from '../../constants/colors';
-import { view_styles } from "../../constants/styles"
+import { Icons } from "../../Components"
 import CampaignLeaderboard from "./CampaignLeaderboard"
+import { Button, Text, View } from "../../Components/Themed"
+import { useColors } from "../../constants/useColors"
 
 type CampaignResultProps = {
     poll_campaign:PollCampaignProps,
@@ -13,19 +12,20 @@ type CampaignResultProps = {
 
 const CampaignResult = ({ poll_campaign, onShowFullLeaderboard } : CampaignResultProps) => {
     const [ expanded, setExpanded ] = useState(false);
+    const Colors = useColors();
 
     return (
-        <View style={{ flex:1, ...view_styles.section }}>
-            <TouchableOpacity style={{ ...view_styles.section_header }} onPress={() => setExpanded(!expanded)}>
-                <Icons.PodiumIcon size={18} color={Colors.brand.midnight} />
-                <View style={{flex:1, marginLeft:10}}>
-                    <Text theme="header">Leaderboard</Text>
-                    <Text style={{ marginTop:3 }} theme="body">Below are the leaderboard results!</Text>
+        <View float style={{ flex:1 }}>
+            <Button style={{ flexDirection:'row', alignItems:'center', padding:20, backgroundColor:Colors.views.header }} onPress={() => setExpanded(!expanded)}>
+                <Icons.PodiumIcon size={18} color={Colors.text.h1} />
+                <View transparent style={{flex:1, marginLeft:10}}>
+                    <Text theme="h1">Leaderboard</Text>
+                    <Text style={{ marginTop:3 }} theme="description">Below are the leaderboard results!</Text>
                 </View>
-                <Icons.ChevronIcon size={8} color={Colors.brand.midnight} direction={expanded ? 'up' : 'down'} />
-            </TouchableOpacity>
+                <Icons.ChevronIcon size={8} color={Colors.text.h1} direction={expanded ? 'up' : 'down'} />
+            </Button>
             {expanded ?
-            <View style={{ ...view_styles.section_body, padding:0, backgroundColor:Colors.shades.shade100 }}>
+            <View style={{ padding:0 }}>
                 <CampaignLeaderboard
                     view_mode="short"
                     poll_campaign={poll_campaign}

package/src/Poll/components/PollCard.tsx

@@ -1,17 +1,18 @@
-import { FlatList, Image, ScrollView, TouchableOpacity, View } from 'react-native';
+import { ActivityIndicator, FlatList, Image } from 'react-native';
 import React, { useEffect, useState } from 'react';
 import PollOptionCard from './PollOptionCard';
 import ResponseTimer from './ResponseTimer';
 import type { PollOptionProps, PollProps, PollResponseProps, PollSummaryProps } from '../../types';
 import { PollApi } from '../api';
-import { Button, Icons, Text } from '../../Components';
-import Colors from '../../constants/colors';
-import { view_styles } from '../../constants/styles';
+import { Icons } from '../../Components';
+import { useColors } from '../../constants/useColors';
+import { Button, Text, View } from '../../Components/Themed';
 
 type PollCardProps = {
-    poll_id:string,
+    poll_id?:string,
     poll_response?:PollResponseProps,
     action_loading?:boolean,
+    width:number,
     question_number?:number,
     view?:string,
     total_questions?:number,
@@ -20,9 +21,9 @@ type PollCardProps = {
     onCancel:() => void,
     onSkip: () => void
 }
-
-const PollCard = ({ poll_id, poll_response, action_loading, onSkip, onCancel, onResponse }: PollCardProps) => {
-    const [ poll_width, setPollWidth ] = useState(0);
+const sections = ['question','image','options','selected_option', 'correct_select', 'public_results']
+const PollCard = ({ poll_id, width, poll_response, action_loading, onSkip, onCancel, onResponse }: PollCardProps) => {
+    const Colors = useColors();
     const [ poll_data, setPollData ] = useState<{
         poll?:PollProps,
         loading:boolean,
@@ -38,6 +39,7 @@ const PollCard = ({ poll_id, poll_response, action_loading, onSkip, onCancel, on
     const correct_option = poll_options.find(o => o.result_ind == 'win');
     const responses = poll_summaries.reduce((a,b) => a + b.count, 0)
     useEffect(() => {
+        if(!poll_id){ return }
         getPollFromServer(poll_id)
     },[poll_id])
     
@@ -144,111 +146,127 @@ const PollCard = ({ poll_id, poll_response, action_loading, onSkip, onCancel, on
         )
     }
 
-    if(!poll){ return <></> }
-    
-    return (
-        <View nativeID='poll' style={{ ...view_styles.section, minHeight:500 }} onLayout={(ev) => {
-            const { width } = ev.nativeEvent.layout
-            setPollWidth(width)
-        }}>
-            <View style={{ ...view_styles.section_header, backgroundColor:Colors.shades.shade100 }}>
-                <View style={{ flex:1 }}>
-                    <Text theme='header_2'>Question {poll.priority}</Text>
-                    <Text style={{ marginTop:5 }} theme='header'>{poll.poll_question}</Text>
-                </View>
-            </View>
-            <ScrollView style={{ flex:1 }}>
-                <View nativeID='question_image'>
-                    {poll?.poll_image?.url ?
-                    <Image
-                        source={{ uri:poll.poll_image.url, width:poll_width, height: poll_width*0.5 }}
-                        resizeMode='contain'
-                    />
-                    :<></>}
-                </View>
-
-            { poll.status == 'active' && !poll_response ?
-            <View nativeID='question_respond_options'>
-                <FlatList
-                    data={poll_options.sort((a,b) => a.priority - b.priority)}
-                    renderItem={renderPollOptions}
-                    numColumns={2}
-                    keyExtractor={(item) => item.poll_option_id.toString()}
-                />
-            </View>
-            :
-            <View nativeID='question_answer' style={{ flex:1 }}>
-                {selected_option ?
-                <View nativeID='selected_option' style={{ marginBottom:10, padding:10 }}>
-                    <Text style={{ marginBottom:5 }} size={14} color={Colors.brand.slate} weight='semibold'>MY SELECTED ANSWER</Text>
-                    <PollOptionCard
-                        show_result={true}
-                        show_summary={false}
-                        poll_response={poll_response}
-                        onSelect={() => console.log('Hey')}
-                        poll_option={selected_option}
-                    />
-                </View>
-                : (!poll_response || poll_response?.timed_out) ?
-                <View style={{ marginBottom:10, padding:10 }}>
-                    <Text style={{ marginBottom:5 }} size={14} color={Colors.brand.slate} weight='semibold'>MY SELECTED ANSWER</Text>
-                    <View style={{ flexDirection:'row', alignItems:'center', padding:10, borderRadius:22, borderWidth:1, borderColor:Colors.utility.error }}>
-                        <Text style={{ flex:1 }} size={14} color={Colors.utility.error} textAlign='center' weight='semibold'>Timed Out</Text>
-                        <Icons.CloseIcon color={Colors.utility.error} size={12}/>
+    const renderSections = (data:{ item:string, index:number }) => {
+        switch(data.item){
+            case 'question':
+                if(!poll){ return <></> }
+                return (
+                    <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:15, borderTopRightRadius:22, borderTopLeftRadius:22 }}>
+                        <View transparent style={{ flex:1 }}>
+                            <Text theme='h2'>Question {poll.priority}</Text>
+                            <Text style={{ marginTop:5 }} theme='h1'>{poll.poll_question}</Text>
+                        </View>
                     </View>
-                </View>
-                :<></>}
-                {poll.poll_type == 'select' && correct_option ? 
-                <View nativeID='selected_option' style={{ marginBottom:10, padding:10 }}>
-                    <Text style={{ marginBottom:5 }} size={14} color={Colors.brand.slate} weight='semibold'>CORRECT ANSWER</Text>
-                    <PollOptionCard
-                        show_summary={true}
-                        show_result={true}
-                        onSelect={() => console.log('')}
-                        poll_option={correct_option}
-                    />
-                </View>
-                :poll.poll_type == 'input' && poll.winning_value ?
-                <View style={{ marginBottom:10, padding:10 }}>
-                    <Text style={{ marginBottom:5 }} size={14} color={Colors.brand.slate} weight='semibold'>CORRECT ANSWER</Text>
-                    <View style={{ flexDirection:'row', alignItems:'center', padding:10, borderRadius:22, borderWidth:1, borderColor:Colors.utility.success }}>
-                        <Text style={{ flex:1 }} size={14} color={Colors.utility.success} textAlign='center' weight='semibold'>{poll.winning_value}</Text>
-                        <Icons.CheckIcon color={Colors.utility.success} size={12}/>
+                )
+            case 'image':
+                if(!poll?.poll_image?.url){ return <></> }
+                return (
+                    <View nativeID='question_image'>
+                        <Image
+                            source={{ uri:poll.poll_image.url }}
+                            style={{ width:width - 20, height:width/2}}
+                            resizeMode='cover'
+                        />
                     </View>
-                </View>
-                :<></>}
-                {poll.poll_type == 'select' ?
-                <View nativeID='option_results' style={{ backgroundColor:Colors.shades.shade100, padding:10, borderRadius:8 }}>
-                    <View style={{ flexDirection:'row', alignItems:'center', marginBottom:5 }}>
-                        <Text style={{ flex:1 }} size={14} color={Colors.brand.slate} weight='semibold'>PUBLIC RESULTS</Text>
-                        <View style={{ borderRadius:22, padding:10, backgroundColor:Colors.accents.accent100 }}>
-                            <Text size={14} color={Colors.brand.midnight} weight='regular'>{responses} Responses</Text>
+                )
+            case 'options':
+                if(!poll || poll.status != 'active' || poll_response){ return <></> }
+                return (
+                    <View nativeID='question_respond_options' style={{ padding:12, maxHeight:550 }}>
+                        <FlatList
+                            data={poll_options.sort((a,b) => a.priority - b.priority)}
+                            renderItem={renderPollOptions}
+                            numColumns={2}
+                            keyExtractor={(item) => item.poll_option_id.toString()}
+                        />
+                    </View>
+                )
+            case 'selected_option':
+                if(!selected_option || !poll_response){ return <></> }
+                return (
+                    <View nativeID='selected_option' style={{ marginBottom:10, padding:10 }}>
+                        <Text style={{ marginBottom:5 }} size={14} theme='description'>MY SELECTED ANSWER</Text>
+                        <PollOptionCard
+                            show_result={true}
+                            show_summary={false}
+                            poll_response={poll_response}
+                            onSelect={() => console.log('Hey')}
+                            poll_option={selected_option}
+                        />
+                    </View>
+                )
+            case 'correct_select':
+                if(!poll || poll.poll_type != 'select' || !correct_option){ return <></> }
+                return (
+                    <View nativeID='selected_option' style={{ marginBottom:10, padding:10 }}>
+                        <Text style={{ marginBottom:5 }} size={14} theme='description' weight='semibold'>CORRECT ANSWER</Text>
+                        <PollOptionCard
+                            show_summary={true}
+                            show_result={true}
+                            onSelect={() => console.log('')}
+                            poll_option={correct_option}
+                        />
+                    </View>
+                )
+            case 'correct_input':
+                if(!poll || poll.poll_type != 'input' || !poll.winning_value){ return <></> }
+                return (
+                    <View style={{ marginBottom:10, padding:10 }}>
+                        <Text style={{ marginBottom:5 }} size={14} theme='description' weight='semibold'>CORRECT ANSWER</Text>
+                        <View style={{ flexDirection:'row', alignItems:'center', padding:10, borderRadius:22, borderWidth:1, borderColor:Colors.text.success }}>
+                            <Text style={{ flex:1 }} size={14} color={Colors.text.success} textAlign='center' weight='semibold'>{poll.winning_value}</Text>
+                            <Icons.CheckIcon color={Colors.text.success} size={12}/>
                         </View>
                     </View>
-                    {!poll.show_responses ?
-                    <Text style={{ marginBottom:5 }} color={Colors.utility.warning} size={12} >Responses are hidden until closed</Text>
-                    :<></>}
-                    <FlatList
-                        data={poll_options}
-                        renderItem={renderPollOptions}
-                        keyExtractor={(item) => item.poll_option_id.toString()}
-                    />
-                </View>
+                )
+            case 'public_results':
+                if(!poll || poll.poll_type != 'select' || !poll_response){ return <></> }
+                if(!poll.show_responses){ return <></> }
+                return (
+                    <View nativeID='option_results' style={{ padding:10, borderRadius:8 }}>
+                        <View style={{ flexDirection:'row', alignItems:'center', marginBottom:5 }}>
+                            <Text style={{ flex:1 }} size={14} theme='description' weight='semibold'>PUBLIC RESULTS</Text>
+                            <View style={{ borderRadius:22, padding:10 }}>
+                                <Text size={14} theme='description'>{responses} Responses</Text>
+                            </View>
+                        </View>
+                        {!poll.show_responses ?
+                        <Text style={{ marginBottom:5 }} color={Colors.text.warning} size={12} >Responses are hidden until closed</Text>
+                        :<></>}
+                        <FlatList
+                            data={poll_options}
+                            renderItem={renderPollOptions}
+                            keyExtractor={(item) => item.poll_option_id.toString()}
+                        />
+                    </View>
+                )
+            default:return <></>
+        }
+    }
+    
+    return (
+        <View float nativeID='poll' style={{ borderRadius:22 }}>
+            <View transparent style={{ flex:1 }}>
+                {loading || !poll ?
+                <ActivityIndicator style={{ padding:20, alignSelf:'center' }} color={Colors.text.h1} size='large' />
                 :<></>}
-            </View>
-            }
-            </ScrollView>
-            {!loading ?
-            <View nativeID='question_actions' style={{ ...view_styles.section_footer, alignItems:undefined }}>
-                {!poll.seconds_allowed || poll_response ?
-                <TouchableOpacity
-                    style={{ marginRight:10, justifyContent:'center', paddingRight:20, paddingLeft:20, backgroundColor:Colors.utility.warning, borderRadius:22, borderWidth:1, borderColor:Colors.utility.warning }}
+                <FlatList
+                    data={sections}
+                    key={'poll_question_sections'}
+                    keyExtractor={item => item}
+                    renderItem={renderSections}
+                />
+            </View>      
+            <View nativeID='question_actions' type='footer' style={{ flexDirection:'row', padding:12, borderBottomLeftRadius:22, borderBottomRightRadius:22 }}>
+                {poll && (!poll.seconds_allowed || poll_response) ?
+                <Button
+                    style={{ marginRight:10, justifyContent:'center', padding:15, backgroundColor:Colors.text.warning, borderRadius:22, borderWidth:1, borderColor:Colors.text.warning }}
                     onPress={() => handleCancel()}
                 >
-                    <Icons.ListIcon size={18} color={Colors.shades.white} />
-                </TouchableOpacity>
+                    <Icons.ListIcon size={16} color={Colors.text.white} />
+                </Button>
                 :<></>}
-                {poll.status == 'active' && poll.seconds_allowed && !poll_response ?
+                {poll &&poll.status == 'active' && poll.seconds_allowed && !poll_response ?
                     <View style={{ marginRight:5 }}>
                         <ResponseTimer
                             poll_id={poll.poll_id}
@@ -258,30 +276,23 @@ const PollCard = ({ poll_id, poll_response, action_loading, onSkip, onCancel, on
                     </View>
                 :
                 <Button
-                    style={{flex:1, marginRight:5}}
-                    title_color={Colors.brand.electric}
+                    style={{flex:1, marginRight:5, padding:15}}
+                    type='action'
                     title={poll_response?'Next':'Skip'}
-                    borderColor={Colors.brand.electric}
-                    backgroundColor={Colors.shades.white}
-                    borderRadius={22}
-                    borderWidth={1}
-                    padding={14}
                     onPress={() => handleSkip()}
                 />
                 }
-                {!poll_response ?
+                {poll && !poll_response && !loading ?
                 <Button
-                    style={{flex:2}}
-                    title_color={Colors.shades.white}
+                    style={{flex:2, padding:15, opacity: selected_option && !action_loading ? 1 : 0.5}}
+                    loading={action_loading}
                     disabled={selected_option&&!action_loading?false:true}
+                    type='success'
                     title={selected_option?`Submit!`:poll.status == 'active' ? 'Select Answer' : 'Not Active'}
-                    backgroundColor={selected_option&&!action_loading?Colors.utility.success:Colors.brand.slate}
-                    borderRadius={22}
                     onPress={() => handleSubmitResponse()}
                 />
                 :<></>}
             </View>
-            :<></>}
         </View>
         
     )

package/src/Poll/components/PollOptionCard.tsx

@@ -1,8 +1,9 @@
 import React, { useState } from "react";
-import { TextInput, TouchableOpacity, View } from "react-native"
+import { TextInput } from "react-native"
 import type { PollOptionProps, PollResponseProps, PollSummaryProps } from "../../types";
-import Colors from "../../constants/colors";
-import { Button, Icons, Text } from "../../Components";
+import { Icons } from "../../Components";
+import { useColors } from "../../constants/useColors";
+import { Button, Text, View } from "../../Components/Themed";
 
 type PollOptionCardProps = {
     poll_option:PollOptionProps,
@@ -14,16 +15,17 @@ type PollOptionCardProps = {
     onSelect: (PollOptionProps: PollOptionProps) => void
 }
 const PollOptionCard = ({ draft_selected, show_result, poll_option, poll_summary, show_summary, onSelect, poll_response } : PollOptionCardProps) => {
+    const Colors = useColors();
     const [ option_width, setOptionWidth ] = useState(0);
     const [ input_locked, setInputLocked ] = useState(false);
     const [ input_value, setInputValue ] = useState('');
 
     const getResultColor = (result_ind?:'win'|'lose'|'draw') => {
         switch(result_ind){
-            case 'win': return Colors.utility.success
-            case 'lose': return Colors.utility.error
-            case 'draw': return Colors.utility.warning
-            default: return Colors.brand.slate
+            case 'win': return Colors.text.success
+            case 'lose': return Colors.text.error
+            case 'draw': return Colors.text.warning
+            default: return Colors.text.h1
         }
     }
 
@@ -41,39 +43,38 @@ const PollOptionCard = ({ draft_selected, show_result, poll_option, poll_summary
     return (
         <View>
             {poll_option.option_type == 'select' ?
-            <TouchableOpacity 
-                style={{ flex:1, flexDirection:'row', alignItems:'center', padding:10, borderRadius:22, borderWidth:1, borderColor:show_result?getResultColor(poll_option.result_ind):Colors.shades.shade600, backgroundColor:draft_selected?Colors.highlights.highlight500Faded:undefined }}
+            <Button 
+                style={{ flex:1, flexDirection:'row', alignItems:'center', padding:10, borderRadius:22, borderWidth:1, borderColor:show_result?getResultColor(poll_option.result_ind):Colors.borders.light, backgroundColor:draft_selected?Colors.absolutes.highlights.highlight500Faded:undefined }}
                 onPress={() => onSelect(poll_option)}
                 onLayout={(ev) => {
                     const { width } = ev.nativeEvent.layout
                     setOptionWidth(width)
                 }}
                 >
-                <Text style={{ flex:1 }} textAlign="center" size={14} color={show_result?getResultColor(poll_option.result_ind):Colors.brand.midnight} weight='bold'>{poll_option.option_name}</Text>
+                <Text style={{ flex:1 }} textAlign="center" size={14} color={show_result?getResultColor(poll_option.result_ind):Colors.text.h1} weight='bold'>{poll_option.option_name}</Text>
                 {show_result && poll_option.result_ind ?
-                <View>
+                <View transparent>
                     {getResultIcon(poll_option.result_ind)}
                 </View>
                 :<></>}
                 {show_summary && poll_summary?
-                <View style={{ position: 'absolute', left:0, top:0, bottom:0, width:poll_summary.pct*option_width, borderRadius:22, backgroundColor:Colors.highlights.highlight400Faded }} />
+                <View transparent style={{ position: 'absolute', left:0, top:0, bottom:0, width:poll_summary.pct*option_width, borderRadius:22, backgroundColor:Colors.absolutes.highlights.highlight400Faded }} />
                 :<></>}
                 {show_summary && poll_summary ? 
-                <View style={{ position:'absolute', right:5, top:0, bottom:0, justifyContent:'center' }}>
-                    <Text weight='regular' size={10} color={Colors.brand.midnight}>{(poll_summary.pct * 100).toFixed(2)}%</Text>
+                <View transparent style={{ position:'absolute', right:5, top:0, bottom:0, justifyContent:'center' }}>
+                    <Text weight='regular' size={10} color={Colors.text.h1}>{(poll_summary.pct * 100).toFixed(2)}%</Text>
                 </View>
                 :<></>}
-            </TouchableOpacity>  
+            </Button>  
             :
             <View style={{ flexDirection:'row' }}>
-                <View style={{ flex:1, flexDirection:'row', alignItems:'center', paddingRight:10, borderRadius:22, borderWidth: 1, borderColor: show_result?getResultColor(poll_response?.result_ind):Colors.shades.shade600 }}>
+                <View style={{ flex:1, flexDirection:'row', alignItems:'center', paddingRight:10, borderRadius:22, borderWidth: 1, borderColor: show_result?getResultColor(poll_response?.result_ind):Colors.borders.light }}>
                 <TextInput
                     style={{ flex:1, textAlign:'center', fontSize:14, padding:10, color:getResultColor(poll_response?.result_ind) }}
                     keyboardType={poll_option.input_type == 'number' ? 'decimal-pad' : 'default'}
                     editable={show_result?false:true}
                     placeholder="Input Answer"
                     value={poll_response ? poll_response.input_value : input_value}
-                    placeholderTextColor={Colors.shades.shade600}
                     onChangeText={(text) => {
                         if(draft_selected){ onSelect(poll_option) }
                         setInputValue(text)
@@ -88,11 +89,9 @@ const PollOptionCard = ({ draft_selected, show_result, poll_option, poll_summary
                 </View>
                 {!show_result ?
                 <Button
-                    style={{ marginLeft:5 }}
-                    borderRadius={22}
+                    style={{ marginLeft:5, opacity: input_locked?1:0.5 }}
                     title={input_locked?'Locked In':'Lock It In'}
-                    backgroundColor={input_locked?Colors.brand.slate:Colors.brand.electric}
-                    title_color={Colors.shades.white}
+                    type='action'
                     onPress={() => {
                         if(!input_value || input_value == ''){ return alert('Please enter valid value') }
                         setInputLocked(true)

package/src/Poll/components/PollQuestionsSection.tsx

@@ -1,10 +1,10 @@
 import React, { useState } from 'react';
-import { View, TouchableOpacity, FlatList } from "react-native"
+import { FlatList } from "react-native"
 import type { PollCampaignProps, PollProps, PollResponseProps } from "../../types"
-import { view_styles } from '../../constants/styles';
-import { Icons, Text } from '../../Components';
-import Colors from '../../constants/colors';
+import { Icons } from '../../Components';
 import PollSelectCard from './PollSelectCard';
+import { Button, Text, View } from '../../Components/Themed';
+import { useColors } from '../../constants/useColors';
 
 type PollQuestionsSectionProps = {
     poll_campaign:PollCampaignProps,
@@ -14,6 +14,7 @@ type PollQuestionsSectionProps = {
 }
 
 const PollQuestionsSection = ({ poll_campaign, polls, poll_responses, onSelectPoll }:PollQuestionsSectionProps) => {
+    const Colors = useColors();
     const [ section_data, setSectionData ] = useState<{
         loading:boolean,
         expanded:boolean,
@@ -28,7 +29,7 @@ const PollQuestionsSection = ({ poll_campaign, polls, poll_responses, onSelectPo
         const my_response = poll_responses.find(r => r.poll_id == data.item.poll_id)
         const response_option = data.item.poll_options?.find(po => po.poll_option_id == my_response?.poll_option_id);
         return (
-            <View style={{ borderBottomWidth:1, borderBottomColor:Colors.shades.shade600 }}>
+            <View transparent style={{ borderBottomWidth:1, borderBottomColor:Colors.borders.light }}>
                 <PollSelectCard
                     poll={data.item}
                     disabled={false}
@@ -44,17 +45,17 @@ const PollQuestionsSection = ({ poll_campaign, polls, poll_responses, onSelectPo
     }
 
     return (
-        <View style={{ ...view_styles.section }}>
-            <TouchableOpacity style={{ ...view_styles.section_header }} onPress={() => setSectionData({ ...section_data, expanded: !expanded })}>
-                <Icons.QuestionIcon size={18} color={Colors.brand.midnight} />
-                <View style={{flex:1, marginLeft:10}}>
-                    <Text theme='header'>Questions</Text>
-                    <Text style={{ marginTop:3 }} theme='body'>Available questions can be found below</Text>
+        <View float>
+            <Button style={{ flexDirection:'row', alignItems:'center', padding:20, backgroundColor:Colors.views.header }} onPress={() => setSectionData({ ...section_data, expanded: !expanded })}>
+                <Icons.QuestionIcon size={18} color={Colors.text.h1} />
+                <View transparent style={{flex:1, marginLeft:10}}>
+                    <Text theme='h1'>Questions</Text>
+                    <Text style={{ marginTop:3 }} theme='description'>Available questions can be found below</Text>
                 </View>
-                <Icons.ChevronIcon direction={expanded?'up':'down'} color={Colors.brand.midnight} size={8} />
-            </TouchableOpacity>
+                <Icons.ChevronIcon direction={expanded?'up':'down'} color={Colors.text.h1} size={8} />
+            </Button>
             {expanded ?
-            <View style={{ ...view_styles.section_body }}>
+            <View transparent type='body' style={{ padding:10 }}>
                 <FlatList
                     data={polls.sort((a,b) => a.priority - b.priority)}
                     renderItem={renderPolls}