Merge pull request #2794 from ecency/sa/login-screen-update

[Improve] Login Screen UI Update
ecency · Dec 11, 2023 · 11585d5 · 11585d5
2 parents f26d792 + 33e3744
commit 11585d5
Show file tree

Hide file tree

Showing 13 changed files with 388 additions and 245 deletions.
diff --git a/src/assets/svgs/hive-signer-icon.tsx b/src/assets/svgs/hive-signer-icon.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import { SvgXml } from 'react-native-svg';
+
+const xml = `
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   id="svg639"
+   version="1.1"
+   viewBox="0 0 110 131"
+   height="131px"
+   width="110px">
+  <metadata
+     id="metadata645">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>steemconnect</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs643" />
+  <title
+     id="title631">hivesigner</title>
+  <g
+     id="g637"
+     fillRule="evenodd"
+     fill="none"
+     strokeWidth="1"
+     stroke="none">
+    <g
+       style="fill:#e31337;fill-opacity:1"
+       id="g635"
+       fill="#FFFFFF">
+      <path
+         style="fill:#e31337;fill-opacity:1"
+         id="path633"
+         d="M98.5416667,69.9233063 L98.5416667,45.8870172 L0,45.8870172 L0,0 L110,0 L110,22.9435086 L98.5416667,22.9435086 L98.5416667,11.4717543 L11.4583333,11.4717543 L11.4583333,34.4152629 L110,34.4152629 L110,71.7557407 C109.814829,89.9952801 99.6177682,104.956632 82.7527664,116.860728 C76.7961987,121.065148 70.4063912,124.587232 64.0012261,127.457262 C61.7434474,128.468929 59.6383537,129.328634 57.7397369,130.039339 C56.5694641,130.477405 55.6341636,130.79975 55.217168,130.930175 L54.9939202,131 L54.770964,130.929247 C54.3038614,130.781016 53.4195598,130.475943 52.2525224,130.038871 C50.3537481,129.327755 48.2495815,128.46815 45.9926252,127.45661 C39.5881896,124.586219 33.1997658,121.06434 27.2442254,116.860148 C10.5407495,105.06867 0.379911508,90.2779437 0.0104347976,72.2720521 L0,72.2720521 L0,57.3587715 L11.4583333,57.3587715 L11.4583333,69.9233063 C11.4583333,83.7531618 18.6794796,95.3214487 31.0665488,104.779305 C35.6407321,108.271816 40.6776939,111.281674 45.8998806,113.824407 C49.3619815,115.510138 52.4791717,116.790221 55.00154,117.681377 C57.521117,116.791558 60.639999,115.510854 64.1022301,113.825035 C69.3240535,111.28244 74.3609709,108.272494 78.9351124,104.77987 C91.3219921,95.3217663 98.5416667,83.7531543 98.5416667,69.9233063 Z" />
+    </g>
+  </g>
+</svg>
+`;
+export default () => <SvgXml xml={xml} width={20} height={20} />;
diff --git a/src/assets/svgs/index.ts b/src/assets/svgs/index.ts
@@ -0,0 +1 @@
+export { default as HiveSignerIcon } from './hive-signer-icon';
diff --git a/src/components/formInput/view/formInputView.tsx b/src/components/formInput/view/formInputView.tsx
@@ -201,7 +201,7 @@ const FormInputView = ({
       ) : value && value.length > 0 ? (
         <Icon
           iconType={iconType || 'MaterialIcons'}
-          onPress={() => setValue('')}
+          onPress={() => _handleOnChange('')}
           name={leftIconName}
           style={styles.icon}
         />

diff --git a/src/components/index.tsx b/src/components/index.tsx
@@ -103,6 +103,7 @@ import TransferAccountSelector from './transferAccountSelector/transferAccountSe
 import TransferAmountInputSection from './transferAmountInputSection/transferAmountInputSection';
 import TextBoxWithCopy from './textBoxWithCopy/textBoxWithCopy';
 import WebViewModal from './webViewModal/webViewModal';
+import OrDivider from './orDivider/orDividerView';
 
 // Basic UI Elements
 import {
@@ -253,4 +254,5 @@ export {
   TransferAmountInputSection,
   TextBoxWithCopy,
   WebViewModal,
+  OrDivider,
 };
diff --git a/src/components/loginHeader/view/loginHeaderStyles.js b/src/components/loginHeader/view/loginHeaderStyles.js
@@ -4,7 +4,6 @@ export default EStyleSheet.create({
   container: {
     flex: 1,
     flexDirection: 'column',
-    height: '$deviceHeight / 3',
     backgroundColor: '$primaryBackgroundColor',
   },
   safeArea: {
@@ -15,7 +14,7 @@ export default EStyleSheet.create({
     maxHeight: '$deviceHeight / 3',
     overflow: 'hidden',
     backgroundColor: '$primaryBackgroundColor',
-    height: '$deviceHeight / 3.9',
+    height: 120,
     justifyContent: 'space-between',
     alignItems: 'center',
   },
@@ -37,12 +36,10 @@ export default EStyleSheet.create({
     alignItems: 'center',
   },
   mascot: {
-    width: '70%',
-    height: '70%',
+    width: '60%',
   },
   titleText: {
     alignSelf: 'center',
-    marginTop: 20,
     marginLeft: 32,
     marginRight: 12,
     flex: 1,
@@ -54,9 +51,15 @@ export default EStyleSheet.create({
     backgroundColor: '$primaryBackgroundColor',
     paddingVertical: 8,
   },
+  backIconContainer: {
+    marginLeft: 20,
+  },
+  backIcon: {
+    fontSize: 24,
+    color: '$iconColor',
+  },
   logoContainer: {
-    paddingLeft: 32,
-    paddingRight: 8,
+    paddingRight: 32,
     alignItems: 'center',
     justifyContent: 'center',
   },

diff --git a/src/components/loginHeader/view/loginHeaderView.js b/src/components/loginHeader/view/loginHeaderView.js
@@ -4,11 +4,11 @@ import * as Animatable from 'react-native-animatable';
 // Constants
 
 // Components
-import { TextButton } from '../../buttons';
 import { LineBreak } from '../../basicUIElements';
 // Styles
 import styles from './loginHeaderStyles';
 import getWindowDimensions from '../../../utils/getWindowDimensions';
+import { IconButton } from '../..';
 
 class LoginHeaderView extends PureComponent {
   /* Props
@@ -27,24 +27,18 @@ class LoginHeaderView extends PureComponent {
   // Component Functions
 
   render() {
-    const { description, isKeyboardOpen, onPress, rightButtonText, title } = this.props;
+    const { description, isKeyboardOpen, title, onBackPress } = this.props;
 
     return (
       <SafeAreaView style={styles.safeArea}>
         <View styles={styles.container}>
           <View style={styles.headerRow}>
-            <View style={styles.logoContainer}>
-              <Image
-                resizeMode="contain"
-                style={styles.logo}
-                source={require('../../../assets/ecency_logo_transparent.png')}
-              />
-            </View>
-            <View style={styles.headerButton}>
-              <TextButton
-                onPress={onPress}
-                text={rightButtonText}
-                textStyle={{ color: '#357ce6' }}
+            <View style={styles.backIconContainer}>
+              <IconButton
+                iconStyle={styles.backIcon}
+                iconType="MaterialIcons"
+                name="close"
+                onPress={onBackPress}
               />
             </View>
           </View>
@@ -61,7 +55,7 @@ class LoginHeaderView extends PureComponent {
                 <Image
                   resizeMode="contain"
                   style={styles.mascot}
-                  source={require('../../../assets/love_mascot.png')}
+                  source={require('../../../assets/ecency_logo_transparent.png')}
                 />
               </View>
             </View>
@@ -76,7 +70,7 @@ class LoginHeaderView extends PureComponent {
 export default LoginHeaderView;
 
 const { height } = getWindowDimensions();
-const bodyHeight = height / 3.9;
+const bodyHeight = 120;
 const showAnimation = {
   from: {
     opacity: 0,

diff --git a/src/components/mainButton/view/mainButtonView.js b/src/components/mainButton/view/mainButtonView.js
@@ -47,24 +47,28 @@ class MainButton extends Component {
       iconType,
       textStyle,
       iconPosition,
+      iconStyle,
+      renderIcon,
     } = this.props;
 
     if (isLoading) {
       this._getIndicator();
     }
 
-    const iconComponent = source ? (
-      <Image source={source} style={styles.image} resizeMode="contain" />
-    ) : (
-      iconName && (
-        <Icon
-          iconType={iconType || 'MaterialIcons'}
-          color={iconColor}
-          name={iconName}
-          style={styles.icon}
-        />
-      )
-    );
+    const iconComponent =
+      renderIcon ||
+      (source ? (
+        <Image source={source} style={styles.image} resizeMode="contain" />
+      ) : (
+        iconName && (
+          <Icon
+            iconType={iconType || 'MaterialIcons'}
+            color={iconColor}
+            name={iconName}
+            style={[styles.icon, iconStyle]}
+          />
+        )
+      ));
 
     if (text) {
       return (
@@ -108,7 +112,7 @@ class MainButton extends Component {
   }
 
   render() {
-    const { wrapperStyle, children, height, style, isLoading } = this.props;
+    const { wrapperStyle, children, height, style, isLoading, bodyWrapperStyle } = this.props;
     const { isDisable } = this.state;
 
     return (
@@ -123,7 +127,7 @@ class MainButton extends Component {
             style && style,
           ]}
         >
-          <View style={styles.body}>
+          <View style={[styles.body, bodyWrapperStyle]}>
             {isLoading ? this._getIndicator() : children || this._getBody()}
           </View>
         </TouchableOpacity>

diff --git a/src/components/orDivider/orDividerStyles.ts b/src/components/orDivider/orDividerStyles.ts
@@ -0,0 +1,25 @@
+import EStyleSheet from 'react-native-extended-stylesheet';
+
+export default EStyleSheet.create({
+  dividerContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  divider: {
+    borderWidth: 0.5,
+    flex: 1,
+    borderColor: '$primaryDarkGray',
+  },
+  leftDivider: {
+    marginLeft: 20,
+  },
+  rightDivider: {
+    marginRight: 20,
+  },
+  orText: {
+    fontSize: 16,
+    color: '$primaryDarkGray',
+    marginHorizontal: 8,
+  },
+});
diff --git a/src/components/orDivider/orDividerView.tsx b/src/components/orDivider/orDividerView.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { View, Text, ViewStyle } from 'react-native';
+import { useIntl } from 'react-intl';
+import styles from './orDividerStyles';
+
+interface OrDividerProps {
+  containerStyle?: ViewStyle;
+}
+const OrDivider = ({ containerStyle }: OrDividerProps) => {
+  const intl = useIntl();
+  return (
+    <View style={[styles.dividerContainer, containerStyle]}>
+      <View style={[styles.divider, styles.leftDivider]} />
+      <Text style={styles.orText}>
+        {intl.formatMessage({
+          id: 'login.or',
+        })}
+      </Text>
+      <View style={[styles.divider, styles.rightDivider]} />
+    </View>
+  );
+};
+
+export default OrDivider;
diff --git a/src/config/locales/en-US.json b/src/config/locales/en-US.json
@@ -377,12 +377,13 @@
     "no_user": "User is not found."
   },
   "login": {
-    "signin": "Sign in",
+    "signin": "Login",
+    "login_with_hs": "Login with hivesigner",
     "signup": "JOIN NOW",
     "signin_title": "To get all the benefits of using Ecency",
-    "username": "Username",
-    "password": "Password or WIF",
-    "description": "By signing in, you agree to our Terms of Services and Privacy Policies.",
+    "username": "username",
+    "password": "password / private key",
+    "description": "By logging in, you agree to our Terms of Services and Privacy Policies.",
     "cancel": "cancel",
     "login": "LOGIN",
     "steemconnect_description": "If you don't want to keep your password encrypted and saved on your device, you can use Hivesigner.",
@@ -394,7 +395,10 @@
     "deep_login_alert_title": "Easy Login @{username}",
     "deep_login_alert_body":"Verify direct login using access code",
     "deep_login_url_expired":"Login url expired, please use private key or password to login",
-    "deep_login_malformed_url":"Malformed login url, please use private key or password to login" 
+    "deep_login_malformed_url":"Malformed login url, please use private key or password to login",
+    "no_account_text": "Don't have an account?",
+    "signup_now": "Sign up now!",
+    "or": "OR"
   },
   "register": {
     "modal_title":"Get Hive Account",

diff --git a/src/screens/editor/container/editorContainer.tsx b/src/screens/editor/container/editorContainer.tsx
@@ -55,6 +55,7 @@ import { useUserActivityMutation } from '../../../providers/queries/pointQueries
 import { PointActivityIds } from '../../../providers/ecency/ecency.types';
 import { usePostsCachePrimer } from '../../../providers/queries/postQueries/postQueries';
 import { PostTypes } from '../../../constants/postTypes';
+
 import { speakQueries } from '../../../providers/queries';
 import {
   BENEFICIARY_SRC_ENCODER,
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default as HiveSignerIcon } from './hive-signer-icon';