responsive css.

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;
+    }
+}

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;
+    }
 }

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;
+    }
 }

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>

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;
+    }
 }

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,

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;
+    }
 }