[Hold of payment Aug 17th] Update form styles on Expensify.cash mobile app

[Christinadobrzyn]

Platform - version: E.cash app v1.0.38.-1

Action Performed (reproducible steps):

• Go to Expensify.cash
• View any field on the mobile app (Phone or Email sign-in filed, preferences, change password, search, etc)
• Currently, you'll see a grey field label on an empty field > tap the field to select it
• The field will go white with a blue border > the grey field will disappear
• We want to change this so the grey field label remains while typing
• Here's examples of the current layout and the desired layout:

Current:

Desired:

Specific specs:

• Text size should be 13pt for field label and 15pt for text

• Keeping our existing border style (blue when focused/active, red when error/active) and button style (green for primary actions)

• Field inside the box should be white (both in a selected field and unselected field)

• Field label text should be grey (both in a selected field and unselected field)

• These field changes need to be made to all fields on the mobile app

Expected Result:

• Every selected field without an error should show a grey field label at the top of the field, have a blue border and a green highlighted action button

• Every selected with an error field should show a grey field label at the top of the field, have a red border and a green highlighted action button

Actual Result:

• Currently, every selected field hides the grey field label

Notes/Photos/Videos:

Here's a view of how this should display:

PLEASE NOTE: This should not be applied in the main text box where "Write something" displays, this should keep the following behaviour:

[Christinadobrzyn]

Waiting for Eng review of this issue - https://github.com/Expensify/Expensify/issues/157830 - before uploading to Upwork

[kakajann]

Hello, I would like to work on this. One of my previous work was mostly about styling (Growl Notification ).

[Christinadobrzyn]

I'm going to be ooo May 31 - June 7th so assigning this to Kadie to post in Upwork once we have a thumbs up on the internal GH - https://github.com/Expensify/Expensify/issues/157830

[MelvinBot]

Triggered auto assignment to @Beamanator (Exported), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[kadiealexander]

@Beamanator I'm yet to post this on Upwork but we already have proposals so I've added the label.

[Beamanator]

@kakajann Thanks for your interest in this issue! Would you please provide write up a proposal of the work you'd plan to do? Please also ask any questions you may have about the desired "Expected Result".

[kakajann]

Proposal

React Native doesn't support :focus selector on styling. So, we have to create custom TextInput with react natives TextInput if we want to change TextInputs border color when user focus on it.

Example:

import React, { Component } from 'react';
import { TextInput, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  textInput: {
    fontSize: 15,
    borderColor: '#dddddd'
  },
  textInput: {
    borderColor: '#00ff00'
  },
})

class ExpensifyTextInput extends Component {
  constructor() {
    super()

    this.state = {
      focused: false
    }
  }

  render() {
    const {focused} = this.state
    return (
      <TextInput
        style={[styles.textInput, focused && styles.textInputOnFocus]}
        onFocus={() => this.setState({focused: true})}
        onBlur={() => this.setState({focused: false})}
      />
    )
  }
}

export default ExpensifyTextInput

I will also implement specific specs that mentioned in the issue.

Actual Result:
Currently, every selected field hides the grey field label

And this is because outline hasn't disabled in here