From 0c806f7fb988e532e650b4d04c9fd6bd789acc36 Mon Sep 17 00:00:00 2001
From: caturbgs <savemeplease11>
Date: Thu, 16 Dec 2021 16:50:59 +0700
Subject: [PATCH] feat: responsive saldo layout

---
 src/pages/Profile/Profile.js | 26 ++++++++++++++++++++------
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/pages/Profile/Profile.js b/src/pages/Profile/Profile.js
index f4f366a..27ec245 100644
--- a/src/pages/Profile/Profile.js
+++ b/src/pages/Profile/Profile.js
@@ -50,13 +50,23 @@ export const Profile = observer(() => {
         },
     ]
 
+    const styleSaldoTitle = store.ui.mediaQuery.isDesktop ? {
+        display: "flex",
+        justifyContent: "center"
+    } : {fontSize: "0.75rem"};
+    const styleSaldoContent = store.ui.mediaQuery.isDesktop ? {
+        fontSize: '1.25rem',
+        display: "flex",
+        justifyContent: "center"
+    } : null;
+
     return (
         <div className={["ppob-container"].join(" ")}>
             <BreadcumbComponent data={routeData}/>
             <Card>
                 <Title strong>Profile</Title>
                 <Row style={{marginBottom: 20}}>
-                    <Col span={12}>
+                    <Col lg={12} xs={24}>
                         <Row>
                             <Col span={12}>
                                 <Text strong>Name</Text>
@@ -90,11 +100,15 @@ export const Profile = observer(() => {
                             </Col>
                         </Row>
                     </Col>
-                    <Col span={12}>
-                        <div style={{display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
-                            <Title strong level={3}>Saldo</Title>
-                            <Text style={{fontSize: '1.25rem'}}>{store.authentication.profileData?.wallet}</Text>
-                        </div>
+                    <Col lg={12} xs={24}>
+                        <Row justify={"center"}>
+                            <Col lg={24} xs={12}>
+                                <Title strong level={3} style={styleSaldoTitle}>Saldo</Title>
+                            </Col>
+                            <Col lg={24} xs={12}>
+                                <Text style={styleSaldoContent}>{store.authentication.profileData?.wallet}</Text>
+                            </Col>
+                        </Row>
                     </Col>
                 </Row>
                 <Row>