feat(GUI): center content independent to window resolution (#2299)

We pave way for different sizes of Etcher windows by dynamically
centering the content with flexbox.

Connects-To: #2263
Closes: #2241
Change-Type: patch
Changelog-Entry: Center content independent to window resolution.

lib/gui/app/components/safe-webview.js

@@ -65,8 +65,10 @@ const API_VERSION_PARAM = 'api-version'
  * should only be changed when truly necessary as it introduces breaking changes.
  * This version number is exposed to the banner such that it can determine what
  * features are safe to utilize.
+ *
+ * See `git blame -L n` where n is the line below for the history of version changes.
  */
-const API_VERSION = 1
+const API_VERSION = 2
 
 /**
  * @summary Webviews that hide/show depending on the HTTP status returned

lib/gui/app/pages/finish/styles/_finish.scss

@@ -16,6 +16,7 @@
 
 .page-finish {
   margin-top: -25px;
+  flex: 1;
 }
 
 .page-finish .button-label {

lib/gui/app/pages/main/styles/_main.scss

@@ -14,14 +14,19 @@
  * limitations under the License.
  */
 
-.page-main {
-margin-top: 50px;
-}
-
 svg-icon > img[disabled] {
   opacity: $disabled-opacity;
 }
 
+.page-main {
+  flex: 1;
+  align-self: center;
+}
+
+.page-main > .col-xs {
+  height: 165px;
+}
+
 .page-main .step-selection-text {
   display: flex;
   flex-wrap: wrap;

lib/gui/app/scss/main.scss

@@ -72,6 +72,21 @@ $disabled-opacity: 0.2;
 
 body {
   letter-spacing: 1px;
+  display: flex;
+  flex-direction: column;
+
+  > header {
+    flex: 0 0 auto;
+  }
+
+  > main {
+    flex: 1;
+    display: flex;
+  }
+
+  > footer {
+    flex: 0 0 auto;
+  }
 }
 
 body,
@@ -84,13 +99,10 @@ body,
   display: flex;
   align-items: center;
   justify-content: center;
+  position: relative;
 
-  position: fixed;
-  bottom: 20px;
-  left: 0;
-  right: 0;
   color: $palette-theme-dark-disabled-foreground;
-  margin: 0 60px;
+  margin: 0 60px 20px 60px;
   padding-top: 15px;
   border-top: 2px solid $palette-theme-dark-soft-background;
   text-align: center;
@@ -139,7 +151,7 @@ body,
     bottom: 0;
     left: 0;
     width: 100%;
-    height: 255px;
+    height: 355px;
   }
 }
 

lib/gui/css/main.css

@@ -6522,12 +6522,16 @@ svg-icon {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.page-main {
-  margin-top: 50px; }
-
 svg-icon > img[disabled] {
   opacity: 0.2; }
 
+.page-main {
+  flex: 1;
+  align-self: center; }
+
+.page-main > .col-xs {
+  height: 165px; }
+
 .page-main .step-selection-text {
   display: flex;
   flex-wrap: wrap;
@@ -6709,7 +6713,8 @@ svg-icon > img[disabled] {
  * limitations under the License.
  */
 .page-finish {
-  margin-top: -25px; }
+  margin-top: -25px;
+  flex: 1; }
 
 .page-finish .button-label {
   margin: 0 auto 15px;
@@ -6829,7 +6834,16 @@ svg-icon > img[disabled] {
   font-style: normal; }
 
 body {
-  letter-spacing: 1px; }
+  letter-spacing: 1px;
+  display: flex;
+  flex-direction: column; }
+  body > header {
+    flex: 0 0 auto; }
+  body > main {
+    flex: 1;
+    display: flex; }
+  body > footer {
+    flex: 0 0 auto; }
 
 body,
 .tooltip,
@@ -6840,12 +6854,9 @@ body,
   display: flex;
   align-items: center;
   justify-content: center;
-  position: fixed;
+  position: relative;
-  bottom: 20px;
-  left: 0;
-  right: 0;
   color: #787c7f;
-  margin: 0 60px;
+  margin: 0 60px 20px 60px;
   padding-top: 15px;
   border-top: 2px solid #64686a;
   text-align: center; }
@@ -6877,7 +6888,7 @@ body,
   bottom: 0;
   left: 0;
   width: 100%;
-  height: 255px; }
+  height: 355px; }
 
 .wrapper {
   height: 100%;