feat(ui/polls/security/native): style fixes and updates (#12761)

* feat(base/ui/native): button fixes and ui updates

react/features/base/ui/components/native/buttonStyles.ts

@@ -55,6 +55,7 @@ export default {
     buttonLabelTertiary: {
         ...buttonLabel,
         color: BaseTheme.palette.text01,
+        margin: BaseTheme.spacing[3],
         textAlign: 'center'
     },
 

react/features/polls/components/native/PollCreate.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { FlatList, Platform, Text, View } from 'react-native';
-import { Divider, TouchableRipple } from 'react-native-paper';
+import { FlatList, Platform, View } from 'react-native';
+import { Divider } from 'react-native-paper';
 
 import Button from '../../../base/ui/components/native/Button';
 import Input from '../../../base/ui/components/native/Input';
@@ -52,7 +52,7 @@ const PollCreate = (props: AbstractProps) => {
      * about whether a newly created input field has been rendered yet or not.
      */
     const [ lastFocus, requestFocus ] = useState(null);
-    const { PRIMARY, SECONDARY } = BUTTON_TYPES;
+    const { PRIMARY, SECONDARY, TERTIARY } = BUTTON_TYPES;
 
     useEffect(() => {
         if (lastFocus === null) {
@@ -85,13 +85,12 @@ const PollCreate = (props: AbstractProps) => {
 
     /* eslint-disable react/no-multi-comp */
     const createRemoveOptionButton = onPress => (
-        <TouchableRipple
-            onPress = { onPress }
-            rippleColor = { 'transparent' } >
-            <Text style = { dialogStyles.optionRemoveButtonText }>
-                { t('polls.create.removeOption') }
-            </Text>
-        </TouchableRipple>
+        <Button
+            labelKey = 'polls.create.removeOption'
+            labelStyle = { dialogStyles.optionRemoveButtonText }
+            onClick = { onPress }
+            style = { dialogStyles.optionRemoveButton }
+            type = { TERTIARY } />
     );
 
 
@@ -120,6 +119,8 @@ const PollCreate = (props: AbstractProps) => {
         );
     const buttonRowStyles = Platform.OS === 'android'
         ? chatStyles.buttonRowAndroid : chatStyles.buttonRowIos;
+    const pollCreateButtonsContainerStyles = Platform.OS === 'android'
+        ? chatStyles.pollCreateButtonsContainerAndroid : chatStyles.pollCreateButtonsContainerIos;
 
     return (
         <View style = { chatStyles.pollCreateContainer }>
@@ -143,7 +144,7 @@ const PollCreate = (props: AbstractProps) => {
                     keyExtractor = { (item, index) => index.toString() }
                     ref = { answerListRef }
                     renderItem = { renderListItem } />
-                <View style = { chatStyles.pollCreateButtonsContainer }>
+                <View style = { pollCreateButtonsContainerStyles }>
                     <Button
                         accessibilityLabel = 'polls.create.addOption'
                         disabled = { answers.length >= ANSWERS_LIMIT }

react/features/polls/components/native/PollResults.js

@@ -1,10 +1,12 @@
 // @flow
 
 import React, { useCallback } from 'react';
-import { FlatList, Text, TouchableOpacity, View } from 'react-native';
+import { FlatList, Text, View } from 'react-native';
 import { useSelector } from 'react-redux';
 
 import { getLocalParticipant } from '../../../base/participants';
+import Button from '../../../base/ui/components/native/Button';
+import { BUTTON_TYPES } from '../../../base/ui/constants.native';
 import AbstractPollResults from '../AbstractPollResults';
 import type { AbstractProps, AnswerInfo } from '../AbstractPollResults';
 
@@ -101,26 +103,24 @@ const PollResults = (props: AbstractProps) => {
                 keyExtractor = { (item, index) => index.toString() }
                 renderItem = { answer => renderRow(answer.item) } />
             <View style = { chatStyles.bottomLinks }>
-                <TouchableOpacity onPress = { toggleIsDetailed }>
-                    <Text
-                        style = { chatStyles.toggleText }>
-                        {
-                            showDetails
-                                ? t('polls.results.hideDetailedResults')
-                                : t('polls.results.showDetailedResults')
-                        }
-                    </Text>
-                </TouchableOpacity>
-                <TouchableOpacity onPress = { changeVote }>
-                    <Text
-                        style = { chatStyles.toggleText }>
-                        {
-                            haveVoted
-                                ? t('polls.results.changeVote')
-                                : t('polls.results.vote')
-                        }
-                    </Text>
-                </TouchableOpacity>
+                <Button
+                    labelKey = {
+                        showDetails
+                            ? 'polls.results.hideDetailedResults'
+                            : 'polls.results.showDetailedResults'
+                    }
+                    labelStyle = { chatStyles.toggleText }
+                    onClick = { toggleIsDetailed }
+                    type = { BUTTON_TYPES.TERTIARY } />
+                <Button
+                    labelKey = {
+                        haveVoted
+                            ? 'polls.results.changeVote'
+                            : 'polls.results.vote'
+                    }
+                    labelStyle = { chatStyles.toggleText }
+                    onClick = { changeVote }
+                    type = { BUTTON_TYPES.TERTIARY } />
             </View>
         </View>
     );

react/features/polls/components/native/PollsPane.js

@@ -2,6 +2,7 @@
 
 import { useNavigation } from '@react-navigation/native';
 import React, { useEffect } from 'react';
+import { Platform } from 'react-native';
 import { useSelector } from 'react-redux';
 
 import JitsiScreen from '../../../base/modal/components/JitsiScreen';
@@ -39,6 +40,9 @@ const PollsPane = (props: AbstractProps) => {
 
     }, [ isPollsTabFocused, nbUnreadPolls ]);
 
+    const createPollButtonStyles = Platform.OS === 'android'
+        ? chatStyles.createPollButtonAndroid : chatStyles.createPollButtonIos;
+
     return (
         <JitsiScreen
             contentContainerStyle = { chatStyles.pollPane }
@@ -56,7 +60,7 @@ const PollsPane = (props: AbstractProps) => {
                     accessibilityLabel = 'polls.create.create'
                     labelKey = 'polls.create.create'
                     onClick = { onCreate }
-                    style = { chatStyles.createPollButton }
+                    style = { createPollButtonStyles }
                     type = { BUTTON_TYPES.PRIMARY } />
             }
         </JitsiScreen>

react/features/polls/components/native/styles.js

@@ -13,15 +13,14 @@ export const dialogStyles = createStyleSheet({
     questionText: {
         ...BaseTheme.typography.bodyShortBold,
         color: BaseTheme.palette.text01,
-        marginBottom: BaseTheme.spacing[2],
-        marginLeft: BaseTheme.spacing[2]
+        marginLeft: BaseTheme.spacing[1]
     },
 
     questionOwnerText: {
         ...BaseTheme.typography.bodyShortBold,
         color: BaseTheme.palette.text03,
         marginBottom: BaseTheme.spacing[2],
-        marginLeft: BaseTheme.spacing[2]
+        marginLeft: BaseTheme.spacing[1]
     },
 
     optionContainer: {
@@ -30,6 +29,10 @@ export const dialogStyles = createStyleSheet({
         marginHorizontal: BaseTheme.spacing[3]
     },
 
+    optionRemoveButton: {
+        width: 128
+    },
+
     optionRemoveButtonText: {
         color: BaseTheme.palette.actionDangerActive
     },
@@ -82,7 +85,7 @@ export const resultsStyles = createStyleSheet({
     },
 
     answerContainer: {
-        marginHorizontal: BaseTheme.spacing[2],
+        marginHorizontal: BaseTheme.spacing[1],
         marginVertical: BaseTheme.spacing[3],
         maxWidth: '100%'
     },
@@ -126,7 +129,7 @@ export const chatStyles = createStyleSheet({
     },
 
     pollItemContainer: {
-        backgroundColor: BaseTheme.palette.ui02,
+        backgroundColor: BaseTheme.palette.uiBackground,
         borderColor: BaseTheme.palette.border05,
         borderRadius: BaseTheme.shape.borderRadius,
         boxShadow: BaseTheme.shape.boxShadow,
@@ -144,14 +147,14 @@ export const chatStyles = createStyleSheet({
         marginTop: BaseTheme.spacing[3]
     },
 
-    pollCreateButtonsContainer: {
-        marginHorizontal: BaseTheme.spacing[3],
-        marginVertical: '8%'
+    pollCreateButtonsContainerAndroid: {
+        marginBottom: BaseTheme.spacing[8],
+        marginHorizontal: BaseTheme.spacing[3]
     },
 
-    pollCreateButton: {
-        flex: 1,
-        marginHorizontal: BaseTheme.spacing[1]
+    pollCreateButtonsContainerIos: {
+        marginBottom: BaseTheme.spacing[5],
+        marginHorizontal: BaseTheme.spacing[3]
     },
 
     pollSendLabel: {
@@ -165,20 +168,22 @@ export const chatStyles = createStyleSheet({
     },
 
     buttonRow: {
-        flexDirection: 'row'
+        flexDirection: 'row',
+        justifyContent: 'center'
     },
 
     buttonRowAndroid: {
         flexDirection: 'row',
-        marginBottom: BaseTheme.spacing[3]
+        justifyContent: 'space-between'
     },
 
     buttonRowIos: {
-        flexDirection: 'row'
+        flexDirection: 'row',
+        justifyContent: 'space-between'
     },
 
     answerContent: {
-        paddingBottom: 8
+        marginBottom: BaseTheme.spacing[2]
     },
 
     switchRow: {
@@ -197,19 +202,27 @@ export const chatStyles = createStyleSheet({
         marginVertical: BaseTheme.spacing[2]
     },
 
+    pollCreateButton: {
+        marginHorizontal: BaseTheme.spacing[1],
+        width: 160
+    },
+
     toggleText: {
-        color: BaseTheme.palette.action01,
-        paddingTop: BaseTheme.spacing[3]
+        color: BaseTheme.palette.action01
     },
 
-    createPollButton: {
-        marginHorizontal: BaseTheme.spacing[3],
-        marginVertical: 34
+    createPollButtonIos: {
+        marginHorizontal: 20,
+        marginVertical: BaseTheme.spacing[5]
+    },
+
+    createPollButtonAndroid: {
+        marginHorizontal: 20
     },
 
     pollPane: {
         flex: 1,
-        padding: 8
+        padding: BaseTheme.spacing[2]
     },
 
     pollPaneContainer: {
@@ -220,7 +233,7 @@ export const chatStyles = createStyleSheet({
     bottomLinks: {
         flexDirection: 'row',
         justifyContent: 'space-between',
-        marginHorizontal: BaseTheme.spacing[2]
+        marginHorizontal: BaseTheme.spacing[1]
     },
 
     unreadPollsCounterContainer: {

react/features/security/components/security-dialog/native/styles.js

@@ -61,7 +61,6 @@ export default {
 
     savedPasswordContainer: {
         flexDirection: 'row',
-        marginTop: 14,
         width: 208
     },
 
@@ -79,8 +78,7 @@ export default {
     },
 
     passwordSetupButtonLabel: {
-        color: BaseTheme.palette.link01,
-        marginTop: BaseTheme.spacing[3]
+        color: BaseTheme.palette.link01
     },
 
     passwordSetRemotelyContainer: {
@@ -90,12 +88,10 @@ export default {
     },
 
     passwordSetRemotelyText: {
-        color: BaseTheme.palette.text01,
-        marginTop: BaseTheme.spacing[3]
+        color: BaseTheme.palette.text01
     },
 
     passwordSetRemotelyTextDisabled: {
-        color: BaseTheme.palette.text02,
-        marginTop: BaseTheme.spacing[3]
+        color: BaseTheme.palette.text02
     }
 };