From 33fdf6c94fc6bd2832708949347da7be209fb6e1 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Fri, 5 Dec 2025 17:46:38 +0100
Subject: [PATCH] refactor: use global form classes in PagePopup
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace custom classes with global .field and .settings-subsection classes to ensure proper styling from _forms.scss.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/components/PagePopup.vue | 100 ++++++++++-------------------------
 1 file changed, 28 insertions(+), 72 deletions(-)

diff --git a/src/components/PagePopup.vue b/src/components/PagePopup.vue
index 5c7dd2a..af73cd8 100644
--- a/src/components/PagePopup.vue
+++ b/src/components/PagePopup.vue
@@ -17,10 +17,10 @@
       <!-- Left: Controls -->
       <div class="popup-controls">
         <!-- Margins -->
-        <div class="control-section">
+        <div class="settings-subsection">
           <h4>Marges</h4>
           <div class="margin-grid">
-            <div class="margin-field">
+            <div class="field">
               <label>Haut</label>
               <div class="input-with-unit">
                 <input
@@ -54,7 +54,7 @@
               </div>
             </div>
 
-            <div class="margin-field">
+            <div class="field">
               <label>Bas</label>
               <div class="input-with-unit">
                 <input
@@ -88,7 +88,7 @@
               </div>
             </div>
 
-            <div class="margin-field">
+            <div class="field">
               <label>Gauche</label>
               <div class="input-with-unit">
                 <input
@@ -122,7 +122,7 @@
               </div>
             </div>
 
-            <div class="margin-field">
+            <div class="field">
               <label>Droite</label>
               <div class="input-with-unit">
                 <input
@@ -159,31 +159,35 @@
         </div>
 
         <!-- Background -->
-        <div class="control-section">
-          <label>Arrière-plan</label>
-          <div class="input-with-color">
-            <input
-              ref="backgroundColorInput"
-              type="text"
-              v-model="background.value"
-              data-coloris
-            />
+        <div class="settings-subsection">
+          <div class="field">
+            <label>Arrière-plan</label>
+            <div class="input-with-color">
+              <input
+                ref="backgroundColorInput"
+                type="text"
+                v-model="background.value"
+                data-coloris
+              />
+            </div>
           </div>
         </div>
 
         <!-- Patterns -->
-        <div class="control-section">
-          <label>Motifs</label>
-          <select v-model="pattern">
-            <option value="">Choisissez</option>
-            <option value="dots">Points</option>
-            <option value="lines">Lignes</option>
-            <option value="grid">Grille</option>
-          </select>
+        <div class="settings-subsection">
+          <div class="field">
+            <label>Motifs</label>
+            <select v-model="pattern">
+              <option value="">Choisissez</option>
+              <option value="dots">Points</option>
+              <option value="lines">Lignes</option>
+              <option value="grid">Grille</option>
+            </select>
+          </div>
         </div>
 
         <!-- Unlock Inheritance Button -->
-        <div class="control-section">
+        <div class="settings-subsection">
           <button class="unlock-btn" @click="toggleInheritance">
             Déverrouiller l'héritage
           </button>
@@ -520,66 +524,18 @@ defineExpose({ open, close, visible });
   gap: 1rem;
 }
 
-.control-section h4 {
+.settings-subsection h4 {
   margin: 0 0 0.5rem 0;
   font-size: 0.875rem;
   font-weight: 600;
 }
 
-.control-section label {
-  display: block;
-  font-size: 0.75rem;
-  margin-bottom: 0.25rem;
-  color: #666;
-}
-
-.control-section select {
-  width: 100%;
-  padding: 0.5rem;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  font-size: 0.875rem;
-}
-
 .margin-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 0.75rem;
 }
 
-.margin-field label {
-  display: block;
-  font-size: 0.75rem;
-  margin-bottom: 0.25rem;
-  color: #666;
-}
-
-.input-with-unit {
-  display: flex;
-  gap: 0.25rem;
-  align-items: center;
-}
-
-.input-with-unit input[type='number'] {
-  flex: 1;
-  padding: 0.375rem;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  font-size: 0.875rem;
-}
-
-.input-with-color {
-  width: 100%;
-}
-
-.input-with-color input {
-  width: 100%;
-  padding: 0.5rem;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  font-size: 0.875rem;
-}
-
 /* Unit toggle styles are inherited from global styles */
 
 .unlock-btn {