fix(verify-page): remove mark border in production, enable dev flag for css classes

Hotfix

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 />

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;
+  }
+}