SVG Refactor + Icon Hotfix

package.json

@@ -26,7 +26,8 @@
   },
   "devDependencies": {
     "@quasar/app": "^2.1.6",
-    "@types/node": "^14.14.6"
+    "@types/node": "^14.14.6",
+    "vue-svg-loader": "^0.17.0-beta.2"
   },
   "engines": {
     "node": ">= 10.18.1",

quasar.conf.js

@@ -83,6 +83,30 @@ module.exports = configure(function (/* ctx */) {
 
       // https://quasar.dev/quasar-cli/cli-documentation/handling-webpack
       extendWebpack (cfg) {
+        /*
+         * deletes 'svg' from old url-loader regex rule
+         * old: /\.(png|jpe?g|gif|svg|webp|avif)(\?.*)?$/
+         * new: /\.(png|jpe?g|gif|webp|avif)(\?.*)?$/
+         */
+        cfg.module.rules = cfg.module.rules.map(rule => {
+          const regstr = rule.test.toString()
+          if (regstr.includes('svg')) {
+            const newReg = new RegExp(regstr
+              .replace('svg', '') // delete all svg mentions
+              .replace('||', '|') // delete extra '|' operators
+              .replace('(|', '(')
+              .replace('|)', ')')
+              .slice(1, -1) // remove surrounding '/' signs
+            )
+            return { ...rule, test: newReg }
+          } else {
+            return rule
+          }
+        })
+        cfg.module.rules.push({
+          test: /\.svg$/,
+          use: ['vue-loader', 'vue-svg-loader']
+        })
       },
     },
 

src/components/CustomizePracticeCard.vue

@@ -1,118 +1,88 @@
 <template>
-  <div class="container">
-    <router-link id="customize-practice" to="/customize">
-      <q-btn
-        color="white"
-        id="btn-customize-practice"
-        size="20px"
-        round
-        text-color="white"
-        icon="settings"
-        >
-      <q-tooltip anchor="bottom middle" self="top middle" :offset="[10, 10]" content-class="bg-primary" content-style="font-size: 16px">
-        Customize Session
-      </q-tooltip>
-      </q-btn>
-    </router-link>
-    <!-- Header -->
-    <div class="practice-customization-container column full-width">
-      <div class="customize-practice-label">Your Practice Session</div>
-      <!-- Centered Flex container for 3 columns -->
-      <div class="practice-customization-columns row justify-evenly">
-        <!-- Mode Descriptor -->
-        <div class="practice-customization column justify-center items-center">
-          <q-icon v-if="isTimed" size="72px" class="icon-display-color q-mb-sm" name="alarm" large />
-          <q-icon v-else size="72px" class="icon-display-color q-mb-sm" name="help_outline" large />
-          <div class="practice-customization-label" v-if="isTimed">Timed Practice</div>
-          <div class="practice-customization-label" v-else>Math Worksheet</div>
-        </div>
-        <!-- Value Descriptor -->
-        <div class="practice-customization column justify-center items-center">
-          <div
-            v-if="isTimed"
-            class="practice-customization-value icon-display-color q-mb-sm"
-          >{{timeInMins}}</div>
-          <div
-            v-else
-            class="practice-customization-value icon-display-color q-mb-sm"
-          >{{practiceQuestionCount}}</div>
-          <div v-if="isTimed" class="practice-customization-label">Minutes</div>
-          <div v-else class="practice-customization-label">Questions</div>
-        </div>
-        <div class="practice-customization column justify-center">
-          <div v-if="isBasic" class="flex column">
-            <svg
-              width="56"
-              height="77"
-              viewBox="0 0 56 32"
-              class="icon-display-fill-color"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <rect x="12" y="12" width="32" height="8" />
-              <rect x="12" y="12" width="32" height="8" />
-              <rect width="8" height="32" />
-              <rect x="48" width="8" height="32" />
-            </svg>
-
-            <div class="practice-customization-label">Basic</div>
-          </div>
-          <div v-if="isNormal" class="flex column">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="75"
-              height="77"
-              class="icon-display-fill-color"
-              viewBox="0 0 75 31"
-            >
-              <rect x="19.9082" y="10.4523" width="35.0853" height="9.95261" />
-              <rect x="9.38232" y="0.5" width="7.01706" height="29.8578" />
-              <rect x="0.926758" y="5.47617" width="7.01706" height="19.9052" />
-              <rect x="58.502" y="0.5" width="7.01706" height="29.8578" />
-              <rect x="67.5884" y="5.47617" width="7.01706" height="19.9052" />
-            </svg>
-            <div class="practice-customization-label">Normal</div>
-          </div>
-          <div v-if="isAdvanced" class="flex column">
-            <svg
-              width="91"
-              height="77"
-              class="icon-display-fill-color"
-              viewBox="0 0 91 31"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <rect x="27.2646" y="10.5" width="35" height="10" />
-              <rect x="17.4448" y="0.5" width="7" height="30" />
-              <path d="M83.2646 10.5H90.2817V20.4526H83.2646V10.5Z" />
-              <rect x="0.264648" y="10.5" width="7" height="10" />
-              <rect x="9.26465" y="5.5" width="7" height="20" />
-              <rect x="65.2646" y="0.5" width="7" height="30" />
-              <rect x="74.2646" y="5.5" width="7" height="20" />
-            </svg>
-            <div class="practice-customization-label">Advanced</div>
-          </div>
-        </div>
+<q-card id="this-card">
+  <q-btn
+    id="customize-btn"
+    color="white"
+    size="20px"
+    round
+    icon="settings"
+    to="/customize"
+  >
+    <q-tooltip
+      anchor="bottom middle"
+      self="top middle"
+      :offset="[10, 10]"
+      content-class="bg-primary"
+      content-style="font-size: 16px"
+    >
+      Customize Session
+    </q-tooltip>
+  </q-btn>
+  <q-card-section class="q-pb-none">
+    <div class="header">Your Practice Session</div>
+  </q-card-section>
+  <q-card-section>
+    <div class="row justify-around no-wrap" id="content">
+      <div class="col-auto">
+        <template v-if="isTimed">
+          <q-icon size="72px" class="icon" name="alarm" large />
+          <div class="label">Timed Practice</div>
+        </template>
+        <template v-else>
+          <q-icon size="72px" class="icon" name="help_outline" large/>
+          <div class="label">Math Worksheet</div>
+        </template>
+      </div>
+      <div class="col-auto">
+        <template v-if="isTimed">
+          <div class="icon">{{timeInMins}}</div>
+          <div class="label">Minutes</div>
+        </template>
+        <template v-else>
+          <div class="icon">{{practiceQuestionCount}}</div>
+          <div class="label">Questions</div>
+        </template>
+      </div>
+      <div class="col-auto">
+        <template v-if="isBasic">
+          <BasicIcon style="display:block"/>
+          <div class="label">Basic</div>
+        </template>
+        <template v-if="isNormal">
+          <NormalIcon style="display:block"/>
+          <div class="label">Normal</div>
+        </template>
+        <template v-if="isAdvanced">
+          <AdvancedIcon style="display:block"/>
+          <div class="label">Advanced</div>
+        </template>
       </div>
     </div>
-  </div>
+  </q-card-section>
+</q-card>
 </template>
 
 <script lang="ts">
 import { PracticeGetters, PracticeActions } from "../store/practice/practice";
 import { mapGetters, mapActions } from "vuex";
 import { PracticeMode, Difficulty } from "../engine/models/math_question";
 
+import BasicIcon from "../assets/difficulty-icons/basic.svg"
+import NormalIcon from "../assets/difficulty-icons/normal.svg"
+import AdvancedIcon from "../assets/difficulty-icons/advanced.svg"
+
 export default {
-  props: {
-    icon: {
-      default: null
-    }
+  components: {
+    BasicIcon,
+    NormalIcon,
+    AdvancedIcon,
   },
   computed: {
     ...mapGetters({
       practiceMode: PracticeGetters.PRACTICE_MODE,
       practiceTime: PracticeGetters.PRACTICE_TIME,
       practiceQuestionCount: PracticeGetters.PRACTICE_QUESTION_COUNT,
-      difficulty: PracticeGetters.DIFFICULTY
+      difficulty: PracticeGetters.DIFFICULTY,
     }),
     isTimed() {
       const app: any = this;
@@ -139,61 +109,56 @@ export default {
 </script>
 
 <style scoped>
-.practice-customization-columns {
-  max-width: 343px;
+#this-card {
+  width: 85%;
+  max-width: 320px;
+  height: auto;
+  border-radius: 32px;
+  line-height: 1;
+  align-content: flex-start;
+  padding: 12px;
 }
-.practice-customization-container {
+
+#customize-btn {
   position: absolute;
+  left: 90%;
+  top: -20%;
+  z-index: 4;
+  color: #114489 !important;
 }
-.customize-practice-label {
+
+#content {
+  width: 100%;
+  text-align: center;
+}
+
+.header {
   color: #4f4f4f;
   font-size: 18px;
   font-family: "Montserrat", sans-serif;
-  margin: 12px 0 0 24px;
 }
 
-.practice-customization-value {
-  font-size: 72px;
-  line-height: 0.96;
-}
-
-.practice-customization-label {
-  font-size: 70px;
+.label {
   font-family: "Montserrat", sans-serif;
-  font-style: normal;
-  font-weight: 500;
   font-size: 12px;
-  line-height: 18px;
+  font-weight: 500;
   text-align: center;
+  vertical-align: top;
   color: #4f4f4f;
 }
-.container {
-  width: 84%;
-  height: 172px;
-  background: #ffffff;
-  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-  border-radius: 32px;
-  z-index: 2;
-}
-.icon-display-color {
+
+.icon {
+  width: 72px;
+  height: 72px;
+  font-size: 72px;
   color: #114489;
-}
-.icon-display-fill-color {
   fill: #114489;
 }
-#customize-practice {
-  position: relative;
-  z-index: 3;
-  float: right;
-  top: -20px;
-  left: 12px;
-}
-#btn-customize-practice {
-  z-index: 4;
-  color: #114489 !important;
-}
 
-.practice-customization {
-  height: 116px;
+.practice-customization-columns {
+  max-width: 343px;
+}
+.practice-customization-container {
+  position: absolute;
 }
-</style>
+</style>