settings/appearance: Replace toggle button with radio buttons

Author: Turbo87

app/controllers/settings/appearance.js

@@ -1,6 +1,15 @@
 import Controller from '@ember/controller';
+import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
 
 export default class AppearanceSettingsController extends Controller {
   @service design;
+
+  get theme() {
+    return this.design.useNewDesign ? 'new-design' : 'classic';
+  }
+
+  @action setTheme(theme) {
+    this.design.setNewDesign(theme === 'new-design');
+  }
 }

app/styles/settings/appearance.module.css

@@ -1,3 +1,13 @@
-.toggle-button {
-    composes: yellow-button from '../shared/buttons.module.css';
+.themes-form {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+}
+
+.theme-label {
+    display: inline-block;
+    padding: 10px;
+    background: white;
+    border-radius: 6px;
+    box-shadow: 0 2px 3px hsla(51, 50%, 44%, .35);
 }

app/templates/settings/appearance.hbs

@@ -5,7 +5,25 @@
 <SettingsPage>
   <h2>Appearance</h2>
 
-  <button type="button" local-class="toggle-button" {{on "click" this.design.toggle}}>
-    Toggle Design
-  </button>
+  <form local-class="themes-form">
+    <label local-class="theme-label">
+      <RadioButton
+        @groupValue={{this.theme}}
+        @value="classic"
+        @onChange={{this.setTheme}}
+      />
+
+      Classic
+    </label>
+
+    <label local-class="theme-label">
+      <RadioButton
+        @groupValue={{this.theme}}
+        @value="new-design"
+        @onChange={{this.setTheme}}
+      />
+
+      Purple
+    </label>
+  </form>
 </SettingsPage>