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

* feat(base/ui/native): button fixes and ui updates
2023-01-12 12:11:27 +02:00 · 2023-01-12 12:11:27 +02:00 · c50111a57d
parent 9422f48536
commit c50111a57d
6 changed files with 78 additions and 63 deletions
--- a/react/features/base/ui/components/native/buttonStyles.ts
+++ b/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'
    },

--- a/react/features/polls/components/native/PollCreate.js
+++ b/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 }
--- a/react/features/polls/components/native/PollResults.js
+++ b/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 }>
-                        {
+                <Button
+                    labelKey = {
                        showDetails
-                                ? t('polls.results.hideDetailedResults')
-                                : t('polls.results.showDetailedResults')
+                            ? 'polls.results.hideDetailedResults'
+                            : 'polls.results.showDetailedResults'
                    }
-                    </Text>
-                </TouchableOpacity>
-                <TouchableOpacity onPress = { changeVote }>
-                    <Text
-                        style = { chatStyles.toggleText }>
-                        {
+                    labelStyle = { chatStyles.toggleText }
+                    onClick = { toggleIsDetailed }
+                    type = { BUTTON_TYPES.TERTIARY } />
+                <Button
+                    labelKey = {
                        haveVoted
-                                ? t('polls.results.changeVote')
-                                : t('polls.results.vote')
+                            ? 'polls.results.changeVote'
+                            : 'polls.results.vote'
                    }
-                    </Text>
-                </TouchableOpacity>
+                    labelStyle = { chatStyles.toggleText }
+                    onClick = { changeVote }
+                    type = { BUTTON_TYPES.TERTIARY } />
            </View>
        </View>
    );
--- a/react/features/polls/components/native/PollsPane.js
+++ b/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>
--- a/react/features/polls/components/native/styles.js
+++ b/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]
    },

-    toggleText: {
-        color: BaseTheme.palette.action01,
-        paddingTop: BaseTheme.spacing[3]
+    pollCreateButton: {
+        marginHorizontal: BaseTheme.spacing[1],
+        width: 160
    },

-    createPollButton: {
-        marginHorizontal: BaseTheme.spacing[3],
-        marginVertical: 34
+    toggleText: {
+        color: BaseTheme.palette.action01
+    },
+
+    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: {
--- a/react/features/security/components/security-dialog/native/styles.js
+++ b/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
    }
 };