style : style sign transaction

chainapsis · Apr 23, 2021 · 121ef3e · 121ef3e
1 parent 235f5b1
commit 121ef3e
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 76 deletions.
diff --git a/packages/mobile/src/modals/index.tsx b/packages/mobile/src/modals/index.tsx
@@ -12,21 +12,17 @@ import {
 } from "@keplr-wallet/hooks";
 import { Button, Input, Text } from "react-native-elements";
 import {
-  bgcWhite,
   flexDirectionRow,
   justifyContentEnd,
   m0,
-  pt4,
-  pb6,
-  px4,
   sf,
   h4,
-  alignItemsCenter,
-  justifyContentBetween,
   fAlignCenter,
+  my3,
 } from "../styles";
 import { DefaultButton, WhiteButton } from "../components/buttons";
 import { TransactionDetails } from "./transaction-details";
+import { Page } from "../components/page";
 
 export const ModalsRenderer: FunctionComponent = observer(() => {
   const {
@@ -81,72 +77,67 @@ export const ModalsRenderer: FunctionComponent = observer(() => {
         isVisible={interactionModalStore.lastUrl != null}
         style={sf([justifyContentEnd, m0])}
       >
-        <View
-          style={sf([
-            { height: 600 },
-            bgcWhite,
-            px4,
-            pt4,
-            pb6,
-            justifyContentBetween,
-          ])}
-        >
-          {interactionModalStore.lastUrl === "/unlock" ? (
-            <React.Fragment>
-              <Text style={sf([h4, fAlignCenter])}>Unlock</Text>
-              <Input
-                label="Password"
-                autoCompleteType="password"
-                secureTextEntry={true}
-                value={password}
-                onChangeText={setPassword}
-              />
-              <Button
-                title="Unlock"
-                onPress={async () => {
-                  await keyRingStore.unlock(password);
-                  interactionModalStore.popUrl();
-                }}
-              />
-            </React.Fragment>
-          ) : null}
-          {interactionModalStore.lastUrl === "/sign" ? (
-            <React.Fragment>
-              <Text style={sf([h4, fAlignCenter])}>Confirm Transaction</Text>
-              {/* <ScrollView>
-                <Text>
-                  {JSON.stringify(signDocHelper.signDocJson, null, 2)}
-                </Text>
-              </ScrollView> */}
-              <TransactionDetails
-                signDocHelper={signDocHelper}
-                memoConfig={memoConfig}
-                feeConfig={feeConfig}
-                gasConfig={gasConfig}
-              />
-              <View style={flexDirectionRow}>
-                <WhiteButton
-                  title="Reject"
-                  color="error"
-                  onPress={async () => {
-                    await signInteractionStore.reject();
-                    interactionModalStore.popUrl();
-                  }}
+        <View style={{ height: 600 }}>
+          <Page>
+            {interactionModalStore.lastUrl === "/unlock" ? (
+              <React.Fragment>
+                <Text style={sf([h4, fAlignCenter, my3])}>Unlock</Text>
+                <Input
+                  label="Password"
+                  autoCompleteType="password"
+                  secureTextEntry={true}
+                  value={password}
+                  onChangeText={setPassword}
                 />
-                <DefaultButton
-                  title="Approve"
+                <Button
+                  title="Unlock"
                   onPress={async () => {
-                    if (signDocHelper.signDocWrapper) {
-                      await signInteractionStore.approveAndWaitEnd(
-                        signDocHelper.signDocWrapper
-                      );
-                    }
+                    await keyRingStore.unlock(password);
                     interactionModalStore.popUrl();
                   }}
                 />
-              </View>
-            </React.Fragment>
-          ) : null}
+              </React.Fragment>
+            ) : null}
+            {interactionModalStore.lastUrl === "/sign" ? (
+              <React.Fragment>
+                <Text style={sf([h4, fAlignCenter, my3])}>
+                  Confirm Transaction
+                </Text>
+                {/* <ScrollView>
+                <Text>
+                  {JSON.stringify(signDocHelper.signDocJson, null, 2)}
+                </Text>
+              </ScrollView> */}
+                <TransactionDetails
+                  signDocHelper={signDocHelper}
+                  memoConfig={memoConfig}
+                  feeConfig={feeConfig}
+                  gasConfig={gasConfig}
+                />
+                <View style={flexDirectionRow}>
+                  <WhiteButton
+                    title="Reject"
+                    color="error"
+                    onPress={async () => {
+                      await signInteractionStore.reject();
+                      interactionModalStore.popUrl();
+                    }}
+                  />
+                  <DefaultButton
+                    title="Approve"
+                    onPress={async () => {
+                      if (signDocHelper.signDocWrapper) {
+                        await signInteractionStore.approveAndWaitEnd(
+                          signDocHelper.signDocWrapper
+                        );
+                      }
+                      interactionModalStore.popUrl();
+                    }}
+                  />
+                </View>
+              </React.Fragment>
+            ) : null}
+          </Page>
         </View>
       </Modal>
     </React.Fragment>

diff --git a/packages/mobile/src/modals/transaction-details.tsx b/packages/mobile/src/modals/transaction-details.tsx
@@ -17,11 +17,19 @@ import {
   body3,
   flex1,
   flexDirectionRow,
-  h3,
+  sf,
   h6,
+  mb3,
   p3,
   subtitle1,
   subtitle2,
+  mb2,
+  cardStyle,
+  fcGrey1,
+  justifyContentAround,
+  bbw1,
+  bcGray,
+  px2,
 } from "../styles";
 import Icon from "react-native-vector-icons/Feather";
 
@@ -85,15 +93,18 @@ export const TransactionDetails: FunctionComponent<{
 
     return (
       <React.Fragment>
-        <ScrollView>{renderedMsgs}</ScrollView>
-        <View>
-          <Text style={subtitle2}>Memo</Text>
+        <Text style={sf([subtitle2, mb2])}>Messages</Text>
+        <ScrollView style={sf([cardStyle, px2, mb2])}>
+          {renderedMsgs}
+        </ScrollView>
+        <View style={mb3}>
+          <Text style={sf([subtitle2, mb2])}>Memo</Text>
           <Text style={subtitle1}>
             {memoConfig.memo ? memoConfig.memo : "(No memo)"}
           </Text>
         </View>
-        <View>
-          <Text style={subtitle2}>Fee</Text>
+        <View style={mb3}>
+          <Text style={sf([subtitle2, mb2])}>Fee</Text>
           <Text style={subtitle1}>
             {feeConfig.fee.maxDecimals(6).trim(true).toString()}
           </Text>
@@ -109,13 +120,13 @@ const Msg: FunctionComponent<{
   content: string;
 }> = ({ icon = "question", title, content }) => {
   return (
-    <View style={flexDirectionRow}>
+    <View style={sf([flexDirectionRow, bbw1, bcGray])}>
       <View style={p3}>
         <Icon name={icon} size={18} />
       </View>
-      <View style={flex1}>
+      <View style={sf([flex1, justifyContentAround])}>
         <Text style={h6}>{title}</Text>
-        <Text style={body3}>{content}</Text>
+        <Text style={sf([body3, fcGrey1])}>{content}</Text>
       </View>
     </View>
   );

diff --git a/packages/mobile/src/styles/flex.tsx b/packages/mobile/src/styles/flex.tsx
@@ -16,6 +16,10 @@ export const justifyContentBetween: StyleProp<ViewStyle> = {
   justifyContent: "space-between",
 };
 
+export const justifyContentAround: StyleProp<ViewStyle> = {
+  justifyContent: "space-around",
+};
+
 export const justifyContentEnd: StyleProp<ViewStyle> = {
   justifyContent: "flex-end",
 };