UI cleanup (#798)

* Match ChangeWalletSheet to spec, show dividers when list is scrollable, misc. cleanup * Allow hiding sheet handle * Reposition wallet name * Improve WalletConnect sheets, add big SheetActionButton, misc. fixes * Use avatarColor for ProfileHeaderButton shadow * Fix CoinCheckButton shadow
rainbow-me · Jun 18, 2020 · e5e16ca · e5e16ca
1 parent 714d969
commit e5e16ca
Show file tree

Hide file tree

Showing 17 changed files with 142 additions and 82 deletions.
diff --git a/ios/TransactionListViewHeader.xib b/ios/TransactionListViewHeader.xib
@@ -136,7 +136,7 @@
                     </accessibility>
                 </view>
                 <view contentMode="scaleToFill" horizontalHuggingPriority="1000" translatesAutoresizingMaskIntoConstraints="NO" id="5Zx-ay-mQu" userLabel="Account Name View">
-                    <rect key="frame" x="0.0" y="76" width="375" height="31"/>
+                    <rect key="frame" x="0.0" y="78" width="375" height="31"/>
                     <subviews>
                         <label opaque="NO" userInteractionEnabled="NO" contentMode="left" text="0xDEADBEEF123Ab28Dfe3" textAlignment="justified" lineBreakMode="tailTruncation" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="LxS-BQ-P6T">
                             <rect key="frame" x="29.666666666666657" y="0.3333333333333286" width="287.66666666666674" height="31"/>
@@ -182,7 +182,7 @@
             </subviews>
             <color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
             <constraints>
-                <constraint firstItem="5Zx-ay-mQu" firstAttribute="top" secondItem="DP6-u7-aX1" secondAttribute="top" constant="76" id="LI0-hm-FD5"/>
+                <constraint firstItem="5Zx-ay-mQu" firstAttribute="top" secondItem="DP6-u7-aX1" secondAttribute="top" constant="78" id="LI0-hm-FD5"/>
                 <constraint firstItem="5Zx-ay-mQu" firstAttribute="centerX" secondItem="DP6-u7-aX1" secondAttribute="centerX" id="RYZ-rI-jAt"/>
             </constraints>
             <nil key="simulatedTopBarMetrics"/>

diff --git a/src/components/change-wallet/AddressRow.js b/src/components/change-wallet/AddressRow.js
@@ -127,7 +127,7 @@ export default function AddressRow({ data, editMode, onPress, onEditWallet }) {
         scaleTo={editMode ? 1 : 0.98}
       >
         <Row align="center">
-          <Row align="center" flex={1}>
+          <Row align="center" flex={1} height={59}>
             <ContactAvatar
               color={accountColor}
               marginRight={10}

diff --git a/src/components/change-wallet/WalletList.js b/src/components/change-wallet/WalletList.js
@@ -11,6 +11,7 @@ import { Transition, Transitioning } from 'react-native-reanimated';
 import styled from 'styled-components/primitives';
 import WalletTypes from '../../helpers/walletTypes';
 import { colors, position } from '../../styles';
+import Divider from '../Divider';
 import { EmptyAssetList } from '../asset-list';
 import { Column } from '../layout';
 import AddressRow from './AddressRow';
@@ -57,18 +58,30 @@ const EmptyWalletList = styled(EmptyAssetList).attrs({
   padding-top: ${listTopPadding};
 `;
 
-const WalletFlatList = styled(FlatList).attrs({
+const WalletFlatList = styled(FlatList).attrs(({ showDividers }) => ({
+  contentContainerStyle: {
+    paddingBottom: showDividers ? 9.5 : 0,
+    paddingTop: listTopPadding,
+  },
   getItemLayout,
   keyExtractor,
   removeClippedSubviews: true,
-})`
+}))`
   flex: 1;
   min-height: 1;
-  padding-top: ${listTopPadding};
+`;
+
+const WalletListDivider = styled(Divider).attrs({
+  color: colors.rowDividerExtraLight,
+  inset: [0, 15],
+})`
+  margin-bottom: 1;
+  margin-top: -1;
 `;
 
 const WalletListFooter = styled(Column)`
   padding-bottom: 6;
+  padding-top: 4;
 `;
 
 export default function WalletList({
@@ -82,6 +95,7 @@ export default function WalletList({
   onPressImportSeedPhrase,
   onChangeAccount,
   scrollEnabled,
+  showDividers,
 }) {
   const [rows, setRows] = useState([]);
   const [ready, setReady] = useState(false);
@@ -216,7 +230,9 @@ export default function WalletList({
             ref={scrollView}
             renderItem={renderItem}
             scrollEnabled={scrollEnabled}
+            showDividers={showDividers}
           />
+          {showDividers && <WalletListDivider />}
           <WalletListFooter>
             <WalletOption
               editMode={editMode}

diff --git a/src/components/change-wallet/WalletOption.js b/src/components/change-wallet/WalletOption.js
@@ -7,9 +7,10 @@ import { Text } from '../text';
 
 const Container = styled(Row).attrs({
   align: 'center',
-  scaleTo: 0.98,
+  scaleTo: 0.97,
 })`
-  ${padding(15, 19)};
+  ${padding(0, 19)};
+  height: 49;
 `;
 
 const WalletOption = ({ editMode, label, onPress }) => (

diff --git a/src/components/coin-icon/RequestVendorLogoIcon.js b/src/components/coin-icon/RequestVendorLogoIcon.js
@@ -14,10 +14,7 @@ const RVLIShadows = {
     [0, 4, 6, colors.dark, 0.04],
     [0, 1, 3, colors.dark, 0.08],
   ],
-  large: [
-    [0, 8, 11, colors.dark, 0.04],
-    [0, 2, 6, colors.dark, 0.08],
-  ],
+  large: [[0, 6, 10, colors.dark, 0.14]],
 };
 
 const Content = styled(Centered)`

diff --git a/src/components/coin-row/CoinCheckButton.js b/src/components/coin-row/CoinCheckButton.js
@@ -30,7 +30,7 @@ const CircleOutline = styled.View`
 const CheckmarkBackground = styled.View`
   ${borders.buildCircle(22)}
   ${padding(4.5)}
-  ${shadow.build(0, 4, 6, colors.appleBlue, 0.4)}
+  ${shadow.build(0, 4, 12, colors.appleBlue, 0.4)}
   background-color: ${colors.appleBlue};
 `;
 

diff --git a/src/components/contacts/ContactAvatar.js b/src/components/contacts/ContactAvatar.js
@@ -17,28 +17,27 @@ const sizeTypes = {
   small: 'small',
 };
 
-const sizeConfigs = {
-  large: {
-    dimensions: 60,
-    shadows: defaultShadow,
-    textSize: 'bigger',
-  },
-  medium: {
-    dimensions: 40,
-    shadows: defaultShadow,
-    textSize: 'larger',
-  },
-  small: {
-    dimensions: 34,
-    shadows: [
-      [0, 3, 5, colors.dark, 0.2],
-      [0, 6, 10, colors.dark, 0.14],
-    ],
-    textSize: 'large',
-  },
-};
-
 const ContactAvatar = ({ color, size = sizeTypes.medium, value, ...props }) => {
+  const sizeConfigs = {
+    large: {
+      dimensions: 60,
+      shadows: defaultShadow,
+      textSize: 'bigger',
+    },
+    medium: {
+      dimensions: 40,
+      shadows: defaultShadow,
+      textSize: 'larger',
+    },
+    small: {
+      dimensions: 34,
+      shadows: [
+        [0, 3, 5, colors.dark, 0.14],
+        [0, 6, 10, colors.avatarColor[color] || color, 0.2],
+      ],
+      textSize: 'large',
+    },
+  };
   const { dimensions, shadows, textSize } = sizeConfigs[size];
 
   return (

diff --git a/src/components/profile/ProfileMasthead.js b/src/components/profile/ProfileMasthead.js
@@ -30,8 +30,8 @@ const AccountName = styled(TruncatedText).attrs({
   weight: 'bold',
 })`
   height: 33;
-  margin-top: -3;
-  margin-bottom: 3;
+  margin-top: -1;
+  margin-bottom: 1;
   max-width: ${maxAddressWidth};
   padding-right: 6;
 `;
@@ -44,7 +44,7 @@ const AddCashButton = styled(RainbowButton).attrs({
 
 const DropdownArrow = styled(Centered)`
   height: 9;
-  margin-top: 9;
+  margin-top: 11;
   width: 21;
 `;
 

diff --git a/src/components/savings/SavingsListRow.js b/src/components/savings/SavingsListRow.js
@@ -38,7 +38,6 @@ const SavingsListRowGradient = React.memo(
       borderRadius={49}
       colors={['#FFFFFF', '#F7F9FA']}
       end={{ x: 0.5, y: 1 }}
-      opacity={0.1}
       pointerEvents="none"
       start={{ x: 0.5, y: 0 }}
       style={position.coverAsObject}

diff --git a/src/components/sheet/Sheet.js b/src/components/sheet/Sheet.js
@@ -9,7 +9,7 @@ import TouchableBackdrop from '../TouchableBackdrop';
 import { Centered, Column } from '../layout';
 import SheetHandle from './SheetHandle';
 
-const Sheet = ({ borderRadius, children }) => {
+const Sheet = ({ borderRadius, children, hideHandle }) => {
   const { width } = useDimensions();
   const { goBack } = useNavigation();
   const insets = useSafeArea();
@@ -24,7 +24,7 @@ const Sheet = ({ borderRadius, children }) => {
         width="100%"
       >
         <Centered paddingBottom={7} paddingTop={6}>
-          <SheetHandle />
+          {!hideHandle && <SheetHandle />}
         </Centered>
         {children}
       </Column>
@@ -35,6 +35,7 @@ const Sheet = ({ borderRadius, children }) => {
 Sheet.propTypes = {
   borderRadius: PropTypes.number,
   children: PropTypes.node,
+  hideHandle: PropTypes.bool,
 };
 
 Sheet.defaultProps = {

diff --git a/src/components/sheet/sheet-action-buttons/SheetActionButton.js b/src/components/sheet/sheet-action-buttons/SheetActionButton.js
@@ -1,4 +1,5 @@
 import React, { useMemo } from 'react';
+import LinearGradient from 'react-native-linear-gradient';
 import ShadowStack from 'react-native-shadow-stack';
 import styled from 'styled-components/primitives';
 import { colors, padding, position } from '../../../styles';
@@ -7,28 +8,46 @@ import { Icon } from '../../icons';
 import { Centered, InnerBorder, RowWithMargins } from '../../layout';
 import { Emoji, Text } from '../../text';
 
-const Button = styled(Centered).attrs({
-  scaleTo: 0.96,
-})`
+const Button = styled(Centered).attrs(({ size }) => ({
+  scaleTo: size === 'big' ? 0.9 : 0.96,
+}))`
   flex: 1;
+  height: ${({ size }) => (size === 'big' ? 56 : 46)};
   z-index: 1;
 `;
 
 const Content = styled(RowWithMargins).attrs({
   align: 'center',
   margin: 4,
 })`
-  ${padding(10, 14, 14, 15)}
-  height: 46;
+  ${padding(10, 15, 14)}
   z-index: 1;
 `;
 
+const neverRerender = () => true;
+// eslint-disable-next-line react/display-name
+const WhiteButtonGradient = React.memo(
+  () => (
+    <LinearGradient
+      borderRadius={49}
+      colors={['#FFFFFF', '#F7F9FA']}
+      end={{ x: 0.5, y: 1 }}
+      opacity={0.5}
+      pointerEvents="none"
+      start={{ x: 0.5, y: 0 }}
+      style={position.coverAsObject}
+    />
+  ),
+  neverRerender
+);
+
 const SheetActionButton = ({
-  borderRadius = 50,
+  borderRadius = 56,
   color = colors.appleBlue,
   emoji,
   icon,
   label,
+  size,
   textColor = colors.white,
   ...props
 }) => {
@@ -41,21 +60,28 @@ const SheetActionButton = ({
   );
 
   return (
-    <Button as={ButtonPressAnimation} {...props}>
+    <Button as={ButtonPressAnimation} size={size} {...props}>
       <ShadowStack
         {...position.coverAsObject}
         backgroundColor={color}
         borderRadius={borderRadius}
         shadows={shadowsForButtonColor}
-      />
-      <Content>
+      >
+        {color === colors.white && <WhiteButtonGradient />}
+        {color !== colors.white && <InnerBorder radius={borderRadius} />}
+      </ShadowStack>
+      <Content size={size}>
         {emoji && <Emoji lineHeight={23} name={emoji} size="medium" />}
         {icon && <Icon color="white" name={icon} size={18} height={18} />}
-        <Text align="center" color={textColor} size="large" weight="semibold">
+        <Text
+          align="center"
+          color={textColor}
+          size={size === 'big' ? 'larger' : 'large'}
+          weight="semibold"
+        >
           {label}
         </Text>
       </Content>
-      <InnerBorder radius={borderRadius} />
     </Button>
   );
 };

diff --git a/src/screens/ChangeWalletSheet.js b/src/screens/ChangeWalletSheet.js
@@ -4,6 +4,7 @@ import { InteractionManager } from 'react-native';
 import ReactNativeHapticFeedback from 'react-native-haptic-feedback';
 import { useDispatch } from 'react-redux';
 import styled from 'styled-components';
+import Divider from '../components/Divider';
 import { ButtonPressAnimation } from '../components/animations';
 import WalletList from '../components/change-wallet/WalletList';
 import { Column } from '../components/layout';
@@ -31,7 +32,7 @@ import Routes from './Routes/routesNames';
 
 const deviceHeight = deviceUtils.dimensions.height;
 const footerHeight = 111;
-const listPaddingBottom = 17;
+const listPaddingBottom = 6;
 const walletRowHeight = 59;
 const maxListHeight = deviceHeight - 220;
 
@@ -71,12 +72,16 @@ const ChangeWalletSheet = () => {
 
   const walletRowCount = getWalletRowCount(wallets);
 
+  let headerHeight = 30;
   let listHeight =
     walletRowHeight * walletRowCount + footerHeight + listPaddingBottom;
   let scrollEnabled = false;
+  let showDividers = false;
   if (listHeight > maxListHeight) {
+    headerHeight = 42;
     listHeight = maxListHeight;
     scrollEnabled = true;
+    showDividers = true;
   }
 
   const onChangeAccount = useCallback(
@@ -349,8 +354,11 @@ const ChangeWalletSheet = () => {
 
   return (
     <Sheet borderRadius={30}>
-      <Column height={42} justify="space-between">
+      <Column height={headerHeight} justify="space-between">
         <SheetTitle>Wallets</SheetTitle>
+        {showDividers && (
+          <Divider color={colors.rowDividerExtraLight} inset={[0, 15]} />
+        )}
       </Column>
       <EditButton onPress={toggleEditMode}>
         <Text
@@ -375,6 +383,7 @@ const ChangeWalletSheet = () => {
         onPressAddAccount={onPressAddAccount}
         onPressImportSeedPhrase={onPressImportSeedPhrase}
         scrollEnabled={scrollEnabled}
+        showDividers={showDividers}
       />
     </Sheet>
   );

diff --git a/src/screens/ProfileScreen.js b/src/screens/ProfileScreen.js
@@ -112,7 +112,7 @@ export default function ProfileScreen({ navigation }) {
       {isCreatingAccount && (
         <LoadingOverlay
           paddingTop={sheetVerticalOffset}
-          title="Creating account..."
+          title="Creating wallet..."
         />
       )}
     </ProfileScreenPage>