From 0346a6d67d262346ed0bd60ad5ba47e9e657bb22 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20L=C3=A1zaro?= <vlazaro@outlook.es>
Date: Sun, 5 Jul 2020 19:10:12 +0200
Subject: [PATCH] fix(renderer): alignment of elements in view

Previously, elements were not properly aligned with each other.
---
 desktop-app/app/components/Renderer/index.js  | 22 ++++++++++---------
 .../app/components/Renderer/style.module.css  |  8 ++++++-
 .../app/components/WebView/style.module.css   | 11 ++++++++--
 3 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/desktop-app/app/components/Renderer/index.js b/desktop-app/app/components/Renderer/index.js
index e5bf69c3..3dc5fcfe 100644
--- a/desktop-app/app/components/Renderer/index.js
+++ b/desktop-app/app/components/Renderer/index.js
@@ -24,16 +24,18 @@ function Renderer(props) {
     <div className={cx(styles.container, {[styles.hidden]: props.hidden})}>
       <div className={styles.titleContainer}>
         {getDeviceIcon(props.device.type)}
-        <span className={cx(styles.deviceTitle)}>{props.device.name}</span>
-        <div className={cx(styles.deviceSize)}>
-          {isFlip ? dimension.reverse().join('') : dimension.join('')}
-        </div>
-        <div className={cx(styles.loaderContainer)}>
-          {loading && (
-            <div>
-              <Spinner size={16} />
-            </div>
-          )}
+        <div className={styles.deviceInfo}>
+          <span className={cx(styles.deviceTitle)}>{props.device.name}</span>
+          <div className={cx(styles.deviceSize)}>
+            {isFlip ? dimension.reverse().join('') : dimension.join('')}
+          </div>
+          <div className={cx(styles.loaderContainer)}>
+            {loading && (
+              <div>
+                <Spinner size={16} />
+              </div>
+            )}
+          </div>
         </div>
       </div>
       <div className={cx(styles.deviceWrapper)}>
diff --git a/desktop-app/app/components/Renderer/style.module.css b/desktop-app/app/components/Renderer/style.module.css
index ae0c5c4b..8366b9ec 100644
--- a/desktop-app/app/components/Renderer/style.module.css
+++ b/desktop-app/app/components/Renderer/style.module.css
@@ -5,7 +5,7 @@
 .deviceTitle {
   font-weight: normal;
   font-size: 16px;
-  margin-right: 2px;
+  margin: 0 6px -2px 4px;
 }
 
 .deviceSize {
@@ -25,10 +25,16 @@
 }
 
 .titleContainer {
+  margin: 3px;
   display: flex;
   align-items: center;
 }
 
+.deviceInfo {
+  display: flex;
+  align-items: flex-end;
+}
+
 .hidden {
   display: none;
 }
diff --git a/desktop-app/app/components/WebView/style.module.css b/desktop-app/app/components/WebView/style.module.css
index 910e229b..ce0238e5 100644
--- a/desktop-app/app/components/WebView/style.module.css
+++ b/desktop-app/app/components/WebView/style.module.css
@@ -4,7 +4,7 @@
 }
 
 .webViewToolbar {
-  padding: 5px;
+  margin: 8px 3px 3px 3px;
   display: flex;
   justify-content: space-between;
 }
@@ -13,12 +13,19 @@
   display: flex;
 }
 
+.webViewToolbarLeft .webViewToolbarIcons {
+  margin-right: 4px;
+}
+
 .webViewToolbarRight {
   display: flex;
 }
 
+.webViewToolbarRight .webViewToolbarIcons {
+  margin-left: 4px;
+}
+
 .webViewToolbarIcons {
-  margin-right: 2px;
   padding: 0 2px;
   align-items: center;
   justify-content: center;