From 6416e00bb4095c7d57535978d2ea3cfc3cda106b Mon Sep 17 00:00:00 2001
From: jtan381 <jtan381@e.ntu.edu.sg>
Date: Sun, 11 Oct 2020 15:32:51 +0800
Subject: [PATCH] moblie reponsive

---
 src/components/PieChartBalancev2.js | 140 +++++++++++++++-------------
 src/views/Home.js                   |  27 ++++--
 2 files changed, 92 insertions(+), 75 deletions(-)

diff --git a/src/components/PieChartBalancev2.js b/src/components/PieChartBalancev2.js
index 8ecec2f..f66b21d 100644
--- a/src/components/PieChartBalancev2.js
+++ b/src/components/PieChartBalancev2.js
@@ -2,10 +2,14 @@ import React, { useState } from "react";
 import { PieChart } from "react-minimal-pie-chart";
 import styled from "styled-components";
 
+const MainWrapper = styled.div`
+  display: grid;
+  grid-template-columns: auto auto;
+  align-items: center;
+`;
+
 const Wrapper = styled.div`
   display: grid;
-  // justify-items: center;
-  // align-items: center;
   grid-template-rows: auto auto auto;
 `;
 
@@ -60,78 +64,84 @@ export default function PieChartBalancev2(props) {
   // });
 
   return (
-    <div>
-      <h2
-        style={{
-          color: "#fff",
-          margin: "0px",
-          fontWeight: "bold",
-          fontSize: "30px",
-        }}
-      >
-        Account Summary
-      </h2>
-      <PieChart
-        style={{
-          fontFamily: "Quicksand",
-          fontSize: "8px",
-        }}
-        data={data}
-        radius={PieChart.defaultProps.radius - 6}
-        lineWidth={20}
-        segmentsStyle={{ transition: "stroke .3s", cursor: "pointer" }}
-        // segmentsShift={(index) => (index === selected ? 6 : 1)}
-        animate
-        label={({ dataEntry }) =>
-          "$" +
-          dataEntry.value.toLocaleString(undefined, {
-            minimumFractionDigits: 2,
-            maximumFractionDigits: 2,
-          })
-        }
-        labelPosition={112}
-        labelStyle={{
-          fill: "#fff",
-        }}
-        viewBoxSize={[180, 180]}
-        center={[90, 90]}
-      >
+    <MainWrapper>
+      <div>
+        <h2
+          style={{
+            color: "#fff",
+            margin: "0px",
+            fontWeight: "bold",
+            fontSize: "30px",
+          }}
+        >
+          Account Summary
+        </h2>
         <PieChart
           style={{
             fontFamily: "Quicksand",
-            fill: "#fff",
+            fontSize: "8px",
           }}
-          data={header}
-          lineWidth={0}
+          data={data}
+          radius={PieChart.defaultProps.radius - 6}
+          lineWidth={20}
+          segmentsStyle={{ transition: "stroke .3s", cursor: "pointer" }}
+          // segmentsShift={(index) => (index === selected ? 6 : 1)}
+          animate
           label={({ dataEntry }) =>
             "$" +
-            dataEntry.total.toLocaleString(undefined, {
+            dataEntry.value.toLocaleString(undefined, {
               minimumFractionDigits: 2,
               maximumFractionDigits: 2,
             })
           }
-          labelPosition={100}
-          viewBoxSize={[150, 150]}
-          center={[75, 75]}
-        />
-      </PieChart>
-      <Wrapper>
-        {data.map((data) => {
-          return (
-            <Wrapper2>
-              <div
-                style={{
-                  background: data.color,
-                  width: "20px",
-                  height: "20px",
-                  borderRadius: "50%",
-                }}
-              ></div>
-              <div style={{ color: "#fff", fontSize: "80%" }}>{data.title}</div>
-            </Wrapper2>
-          );
-        })}
-      </Wrapper>
-    </div>
+          labelPosition={112}
+          labelStyle={{
+            fill: "#fff",
+          }}
+          viewBoxSize={[180, 180]}
+          center={[90, 90]}
+        >
+          <PieChart
+            style={{
+              fontFamily: "Quicksand",
+              fill: "#fff",
+            }}
+            data={header}
+            lineWidth={0}
+            label={({ dataEntry }) =>
+              "$" +
+              dataEntry.total.toLocaleString(undefined, {
+                minimumFractionDigits: 2,
+                maximumFractionDigits: 2,
+              })
+            }
+            labelPosition={100}
+            viewBoxSize={[150, 150]}
+            center={[75, 75]}
+          />
+        </PieChart>
+      </div>
+      <div>
+        <Wrapper>
+          {data.map((data) => {
+            return (
+              <Wrapper2>
+                <div
+                  style={{
+                    background: data.color,
+                    width: "20px",
+                    height: "20px",
+                    borderRadius: "50%",
+                  }}
+                ></div>
+                <div style={{ color: "#fff", fontSize: "80%" }}>
+                  {data.title}
+                </div>
+              </Wrapper2>
+            );
+          })}
+        </Wrapper>
+      </div>
+    </MainWrapper>
   );
 }
diff --git a/src/views/Home.js b/src/views/Home.js
index 08c417a..002c61b 100644
--- a/src/views/Home.js
+++ b/src/views/Home.js
@@ -31,6 +31,20 @@ const Wrapper = styled.div`
   justify-items: center;
   align-items: center;
   grid-template-columns: 50% 50%;
+  @media (max-width: 991px) {
+    grid-template-columns: auto;
+  }
+`;
+
+const SummaryWrapper = styled.div`
+  background: #51605d;
+  border-bottom-right-radius: 40px;
+  border-bottom-left-radius: 40px;
+  padding: 35px;
+  @media (max-width: 991px) {
+    grid-template-columns: auto;
+    border-radius: 40px;
+  }
 `;
 
 export default (props) => {
@@ -43,7 +57,7 @@ export default (props) => {
         <LandingGreen>
           <div className="container">
             <Wrapper>
-              <div>
+              <div style={{ paddingBottom: "25px" }}>
                 <img
                   style={{ height: "120px", margin: "2rem auto" }}
                   alt="Hello there"
@@ -54,17 +68,10 @@ export default (props) => {
                 <p>What would you like to do today?</p>
                 <SearchBar></SearchBar>
               </div>
-              <div
-                style={{
-                  background: "#51605D",
-                  borderBottomLeftRadius: "40px",
-                  borderBottomRightRadius: "40px",
-                  padding: "40px",
-                }}
-              >
+              <SummaryWrapper>
                 {/* <PieChartBalance data={currentUser} /> */}
                 <PieChartBalancev2 data={currentUser} />
-              </div>
+              </SummaryWrapper>
             </Wrapper>
           </div>
         </LandingGreen>