Merge pull request #346 from Plex-Engineer/release.1.0.2

Release.1.0.2
Plex-Engineer · Mar 4, 2024 · 59d8d50 · 59d8d50
2 parents c4dfa81 + 005dc3b
commit 59d8d50
Show file tree

Hide file tree

Showing 23 changed files with 1,258 additions and 645 deletions.
diff --git a/app/governance/components/ProposalTable/ProposalRow.tsx b/app/governance/components/ProposalTable/ProposalRow.tsx
diff --git a/app/governance/components/ProposalTable/ProposalTable.module.scss b/app/governance/components/ProposalTable/ProposalTable.module.scss
@@ -23,7 +23,6 @@
     .tableTitleColumn {
       display: flex;
       flex-direction: row;
-      padding-left: 20px;
       padding-right: 10px;
     }
     .proposalStatus {

diff --git a/app/governance/components/ProposalTable/ProposalTable.tsx b/app/governance/components/ProposalTable/ProposalTable.tsx
@@ -15,6 +15,7 @@ import { getAnalyticsProposalInfo } from "@/utils/analytics";
 
 interface TableProps {
   proposals: Proposal[];
+  isMobile: boolean;
 }
 
 const PAGE_SIZE = 10;
@@ -24,7 +25,7 @@ enum ProposalFilter {
   REJECTED = "REJECTED PROPOSALS",
 }
 
-const ProposalTable = ({ proposals }: TableProps) => {
+const ProposalTable = ({ proposals, isMobile }: TableProps) => {
   // route to proposal page
   const router = useRouter();
   const handleRowClick = (proposalId: any) => {
@@ -90,15 +91,18 @@ const ProposalTable = ({ proposals }: TableProps) => {
     {
       value: "",
       ratio: 2,
+      hideOnMobile: true,
     },
 
     {
       value: "",
       ratio: 2,
+      hideOnMobile: true,
     },
     {
       value: "",
       ratio: 1,
+      hideOnMobile: true,
     },
   ];
   return (
@@ -122,9 +126,9 @@ const ProposalTable = ({ proposals }: TableProps) => {
                   : undefined
               }
               removeHeader={true}
-              rowHeight="120px"
+              rowHeight={isMobile ? "180px" : "120px"}
               content={activeProposals.map((proposal) =>
-                ProposalRow({ proposal, active: true })
+                ProposalRow({ proposal, active: true, isMobile })
               )}
             />
           }
@@ -138,7 +142,13 @@ const ProposalTable = ({ proposals }: TableProps) => {
             />
           </div>
           <div style={{ paddingLeft: "20px" }}>
-            <Text font="rm_mono">There are currently no active proposals</Text>
+            {isMobile ? (
+              <Text font="rm_mono">There are no active proposals</Text>
+            ) : (
+              <Text font="rm_mono">
+                There are currently no active proposals
+              </Text>
+            )}
           </div>
         </div>
       )}
@@ -148,9 +158,20 @@ const ProposalTable = ({ proposals }: TableProps) => {
       <div className={styles.table}>
         {
           <Table
-            title={currentFilter}
+            title={
+              !isMobile ? (
+                currentFilter
+              ) : (
+                <Container style={{ marginLeft: "8px" }}>
+                  {currentFilter}
+                </Container>
+              )
+            }
             secondary={
-              <Container width="400px">
+              <Container
+                width={isMobile ? "100%" : "400px"}
+                style={{ padding: isMobile ? "20px 16px 0 16px" : "" }}
+              >
                 <ToggleGroup
                   options={Object.values(ProposalFilter).map(
                     (filter) => filter.split(" ")[0]
@@ -180,7 +201,7 @@ const ProposalTable = ({ proposals }: TableProps) => {
                 : undefined
             }
             removeHeader={true}
-            rowHeight="120px"
+            rowHeight={isMobile ? "180px" : "120px"}
             content={
               paginatedProposals.length > 0
                 ? [
@@ -190,9 +211,10 @@ const ProposalTable = ({ proposals }: TableProps) => {
                           proposal.status != "PROPOSAL_STATUS_VOTING_PERIOD"
                       )
                       .map((proposal) =>
-                        ProposalRow({ proposal, active: false })
+                        ProposalRow({ proposal, active: false, isMobile })
                       ),
                     <Pagination
+                      isMobile={isMobile}
                       key="pagination"
                       currentPage={currentPage}
                       totalPages={totalPages}

diff --git a/app/governance/components/VotingInfoBox/VotingInfoBox.module.scss b/app/governance/components/VotingInfoBox/VotingInfoBox.module.scss
@@ -5,7 +5,6 @@
   cursor: pointer;
   padding: 10px;
   height: 100%;
-  width: 48%;
   border: 1px solid var(--border-stroke-color, #b3b3b3);
 }
 
@@ -30,11 +29,12 @@
   }
 }
 
-.optionName {
+.option{
   display: flex;
   flex-direction: row;
   align-items: center;
-  width: 50%;
+  width: 100%;
+  height: 80px;
 }
 
 .optionVotes {

diff --git a/app/governance/components/VotingInfoBox/VotingInfoBox.tsx b/app/governance/components/VotingInfoBox/VotingInfoBox.tsx
@@ -44,7 +44,7 @@ export function VotingInfoBox({
           : { border: "1px solid var(--border-stroke-color, #b3b3b3)" }
       }
     >
-      <div className={styles.optionName}>
+      <div className={styles.option}>
         <Container direction="row">
           <div>
             <Text font="proto_mono" size="sm">

diff --git a/app/governance/components/votingChart/voteGraph.module.scss b/app/governance/components/votingChart/voteGraph.module.scss
@@ -17,46 +17,48 @@
   justify-content: space-around;
   margin: 20px 20px 20px 20px;
   border-bottom: 1px solid var(--border-stroke-color, #b3b3b3);
-  .graph {
-    cursor: auto;
-    width: 30px;
-    margin-right: 30px;
-    margin-left: 30px;
-    border-radius: 5px 5px 0 0;
-    background-color: var(--graph-fill-color, #d0d0d0);
-    border: 1px solid var(--graph-stroke-color, #b3b3b3);
-    border-bottom: none;
-    //border-bottom: 1px solid var(--border-stroke-color, #b3b3b3);
-  }
-  .voteInfo {
+  .barContainer {
     display: flex;
-    flex-direction: row;
-    justify-content: center;
+    flex-direction: column-reverse;
+
+    align-items: center;
+    width: 25%;
+    .bar {
+      cursor: auto;
+      margin-right: 30px;
+      margin-left: 30px;
+      border-radius: 5px 5px 0 0;
+      background-color: var(--graph-fill-color, #d0d0d0);
+      border: 1px solid var(--graph-stroke-color, #b3b3b3);
+      border-bottom: none;
+    }
+    .amountInfo {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+      align-content: center;
+      margin-bottom: 20px;
+      padding: 4px;
+      width: fit-content;
+      border-radius: 2px;
+      background-color: var(--graph-fill-color, #d0d0d0);
+      .icon {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding-left: 2px;
+      }
   }
-  .amountInfo {
+
+  .voteInfo {
     display: flex;
     flex-direction: row;
     justify-content: center;
-    margin-bottom: 20px;
-    padding: 5px 5px 5px 5px;
-    width: 90px;
-    //padding: 5px;
-    border-radius: 2px;
-    background-color: var(--graph-fill-color, #d0d0d0);
-    .icon {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      padding-left: 2px;
-    }
   }
-  .barContainer {
-    display: flex;
-    flex-direction: column-reverse;
-    //height: 60%;
-    width: 25%;
-    //padding-right: 5%;
+
   }
+
 }
 
 .inforow {
@@ -67,7 +69,7 @@
   .voteOption {
     display: flex;
     flex-direction: row;
-    justify-content: left;
+    justify-content: center;
     width: 25%;
     //margin-right: 5%;