Improvments so that the web layous are not affected

Plex-Engineer · Feb 26, 2024 · 2448373 · 2448373
1 parent 1ef5ea3
commit 2448373
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 42 deletions.
diff --git a/app/governance/components/ProposalTable/ProposalTable.tsx b/app/governance/components/ProposalTable/ProposalTable.tsx
@@ -137,7 +137,13 @@ const ProposalTable = ({ proposals, isMobile }: 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>
       )}

diff --git a/app/governance/gov.module.scss b/app/governance/gov.module.scss
@@ -20,51 +20,18 @@
   }
 }
 
-.active {
-  opacity: 1;
-  position: relative;
-  &::before {
-    content: "";
-    top: 0;
-    right: 0;
-    display: block;
-    position: absolute;
-    width: 10px;
-    transform: translate(20%, -80%) scale(1, 1);
-    height: 10px;
-    border-right: 2px solid var(--primary-dark-color);
-    border-top: 2px solid var(--primary-dark-color);
-  }
-  &::after {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    content: "";
-    display: block;
-    width: 10px;
-    transform: translate(-20%, 90%) scale(1, 1);
-    height: 10px;
-    border-left: 2px solid var(--primary-dark-color);
-    border-bottom: 2px solid var(--primary-dark-color);
-  }
-}
 
-.header {
-  justify-content: space-between;
-  width: 100%;
-  //align-items: center;
 
-  .title {
-    font-size: 32px !important;
-    text-align: left;
-    width: 50%;
-  }
-  .middleText {
-    padding: 10px 16px 10px 16px;
-    background-color: var(--card-surface-color, #f1f1f1);
-  }
+.title {
+  font-size: 32px !important;
+  text-align: left;
+}
+.middleText {
+  padding: 10px 16px 10px 16px;
+  background-color: var(--card-surface-color, #f1f1f1);
 }
 
+
 @media screen and (max-width: 768px) {
   .container {
     border-top: 1px solid var(--border-stroke-color,#b3b3b3);
@@ -78,5 +45,10 @@
       display: none;
     }
   }
+  .header{
+    // justify-content: space-between;
+    // width: 100%;
+  }
+
 
 }
diff --git a/app/governance/page.tsx b/app/governance/page.tsx
@@ -33,8 +33,10 @@ export default function GovernancePage() {
     <div>
       <div className={styles.container}>
         <Container
+          width="100%"
           className={styles.header}
           direction={isMobile ? "column" : "row"}
+          style={{ justifyContent: "space-between" }}
         >
           <div>
             <Text font="proto_mono" className={styles.title}>

diff --git a/app/governance/proposal/page.tsx b/app/governance/proposal/page.tsx
@@ -26,6 +26,7 @@ import {
 import Spacer from "@/components/layout/spacer";
 import useStaking from "@/hooks/staking/useStaking";
 import { VoteBarGraph } from "../components/votingChart/voteGraph";
+import useScreenSize from "@/hooks/helpers/useScreenSize";
 
 const VOTE_OPTION_COLORS = {
   [VoteOption.YES]: [
@@ -58,6 +59,7 @@ export default function Page() {
     chainId: chainId,
     userEthAddress: signer?.account.address,
   });
+  const { isMobile } = useScreenSize();
   // transaction
   function castVote(proposalId: number, voteOption: VoteOption | null) {
     if (signer) {