From 2922b8c94c3e35e7c25f4319c71ccee0f7d8cd13 Mon Sep 17 00:00:00 2001
From: Srikanth Reddy <srikanthreddy@Srikanths-MacBook-Pro.local>
Date: Fri, 8 Oct 2021 09:30:12 +0530
Subject: [PATCH] responsive css.

---
 src/components/DataTable/index.css            | 57 ++++++++++++++++
 src/containers/Home/index.css                 |  8 +++
 .../Proposals/ProposalDialog/index.css        | 53 ++++++++++++++-
 .../Proposals/ProposalDialog/index.js         |  2 +-
 src/containers/Proposals/index.css            | 10 +++
 src/containers/Stake/Table.js                 |  1 -
 src/containers/Stake/index.css                | 65 +++++++++++++++++++
 7 files changed, 193 insertions(+), 3 deletions(-)

diff --git a/src/components/DataTable/index.css b/src/components/DataTable/index.css
index bdd47c3..a6cc50f 100644
--- a/src/components/DataTable/index.css
+++ b/src/components/DataTable/index.css
@@ -73,3 +73,60 @@
 .table tbody tr td[colspan='6'] {
     border-radius: 50px;
 }
+
+@media (max-width: 958px) {
+    .table table {
+        border-spacing: 0 10px;
+        margin-top: unset;
+    }
+
+    .table tbody tr td {
+        padding: 12px 20px;
+        margin-bottom: -1px;
+        border-radius: unset;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    .table tbody tr td > div {
+        text-align: left;
+    }
+
+    .table tbody tr td > div:last-child {
+        text-align: right;
+    }
+
+    .table tbody tr td:first-child {
+        border-radius: 10px 10px 0 0;
+    }
+
+    .table tbody tr td:last-child {
+        border-radius: 0 0 10px 10px;
+    }
+
+    .table tbody tr td:first-child > div:first-child,
+    .table tbody tr td:last-child > div:first-child {
+        display: none;
+    }
+
+    .table tbody tr td:first-child > div:nth-child(2),
+    .table tbody tr td:last-child > div:nth-child(2) {
+        width: 100%;
+    }
+}
+
+@media (max-width: 426px) {
+    .table table {
+        width: 100%;
+    }
+    .table table tbody,
+    .table table tbody tr,
+    .table tbody tr td {
+        width: 100%;
+    }
+
+    .table tbody tr td > div {
+        width: auto;
+    }
+}
diff --git a/src/containers/Home/index.css b/src/containers/Home/index.css
index 336cdd2..60d9877 100644
--- a/src/containers/Home/index.css
+++ b/src/containers/Home/index.css
@@ -184,6 +184,10 @@
     .home .card {
         padding: 50px 20px;
     }
+
+    .content_div .view_all {
+        font-size: 16px;
+    }
 }
 
 @media (max-width: 426px) {
@@ -219,4 +223,8 @@
     .connect_dialog form .text_field {
         width: 100%;
     }
+
+    .content_div .view_all {
+        display: none;
+    }
 }
