Merge pull request #37 from daostack/user-profile-improvements

CM-123 User profile improvements

Author: markspereira

packages/common/App.js

@@ -7,12 +7,12 @@
  */
 
 import React, {useState, useEffect} from 'react';
-import {Image} from 'react-native';
+import {Image, StyleSheet} from 'react-native';
 import {ApolloProvider} from 'react-apollo';
 import {NavigationContainer} from '@react-navigation/native';
 import {createStackNavigator} from '@react-navigation/stack';
 import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
-import {colors} from './src/Theme';
+import {colors, text} from './src/Theme';
 import AsyncStorage from '@react-native-community/async-storage';
 
 import {
@@ -26,6 +26,7 @@ import {
   CreateAccount,
   CompleteAccount,
   EditProfile,
+  UserProfileReadMode,
   NativeBridgeTests,
 } from './src/Screens';
 import {ApolloClientConfig as client} from './src/Config';
@@ -38,6 +39,7 @@ const Stack = createStackNavigator();
 import {filterObjectByKeys} from './src/Util';
 import {userInfoFields} from './src/Stores/UserStore';
 import {observer, inject} from 'mobx-react';
+import Icon from './src/Assets/iconfont/Icon';
 
 const CommonHome = () => {
   return (
@@ -91,6 +93,7 @@ const CommonHome = () => {
       <Tab.Screen name="My feed" component={UserProfile} />
       <Tab.Screen name="Explore" component={CommonsList} />
       <Tab.Screen name="Profile" component={UserProfile} />
+      <Tab.Screen name="UserProfileReadMode" component={UserProfileReadMode} />
     </Tab.Navigator>
   );
 };
@@ -177,22 +180,60 @@ const App = ({userStore}) => {
       </NavigationContainer>
       */}
       <NavigationContainer>
-        <Stack.Navigator>
+        <Stack.Navigator
+          screenOptions={{
+            headerStyle: styles.headerStyle,
+            headerTitleStyle: styles.headerTitleStyle,
+            headerTintColor: colors.black,
+            headerBackTitleVisible: false,
+            headerBackImage: () => <Icon name="left-arrow" size={32} />,
+          }}>
           <Stack.Screen
             name="CommonHome"
             component={CommonHome}
             options={{headerShown: false}}
           />
           <Stack.Screen name="Profile" component={UserProfile} />
-          <Stack.Screen name="EditProfile" component={EditProfile} />
+          <Stack.Screen
+            options={{
+              title: 'Edit my profile',
+            }}
+            name="EditProfile"
+            component={EditProfile}
+          />
           <Stack.Screen name="CompleteAccount" component={CompleteAccount} />
           <Stack.Screen name="CreateAccount" component={CreateAccount} />
-          <Stack.Screen name="MyWallet" component={MyWallet} />
+          <Stack.Screen
+            options={{
+              title: 'My wallet',
+            }}
+            name="MyWallet"
+            component={MyWallet}
+          />
           <Stack.Screen name="HUDTest" component={HUDTest} />
+          <Stack.Screen
+            name="UserProfileReadMode"
+            component={UserProfileReadMode}
+          />
         </Stack.Navigator>
       </NavigationContainer>
     </ApolloProvider>
   );
 };
 
+const styles = StyleSheet.create({
+  headerStyle: {
+    borderWidth: 0,
+    borderBottomWidth: 0,
+    shadowRadius: 0,
+    shadowOffset: {
+      height: 0,
+    },
+  },
+
+  headerTitleStyle: {
+    ...text.h4Black,
+  },
+});
+
 export default inject('userStore')(observer(App));

packages/common/iconfont.json

