Move "Toggle Design" button into new /settings/appearance route

Author: Turbo87

app/components/settings-page.hbs

@@ -1,6 +1,9 @@
 <div local-class="page" ...attributes>
   <SideMenu as |menu|>
     <menu.Item @link={{link "settings.profile"}}>Profile</menu.Item>
+    {{#if this.design.showToggleButton}}
+      <menu.Item @link={{link "settings.appearance"}}>Appearance</menu.Item>
+    {{/if}}
     <menu.Item @link={{link "settings.email-notifications"}}>Email Notifications</menu.Item>
     <menu.Item @link={{link "settings.tokens"}}>API Tokens</menu.Item>
   </SideMenu>

app/components/settings-page.js

@@ -0,0 +1,6 @@
+import { inject as service } from '@ember/service';
+import Component from '@glimmer/component';
+
+export default class SettingsPage extends Component {
+  @service design;
+}

app/controllers/settings/appearance.js

@@ -0,0 +1,6 @@
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+
+export default class AppearanceSettingsController extends Controller {
+  @service design;
+}

app/router.js

@@ -32,6 +32,7 @@ Router.map(function () {
     this.route('pending-invites');
   });
   this.route('settings', function () {
+    this.route('appearance');
     this.route('email-notifications');
     this.route('profile');
     this.route('tokens');

app/styles/application.module.css

@@ -122,23 +122,3 @@ noscript {
     margin: 15px 0;
     padding: 0 15px;
 }
-
-.toggle-design-button {
-    position: fixed;
-    bottom: 30px;
-    left: 30px;
-    z-index: 100;
-    padding: 10px;
-    border: none;
-    border-radius: 5px;
-    background: white;
-    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
-    color: black;
-    font-family: sans-serif;
-    cursor: pointer;
-
-    &:hover {
-        background: #f7f7f7;
-        box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
-    }
-}

app/styles/settings/appearance.module.css

@@ -0,0 +1,3 @@
+.toggle-button {
+    composes: yellow-button from '../shared/buttons.module.css';
+}

app/templates/application.hbs

@@ -14,10 +14,4 @@
   </div>
 </main>
 
-<Footer/>
-
-{{#if this.design.showToggleButton}}
-  <button type="button" local-class="toggle-design-button" {{on "click" this.design.toggle}}>
-    Toggle Design
-  </button>
-{{/if}}
+<Footer/>

app/templates/settings/appearance.hbs

@@ -0,0 +1,11 @@
+{{page-title 'Settings'}}
+
+<PageHeader @title="Account Settings" @icon="gear"/>
+
+<SettingsPage>
+  <h2>Appearance</h2>
+
+  <button type="button" local-class="toggle-button" {{on "click" this.design.toggle}}>
+    Toggle Design
+  </button>
+</SettingsPage>