From 59b7073ec9d577455e20cef26954b546392172a1 Mon Sep 17 00:00:00 2001
From: Gabriel Rodriguez Alsina <gabriel.rodriguez@altoros.com>
Date: Thu, 4 Apr 2019 15:01:53 -0300
Subject: [PATCH] (fix) modal's responsive adjustments

---
 apps/block_scout_web/assets/css/app.scss      |   4 +
 .../assets/css/components/_modal.scss         | 100 +-----------------
 .../components/_modal_become_candidate.scss   |   9 ++
 .../components/_modal_bottom_disclaimer.scss  |  25 +++++
 .../assets/css/components/_modal_stake.scss   |  13 +++
 .../assets/css/components/_modal_status.scss  |  64 +++++++++++
 .../css/components/_modal_validator_info.scss |   9 ++
 7 files changed, 126 insertions(+), 98 deletions(-)
 create mode 100644 apps/block_scout_web/assets/css/components/_modal_become_candidate.scss
 create mode 100644 apps/block_scout_web/assets/css/components/_modal_bottom_disclaimer.scss
 create mode 100644 apps/block_scout_web/assets/css/components/_modal_stake.scss
 create mode 100644 apps/block_scout_web/assets/css/components/_modal_status.scss

diff --git a/apps/block_scout_web/assets/css/app.scss b/apps/block_scout_web/assets/css/app.scss
index 135485bd8b..276b078fee 100644
--- a/apps/block_scout_web/assets/css/app.scss
+++ b/apps/block_scout_web/assets/css/app.scss
@@ -105,6 +105,10 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "components/modal_validator_info";
 @import "components/form";
 @import "components/stakes_progress";
