From 6b8230c0ac7d5714609eace386af118b2e48247a Mon Sep 17 00:00:00 2001
From: "Eng. Juan Combetto" <omniwired@gmail.com>
Date: Wed, 15 Nov 2023 12:27:49 +0900
Subject: [PATCH] fix(governance-screen): fix layout issues in
 GovernanceDetails.tsx

Fix layout issues in the GovernanceDetails.tsx file. The changes include:
- Added missing import statement for useIsMobile hook.
- Updated the styling of certain components to fix layout issues.
- Removed unnecessary code related to layout.
- Updated the styling of the GovernanceBox component to fix layout issues.

Fixes: fix/governance-screen
---
 .../GovernanceBox/GovernanceBox.tsx           |  38 ++-
 .../screens/Governance/GovernanceDetails.tsx  | 298 +++++++-----------
 .../screens/Governance/GovernanceScreen.tsx   |  82 +++--
 3 files changed, 192 insertions(+), 226 deletions(-)

diff --git a/packages/components/GovernanceBox/GovernanceBox.tsx b/packages/components/GovernanceBox/GovernanceBox.tsx
index 06fc0704c5..768f7394f3 100644
--- a/packages/components/GovernanceBox/GovernanceBox.tsx
+++ b/packages/components/GovernanceBox/GovernanceBox.tsx
@@ -8,10 +8,11 @@ import {
   View,
 } from "react-native";
 
-import { BrandText } from "../../components/BrandText/BrandText";
-import { TertiaryBox } from "../../components/boxes/TertiaryBox";
 import { ProposalStatus } from "../../screens/Governance/types";
 import { tulipTree } from "../../utils/style/colors";
+import { layout } from "../../utils/style/layout";
+import { BrandText } from "../BrandText";
+import { TertiaryBox } from "../boxes/TertiaryBox";
 
 // FIXME: code dedup
 
