US-969: Create new button components (#329)

* add avatar generator lib

* add avatar icon to search domain screen

* change white to light purple on choose alias screen

* add avatar icon to request domain screen

* add .rsk suffix automatically

* add avatar icon for futher steps

* add alias icon to header

* change alias icon background to white

* For better readability

* check if profile.alias exists

* show placeholder image when no alias

* remove no valid message for alias length less than 5 chars

* styles

* does not allow small alias

* swap minus and plus icons

* remove duplicate dependency

* create base input

* add suffix

* use text input props

* apply fontSize to suffix

* add padding to domain availabilty

* encapsulate common attributes

* use BaseInput in TextInputWithLabel

* use TextInputWithLabel in ProfileCreateScreen

* show digits only for phone input

* lint

* adjust suffix top

* feedback labels to lower case

* function call on press

* use switch statement

* create some enums

* lint

* add optional label

* use useMemo to avoid re-computing

* use useCallback on ProfileCreateScreen

* fix

* primary button pressed

* remove fontWeight

* add opacity when pressed

* extract PurpleButton to PrimaryButton2

* disable request button when alias has already been taken

* create secondary button

* textPressed style

* lint

* create transfer button with LinearGradient

* create ToggleButtons

* remove ternary operations for better readability

src/components/address/AddressInput.tsx

@@ -1,21 +1,21 @@
 import Clipboard from '@react-native-community/clipboard'
+import { isValidChecksumAddress } from '@rsksmart/rsk-utils'
 import React, { useEffect, useState } from 'react'
 import { Text, TextInput, View } from 'react-native'
-import { sharedAddressStyles as styles } from './sharedAddressStyles'
-import { ContentPasteIcon, QRCodeIcon } from '../icons'
-import { isValidChecksumAddress } from '@rsksmart/rsk-utils'
 import { TouchableOpacity } from 'react-native-gesture-handler'
 import Icon from 'react-native-vector-icons/Ionicons'
 import { rnsResolver } from '../../core/setup'
 import { colors, grid } from '../../styles'
-import { OutlineButton } from '../button/ButtonVariations'
+import { SecondaryButton2 } from '../button/SecondaryButton2'
+import { ContentPasteIcon, QRCodeIcon } from '../icons'
 import DeleteIcon from '../icons/DeleteIcon'
 import { QRCodeScanner } from '../QRCodeScanner'
 import {
   AddressValidationMessage,
   toChecksumAddress,
   validateAddress,
 } from './lib'
+import { sharedAddressStyles as styles } from './sharedAddressStyles'
 
 type AddressInputProps = {
   initialValue: string
@@ -222,7 +222,7 @@ export const AddressInput: React.FC<AddressInputProps> = ({
             {status.value}
           </Text>
           {status.type === 'CHECKSUM' && (
-            <OutlineButton
+            <SecondaryButton2
               testID={`${testID}.Button.Checksum`}
               title="Convert to correct checksum"
               onPress={() =>

src/components/button/ActiveButton.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PrimaryButton from './PrimaryButton'
 import SecondaryButton from './SecondaryButton'
-import { BaseButtonInterface } from './BaseButton'
+import { BaseButtonProps } from './BaseButton'
 import { MediumText } from '../typography'
 import { colors } from '../../styles'
 
@@ -10,7 +10,7 @@ type ActiveButtonType = {
   text: React.FC | string
   TextComp?: React.FC | undefined
 }
-const ActiveButton: React.FC<ActiveButtonType & BaseButtonInterface> = ({
+const ActiveButton: React.FC<ActiveButtonType & BaseButtonProps> = ({
   isActive,
   text,
   TextComp = MediumText,

src/components/button/BaseButton.tsx

@@ -1,29 +1,37 @@
 import React, { ReactNode } from 'react'
-import { TouchableHighlight, View, StyleSheet } from 'react-native'
+import { StyleSheet, TouchableHighlight, View } from 'react-native'
 
-export interface BaseButtonInterface {
-  onPress?: () => any
+export interface BaseButtonProps {
   disabled?: boolean
   testID?: string
   accessibilityLabel?: string
   style?: any
   underlayColor?: string
+  children?: ReactNode
+  onPress?: () => any
+  onShowUnderlay?: () => any
+  onHideUnderlay?: () => any
 }
 
-const BaseButton: React.FC<BaseButtonInterface & { children: ReactNode }> = ({
+const BaseButton: React.FC<BaseButtonProps> = ({
   children,
   style,
   underlayColor,
   disabled,
   testID,
   accessibilityLabel,
   onPress,
+  onShowUnderlay,
+  onHideUnderlay,
 }) => {
   return (
     <TouchableHighlight
       style={{ ...styles.container, ...style }}
       onPress={disabled ? undefined : onPress}
+      onShowUnderlay={onShowUnderlay}
+      onHideUnderlay={onHideUnderlay}
       underlayColor={underlayColor}
+      activeOpacity={1}
       disabled={disabled}
       testID={testID}
       accessibilityLabel={accessibilityLabel}>

src/components/button/ButtonVariations.tsx

@@ -1,43 +1,61 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
 
 import { colors } from '../../styles'
-import BaseButton, { BaseButtonInterface } from './BaseButton'
+import BaseButton, { BaseButtonProps } from './BaseButton'
 
-export interface ButtonInterface extends BaseButtonInterface {
+export interface ButtonProps extends BaseButtonProps {
   title?: string
   icon?: any
   accessibilityLabel?: string
+  buttonStyles?: any
 }
 
-const Button: React.FC<ButtonInterface & { buttonStyles: any }> = ({
+export const Button: React.FC<ButtonProps> = ({
   title,
   disabled,
   icon,
+  style,
   buttonStyles,
   ...props
 }) => {
+  const [isPressed, setIsPressed] = useState(false)
+
+  let baseButtonStyle = buttonStyles.button
+  if (isPressed) {
+    baseButtonStyle = buttonStyles.buttonPressed
+  } else if (disabled) {
+    baseButtonStyle = buttonStyles.buttonDisabled
+  }
+
+  let underlayColor = buttonStyles.buttonPressed?.backgroundColor
+  if (isPressed) {
+    if (disabled) {
+      underlayColor = buttonStyles.buttonDisabled.backgroundColor
+    } else {
+      underlayColor = buttonStyles.buttonActive.backgroundColor
+    }
+  }
+
+  let textStyle = buttonStyles.text
+  if (isPressed) {
+    textStyle = buttonStyles.textPressed
+  } else if (disabled) {
+    textStyle = buttonStyles.textDisabled
+  }
+
   return (
     <BaseButton
       {...props}
-      style={disabled ? buttonStyles.buttonDisabled : buttonStyles.button}
-      underlayColor={
-        disabled
-          ? buttonStyles.buttonDisabled.backgroundColor
-          : buttonStyles.buttonActive.backgroundColor
-      }
-      disabled={disabled}>
+      style={{ ...style, ...baseButtonStyle }}
+      underlayColor={underlayColor}
+      disabled={disabled}
+      onShowUnderlay={() => setIsPressed(true)}
+      onHideUnderlay={() => setIsPressed(false)}>
       <View style={sharedStyles.contentWrapper}>
-        {icon && <View style={sharedStyles.iconContainer}>{icon}</View>}
+        {icon && <View>{icon}</View>}
         {title && (
-          <Text
-            style={
-              disabled
-                ? { ...sharedStyles.text, ...buttonStyles.textDisabled }
-                : { ...sharedStyles.text, ...buttonStyles.text }
-            }>
-            {title}
-          </Text>
+          <Text style={{ ...sharedStyles.text, ...textStyle }}>{title}</Text>
         )}
       </View>
     </BaseButton>
@@ -51,38 +69,14 @@ const sharedStyles = StyleSheet.create({
     alignItems: 'center', // vertical align
     alignSelf: 'center', // horizontal align
   },
-  iconContainer: {},
   text: {
     textAlign: 'center',
-    fontWeight: '500',
     fontSize: 16,
   },
 })
 
-export const PurpleButton: React.FC<ButtonInterface> = props => (
-  <Button {...props} buttonStyles={purpleStyles} />
-)
-
-const purpleStyles = StyleSheet.create({
-  button: {
-    backgroundColor: colors.background.bustyBlue,
-  },
-  buttonDisabled: {
-    backgroundColor: colors.darkPurple2,
-  },
-  buttonActive: {
-    backgroundColor: '#7f77fa',
-  },
-  text: {
-    color: colors.lightPurple,
-  },
-  textDisabled: {
-    color: colors.gray,
-  },
-})
-
 // Blue Variation
-export const BlueButton: React.FC<ButtonInterface> = props => (
+export const BlueButton: React.FC<ButtonProps> = props => (
   <Button {...props} buttonStyles={blueStyles} />
 )
 
@@ -94,7 +88,7 @@ const blueStyles = StyleSheet.create({
     backgroundColor: '#251e79',
   },
   buttonActive: {
-    backgroundColor: '#7f77fa',
+    backgroundColor: colors.button.primary,
   },
   text: {
     color: colors.lightPurple,
@@ -104,7 +98,7 @@ const blueStyles = StyleSheet.create({
   },
 })
 
-export const DarkBlueButton: React.FC<ButtonInterface> = props => (
+export const DarkBlueButton: React.FC<ButtonProps> = props => (
   <Button {...props} buttonStyles={darkBlueStyles} />
 )
 
@@ -127,11 +121,11 @@ const darkBlueStyles = StyleSheet.create({
 })
 
 // White Variation
-export const WhiteButton: React.FC<ButtonInterface> = props => (
+export const WhiteButton: React.FC<ButtonProps> = props => (
   <Button {...props} buttonStyles={whiteStyles} />
 )
 
-export const WhiteTransparentButton: React.FC<ButtonInterface> = props => (
+export const WhiteTransparentButton: React.FC<ButtonProps> = props => (
   <Button {...props} buttonStyles={whiteTransparentStyles} />
 )
 
@@ -161,7 +155,7 @@ const whiteTransparentStyles = StyleSheet.create({
 })
 
 // Outline Variation
-export const OutlineButton: React.FC<ButtonInterface> = props => (
+export const OutlineButton: React.FC<ButtonProps> = props => (
   <Button {...props} buttonStyles={outlineStyles} />
 )
 
@@ -185,7 +179,7 @@ const outlineStyles = StyleSheet.create({
   },
 })
 
-export const OutlineBorderedButton: React.FC<ButtonInterface> = props => (
+export const OutlineBorderedButton: React.FC<ButtonProps> = props => (
   <Button {...props} buttonStyles={outlineBorderedStyles} />
 )
 
@@ -210,7 +204,7 @@ const outlineBorderedStyles = StyleSheet.create({
 })
 
 // gray button:
-export const GrayButton: React.FC<ButtonInterface> = props => (
+export const GrayButton: React.FC<ButtonProps> = props => (
   <Button {...props} buttonStyles={grayStyles} />
 )
 

src/components/button/PrimaryButton.tsx

@@ -1,13 +1,13 @@
 import React from 'react'
 import { StyleSheet } from 'react-native'
 import { colors } from '../../styles'
-import BaseButton, { BaseButtonInterface } from './BaseButton'
+import BaseButton, { BaseButtonProps } from './BaseButton'
 
 type PrimaryButtonType = {
   children: React.ReactNode
   style?: object
 }
-const PrimaryButton: React.FC<BaseButtonInterface & PrimaryButtonType> = ({
+const PrimaryButton: React.FC<BaseButtonProps & PrimaryButtonType> = ({
   children,
   style = {},
   ...props

src/components/button/PrimaryButton2.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { StyleSheet } from 'react-native'
+import { colors } from '../../styles'
+import { Button, ButtonProps } from './ButtonVariations'
+
+export const PrimaryButton2: React.FC<ButtonProps> = props => (
+  <Button {...props} buttonStyles={styles} />
+)
+
+const styles = StyleSheet.create({
+  button: {
+    backgroundColor: colors.background.bustyBlue,
+  },
+  buttonDisabled: {
+    backgroundColor: colors.button.primary,
+    opacity: 0.5,
+  },
+  buttonActive: {
+    backgroundColor: colors.button.primary,
+  },
+  buttonPressed: {
+    backgroundColor: colors.button.primaryPressed,
+    opacity: 0.8,
+  },
+  text: {
+    color: colors.lightPurple,
+  },
+  textDisabled: {
+    color: colors.lightPurple,
+    opacity: 0.5,
+  },
+  textPressed: {
+    color: colors.lightPurple,
+  },
+})

src/components/button/SecondaryButton.tsx

@@ -1,13 +1,13 @@
 import React from 'react'
 import { StyleSheet } from 'react-native'
 import { colors } from '../../styles'
-import BaseButton, { BaseButtonInterface } from './BaseButton'
+import BaseButton, { BaseButtonProps } from './BaseButton'
 
 type SecondaryButtonType = {
   children: React.ReactNode
   style?: object
 }
-const SecondaryButton: React.FC<BaseButtonInterface & SecondaryButtonType> = ({
+const SecondaryButton: React.FC<BaseButtonProps & SecondaryButtonType> = ({
   children,
   style = {},
   ...props

src/components/button/SecondaryButton2.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import { StyleSheet } from 'react-native'
+import { colors } from '../../styles'
+import { Button, ButtonProps } from './ButtonVariations'
+
+export const SecondaryButton2: React.FC<ButtonProps> = props => (
+  <Button {...props} buttonStyles={styles} />
+)
+
+const styles = StyleSheet.create({
+  button: {
+    borderWidth: 1,
+    borderColor: colors.lightPurple,
+    backgroundColor: colors.background.darkBlue,
+  },
+  buttonDisabled: {
+    borderWidth: 1,
+    borderColor: colors.lightPurple,
+    backgroundColor: colors.background.darkBlue,
+    opacity: 0.5,
+  },
+  buttonActive: {
+    backgroundColor: colors.button.secondary,
+  },
+  buttonPressed: {
+    borderWidth: 1,
+    borderColor: colors.lightPurple,
+    backgroundColor: colors.button.secondaryPressed,
+    opacity: 0.8,
+  },
+  text: {
+    color: colors.lightPurple,
+  },
+  textDisabled: {
+    color: colors.lightPurple,
+    opacity: 0.5,
+  },
+  textPressed: {
+    color: colors.button.secondary,
+  },
+})