From c3a39157ffdb217dc9e7fa16ff600386a1f95307 Mon Sep 17 00:00:00 2001
From: enes <mulahasanovic@outlook.com>
Date: Tue, 20 Aug 2024 15:47:51 +0200
Subject: [PATCH] fix(verify-page): remove mark border in production, enable
 dev flag for css classes

Hotfix
---
 src/layouts/Main.tsx               | 11 ++++++++++-
 src/pages/verify/style.module.scss |  7 ++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/layouts/Main.tsx b/src/layouts/Main.tsx
index 7b34720..ac233cc 100644
--- a/src/layouts/Main.tsx
+++ b/src/layouts/Main.tsx
@@ -145,10 +145,19 @@ export const MainLayout = () => {
 
   if (isLoading) return <LoadingSpinner desc={loadingSpinnerDesc} />
 
+  const isDev = import.meta.env.MODE === 'development'
+
   return (
     <>
       <AppBar />
-      <main className={styles.main}>
+      <main
+        className={styles.main}
+        // Add dev debug flag to show special dev css
+        // (visible marks border on verify)
+        {...(isDev && {
+          'data-dev': true
+        })}
+      >
         <Outlet />
       </main>
       <Footer />
diff --git a/src/pages/verify/style.module.scss b/src/pages/verify/style.module.scss
index a0dec2f..a3d3401 100644
--- a/src/pages/verify/style.module.scss
+++ b/src/pages/verify/style.module.scss
@@ -77,9 +77,14 @@
 
 .mark {
   position: absolute;
-  border: 1px dotted black;
 
   display: flex;
   justify-content: center;
   align-items: center;
 }
+
+[data-dev='true'] {
+  .mark {
+    border: 1px dotted black;
+  }
+}