feat: use color preview for PWA colors, improve admin page styling

Signed-off-by: Alexander Skvortsov <sasha.skvortsov109@gmail.com>
askvortsov1 · Apr 13, 2023 · 4f605c8 · 4f605c8
1 parent 882efc1
commit 4f605c8
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 6 deletions.
diff --git a/js/src/admin/components/PWAPage.js b/js/src/admin/components/PWAPage.js
@@ -127,15 +127,15 @@ export default class PWAPage extends ExtensionPage {
                   placeholder: this.setting('theme_primary_color')(),
                   label: app.translator.trans('askvortsov-pwa.admin.pwa.colors.theme_color_label'),
                   help: app.translator.trans('askvortsov-pwa.admin.pwa.colors.theme_color_text'),
-                  type: 'text',
+                  type: 'color-preview',
                 })}
               </fieldset>
               <fieldset>
                 {this.buildSettingComponent({
                   setting: 'askvortsov-pwa.backgroundColor',
                   label: app.translator.trans('askvortsov-pwa.admin.pwa.colors.background_color_label'),
                   help: app.translator.trans('askvortsov-pwa.admin.pwa.colors.background_color_text'),
-                  type: 'text',
+                  type: 'color-preview',
                 })}
               </fieldset>
             </fieldset>

diff --git a/resources/less/admin.less b/resources/less/admin.less
@@ -1,7 +1,9 @@
 .PWAPage {
-    input,
-    textarea {
-        width: 49%;
+    @media @desktop-up {
+      .container {
+        max-width: 600px;
+        margin: 0;
+      }
     }
     fieldset {
         margin: 30px 0;
@@ -23,4 +25,4 @@
     .statusCheck .Alert {
         margin: 10px 0;
     }
-}
+}