diff --git a/src/containers/Proposals/ProposalDialog/index.css b/src/containers/Proposals/ProposalDialog/index.css
index 72c825f..3592148 100644
--- a/src/containers/Proposals/ProposalDialog/index.css
+++ b/src/containers/Proposals/ProposalDialog/index.css
@@ -82,6 +82,7 @@
 
 .proposal_dialog_section3_left .pds3l_c2.vote_details {
     justify-content: space-between;
+    flex-wrap: wrap;
 }
 
 .proposal_dialog_section2_content {
@@ -310,7 +311,7 @@
 
 @media (max-width: 769px) {
     .proposal_dialog .content {
-        padding: 20px 40px;
+        padding: 30px;
     }
 
     .proposal_dialog_section1 {
@@ -324,6 +325,27 @@
     .proposal_dialog_section1_status {
         margin: unset;
     }
+
+    .proposal_dialog_section3_left .vp_cards {
+        flex-wrap: wrap;
+    }
+
+    .proposal_dialog .voting_card {
+        padding: 30px;
+    }
+
+    .proposal_dialog_section3_left .vp_cards > p {
+        margin: 2px;
+    }
+
+    .proposals .vote_details > div {
+        width: 50%;
+        margin-bottom: 30px;
+    }
+
+    .proposal_dialog .already_voted {
+        margin-left: unset;
+    }
 }
 
 @media (max-width: 426px) {
@@ -339,6 +361,7 @@
 
     .proposal_dialog_section3_left .pds3l_c {
         flex-direction: column;
+        margin-bottom: 30px;
     }
 
     .proposal_dialog_section3_left .pds3l_c2,
@@ -365,4 +388,32 @@
     .proposal_dialog .voting_card .confirm_button {
         margin-top: 10px;
     }
+
+    .proposal_dialog .content {
+        padding: 20px;
+    }
+
+    .proposals .vote_details > div,
+    .proposals .pds3l_c2.vote_in_progress > div {
+        width: 100%;
+        margin-bottom: 20px;
+    }
+
+    .proposal_dialog_section3 {
+        margin-top: 20px;
+    }
+
+    .proposal_dialog_section3_left .pds3l_c2.type {
+        word-break: break-all;
+    }
+
+    .proposal_dialog .already_voted > p {
+        font-size: 18px;
+        line-height: 110%;
+        padding: 8px 20px;
+    }
+
+    .proposal_dialog .already_voted .icon {
+        display: none;
+    }
 }
diff --git a/src/containers/Proposals/ProposalDialog/index.js b/src/containers/Proposals/ProposalDialog/index.js
index 05fca13..cf027b7 100644
--- a/src/containers/Proposals/ProposalDialog/index.js
+++ b/src/containers/Proposals/ProposalDialog/index.js
@@ -174,7 +174,7 @@ class ProposalDialog extends Component {
                             </div>
                             <div className="pds3l_c">
                                 <p className="pds3l_c1">Type</p>
-                                <p className="pds3l_c2">{this.props.proposal && this.props.proposal.content &&
+                                <p className="pds3l_c2 type">{this.props.proposal && this.props.proposal.content &&
                                 this.props.proposal.content.type}</p>
                             </div>
                         </div>
diff --git a/src/containers/Proposals/index.css b/src/containers/Proposals/index.css
index 0d3e1b0..be78ec5 100644
--- a/src/containers/Proposals/index.css
+++ b/src/containers/Proposals/index.css
@@ -335,6 +335,12 @@
     }
 }
 
+@media (max-width: 958px) {
+    .proposals .proposals_content {
+        margin-top: unset;
+    }
+}
+
 @media (max-width: 769px) {
     .proposals .card {
         width: 100%;
@@ -357,4 +363,8 @@
     .proposals .heading {
         overflow: auto;
     }
+
+    .proposals .card .icon_info {
+        flex-wrap: wrap;
+    }
 }
diff --git a/src/containers/Stake/Table.js b/src/containers/Stake/Table.js
index 74c5432..d6fb73c 100644
--- a/src/containers/Stake/Table.js
+++ b/src/containers/Stake/Table.js
@@ -16,7 +16,6 @@ import classNames from 'classnames';
 class Table extends Component {
     render () {
         const options = {
-            responsive: 'standard',
             serverSide: false,
             print: false,
             fixedHeader: false,
diff --git a/src/containers/Stake/index.css b/src/containers/Stake/index.css
index caf4989..eb94fe3 100644
--- a/src/containers/Stake/index.css
+++ b/src/containers/Stake/index.css
@@ -149,6 +149,33 @@
     .stake .table {
         padding: 20px 30px;
     }
+
+    .table td .status {
+        width: max-content;
+        margin: auto;
+    }
+}
+
+@media (max-width: 958px) {
+    .stake .heading {
+        margin-top: unset;
+    }
+
+    .stake .table .validator {
+        width: 100%;
+    }
+
+    .table td .status {
+        margin-right: unset;
+    }
+
+    .stake .table .voting_power {
+        justify-content: flex-end;
+    }
+
+    .table td .tokens {
+        text-align: right;
+    }
 }
 
 @media (max-width: 769px) {
@@ -158,4 +185,42 @@
         backdrop-filter: unset;
         border-radius: unset;
     }
+
+    .stake .tabs > p {
+        font-size: 30px;
+    }
+}
+
+@media (max-width: 426px) {
+    .stake .heading {
+        overflow: auto;
+    }
+
+    .stake .tabs > p {
+        width: max-content;
+    }
+
+    .table .actions > span {
+        display: none;
+    }
+
+    .stake .table .actions {
+        justify-content: space-around;
+        flex-wrap: wrap;
+    }
+
+    .table .actions > button {
+        padding: 5px 10px;
+    }
+}
+
+@media (max-width: 375px) {
+    .stake .table .actions {
+        flex-direction: column;
+    }
+
+    .table .actions > button {
+        width: 100%;
+        margin: 4px 0;
+    }
 }