@@ -56,16 +57,14 @@ export const GovernanceBox: React.FC<{
     useState(false);
 
   const test = "%";
-  const percentageYes =
-    ((percentageYesValue / totalUsers) * 100)
-      .toFixed(2)
-      .toString()
-      .substring(0, 5) + test;
-  const percentageNo =
-    ((percentageNoValue / totalUsers) * 100)
-      .toFixed(2)
-      .toString()
-      .substring(0, 5) + test;
+  let percentageYes = ((percentageYesValue / totalUsers) * 100)
+    .toFixed(2)
+    .toString();
+  percentageYes = percentageYes.substring(0, 5) + test;
+  let percentageNo = ((percentageNoValue / totalUsers) * 100)
+    .toFixed(2)
+    .toString();
+  percentageNo = percentageNo.substring(0, 5) + test;
 
   const percentageNoWithVeto = ((percentageNoWithVetoValue / totalUsers) * 100)
     .toFixed(2)
@@ -121,7 +120,13 @@ export const GovernanceBox: React.FC<{
   }
 
   return (
-    <View style={{ width: "50%", marginBottom: 20 }}>
+    <View
+      style={{
+        width: "50%",
+        marginBottom: layout.spacing_x2_5,
+        marginRight: layout.spacing_x3,
+      }}
+    >
       <TouchableOpacity
         onPress={() => {
           activePopup();
@@ -134,7 +139,6 @@ export const GovernanceBox: React.FC<{
             style={{
               flexDirection: "column",
               top: 20,
-              width: "96%",
               height: "100%",
             }}
           >
@@ -267,7 +271,7 @@ export const GovernanceBox: React.FC<{
               >
                 <View
                   style={{
-                    width: percentageYes as DimensionValue, // FIXME: properly type this
+                    width: percentageYes as DimensionValue,
                     height: 3,
                     borderRadius: 10,
                     position: "absolute",
@@ -285,12 +289,12 @@ export const GovernanceBox: React.FC<{
 
                 <View
                   style={{
-                    width: percentageNo as DimensionValue, // FIXME: properly type this
+                    width: percentageNo as DimensionValue,
                     height: 3,
                     backgroundColor: tulipTree,
                     borderRadius: 10,
                     position: "absolute",
-                    left: percentageYes as DimensionValue, //percentage of the width of the first view  // FIXME: properly type this
+                    left: percentageYes as DimensionValue, //percentage of the width of the first view
                     zIndex: 2,
                   }}
                 />
diff --git a/packages/screens/Governance/GovernanceDetails.tsx b/packages/screens/Governance/GovernanceDetails.tsx
index a469f3a17a..e0489f2ba1 100644
--- a/packages/screens/Governance/GovernanceDetails.tsx
+++ b/packages/screens/Governance/GovernanceDetails.tsx
@@ -14,9 +14,12 @@ import { PrimaryButton } from "../../components/buttons/PrimaryButton";
 import { SecondaryButton } from "../../components/buttons/SecondaryButton";
 import ModalBase from "../../components/modals/ModalBase";
 import { useFeedbacks } from "../../context/FeedbacksProvider";
+import { useIsMobile } from "../../hooks/useIsMobile";
 import useSelectedWallet from "../../hooks/useSelectedWallet";
 import { getKeplrSigningStargateClient } from "../../networks";
-import { neutral44, tulipTree } from "../../utils/style/colors";
+import { neutral33, neutral44, tulipTree } from "../../utils/style/colors";
+import { fontSemibold14, fontSemibold20 } from "../../utils/style/fonts";
+import { layout } from "../../utils/style/layout";
 
 const Separator: React.FC<{ style?: StyleProp<ViewStyle> }> = ({ style }) => (
   <View
@@ -65,6 +68,7 @@ export const GovernanceDetails: React.FC<{
   const [checked, setChecked] = useState("nothingChecked");
   const [displayPopup] = useState(visible);
   const { setToastError } = useFeedbacks();
+  const isMobile = useIsMobile();
 
   function activeVotePopup() {
     onClose();
@@ -180,7 +184,7 @@ export const GovernanceDetails: React.FC<{
       }}
       label="Governance Details"
       visible={displayPopup}
-      width={1300}
+      width={isMobile ? 800 : 460}
     >
       <View
         style={{
@@ -278,14 +282,12 @@ export const GovernanceDetails: React.FC<{
 
       <View
         style={{
-          flexDirection: "row",
           display: "flex",
           width: "70%",
           paddingTop: 20,
           right: "0.5%",
           justifyContent: "space-evenly",
           alignContent: "center",
-          flexWrap: "wrap",
         }}
       >
         <View>
@@ -308,16 +310,6 @@ export const GovernanceDetails: React.FC<{
             {"\u00A0"} UTC
           </BrandText>
         </View>
-        <View
-          style={{
-            width: 35,
-            height: 0,
-            borderWidth: 0.5,
-            borderColor: "#808080",
-            transform: [{ rotate: "90deg" }],
-            marginTop: 15,
-          }}
-        />
 
         <View>
           <BrandText
@@ -339,16 +331,6 @@ export const GovernanceDetails: React.FC<{
             {"\u00A0"} UTC
           </BrandText>
         </View>
-        <View
-          style={{
-            width: 35,
-            height: 0,
-            borderWidth: 0.5,
-            borderColor: "#808080",
-            transform: [{ rotate: "90deg" }],
-            marginTop: 15,
-          }}
-        />
 
         <View>
           <BrandText
@@ -370,16 +352,6 @@ export const GovernanceDetails: React.FC<{
             {"\u00A0"} UTC
           </BrandText>
         </View>
-        <View
-          style={{
-            width: 35,
-            height: 0,
-            borderWidth: 0.5,
-            borderColor: "#808080",
-            transform: [{ rotate: "90deg" }],
-            marginTop: 15,
-          }}
-        />
 
         <View>
           <BrandText
@@ -404,67 +376,42 @@ export const GovernanceDetails: React.FC<{
       </View>
 
       <TertiaryBox
-        width={1240}
-        height={196}
-        style={{ right: "-0.5%", marginTop: 25 }}
+        fullWidth
+        style={{ paddingVertical: layout.spacing_x1 }}
+        mainContainerStyle={{
+          paddingVertical: layout.spacing_x1_5,
+        }}
       >
-        <View
-          style={{
-            flexDirection: "row",
-            display: "flex",
-            width: "23%",
-            paddingTop: 0,
-            right: "22%",
-            bottom: 35,
-            justifyContent: "space-evenly",
-            alignContent: "center",
-            flexWrap: "wrap",
-          }}
-        >
-          <View>
-            <BrandText
-              style={{
-                fontSize: 20,
+        <View>
+          <BrandText
+            style={[
+              fontSemibold20,
+              {
                 color: "#808080",
-              }}
-            >
-              Total
-            </BrandText>
-          </View>
-          <View>
-            <BrandText
-              style={{
-                fontSize: 20,
-              }}
-            >
-              {totalParticipant}
-            </BrandText>
-          </View>
-        </View>
-
-        <View
-          style={{
-            width: 210,
-            position: "absolute",
-            left: 5,
-          }}
-        >
-          <VictoryPie
-            innerRadius={70}
-            colorScale={["#16BBFF", tulipTree, "#808080"]}
-            data={[
-              { x: "Pourcentage Yes", y: valueChartYes },
-              { x: "Pourcentage No", y: valueChartNo },
-              { x: "Pourcentage Abstain", y: valueChartAbstain },
+              },
             ]}
-            labels={() => null}
-          />
+          >
+            Total
+          </BrandText>
         </View>
+        <View>
+          <BrandText style={fontSemibold20}>{totalParticipant}</BrandText>
+        </View>
+
+        <VictoryPie
+          innerRadius={70}
+          colorScale={["#16BBFF", tulipTree, "#808080"]}
+          data={[
+            { x: "Pourcentage Yes", y: valueChartYes },
+            { x: "Pourcentage No", y: valueChartNo },
+            { x: "Pourcentage Abstain", y: valueChartAbstain },
+          ]}
+          labels={() => null}
+        />
 
         <View
           style={{
             flexDirection: "row",
-            display: "flex",
             justifyContent: "space-evenly",
             alignItems: "center",
             backgroundColor: "#171717",
@@ -472,7 +419,6 @@ export const GovernanceDetails: React.FC<{
             height: 27,
             width: 125,
             bottom: 25,
-            right: "28%",
           }}
         >
           <BrandText
@@ -495,10 +441,7 @@ export const GovernanceDetails: React.FC<{
         <View
           style={{
             flexDirection: "row",
-            display: "flex",
-            width: "60%",
-            top: 20,
-            right: "4%",
+            width: "100%",
             justifyContent: "space-evenly",
             alignContent: "center",
             flexWrap: "wrap",
@@ -506,100 +449,101 @@ export const GovernanceDetails: React.FC<{
         >
           <View
             style={{
-              width: 12,
-              height: 12,
-              backgroundColor: "#16BBFF",
-              borderRadius: 12,
-            }}
-          />
-          <BrandText
-            style={{
-              fontSize: 14,
+              flexDirection: "row",
             }}
           >
-            Yes {percentageYes}
-          </BrandText>
-
-          <View
-            style={{
-              width: 40,
-              height: 0,
-              borderWidth: 0.5,
-              borderColor: "#808080",
-              transform: [{ rotate: "90deg" }],
-              top: 10,
-            }}
-          />
-
+            <View
+              style={{
+                width: 12,
+                height: 12,
+                backgroundColor: "#16BBFF",
+                borderRadius: 12,
+              }}
+            />
+            <BrandText
+              style={[
+                fontSemibold14,
+                {
+                  marginLeft: layout.spacing_x1,
+                },
+              ]}
+            >
+              Yes {percentageYes}
+            </BrandText>
+          </View>
           <View
             style={{
-              width: 12,
-              height: 12,
-              backgroundColor: tulipTree,
-              borderRadius: 12,
-            }}
-          />
-          <BrandText
-            style={{
-              fontSize: 14,
+              flexDirection: "row",
             }}
           >
-            Yes {percentageNo}
-          </BrandText>
-
-          <View
-            style={{
-              width: 40,
-              height: 0,
-              borderWidth: 0.5,
-              borderColor: "#808080",
-              transform: [{ rotate: "90deg" }],
-              top: 10,
-            }}
-          />
-
+            <View
+              style={{
+                width: 12,
+                height: 12,
+                backgroundColor: tulipTree,
+                borderRadius: 12,
+              }}
+            />
+            <BrandText
+              style={[
+                fontSemibold14,
+                {
+                  marginLeft: layout.spacing_x1,
+                },
+              ]}
+            >
+              Abstain {percentageNo}
+            </BrandText>
+          </View>
           <View
             style={{
-              width: 12,
-              height: 12,
-              backgroundColor: "#F46F76",
-              borderRadius: 12,
-            }}
-          />
-          <BrandText
-            style={{
-              fontSize: 14,
+              flexDirection: "row",
             }}
           >
-            NoWithVeto {percentageNoWithVeto}
-          </BrandText>
-
-          <View
-            style={{
-              width: 40,
-              height: 0,
-              borderWidth: 0.5,
-              borderColor: "#808080",
-              transform: [{ rotate: "90deg" }],
-              top: 10,
-            }}
-          />
+            <View
+              style={{
+                width: 12,
+                height: 12,
+                backgroundColor: "#F46F76",
+                borderRadius: 12,
+              }}
+            />
+            <BrandText
+              style={[
+                fontSemibold14,
+                {
+                  marginLeft: layout.spacing_x1,
+                },
+              ]}
+            >
+              No {percentageNo}
+            </BrandText>
+          </View>
 
           <View
             style={{
-              width: 12,
-              height: 12,
-              backgroundColor: "#333333",
-              borderRadius: 12,
-            }}
-          />
-          <BrandText
-            style={{
-              fontSize: 14,
+              flexDirection: "row",
             }}
           >
-            NoWithVeto {percentageNoWithVeto}
-          </BrandText>
+            <View
+              style={{
+                width: 12,
+                height: 12,
+                backgroundColor: neutral33,
+                borderRadius: 12,
+              }}
+            />
+            <BrandText
+              style={[
+                fontSemibold14,
+                {
+                  marginLeft: layout.spacing_x1,
+                },
+              ]}
+            >
+              NoWithVeto {percentageNoWithVeto}
+            </BrandText>
+          </View>
         </View>
 
         {canVoteDeposit() && (
@@ -660,10 +604,12 @@ export const GovernanceDetails: React.FC<{
         }
       >
         <BrandText
-          style={{
-            fontSize: 14,
-            color: "#777777",
-          }}
+          style={[
+            fontSemibold14,
+            {
+              color: "#777777",
+            },
+          ]}
         >
           {numberProposal}
         </BrandText>
@@ -797,7 +743,7 @@ export const GovernanceDetails: React.FC<{
       </ModalBase>
 
       <ScrollView style={{ height: 260, marginBottom: 50 }}>
-        <View style={{ width: 1200, marginTop: 50 }}>
+        <View style={{ width: "100%", marginTop: 50 }}>
           <BrandText
             style={{
               fontSize: 16,
diff --git a/packages/screens/Governance/GovernanceScreen.tsx b/packages/screens/Governance/GovernanceScreen.tsx
index 8dd8e88d52..36dceabf08 100644
--- a/packages/screens/Governance/GovernanceScreen.tsx
+++ b/packages/screens/Governance/GovernanceScreen.tsx
@@ -1,13 +1,15 @@
 import React, { useEffect, useMemo, useState } from "react";
-import { View } from "react-native";
+import { FlatList, View } from "react-native";
 
 import { NavBarGovernance } from "./NavBarGovernance";
 import { Proposal, ProposalStatus } from "./types";
-import { BrandText } from "../../components/BrandText/BrandText";
+import { BrandText } from "../../components/BrandText";
 import { GovernanceBox } from "../../components/GovernanceBox/GovernanceBox";
 import { ScreenContainer } from "../../components/ScreenContainer";
 import { useSelectedNetworkId } from "../../hooks/useSelectedNetwork";
 import { NetworkKind, mustGetCosmosNetwork } from "../../networks";
+import { fontSemibold20, fontSemibold28 } from "../../utils/style/fonts";
+import { layout } from "../../utils/style/layout";
 
 // FIXME: properly handle pagination
 
@@ -39,43 +41,57 @@ export const GovernanceScreen: React.FC = () => {
   );
 
   return (
-    <ScreenContainer forceNetworkKind={NetworkKind.Cosmos}>
-      <BrandText style={{ fontSize: 28 }}>Decentralized Governance</BrandText>
-
-      <NavBarGovernance onChange={setFilter} />
-
+    <ScreenContainer
+      headerChildren={<BrandText style={fontSemibold20}>Governance</BrandText>}
+      responsive
+      forceNetworkKind={NetworkKind.Cosmos}
+    >
       <View
         style={{
-          display: "flex",
-          flexDirection: "row",
-          flexWrap: "wrap",
-          marginTop: 110,
-          marginLeft: -70,
-          marginRight: -60,
+          marginTop: layout.spacing_x4,
         }}
       >
-        {filteredProposals.map((proposals, index) => (
-          <GovernanceBox
-            key={index}
-            numberProposal={proposals.proposal_id}
-            titleProposal={proposals.content.title}
-            descriptionProposal={proposals.content.description}
-            votingEndTime={proposals.voting_end_time}
-            votingStartTime={proposals.voting_start_time}
-            votingSubmitTime={proposals.submit_time}
-            votingDepositEndTime={proposals.deposit_end_time}
-            colorMostVoted="#16BBFF"
-            percentageNoValue={parseFloat(proposals.final_tally_result.no)}
-            percentageYesValue={parseFloat(proposals.final_tally_result.yes)}
-            percentageNoWithVetoValue={parseFloat(
-              proposals.final_tally_result.no_with_veto,
-            )}
-            percentageAbstainValue={parseFloat(
-              proposals.final_tally_result.abstain,
+        <BrandText style={fontSemibold28}>Decentralized Governance</BrandText>
+
+        <NavBarGovernance onChange={setFilter} />
+
+        <View
+          style={{
+            flexDirection: "row",
+            flexWrap: "wrap",
+            marginTop: layout.spacing_x4,
+          }}
+        >
+          <FlatList
+            data={filteredProposals}
+            columnWrapperStyle={{ flexWrap: "wrap", flex: 1, marginTop: 5 }}
+            numColumns={99} // needed to deal with wrap via css
+            renderItem={({ item: proposals, index }) => (
+              <GovernanceBox
+                key={index}
+                numberProposal={proposals.proposal_id}
+                titleProposal={proposals.content.title}
+                descriptionProposal={proposals.content.description}
+                votingEndTime={proposals.voting_end_time}
+                votingStartTime={proposals.voting_start_time}
+                votingSubmitTime={proposals.submit_time}
+                votingDepositEndTime={proposals.deposit_end_time}
+                colorMostVoted="#16BBFF"
+                percentageNoValue={parseFloat(proposals.final_tally_result.no)}
+                percentageYesValue={parseFloat(
+                  proposals.final_tally_result.yes,
+                )}
+                percentageNoWithVetoValue={parseFloat(
+                  proposals.final_tally_result.no_with_veto,
+                )}
+                percentageAbstainValue={parseFloat(
+                  proposals.final_tally_result.abstain,
+                )}
+                status={proposals.status}
+              />
             )}
-            status={proposals.status}
           />
-        ))}
+        </View>
       </View>
     </ScreenContainer>
   );