From df74b0e67c66bcc5aaf01b87f43614f781160fae Mon Sep 17 00:00:00 2001
From: Daniel Scalzi <d_scalzi@yahoo.com>
Date: Mon, 14 Sep 2020 00:51:06 -0400
Subject: [PATCH] Convert media button CSS from px to rem.

---
 src/renderer/components/landing/Landing.css   |  9 +++----
 .../landing/mediabutton/MediaButton.css       | 25 +++++++++----------
 2 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/src/renderer/components/landing/Landing.css b/src/renderer/components/landing/Landing.css
index 5e43f73..a4bdede 100644
--- a/src/renderer/components/landing/Landing.css
+++ b/src/renderer/components/landing/Landing.css
@@ -285,8 +285,7 @@
     position: relative;
     display: flex;
     flex-direction: column;
-    margin-top: 25px;
-    height: calc(100% - 95px);
+    margin-top: 1.5625rem;
     width: 70px;
     align-items: center;
 }
@@ -299,10 +298,10 @@
 
 /* Divider bar between the external and internal icons. */
 .mediaDivider {
-    height: 1px;
-    width: 14px;
+    height: 0.0625rem;
+    width: 0.875rem;
     background: rgb(255, 255, 255);
-    margin: 10px 0;
+    margin: 0.625rem 0;
 }
 
 /*******************************************************************************
diff --git a/src/renderer/components/landing/mediabutton/MediaButton.css b/src/renderer/components/landing/mediabutton/MediaButton.css
index 3952bf0..6c462e8 100644
--- a/src/renderer/components/landing/mediabutton/MediaButton.css
+++ b/src/renderer/components/landing/mediabutton/MediaButton.css
@@ -3,23 +3,22 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    height: 27px;
+    height: 1.6875rem;
     position: relative;
 }
 
 /* Social media icon shared styles. */
 .mediaSVG {
     fill: #ffffff;
-    height: 12px;
     transition: 0.25s ease;
     cursor: pointer;
-    height: 12px;
-    width: 25px;
+    height: 0.75rem;
+    width: 1.5625rem;
 }
 .mediaSVG:hover,
 .mediaURL:focus .mediaSVG,
 .mediaSVG:active {
-    height: 20px;
+    height: 1.25rem;
 }
 
 /* Social media URL shared styles. */
@@ -79,27 +78,27 @@
 /* Settings icon colors. */
 .settingsSVG {
     stroke: #ffffff;
-    height: 15px;
+    height: 0.9375rem;
 }
 .mediaButton:hover .settingsSVG,
 .mediaButton:focus .settingsSVG,
 .mediaButton:active .settingsSVG {
-    height: 23px;
+    height: 1.4375rem;
 }
 
 .mediaTooltip {
     visibility: hidden;
     opacity: 0;
-    width: 75px;
-    height: 20px;
+    width: 4.6875rem;
+    height: 1.25rem;
     background-color: rgba(0, 0, 0, 0.75);
     text-align: center;
     border-radius: 4px;
     position: absolute;
     z-index: 1;
     right: 130%;
-    font-size: 12px;
-    line-height: 20px;
+    font-size: 0.75rem;
+    line-height: 1.25rem;
     transition: visibility 0s linear 0.25s, opacity 0.25s ease;
     color: #fff;
 }
@@ -108,8 +107,8 @@
     position: absolute;
     top: 50%;
     left: 100%;
-    margin-top: -5px;
-    border-width: 5px;
+    margin-top: -0.3125rem;
+    border-width: 0.3125rem;
     border-style: solid;
     border-color: transparent transparent transparent rgba(0, 0, 0, 0.75);
 }