+@import "components/modal_status";
+@import "components/modal_bottom_disclaimer";
+@import "components/modal_become_candidate";
+@import "components/modal_stake";
 
 :export {
   primary: $primary;
diff --git a/apps/block_scout_web/assets/css/components/_modal.scss b/apps/block_scout_web/assets/css/components/_modal.scss
index 98e6284c5c..752033cbf5 100644
--- a/apps/block_scout_web/assets/css/components/_modal.scss
+++ b/apps/block_scout_web/assets/css/components/_modal.scss
@@ -3,9 +3,6 @@ $modal-horizontal-padding: 30px !default;
 $modal-vertical-padding: 25px !default;
 $modal-border-radius: 10px !default;
 $modal-gray-background: #f6f7f9 !default;
-$modal-status-graph-error: #ff0d51 !default;
-$modal-status-graph-warning: #ff8502 !default;
-$modal-status-graph-success: $primary!default;
 
 .modal-backdrop {
     background-color: $modal-overlay-color;
@@ -37,6 +34,8 @@ $modal-status-graph-success: $primary!default;
     font-size: 18px;
     font-weight: normal;
     text-align: left;
+    white-space: normal;
+    word-break: break-word;
 }
 
 .modal-content {
@@ -44,98 +43,3 @@ $modal-status-graph-success: $primary!default;
     position: relative;
 }
 
-.modal-bottom-disclaimer {
-    background-color: $modal-gray-background;
-    border-bottom-left-radius: $modal-border-radius;
-    border-bottom-right-radius: $modal-border-radius;
-    color: #a3a9b5;
-    display: flex;
-    font-size: 12px;
-    font-weight: normal;
-    line-height: 1.67;
-    padding: #{ $modal-vertical-padding } #{ $modal-horizontal-padding };
-    text-align: left;
-
-    &.b-b-r-0 {
-        border-bottom-right-radius: 0;
-    }
-
-    .modal-bottom-disclaimer-graphic {
-        flex-shrink: 0;
-        padding-right: 15px;
-    }
-
-    .modal-bottom-disclaimer-text {
-        flex-grow: 1;
-    }
-}
-
-.modal-become-candidate {
-    max-width: 100%;
-    width: 280px;
-}
-
-.modal-stake {
-    max-width: 100%;
-    width: 460px;
-}
-
-.modal-stake-two-cols {
-    display: flex;
-}
-
-.modal-status {
-    max-width: 100%;
-    width: 300px;
-}
-
-.modal-status-graph {
-    align-items: center;
-    border-top-left-radius: $modal-border-radius;
-    border-top-right-radius: $modal-border-radius;
-    display: flex;
-    height: 135px;
-    justify-content: center;
-
-    &-error {
-        background-color: $modal-status-graph-error;
-    }
-
-    &-warning {
-        background-color: $modal-status-graph-warning;
-    }
-
-    &-success {
-        background-color: $modal-status-graph-success;
-    }
-
-    svg {
-        margin-top: 15px;
-    }
-}
-
-.modal-status-body {
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    padding: #{ $modal-vertical-padding } #{ $modal-horizontal-padding };
-}
-
-.modal-status-title {
-    color: #333;
-    font-size: 18px;
-    font-weight: normal;
-    line-height: 1.2;
-    margin: 0 0 15px;
-    text-align: center;
-}
-
-.modal-status-text {
-    color: #a3a9b5;
-    font-size: 12px;
-    font-weight: normal;
-    line-height: 1.5;
-    margin: 0 0 25px;
-    text-align: center;
-}
\ No newline at end of file
diff --git a/apps/block_scout_web/assets/css/components/_modal_become_candidate.scss b/apps/block_scout_web/assets/css/components/_modal_become_candidate.scss
new file mode 100644
index 0000000000..fe8c463096
--- /dev/null
+++ b/apps/block_scout_web/assets/css/components/_modal_become_candidate.scss
@@ -0,0 +1,9 @@
+.modal-become-candidate {
+    max-width: 100%;
+    width: 280px;
+
+    @include media-breakpoint-down(sm) {
+        margin-left: auto;
+        margin-right: auto;
+    }
+}
\ No newline at end of file
diff --git a/apps/block_scout_web/assets/css/components/_modal_bottom_disclaimer.scss b/apps/block_scout_web/assets/css/components/_modal_bottom_disclaimer.scss
new file mode 100644
index 0000000000..bf45147663
--- /dev/null
+++ b/apps/block_scout_web/assets/css/components/_modal_bottom_disclaimer.scss
@@ -0,0 +1,25 @@
+.modal-bottom-disclaimer {
+    background-color: $modal-gray-background;
+    border-bottom-left-radius: $modal-border-radius;
+    border-bottom-right-radius: $modal-border-radius;
+    color: #a3a9b5;
+    display: flex;
+    font-size: 12px;
+    font-weight: normal;
+    line-height: 1.67;
+    padding: #{ $modal-vertical-padding } #{ $modal-horizontal-padding };
+    text-align: left;
+
+    &.b-b-r-0 {
+        border-bottom-right-radius: 0;
+    }
+
+    .modal-bottom-disclaimer-graphic {
+        flex-shrink: 0;
+        padding-right: 15px;
+    }
+
+    .modal-bottom-disclaimer-text {
+        flex-grow: 1;
+    }
+}
\ No newline at end of file
diff --git a/apps/block_scout_web/assets/css/components/_modal_stake.scss b/apps/block_scout_web/assets/css/components/_modal_stake.scss
new file mode 100644
index 0000000000..501d47ba47
--- /dev/null
+++ b/apps/block_scout_web/assets/css/components/_modal_stake.scss
@@ -0,0 +1,13 @@
+.modal-stake {
+    max-width: 100%;
+    width: 460px;
+
+    @include media-breakpoint-down(sm) {
+        margin-left: auto;
+        margin-right: auto;
+    }
+}
+
+.modal-stake-two-cols {
+    display: flex;
+}
\ No newline at end of file
diff --git a/apps/block_scout_web/assets/css/components/_modal_status.scss b/apps/block_scout_web/assets/css/components/_modal_status.scss
new file mode 100644
index 0000000000..cfc97b5130
--- /dev/null
+++ b/apps/block_scout_web/assets/css/components/_modal_status.scss
@@ -0,0 +1,64 @@
+$modal-status-graph-error: #ff0d51 !default;
+$modal-status-graph-warning: #ff8502 !default;
+$modal-status-graph-success: $primary!default;
+
+.modal-status {
+    max-width: 100%;
+    width: 300px;
+
+    @include media-breakpoint-down(sm) {
+        margin-left: auto;
+        margin-right: auto;
+    }
+}
+
+.modal-status-graph {
+    align-items: center;
+    border-top-left-radius: $modal-border-radius;
+    border-top-right-radius: $modal-border-radius;
+    display: flex;
+    height: 135px;
+    justify-content: center;
+
+    &-error {
+        background-color: $modal-status-graph-error;
+    }
+
+    &-warning {
+        background-color: $modal-status-graph-warning;
+    }
+
+    &-success {
+        background-color: $modal-status-graph-success;
+    }
+
+    svg {
+        margin-top: 15px;
+    }
+}
+
+.modal-status-body {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: #{ $modal-vertical-padding } #{ $modal-horizontal-padding };
+}
+
+.modal-status-title {
+    color: #333;
+    font-size: 18px;
+    font-weight: normal;
+    line-height: 1.2;
+    margin: 0 0 15px;
+    text-align: center;
+}
+
+.modal-status-text {
+    color: #a3a9b5;
+    font-size: 12px;
+    font-weight: normal;
+    line-height: 1.5;
+    margin: 0 0 25px;
+    text-align: center;
+}
\ No newline at end of file
diff --git a/apps/block_scout_web/assets/css/components/_modal_validator_info.scss b/apps/block_scout_web/assets/css/components/_modal_validator_info.scss
index 65a175099f..0c021fc7a1 100644
--- a/apps/block_scout_web/assets/css/components/_modal_validator_info.scss
+++ b/apps/block_scout_web/assets/css/components/_modal_validator_info.scss
@@ -1,6 +1,11 @@
 .modal-validator-info {
     max-width: 100%;
     width: 660px;
+
+    @include media-breakpoint-down(sm) {
+        margin-left: auto;
+        margin-right: auto;
+    }
 }
 
 .modal-validator-info-content {
@@ -16,6 +21,10 @@
     line-height: 1.67;
     padding: #{ $modal-vertical-padding } #{ $modal-horizontal-padding };
     row-gap: 30px;
+
+    @include media-breakpoint-down(sm) {
+        grid-template-columns: 1fr 1fr;
+    }
 }
 
 .modal-validator-info-item {