finish settings menu open/close buttons & styling

src/App.vue

@@ -2,7 +2,18 @@
     <div id="app">
         <div class="columns is-justify-content-end pt-2">
             <div class="column is-1 mr-2">
-                <b-icon @click.native="openSettings" id="settingsCog" pack="fas" icon="cog" custom-size="3x"></b-icon>
+                <b-icon @click.native="isSettingsMenuActive = true" id="settingsCog" pack="fas" icon="cog" custom-size="3x"></b-icon>
+                <b-modal
+                    v-model="isSettingsMenuActive"
+                    has-modal-card
+                    trap-focus
+                    :destroy-on-hide="false"
+                    aria-role="dialog"
+                    aria-modal>
+                    <template #default="props">
+                        <SettingsMenu v-bind="settings" @close="props.close"></SettingsMenu>
+                    </template>
+                </b-modal>
             </div>
         </div>
         <div id="expression" class="animate__animated animate__faster" :class="currentAnimation"
@@ -65,8 +76,10 @@ html::-webkit-scrollbar {
 
 a, p, span {
     color: hsl(0, 0%, 91%);
+    #expression {
         text-shadow: hsl(0, 0%, 5%) 5px 5px;
     }
+}
 
 #question-text {
     font-family: "Computer Modern", serif;
@@ -97,9 +110,11 @@ a, p, span {
 
 <script>
 import arithmetic from './arithmetic.js';
+import SettingsMenu from "@/components/SettingsMenu";
 
 export default {
     name: 'App',
+    components: {SettingsMenu},
     data() {
         return {
             answer: null,
@@ -108,7 +123,11 @@ export default {
             inputClass: '',
             allowInputSubmit: true,
             currentAnimation: '',
-            chances: 3
+            chances: 3,
+            settings: {
+                levels: []
+            },
+            isSettingsMenuActive: false
         }
     },
     computed: {

src/components/SettingsMenu.vue

@@ -0,0 +1,27 @@
+<template>
+    <div class="modal-card">
+        <header class="modal-card-head">
+            <p class="modal-card-title">Settings</p>
+            <b-icon @click.native="$parent.close()" class="is-clickable" pack="fas" icon="times"></b-icon>
+        </header>
+        <section class="modal-card-body">
+        </section>
+    </div>
+</template>
+
+<style lang="scss">
+
+</style>
+
+<script>
+export default {
+    name: 'SettingsMenu',
+    data() {
+        return {
+            levels: []
+        }
+    },
+    created() {
+    }
+}
+</script>

src/main.js

@@ -1,8 +1,8 @@
 import Vue from 'vue'
 import VueKatex from 'vue-katex';
-import {ConfigProgrammatic, Input, Field, Button, Icon} from 'buefy';
+import {ConfigProgrammatic, Input, Field, Button, Icon, Modal} from 'buefy';
 import {library} from '@fortawesome/fontawesome-svg-core';
-import {faCog} from "@fortawesome/free-solid-svg-icons";
+import {faCog, faTimes} from "@fortawesome/free-solid-svg-icons";
 import {FontAwesomeIcon} from "@fortawesome/vue-fontawesome";
 import App from './App.vue'
 import 'katex/dist/katex.min.css';
@@ -10,13 +10,14 @@ import './scss/buefy.scss';
 import 'animate.css/animate.min.css';
 
 Vue.config.productionTip = false
-library.add(faCog);
+library.add(faCog, faTimes);
 Vue.component('vue-fontawesome', FontAwesomeIcon);
 
 Vue.use(Input);
 Vue.use(Field);
 Vue.use(Button);
 Vue.use(Icon);
+Vue.use(Modal);
 ConfigProgrammatic.setOptions({
     defaultIconComponent: 'vue-fontawesome',
     defaultIconPack: 'fas'

src/scss/buefy.scss

@@ -1,9 +1,17 @@
+@charset "utf-8";
+
 // Import Bulma's core
 @import "~bulma/sass/utilities/_all";
 
 // Dark Mode
+$background: hsl(0, 0%, 13%);
 $scheme-main: hsl(0, 0%, 6%);
 $scheme-invert: $white;
+$text: hsl(0, 0%, 90%);
+$text-strong: hsl(0, 0%, 95%);
+$modal-background-background-color: bulmaRgba($scheme-main, 0.6);
+$modal-card-body-background-color: darken($background, 4%);
+$border: darken($modal-background-background-color, 30%);
 
 // Import Bulma and Buefy styles
 @import "~bulma";