[$1000] Opacity is too low on long Press for the links like "Forgot", "Go back" & "Back" #14467

kavimuru · 2023-01-23T15:25:01Z

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

Action Performed:

Open two NewDot sessions.
In the first session, sign out (if you are signed in).
Enter email address and click continue.
Now long press on the "Forgot" or "Go back" buttons.
Notice that the opacity of the buttons is very high (meaning the text fades away significantly when you long top.
In the second session, go to Settings > Workspace > Click into a workspace > Connect Bank account.
Click manual and enter the plaid test credentials.
Click the "I accept terms of service" checkbox and notice the opacity is much more subtle than the login page.
Click continue and scroll down to the bottom Company information step. Click the restricted industries checkbox and notice the opacity is similarly subtle to the step prior.

Expected Result:

Opacity in the application should be consistent, and more subtle than that shown on the login page.

Actual Result:

Opacity on login page buttons is inconsistent with other buttons in the app, and should be more subtle.

Workaround:

unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

MacOS / Chrome / Safari
MacOS / Desktop

Version Number: 1.2.57-3
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos:

opacity.mp4

Recording.1343.mp4

Expensify/Expensify Issue URL:
Issue reported by: @daraksha-dk
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1674240052198959

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~0144967451d0ce5878
Upwork Job ID: 1619024958901145600
Last Price Increase: 2023-01-27

joekaufmanexpensify · 2023-01-23T18:30:59Z

Triaging:

From this SO: https://stackoverflow.com/c/expensify/questions/14418

The "bug" is actually a bug: Y
The bug is not a duplicate report of an existing GH (close the GH and add any novel details to the original GH instead): N/A
The bug is reproducible, following the reproduction steps: Y
If you're unable to reproduce the bug, add the Needs reproduction label. Comment on the issue outlining the steps you took to try to reproduce the bug, your results and tag the issue reporter and the Applause QA member who created the issue. Ask them to clarify reproduction steps and/or to check the reproduction steps again. Close issue.: N/A
The GH template is filled out as fully as possible -- this means the GH body and title are clear (ie. could an external contributor understand it and work on it?): Y
The GH was created by an Expensify employee or a QA tester: Y
If the bug is an OldDot issue, you should decide whether it is widespread enough to justify fixing or it is better to wait for reunification. If it's better to wait, close the GH & provide this justification: N/A
If there's a link to Slack, check the discussion to see if we decided not to fix it: N/A
Decide if the GH should be resolved by an External contributor or Internal engineer, add the appropriate label: Deciding on this.

joekaufmanexpensify · 2023-01-23T18:34:53Z

I can reproduce this on web. However, I do kind of like the feedback received when long clicking on the buttons here. Discussing further in Slack.

joekaufmanexpensify · 2023-01-23T18:44:50Z

Discussing here.

joekaufmanexpensify · 2023-01-24T18:57:23Z

Adding view of opacity with checkbox on VBA flow for comparison:

joekaufmanexpensify · 2023-01-25T18:54:25Z

Still discussing in Slack.

joekaufmanexpensify · 2023-01-26T16:24:22Z

Okay, we discussed this in Slack, and we want to make the opacity on the back and forgot password buttons on the login page more subtle and consistent with opacity on buttons in the rest of the app. In the VBA onboarding flow (as described in OP), there are two buttons with much more subtle opacity.

We want to standardize on that.

joekaufmanexpensify · 2023-01-26T16:25:01Z

Thinking this can be external, but assigning to engineering to confirm!

madmax330 · 2023-01-27T17:29:49Z

Yep this can be external

melvin-bot · 2023-01-27T17:30:08Z

Job added to Upwork: https://www.upwork.com/jobs/~0144967451d0ce5878

daraksha-dk · 2023-01-27T17:30:10Z

Proposal

We can fix this issue by passing activeOpacity prop in TouchableOpacity
For the value, I observed that we're using 0.8 & 0.7 as values throughout the app for this.
So, I think @shawnborton will need to confirm the value for these links

Additionally, we can define a variable for the value like we have done for checkbox label here

App/src/styles/variables.js

Line 87 in a10949d

checkboxLabelActiveOpacity: 0.7,

Required changes shown (if we chose to go with 0.7 as value)

diff --git a/src/pages/signin/ChangeExpensifyLoginLink.js b/src/pages/signin/ChangeExpensifyLoginLink.js
index 8289a754d..a849c9380 100755
--- a/src/pages/signin/ChangeExpensifyLoginLink.js
+++ b/src/pages/signin/ChangeExpensifyLoginLink.js
@@ -8,6 +8,7 @@ import styles from '../../styles/styles';
 import ONYXKEYS from '../../ONYXKEYS';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import compose from '../../libs/compose';
 
 const propTypes = {
     /** The credentials of the logged in person */
@@ -41,6 +42,7 @@ const ChangeExpensifyLoginLink = props => (
         <TouchableOpacity
             style={[styles.link]}
             onPress={props.onPress}
+            activeOpacity={0.7}
         >
             <Text style={[styles.link]}>
                 {props.translate('common.goBack')}
diff --git a/src/pages/signin/PasswordForm.js b/src/pages/signin/PasswordForm.js
index d984e6fd2..7b65d0db5 100755
--- a/src/pages/signin/PasswordForm.js
+++ b/src/pages/signin/PasswordForm.js
@@ -24,6 +24,7 @@ import * as ErrorUtils from '../../libs/ErrorUtils';
 import {withNetwork} from '../../components/OnyxProvider';
 import networkPropTypes from '../../components/networkPropTypes';
 import OfflineIndicator from '../../components/OfflineIndicator';
 
 const propTypes = {
     /* Onyx Props */
@@ -171,6 +172,7 @@ class PasswordForm extends React.Component {
                         <TouchableOpacity
                             style={[styles.mt2]}
                             onPress={this.resetPassword}
+                            activeOpacity={0.7}
                         >
                             <Text style={[styles.link]}>
                                 {this.props.translate('passwordForm.forgot')}
diff --git a/src/pages/signin/ResendValidationForm.js b/src/pages/signin/ResendValidationForm.js
index 7753faa65..04d702e18 100755
--- a/src/pages/signin/ResendValidationForm.js
+++ b/src/pages/signin/ResendValidationForm.js
@@ -18,6 +18,7 @@ import OfflineIndicator from '../../components/OfflineIndicator';
 import networkPropTypes from '../../components/networkPropTypes';
 import {withNetwork} from '../../components/OnyxProvider';
 import DotIndicatorMessage from '../../components/DotIndicatorMessage';
 
 const propTypes = {
     /* Onyx Props */
@@ -79,7 +80,10 @@ const ResendValidationForm = (props) => {
                 <DotIndicatorMessage style={[styles.mb5]} type="error" messages={props.account.errors} />
             )}
             <View style={[styles.mb4, styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter]}>
-                <TouchableOpacity onPress={() => redirectToSignIn()}>
+                <TouchableOpacity
+                    onPress={() => redirectToSignIn()}
+                    activeOpacity={0.7}
+                >
                     <Text style={[styles.link]}>
                         {props.translate('common.back')}
                     </Text>

Demo

(activeOpacity is set as 0.7)

low-opacity.mp4

melvin-bot · 2023-01-27T17:30:10Z

Current assignee @joekaufmanexpensify is eligible for the External assigner, not assigning anyone new.

melvin-bot · 2023-01-27T17:30:18Z

Triggered auto assignment to Contributor-plus team member for initial proposal review - @mollfpr (External)

melvin-bot · 2023-01-27T17:30:22Z

Current assignee @madmax330 is eligible for the External assigner, not assigning anyone new.

Pujan92 · 2023-01-27T17:30:40Z

Proposal

We can apply the same activeOpacity to make it consistent like mentioned VBA flow checkbox label (Changed a variable name to make more generic).

diff --git a/src/styles/variables.js b/src/styles/variables.js
index 58b87782d5..c24eda3633 100644
--- a/src/styles/variables.js
+++ b/src/styles/variables.js
@@ -85,7 +85,7 @@ export default {
     INACTIVE_LABEL_TRANSLATE_Y: getValueUsingPixelRatio(16, 21),
     sliderBarHeight: 8,
     sliderKnobSize: 26,
-    checkboxLabelActiveOpacity: 0.7,
+    actionTextActiveOpacity: 0.7,
     avatarChatSpacing: 12,
diff --git a/src/components/CheckboxWithLabel.js b/src/components/CheckboxWithLabel.js
index 4c7123bd24..3ecf26eb42 100644
--- a/src/components/CheckboxWithLabel.js
+++ b/src/components/CheckboxWithLabel.js
@@ -100,7 +100,7 @@ class CheckboxWithLabel extends React.Component {
                     <TouchableOpacity
                         focusable={false}
                         onPress={this.toggleCheckbox}
-                        activeOpacity={variables.checkboxLabelActiveOpacity}
+                        activeOpacity={variables.actionTextActiveOpacity}
                         style={[
                             styles.ml3,
                             styles.pr2,
diff --git a/src/pages/signin/ChangeExpensifyLoginLink.js b/src/pages/signin/ChangeExpensifyLoginLink.js
index 8289a754d..32e02b0f5 100755
--- a/src/pages/signin/ChangeExpensifyLoginLink.js
+++ b/src/pages/signin/ChangeExpensifyLoginLink.js
@@ -41,6 +41,7 @@ const ChangeExpensifyLoginLink = props => (
         <TouchableOpacity
             style={[styles.link]}
             onPress={props.onPress}
+            activeOpacity={variables.actionTextActiveOpacity}
         >
             <Text style={[styles.link]}>
                 {props.translate('common.goBack')}
diff --git a/src/pages/signin/PasswordForm.js b/src/pages/signin/PasswordForm.js
index d984e6fd2..4c02c3b90 100755
--- a/src/pages/signin/PasswordForm.js
+++ b/src/pages/signin/PasswordForm.js
@@ -171,6 +171,7 @@ class PasswordForm extends React.Component {
                         <TouchableOpacity
                             style={[styles.mt2]}
                             onPress={this.resetPassword}
+                            activeOpacity={variables.actionTextActiveOpacity}
                         >
                             <Text style={[styles.link]}>
                                 {this.props.translate('passwordForm.forgot')}
diff --git a/src/pages/signin/ResendValidationForm.js b/src/pages/signin/ResendValidationForm.js
index 7753faa65..8887854cb 100755
--- a/src/pages/signin/ResendValidationForm.js
+++ b/src/pages/signin/ResendValidationForm.js
@@ -79,7 +79,7 @@ const ResendValidationForm = (props) => {
                 <DotIndicatorMessage style={[styles.mb5]} type="error" messages={props.account.errors} />
             )}
             <View style={[styles.mb4, styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter]}>
-                <TouchableOpacity onPress={() => redirectToSignIn()}>
+                <TouchableOpacity onPress={() => redirectToSignIn()} activeOpacity={variables.actionTextActiveOpacity}>
                     <Text style={[styles.link]}>
                         {props.translate('common.back')}
                     </Text>

situchan · 2023-01-29T14:33:13Z

Proposal

We can set activeOpacity default value of TouchableOpacity across the app in root level, without needing to set in every component.
I think App.js is a good place:

- import {LogBox} from 'react-native';
+ import {LogBox, TouchableOpacity} from 'react-native';

...

LogBox.ignoreLogs([
    // Basically it means that if the app goes in the background and back to foreground on Android,
    // the timer is lost. Currently Expensify is using a 30 minutes interval to refresh personal details.
    // More details here: https://git.io/JJYeb
    'Setting a timer for a long period of time',
]);

+ TouchableOpacity.defaultProps = TouchableOpacity.defaultProps || {};
+ TouchableOpacity.defaultProps.activeOpacity = 0.7;

const fill = {flex: 1};

Whether to set 0.7 or 0.8 depends on confirmation from design team.

However, I am not sure if this is worth fixing based on #14589

mollfpr · 2023-01-30T09:38:18Z

Thanks for the proposals! I'll review this issue tonight!

mollfpr · 2023-01-30T14:53:31Z

@joekaufmanexpensify What do you think about this plan #14589?

joekaufmanexpensify · 2023-01-30T19:28:45Z

Hm, interesting. My 2c is that it seems like whatever we change in this issue will be redone in that issue. And we should therefore do nothing for now, and wait for a standardized system of pressables to be added in the app. Curious if you agree @mountiny ?

mountiny · 2023-01-30T19:32:46Z

Yeah that makes sense to me, this is very minor issue and I see no reason in fixing this now if we will move away from the Touchables implementation

Thanks @mollfpr for bringing this up!

joekaufmanexpensify · 2023-01-30T23:06:09Z

Cool, thanks for confirming! Going to go ahead and close this one then.

kavimuru added Daily KSv2 Bug Something is broken. Auto assigns a BugZero manager. labels Jan 23, 2023

melvin-bot bot assigned joekaufmanexpensify Jan 23, 2023

melvin-bot bot locked and limited conversation to collaborators Jan 23, 2023

joekaufmanexpensify added the Engineering label Jan 26, 2023

melvin-bot bot assigned madmax330 Jan 26, 2023

madmax330 added the External Added to denote the issue can be worked on by a contributor label Jan 27, 2023

melvin-bot bot unlocked this conversation Jan 27, 2023

melvin-bot bot changed the title ~~Opacity is too low on long Press for the links like "Forgot", "Go back" & "Back"~~ [$1000] Opacity is too low on long Press for the links like "Forgot", "Go back" & "Back" Jan 27, 2023

melvin-bot bot assigned mollfpr Jan 27, 2023

melvin-bot bot added the Help Wanted Apply this label when an issue is open to proposals by contributors label Jan 27, 2023

melvin-bot bot added the Overdue label Jan 30, 2023

melvin-bot bot removed the Overdue label Jan 30, 2023

joekaufmanexpensify closed this as completed Jan 30, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[$1000] Opacity is too low on long Press for the links like "Forgot", "Go back" & "Back" #14467

[$1000] Opacity is too low on long Press for the links like "Forgot", "Go back" & "Back" #14467

kavimuru commented Jan 23, 2023 •

edited by melvin-bot bot

Loading

joekaufmanexpensify commented Jan 23, 2023 •

edited

Loading

joekaufmanexpensify commented Jan 23, 2023

joekaufmanexpensify commented Jan 23, 2023

joekaufmanexpensify commented Jan 24, 2023

joekaufmanexpensify commented Jan 25, 2023

joekaufmanexpensify commented Jan 26, 2023

joekaufmanexpensify commented Jan 26, 2023

madmax330 commented Jan 27, 2023

melvin-bot bot commented Jan 27, 2023

daraksha-dk commented Jan 27, 2023

melvin-bot bot commented Jan 27, 2023

melvin-bot bot commented Jan 27, 2023

melvin-bot bot commented Jan 27, 2023

Pujan92 commented Jan 27, 2023

situchan commented Jan 29, 2023

mollfpr commented Jan 30, 2023

mollfpr commented Jan 30, 2023

joekaufmanexpensify commented Jan 30, 2023

mountiny commented Jan 30, 2023

joekaufmanexpensify commented Jan 30, 2023

[$1000] Opacity is too low on long Press for the links like "Forgot", "Go back" & "Back" #14467

[$1000] Opacity is too low on long Press for the links like "Forgot", "Go back" & "Back" #14467

Comments

kavimuru commented Jan 23, 2023 • edited by melvin-bot bot Loading

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

joekaufmanexpensify commented Jan 23, 2023 • edited Loading

joekaufmanexpensify commented Jan 23, 2023

joekaufmanexpensify commented Jan 23, 2023

joekaufmanexpensify commented Jan 24, 2023

joekaufmanexpensify commented Jan 25, 2023

joekaufmanexpensify commented Jan 26, 2023

joekaufmanexpensify commented Jan 26, 2023

madmax330 commented Jan 27, 2023

melvin-bot bot commented Jan 27, 2023

daraksha-dk commented Jan 27, 2023

Proposal

Demo

(activeOpacity is set as 0.7)

melvin-bot bot commented Jan 27, 2023

melvin-bot bot commented Jan 27, 2023

melvin-bot bot commented Jan 27, 2023

Pujan92 commented Jan 27, 2023

situchan commented Jan 29, 2023

Proposal

mollfpr commented Jan 30, 2023

mollfpr commented Jan 30, 2023

joekaufmanexpensify commented Jan 30, 2023

mountiny commented Jan 30, 2023

joekaufmanexpensify commented Jan 30, 2023

kavimuru commented Jan 23, 2023 •

edited by melvin-bot bot

Loading

joekaufmanexpensify commented Jan 23, 2023 •

edited

Loading