From 63d91a2ee1284a0f1d443c2f0b9bcd6d70325954 Mon Sep 17 00:00:00 2001
From: Shiba <44804845+DeepDoge@users.noreply.github.com>
Date: Sun, 19 Dec 2021 01:57:29 +0300
Subject: [PATCH] Updated styles to use em instead of px

---
 src/common/components/ButtonRadio.sass |  3 ++-
 src/common/style.sass                  | 13 ++++++------
 src/popup/popup.sass                   | 11 +++++++++-
 src/popup/popup.tsx                    | 28 +++++++++++++++-----------
 4 files changed, 34 insertions(+), 21 deletions(-)

diff --git a/src/common/components/ButtonRadio.sass b/src/common/components/ButtonRadio.sass
index c92b557..f8d28e5 100644
--- a/src/common/components/ButtonRadio.sass
+++ b/src/common/components/ButtonRadio.sass
@@ -3,10 +3,11 @@
 .ButtonRadio
   display: flex
   justify-content: center
+  flex-wrap: wrap
+  gap: .25em
 
   .radio-button
     @extend .button
-    margin: 6px
 
   .radio-button.checked
     @extend .button.active
diff --git a/src/common/style.sass b/src/common/style.sass
index 960e230..452d0b4 100644
--- a/src/common/style.sass
+++ b/src/common/style.sass
@@ -5,30 +5,29 @@ $btn-color: #075656 !default
 $btn-select: teal !default
 
 body
-  width: 400px
+  width: 30em
   text-align: center
   background-color: $background-color
   color: $text-color
   font-family: sans-serif
+  padding: 1em
 
 .container
   display: block
   text-align: center
-  margin: 0 32px
-  margin-bottom: 15px
 
 .button
-  border-radius: 5px
+  border-radius: .5em
   background-color: $btn-color
-  border: 4px solid $btn-color
+  border: .2em solid $btn-color
   color: $text-color
   font-size: 0.8rem
   font-weight: 400
-  padding: 4px 15px
+  padding: .5em
   text-align: center
 
   &.active
-    border: 4px solid $btn-select
+    border-color: $btn-select
 
   &:focus
     outline: none
diff --git a/src/popup/popup.sass b/src/popup/popup.sass
index 0a40cd3..3cbb7e0 100644
--- a/src/popup/popup.sass
+++ b/src/popup/popup.sass
@@ -1,4 +1,13 @@
 .radio-label
     font-size: 1.1rem
-    margin: 15px auto
     display: block
+
+.container
+    display: grid
+    grid-auto-flow: row
+    gap: 1.5em
+
+.container > section
+    display: grid
+    grid-auto-flow: row
+    gap: 1em
\ No newline at end of file
diff --git a/src/popup/popup.tsx b/src/popup/popup.tsx
index f228829..fbab6a6 100644
--- a/src/popup/popup.tsx
+++ b/src/popup/popup.tsx
@@ -4,8 +4,6 @@ import { getTargetPlatfromSettingsEntiries, ExtensionSettings, TargetPlatformNam
 import { useLbrySettings } from '../common/useSettings'
 import './popup.sass'
 
-
-
 /** Utilty to set a setting in the browser */
 const setSetting = <K extends keyof ExtensionSettings>(setting: K, value: ExtensionSettings[K]) => chrome.storage.local.set({ [setting]: value });
 
@@ -17,16 +15,22 @@ function WatchOnLbryPopup() {
   const { redirect, targetPlatform } = useLbrySettings();
 
   return <div className='container'>
-    <label className='radio-label'>Enable Redirection:</label>
-    <ButtonRadio value={redirect ? 'YES' : 'NO'} options={['YES', 'NO']}
-      onChange={redirect => setSetting('redirect', redirect.toLowerCase() === 'yes')} />
-    <label className='radio-label'>Where would you like to redirect?</label>
-    <ButtonRadio value={targetPlatform} options={platformOptions}
-      onChange={(platform: TargetPlatformName) => setSetting('targetPlatform', platform)} />
-    <label className='radio-label'>Other useful tools:</label>
-    <a href='/tools/YTtoLBRY.html' target='_blank'>
-      <button type='button' className='btn1 button is-primary'>Subscriptions Converter</button>
-    </a>
+    <section>
+      <label className='radio-label'>Enable Redirection:</label>
+      <ButtonRadio value={redirect ? 'YES' : 'NO'} options={['YES', 'NO']}
+        onChange={redirect => setSetting('redirect', redirect.toLowerCase() === 'yes')} />
+    </section>
+    <section>
+      <label className='radio-label'>Where would you like to redirect?</label>
+      <ButtonRadio value={targetPlatform} options={platformOptions}
+        onChange={(platform: TargetPlatformName) => setSetting('targetPlatform', platform)} />
+    </section>
+    <section>
+      <label className='radio-label'>Other useful tools:</label>
+      <a href='/tools/YTtoLBRY.html' target='_blank'>
+        <button type='button' className='btn1 button is-primary'>Subscriptions Converter</button>
+      </a>
+    </section>
   </div>;
 }