@@ -1,5 +1,5 @@
 {
-  "symbol_url": "http://at.alicdn.com/t/font_1704341_x3cvyngts8.js",
+  "symbol_url": "http://at.alicdn.com/t/font_1704341_59qxjs4i588.js",
   "use_typescript": false,
   "save_dir": "./src/Assets/iconfont",
   "trim_icon_prefix": "icon",

packages/common/src/Assets/iconfont/Icon.d.ts

@@ -6,7 +6,7 @@ import { ViewProps } from 'react-native';
 import { GProps } from 'react-native-svg';
 
 interface Props extends GProps, ViewProps {
-  name: 'approved-' | 'declined-' | 'close' | 'account-selected' | 'commons-selected' | 'check-' | 'edit-' | 'follow' | 'feed-selected' | 'follow-' | 'following-' | 'group' | 'following' | 'menu' | 'report-' | 'picture' | 'pencil' | 'save' | 'verification' | 'wallet' | 'left-arrow' | 'common' | 'right-arrow' | 'left-arrow-16' | 'account-place-holder' | 'feed' | 'google' | 'account';
+  name: 'group1' | 'alert' | 'wallet1' | 'account-place-holder2' | 'save1' | 'agenda' | 'dao-general-info' | 'funds' | 'style' | 'account-place-holder1' | 'approved' | 'declined' | 'close' | 'account-selected' | 'commons-selected' | 'check' | 'edit' | 'follow' | 'feed-selected' | 'group' | 'following' | 'menu' | 'report' | 'picture' | 'pencil' | 'save' | 'verification' | 'wallet' | 'left-arrow' | 'common' | 'right-arrow' | 'account-place-holder' | 'feed' | 'google' | 'account';
   size?: number;
   color?: string | string[];
 }

packages/common/src/Assets/iconfont/Icon.js

@@ -2,15 +2,25 @@
 
 import React from 'react';
 
+import Icongroup1 from './Icongroup1';
+import Iconalert from './Iconalert';
+import Iconwallet1 from './Iconwallet1';
+import IconaccountPlaceHolder2 from './IconaccountPlaceHolder2';
+import Iconsave1 from './Iconsave1';
+import Iconagenda from './Iconagenda';
+import IcondaoGeneralInfo from './IcondaoGeneralInfo';
+import Iconfunds from './Iconfunds';
+import Iconstyle from './Iconstyle';
+import IconaccountPlaceHolder1 from './IconaccountPlaceHolder1';
 import Iconapproved from './Iconapproved';
 import Icondeclined from './Icondeclined';
 import Iconclose from './Iconclose';
 import IconaccountSelected from './IconaccountSelected';
 import IconcommonsSelected from './IconcommonsSelected';
 import Iconcheck from './Iconcheck';
 import Iconedit from './Iconedit';
-import IconfeedSelected from './IconfeedSelected';
 import Iconfollow from './Iconfollow';
+import IconfeedSelected from './IconfeedSelected';
 import Icongroup from './Icongroup';
 import Iconfollowing from './Iconfollowing';
 import Iconmenu from './Iconmenu';
@@ -23,43 +33,58 @@ import Iconwallet from './Iconwallet';
 import IconleftArrow from './IconleftArrow';
 import Iconcommon from './Iconcommon';
 import IconrightArrow from './IconrightArrow';
-import IconleftArrow16 from './IconleftArrow16';
 import IconaccountPlaceHolder from './IconaccountPlaceHolder';
 import Iconfeed from './Iconfeed';
 import Icongoogle from './Icongoogle';
 import Iconaccount from './Iconaccount';
 
 export const Icon = ({ name, ...rest }) => {
   switch (name) {
-    case 'approved-':
+    case 'group1':
+      return <Icongroup1 {...rest} />;
+    case 'alert':
+      return <Iconalert {...rest} />;
+    case 'wallet1':
+      return <Iconwallet1 {...rest} />;
+    case 'account-place-holder2':
+      return <IconaccountPlaceHolder2 {...rest} />;
+    case 'save1':
+      return <Iconsave1 {...rest} />;
+    case 'agenda':
+      return <Iconagenda {...rest} />;
+    case 'dao-general-info':
+      return <IcondaoGeneralInfo {...rest} />;
+    case 'funds':
+      return <Iconfunds {...rest} />;
+    case 'style':
+      return <Iconstyle {...rest} />;
+    case 'account-place-holder1':
+      return <IconaccountPlaceHolder1 {...rest} />;
+    case 'approved':
       return <Iconapproved {...rest} />;
-    case 'declined-':
+    case 'declined':
       return <Icondeclined {...rest} />;
     case 'close':
       return <Iconclose {...rest} />;
     case 'account-selected':
       return <IconaccountSelected {...rest} />;
     case 'commons-selected':
       return <IconcommonsSelected {...rest} />;
-    case 'check-':
+    case 'check':
       return <Iconcheck {...rest} />;
-    case 'edit-':
+    case 'edit':
       return <Iconedit {...rest} />;
     case 'follow':
       return <Iconfollow {...rest} />;
     case 'feed-selected':
       return <IconfeedSelected {...rest} />;
-    case 'follow-':
-      return <Iconfollow {...rest} />;
-    case 'following-':
-      return <Iconfollowing {...rest} />;
     case 'group':
       return <Icongroup {...rest} />;
     case 'following':
       return <Iconfollowing {...rest} />;
     case 'menu':
       return <Iconmenu {...rest} />;
-    case 'report-':
+    case 'report':
       return <Iconreport {...rest} />;
     case 'picture':
       return <Iconpicture {...rest} />;
@@ -77,8 +102,6 @@ export const Icon = ({ name, ...rest }) => {
       return <Iconcommon {...rest} />;
     case 'right-arrow':
       return <IconrightArrow {...rest} />;
-    case 'left-arrow-16':
-      return <IconleftArrow16 {...rest} />;
     case 'account-place-holder':
       return <IconaccountPlaceHolder {...rest} />;
     case 'feed':

packages/common/src/Assets/iconfont/IconaccountPlaceHolder1.d.ts

@@ -0,0 +1,15 @@
+/* eslint-disable */
+
+import { FunctionComponent } from 'react';
+// Don't forget to install package: @types/react-native
+import { ViewProps } from 'react-native';
+import { GProps } from 'react-native-svg';
+
+interface Props extends GProps, ViewProps {
+  size?: number;
+  color?: string | string[];
+}
+
+export declare const IconaccountPlaceHolder1: FunctionComponent<Props>;
+
+export default IconaccountPlaceHolder1;

packages/common/src/Assets/iconfont/IconaccountPlaceHolder1.js

@@ -0,0 +1,34 @@
+/* eslint-disable */
+
+import React from 'react';
+import { Svg, Path } from 'react-native-svg';
+import { getIconColor } from './helper';
+
+export const IconaccountPlaceHolder1 = ({ size, color, ...rest }) => {
+  return (
+    <Svg viewBox="0 0 1024 1024" width={size} height={size} {...rest}>
+      <Path
+        d="M650.8416 677.9904c-1.7728-1.76-227.7056 25.6384-227.7056 25.6384-34.5536 23.7952-64 56.5312-81.184 91.3728v0.0128c-5.824 9.792-9.1776 23.2-9.1776 39.5968v157.4592l54.9888 31.744a237.152 237.152 0 0 0 184.48 22.4384A208.128 208.128 0 0 0 696.96 946.2656v-157.4592c0-39.424-19.3664-84-46.112-110.816z"
+        fill={getIconColor(color, 0, '#CAECFE')}
+      />
+      <Path
+        d="M512.1024 734.08v0.0128l-48.768-27.9936a165.824 165.824 0 0 1-40.192-32.5312v44.608l12.7104 3.84a488.1792 488.1792 0 0 0 86.4256 17.7664 78.4384 78.4384 0 0 1-10.176-5.696z"
+        fill={getIconColor(color, 1, '#FDE8F7')}
+      />
+      <Path
+        d="M592.3584 508.0704a139.8912 139.8912 0 0 1-58.816 66.432l-8.1472 4.7104a135.8464 135.8464 0 0 1-81.5872 17.504c-10.3488-5.9776-23.2704 1.4912-23.2704 13.4336 0 13.9008 7.424 26.752 19.456 33.7088l3.8144 2.2016-20.6592 27.52a165.6896 165.6896 0 0 0 40.1856 32.512l48.768 28v-0.0128c22.4512 15.0208 52.736 18.112 79.4496 2.688a164.064 164.064 0 0 0 82.0352-142.0928V493.6512l-29.248 16.8832a48.1408 48.1408 0 0 1-51.9808-2.464z"
+        fill={getIconColor(color, 2, '#FFF6FC')}
+      />
+      <Path
+        d="M691.8656 456.3072a115.168 115.168 0 0 0-79.3664-85.12l-6.6944-1.9968c-1.8496-0.6656-3.712-1.2928-5.6064-1.8496a204.224 204.224 0 0 0-7.2-1.984l-0.0832-0.0192c-69.824-17.9456-163.3792-4.8896-209.9392 84.9152-65.8368 126.9952 40.16 223.3344 40.16 223.3344l20.672-27.5264-3.808-2.1952a38.9312 38.9312 0 0 1-19.4624-33.7088c0-11.9424 12.928-19.4112 23.2704-13.44 28.352 2.88 56.896-3.2448 81.5872-17.4976l8.1536-4.7104a139.9104 139.9104 0 0 0 58.8096-66.432 48.16 48.16 0 0 0 51.9872 2.464l29.248-16.8832v-0.4096l3.5456-2.176a32.4096 32.4096 0 0 0 14.7264-34.752z"
+        fill={getIconColor(color, 3, '#40C7E0')}
+      />
+    </Svg>
+  );
+};
+
+IconaccountPlaceHolder1.defaultProps = {
+  size: 18,
+};
+
+export default IconaccountPlaceHolder1;

packages/common/src/Assets/iconfont/IconaccountPlaceHolder2.d.ts

@@ -0,0 +1,15 @@
+/* eslint-disable */
+
+import { FunctionComponent } from 'react';
+// Don't forget to install package: @types/react-native
+import { ViewProps } from 'react-native';
+import { GProps } from 'react-native-svg';
+
+interface Props extends GProps, ViewProps {
+  size?: number;
+  color?: string | string[];
+}
+
+export declare const IconaccountPlaceHolder2: FunctionComponent<Props>;
+
+export default IconaccountPlaceHolder2;

packages/common/src/Assets/iconfont/IconaccountPlaceHolder2.js

@@ -0,0 +1,34 @@
+/* eslint-disable */
+
+import React from 'react';
+import { Svg, Path } from 'react-native-svg';
+import { getIconColor } from './helper';
+
+export const IconaccountPlaceHolder2 = ({ size, color, ...rest }) => {
+  return (
+    <Svg viewBox="0 0 1024 1024" width={size} height={size} {...rest}>
+      <Path
+        d="M650.8416 677.9904c-1.7728-1.76-227.7056 25.6384-227.7056 25.6384-34.5536 23.7952-64 56.5312-81.184 91.3728v0.0128c-5.824 9.792-9.1776 23.2-9.1776 39.5968v157.4592l54.9888 31.744a237.152 237.152 0 0 0 184.48 22.4384A208.128 208.128 0 0 0 696.96 946.2656v-157.4592c0-39.424-19.3664-84-46.112-110.816z"
+        fill={getIconColor(color, 0, '#CAECFE')}
+      />
+      <Path
+        d="M512.1024 734.08v0.0128l-48.768-27.9936a165.824 165.824 0 0 1-40.192-32.5312v44.608l12.7104 3.84a488.1792 488.1792 0 0 0 86.4256 17.7664 78.4384 78.4384 0 0 1-10.176-5.696z"
+        fill={getIconColor(color, 1, '#FDE8F7')}
+      />
+      <Path
+        d="M592.3584 508.0704a139.8912 139.8912 0 0 1-58.816 66.432l-8.1472 4.7104a135.8464 135.8464 0 0 1-81.5872 17.504c-10.3488-5.9776-23.2704 1.4912-23.2704 13.4336 0 13.9008 7.424 26.752 19.456 33.7088l3.8144 2.2016-20.6592 27.52a165.6896 165.6896 0 0 0 40.1856 32.512l48.768 28v-0.0128c22.4512 15.0208 52.736 18.112 79.4496 2.688a164.064 164.064 0 0 0 82.0352-142.0928V493.6512l-29.248 16.8832a48.1408 48.1408 0 0 1-51.9808-2.464z"
+        fill={getIconColor(color, 2, '#FFF6FC')}
+      />
+      <Path
+        d="M691.8656 456.3072a115.168 115.168 0 0 0-79.3664-85.12l-6.6944-1.9968c-1.8496-0.6656-3.712-1.2928-5.6064-1.8496a204.224 204.224 0 0 0-7.2-1.984l-0.0832-0.0192c-69.824-17.9456-163.3792-4.8896-209.9392 84.9152-65.8368 126.9952 40.16 223.3344 40.16 223.3344l20.672-27.5264-3.808-2.1952a38.9312 38.9312 0 0 1-19.4624-33.7088c0-11.9424 12.928-19.4112 23.2704-13.44 28.352 2.88 56.896-3.2448 81.5872-17.4976l8.1536-4.7104a139.9104 139.9104 0 0 0 58.8096-66.432 48.16 48.16 0 0 0 51.9872 2.464l29.248-16.8832v-0.4096l3.5456-2.176a32.4096 32.4096 0 0 0 14.7264-34.752z"
+        fill={getIconColor(color, 3, '#40C7E0')}
+      />
+    </Svg>
+  );
+};
+
+IconaccountPlaceHolder2.defaultProps = {
+  size: 18,
+};
+
+export default IconaccountPlaceHolder2;

…src/Assets/iconfont/IconleftArrow16.d.ts …mmon/src/Assets/iconfont/Iconagenda.d.tspackages/common/src/Assets/iconfont/IconleftArrow16.d.ts renamed to packages/common/src/Assets/iconfont/Iconagenda.d.ts packages/common/src/Assets/iconfont/IconleftArrow16.d.ts renamed to packages/common/src/Assets/iconfont/Iconagenda.d.ts

@@ -10,6 +10,6 @@ interface Props extends GProps, ViewProps {
   color?: string | string[];
 }
 
-export declare const IconleftArrow16: FunctionComponent<Props>;
+export declare const Iconagenda: FunctionComponent<Props>;
 
-export default IconleftArrow16;
+export default Iconagenda;

packages/common/src/Assets/iconfont/Iconagenda.js

@@ -0,0 +1,22 @@
+/* eslint-disable */
+
+import React from 'react';
+import { Svg, Path } from 'react-native-svg';
+import { getIconColor } from './helper';
+
+export const Iconagenda = ({ size, color, ...rest }) => {
+  return (
+    <Svg viewBox="0 0 1024 1024" width={size} height={size} {...rest}>
+      <Path
+        d="M855.637333 682.88h-58.325333V212.096A126.037333 126.037333 0 0 0 671.573333 85.333333H162.218667c-2.261333 0-4.48 0-6.741334 1.152-69.546667 7.893333-118.912 70.144-112.213333 140.330667 6.741333 58.837333 52.736 106.368 112.213333 113.152 2.261333 0 4.48 1.152 6.741334 1.152h6.741333v471.936C170.069333 882.090667 226.133333 938.666667 294.613333 938.666667h561.066667A126.037333 126.037333 0 0 0 981.333333 811.946667a125.866667 125.866667 0 0 0-125.696-129.066667zM194.389333 254.762667C157.354667 254.762667 128 226.730667 128 191.402667 128 156.032 157.354667 128 194.389333 128H640a133.888 133.888 0 0 0 0 128H194.389333v-1.237333zM682.666667 725.333333H256v-85.333333h426.666667v85.333333z m0-128H256v-85.333333h426.666667v85.333333z m0-128H256V384h426.666667v85.333333z m174.08 399.146667c-32.512 0-58.325333-26.026667-58.325334-58.837333v-58.88h58.368c32.512 0 58.325333 26.026667 58.325334 58.88 0 32.853333-25.813333 58.88-58.325334 58.88z"
+        fill={getIconColor(color, 0, '#3CC7E1')}
+      />
+    </Svg>
+  );
+};
+
+Iconagenda.defaultProps = {
+  size: 18,
+};
+
+export default Iconagenda;