From d8376b39cea4db4dcd3962012a8bcd8110dbf3f4 Mon Sep 17 00:00:00 2001
From: Alziratt <dragontech.draegan@outlook.com>
Date: Wed, 13 Feb 2019 13:15:56 -0200
Subject: [PATCH] Minor work on the buttons and some of the text.

---
 src/ext/conf/Debug.js                     |  2 +-
 src/ext/conf/ExtensionConf.js             |  2 +-
 src/popup/panels/DefaultSettingsPanel.vue | 12 +++++-----
 src/popup/panels/VideoPanel.vue           |  4 ++--
 src/res/css/colors.scss                   |  4 +++-
 src/res/css/common.scss                   | 29 ++++++++++++++++-------
 6 files changed, 33 insertions(+), 20 deletions(-)

diff --git a/src/ext/conf/Debug.js b/src/ext/conf/Debug.js
index a35b740..6ecb061 100644
--- a/src/ext/conf/Debug.js
+++ b/src/ext/conf/Debug.js
@@ -14,7 +14,7 @@ var Debug = {
   comms: true,
   // showArDetectCanvas: true,
   // flushStoredSettings: true,
-  flushStoredSettings: false,
+  flushStoredSettings: true,
   playerDetectDebug: true,
   periodic: true,
   // videoRescan: true,
diff --git a/src/ext/conf/ExtensionConf.js b/src/ext/conf/ExtensionConf.js
index fdc4e70..e118969 100644
--- a/src/ext/conf/ExtensionConf.js
+++ b/src/ext/conf/ExtensionConf.js
@@ -685,7 +685,7 @@ var ExtensionConf = {
     }
   },{
     name: 'Enable automatic aspect ratio detection',
-    label: 'Enabled',
+    label: 'Enable',
     cmd: [{
       action: 'set-autoar-mode',
       arg: ExtensionMode.Enabled,
diff --git a/src/popup/panels/DefaultSettingsPanel.vue b/src/popup/panels/DefaultSettingsPanel.vue
index f8794cb..00d87c8 100644
--- a/src/popup/panels/DefaultSettingsPanel.vue
+++ b/src/popup/panels/DefaultSettingsPanel.vue
@@ -9,7 +9,7 @@
       <div class="flex flex-row flex-wrap">
         <template v-for="action of siteActions">
           <ShortcutButton v-if="action.cmd.length === 1 && action.cmd[0].action === 'set-extension-mode'"
-                          class="flex button"
+                          class="flex flex-grow button"
                           :class="{'setting-selected': getDefault('set-extension-mode') === action.cmd[0].arg}"
                           :label="(action.scopes[scope] && action.scopes[scope].label) ? action.scopes[scope].label : action.label"
                           :shortcut="parseShortcut(action)"
@@ -25,11 +25,10 @@
          class="w100"
     >
       <div class="label">Enable autodetection {{scope === 'site' ? 'for this site' : ''}}:</div>
-      <div class="warning"><small>Note: some sites implement restrictions that make autodetection a fair bit less reliable in Firefox and outright impossible in anything else.</small></div>
       <div class="flex flex-row flex-wrap">
         <template v-for="action of siteActions">
           <ShortcutButton v-if="action.cmd.length === 1 && action.cmd[0].action === 'set-autoar-mode'"
-                          class="flex button"
+                          class="flex flex-grow button"
                           :class="{'setting-selected': getDefault('set-autoar-mode') === action.cmd[0].arg}"
                           :label="(action.scopes[scope] && action.scopes[scope].label) ? action.scopes[scope].label : action.label"
                           :shortcut="parseShortcut(action)"
@@ -37,6 +36,7 @@
           >
           </ShortcutButton>
         </template>
+      <div class="info"><small>Note: some sites implement restrictions that make autodetection a fair bit less reliable in Firefox and outright impossible in anything else.</small></div>
       </div>
     </div>
 
@@ -46,7 +46,7 @@
       <div class="flex flex-row flex-wrap">
         <template v-for="action of siteActions">
           <ShortcutButton v-if="action.cmd.length === 1 && action.cmd[0].action === 'set-stretch'"
-                          class="flex b3 button"
+                          class="flex b3 flex-grow button"
                           :class="{'setting-selected': getDefault('set-stretch') === action.cmd[0].arg}"
                           :label="(action.scopes[scope] && action.scopes[scope].label) ? action.scopes[scope].label : action.label"
                           :shortcut="parseShortcut(action)"
@@ -62,7 +62,7 @@
       <div class="flex flex-row flex-wrap">
         <template v-for="action of settings.active.actions">
           <ShortcutButton v-if="action.scopes[scope] && action.scopes[scope].show && action.cmd.length === 1 && action.cmd[0].action === 'set-alignment'"
-                          class="flex b3 button"
+                          class="flex b3 flex-grow button"
                           :class="{'setting-selected': getDefault('set-alignment') === action.cmd[0].arg}"
                           :label="(action.scopes[scope] && action.scopes[scope].label) ? action.scopes[scope].label : action.label"
                           :shortcut="parseShortcut(action)"
@@ -78,7 +78,7 @@
       <div class="flex flex-row flex-wrap">
         <template v-for="action of settings.active.actions">
           <ShortcutButton v-if="action.scopes[scope] && action.scopes[scope].show && action.cmd.length > 1"
-                          class="flex b3 button"
+                          class="flex b3 flex-grow button"
                           :label="(action.scopes[scope] && action.scopes[scope].label) ? action.scopes[scope].label : action.label"
                           :shortcut="parseShortcut(action)"
                           @click.native="execAction(action)"
diff --git a/src/popup/panels/VideoPanel.vue b/src/popup/panels/VideoPanel.vue
index ef47d7a..64f2133 100644
--- a/src/popup/panels/VideoPanel.vue
+++ b/src/popup/panels/VideoPanel.vue
@@ -5,7 +5,7 @@
       <div class="flex flex-row flex-wrap">
         <template v-for="action of settings.active.actions">
           <ShortcutButton v-if="action.scopes.page && action.scopes.page.show && action.cmd.length === 1 && action.cmd[0].action === 'set-ar'"
-                          class="flex b3 button"
+                          class="flex b3 flex-grow button"
                           :label="(action.scopes.page && action.scopes.page.label) ? action.scopes.page.label : action.label"
                           :shortcut="parseShortcut(action)"
                           @click.native="execAction(action)"
@@ -55,7 +55,7 @@
       <div class="flex flex-row flex-wrap">
         <template v-for="action of settings.active.actions">
           <ShortcutButton v-if="action.scopes.page && action.scopes.page.show && action.cmd.length === 1 && action.cmd[0].action === 'set-stretch'"
-                          class="flex b3 button"
+                          class="flex b3 flex-grow button"
                           :label="(action.scopes.page && action.scopes.page.label) ? action.scopes.page.label : action.label"
                           :shortcut="parseShortcut(action)"
                           @click.native="execAction(action)"
diff --git a/src/res/css/colors.scss b/src/res/css/colors.scss
index abc88b6..812d109 100644
--- a/src/res/css/colors.scss
+++ b/src/res/css/colors.scss
@@ -8,4 +8,6 @@ $input-background: #242424;
 $page-background: #101010;
 
 $background-primary: #101010;
-$background-selected: #944918;
\ No newline at end of file
+$background-selected: #944918;
+
+$info-color: #e9bea3;
\ No newline at end of file
diff --git a/src/res/css/common.scss b/src/res/css/common.scss
index 291ede1..4901799 100644
--- a/src/res/css/common.scss
+++ b/src/res/css/common.scss
@@ -166,7 +166,7 @@ small {
 /* COLORS */
 
     
-.selected{
+.selected {
   color: #ffddaa !important;
   background-color: #433221 !important;
 }
@@ -213,11 +213,11 @@ small {
 }
 
 .button {
-  /* display: inline-block; */
+  /*display: inline-block;*/
   // padding-top: 8px;
   // padding-bottom: 3px;
-  // padding-left: 20px;
-  // padding-right: 20px;
+  //padding-left: 5px;
+  //padding-right: 5px;
   border: 1px solid #444;
   margin-top: 3px;
   margin-bottom: 3px;
@@ -227,7 +227,7 @@ small {
 
 .button:hover {
   color: #fff;
-  background-color: #433221;
+  background-color: $primary-color;
 }
 
 
@@ -249,6 +249,20 @@ small {
   padding-right: 10px;
 }
 
+.info {
+  color: $info-color;
+  padding-left: 35px;
+  float: right;
+}
+
+.info::before {
+  content: "ⓘ";
+  display: inline-block;
+  font-weight: bold;
+  margin-left: -35px;
+  padding-right: 10px;
+}
+
 .experimental::after {
   content: "Experimental";
   background-color: #ffde12;
@@ -259,7 +273,4 @@ small {
   padding-left: 5px;
   padding-right: 5px;
   margin-left: 10px;
-}
-
-
-/* Ignore this comment */
\ No newline at end of file
+}
\ No newline at end of file