Auto merge of #2482 - Turbo87:theme-switcher, r=pichfl

Add theme switcher in development mode

This will add a "Toggle Design" button to the development mode that toggles the color scheme and fonts to a new design proposal. This will allow us to incrementally improve the design and eventually switch over.

r? @pichfl

Author: bors

app/components/footer.module.css

@@ -2,6 +2,7 @@
     display: flex;
     justify-content: center;
     width: 100%;
+    background: var(--footer-bg-color);
 }
 
 .sep {

app/controllers/application.js

@@ -2,5 +2,6 @@ import Controller from '@ember/controller';
 import { inject as service } from '@ember/service';
 
 export default Controller.extend({
+  design: service(),
   flashMessages: service(),
 });

app/helpers/add-html-class.js

@@ -0,0 +1,14 @@
+import Helper from '@ember/component/helper';
+
+export default class extends Helper {
+  cssClass = null;
+
+  compute(positional, options) {
+    this.cssClass = options.class;
+    document.documentElement.classList.add(this.cssClass);
+  }
+
+  willDestroy() {
+    document.documentElement.classList.remove(this.cssClass);
+  }
+}

app/index.html

@@ -13,6 +13,7 @@
 
     <link rel="stylesheet" href="{{rootURL}}assets/vendor.css">
     <link rel="stylesheet" href="{{rootURL}}assets/cargo.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,400;0,600;0,800;1,400;1,600;1,800&display=swap">
 
     <link rel="manifest" href="{{rootURL}}manifest.webmanifest">
     <meta name="msapplication-config" content="{{rootURL}}browserconfig.xml">

app/services/design.js

@@ -0,0 +1,25 @@
+import { action } from '@ember/object';
+import Service, { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+
+import window from 'ember-window-mock';
+
+import config from '../config/environment';
+
+export default class DesignService extends Service {
+  @service fastboot;
+
+  @tracked useNewDesign = !this.fastboot.isFastBoot && window.localStorage.getItem('use-new-design') === 'true';
+  @tracked showToggleButton = config.environment === 'development';
+
+  constructor() {
+    super(...arguments);
+    window.toggleDesign = () => this.toggle();
+  }
+
+  @action
+  toggle() {
+    this.useNewDesign = !this.useNewDesign;
+    window.localStorage.setItem('use-new-design', String(this.useNewDesign));
+  }
+}

app/styles/application.module.css

@@ -1,4 +1,14 @@
 :root {
+    --violet: #2e2359;
+    --dark-grey: #2a3439;
+    --dark-green: #3b6837;
+
+    --header-bg-color: var(--dark-green);
+    --footer-bg-color: var(--dark-green);
+
+    /* Use the modern font stack inspired by Bootstrap 4 */
+    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+
     --main-color: #383838;
     --main-color-light: #858585;
     --main-bg: #f9f7ec;
@@ -9,21 +19,28 @@
     --separator-color: #284725;
 }
 
+:global(.new-design) {
+    --header-bg-color: var(--violet);
+    --main-bg: white;
+    --footer-bg-color: var(--dark-grey);
+
+    --font-family: "Fira Sans", sans-serif;
+}
+
 * {
     box-sizing: border-box;
 }
 
 html {
-    background-color: #3b6837;
+    background-color: var(--header-bg-color);
 }
 
 html, body {
     margin: 0;
 }
 
 body {
-    /* Use the modern font stack inspired by Bootstrap 4 */
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    font-family: var(--font-family);
     font-size: 16px;
     display: flex;
     flex-direction: column;
@@ -94,3 +111,23 @@ noscript {
         display: none;
     }
 }
+
+.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/templates/application.hbs

@@ -16,4 +16,14 @@
 
 <a href='https://github.com/rust-lang/crates.io' local-class='fork-me'>
   <img src='/assets/forkme.png' alt="Fork me on GitHub">
-</a>
+</a>
+
+{{#if this.design.showToggleButton}}
+  <button type="button" local-class="toggle-design-button" {{on "click" this.design.toggle}}>
+    Toggle Design
+  </button>
+{{/if}}
+{{#if this.design.useNewDesign}}
+  {{! template-lint-disable no-curly-component-invocation }}
+  {{add-html-class class="new-design"}}
+{{/if}}