From bbe6bc42e052d22db666c0ea7c41064131d794c1 Mon Sep 17 00:00:00 2001
From: Muhammed Hussein Karimi <info@karimi.dev>
Date: Sat, 11 Nov 2023 21:53:02 +0330
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20Using=20monospace=20fonts?=
 =?UTF-8?q?=20in=20editors?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Muhammed Hussein Karimi <info@karimi.dev>
---
 frontend/src/pages/Compose.vue       | 3 +++
 frontend/src/pages/DashboardHome.vue | 5 ++++-
 package.json                         | 1 +
 pnpm-lock.yaml                       | 7 +++++++
 4 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/Compose.vue b/frontend/src/pages/Compose.vue
index 1a12e78..b2cb3fa 100644
--- a/frontend/src/pages/Compose.vue
+++ b/frontend/src/pages/Compose.vue
@@ -587,11 +587,14 @@ export default {
 </script>
 
 <style scoped lang="scss">
+@import 'firacode/distr/fira_code.css';
+
 .terminal {
     height: 200px;
 }
 
 .editor-box {
+    font-family: 'Fira Code', monospace;
     &.edit-mode {
         background-color: #2c2f38 !important;
     }
diff --git a/frontend/src/pages/DashboardHome.vue b/frontend/src/pages/DashboardHome.vue
index d32ce45..909eccf 100644
--- a/frontend/src/pages/DashboardHome.vue
+++ b/frontend/src/pages/DashboardHome.vue
@@ -24,7 +24,8 @@
 
             <h2 class="mb-3">Docker Run</h2>
             <div class="mb-3">
-                <textarea id="name" v-model="dockerRunCommand" type="text" class="form-control docker-run" required placeholder="docker run ..."></textarea>
+                <textarea id="name" v-model="dockerRunCommand" type="text" class="form-control docker-run" required
+                    placeholder="docker run ..."></textarea>
             </div>
 
             <button class="btn-normal btn" @click="convertDockerRun">Convert to Compose</button>
@@ -191,6 +192,7 @@ export default {
 
 <style lang="scss" scoped>
 @import "../styles/vars";
+@import 'firacode/distr/fira_code.css';
 
 .num {
     font-size: 30px;
@@ -227,5 +229,6 @@ table {
 .docker-run {
     background-color: $dark-bg !important;
     border: none;
+    font-family: 'Fira Code', monospace;
 }
 </style>
diff --git a/package.json b/package.json
index e5738fe..fdeae5a 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
         "dayjs": "~1.11.10",
         "express": "~4.18.2",
         "express-static-gzip": "~2.1.7",
+        "firacode": "^6.2.0",
         "http-graceful-shutdown": "~3.1.13",
         "jsonwebtoken": "~9.0.2",
         "jwt-decode": "~3.1.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f7e7d75..d4917a9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -38,6 +38,9 @@ dependencies:
   express-static-gzip:
     specifier: ~2.1.7
     version: 2.1.7
+  firacode:
+    specifier: ^6.2.0
+    version: 6.2.0
   http-graceful-shutdown:
     specifier: ~3.1.13
     version: 3.1.13
@@ -2125,6 +2128,10 @@ packages:
       path-exists: 4.0.0
     dev: true
 
+  /firacode@6.2.0:
+    resolution: {integrity: sha512-t5R3aO2BmhRXnYtKXbImLVNsILuCIbJ/XlDzBufjpi3il8P/CVdpWco83Ud3r2Tl0gitAmyP4o1fbJ52ozV1jw==}
+    dev: false
+
   /flat-cache@3.1.1:
     resolution: {integrity: sha512-/qM2b3LUIaIgviBQovTLvijfyOQXPtSRnRK26ksj2J7rzPIecePUIpJsZ4T02Qg+xiAEKIs5K8dsHEd+VaKa/Q==}
     engines: {node: '>=12.0.0'}