Fix settings alert layout, and delete account page layout

ref DEV-2344
authgear · Jan 23, 2025 · 17a7c2a · 17a7c2a
2 parents 55361dd + 0a956dc
commit 17a7c2a
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 17 deletions.
diff --git a/.make-lint-translation-keys-expect b/.make-lint-translation-keys-expect
@@ -19,7 +19,7 @@ resources/authgear/templates/en/web/authflowv2/__password_input.html:31:31: temp
 resources/authgear/templates/en/web/authflowv2/__password_input.html:33:31: template translation is forbidden: `v2.component.password-input.default.placeholder-new-password`
 resources/authgear/templates/en/web/authflowv2/__password_input.html:35:31: template translation is forbidden: `v2.component.password-input.default.placeholder-confirm-password`
 resources/authgear/templates/en/web/authflowv2/__settings_page_frame.html:18:17: template translation is forbidden: `page-navbar`
-resources/authgear/templates/en/web/authflowv2/__settings_page_frame.html:29:18: template translation is forbidden: `page-content`
+resources/authgear/templates/en/web/authflowv2/__settings_page_frame.html:27:18: template translation is forbidden: `page-content`
 resources/authgear/templates/en/web/authflowv2/__settings_radio.html:16:16: translation key not defined: "radio-%s-%s"
 resources/authgear/templates/en/web/authflowv2/__timezone_input.html:8:21: translation key not defined: "%s %s"
 resources/authgear/templates/en/web/authflowv2/account_linking.html:90:33: translation key not defined: "%s-icon"

diff --git a/authui/src/authflowv2/components/widget.css b/authui/src/authflowv2/components/widget.css
@@ -17,6 +17,9 @@
       --widget__box-shadow: none;
       --widget__border: none;
     }
+
+    /* Internal use */
+    --widget-content-item__x-spaceing--settings: 2rem;
   }
 
   :root.dark {
@@ -77,21 +80,26 @@
       @apply self-stretch;
     }
 
+    .widget-content.widget-content--settings {
+      @apply px-0 py-8;
+    }
+
     .widget-content-item__px--settings {
-      padding-left: 2rem;
-      padding-right: 2rem;
+      padding-left: var(--widget-content-item__x-spaceing--settings);
+      padding-right: var(--widget-content-item__x-spaceing--settings);
     }
 
-    .widget-content.widget-content--settings {
-      @apply px-0 py-8;
+    .widget-content-item__mx--settings {
+      margin-left: var(--widget-content-item__x-spaceing--settings);
+      margin-right: var(--widget-content-item__x-spaceing--settings);
     }
   }
 
   .widget-content__item--settings {
     @apply widget-content-item__px--settings;
   }
 
-  .widget-content__alert-container--settings {
-    @apply widget-content-item__px--settings;
+  .widget-content__alert--settings {
+    @apply widget-content-item__mx--settings;
   }
 }
diff --git a/resources/authgear/templates/en/web/authflowv2/__settings_page_frame.html b/resources/authgear/templates/en/web/authflowv2/__settings_page_frame.html
@@ -17,15 +17,13 @@
       <div class="widget-content__item--settings">
         {{ block "page-navbar" . }}{{ end }}
       </div>
-      <div class="widget-content__alert-container--settings">
-        {{ template "authflowv2/__alert_message.html"
-          (dict
-            "Type" "error"
-            "Message" (include "authflowv2/__error.html" .)
-            "Classname" "widget-content__alert--settings"
-          )
-        }}
-      </div>
+      {{ template "authflowv2/__alert_message.html"
+        (dict
+          "Type" "error"
+          "Message" (include "authflowv2/__error.html" .)
+          "Classname" "widget-content__alert--settings"
+        )
+      }}
       {{ template "page-content" . }}
       {{ template "authflowv2/__lockout.html" . }}
     </div>

diff --git a/resources/authgear/templates/en/web/authflowv2/settings_delete_account.html b/resources/authgear/templates/en/web/authflowv2/settings_delete_account.html
@@ -11,7 +11,7 @@
 {{ end }}
 
 {{ define "page-content" }}
-<div class="flex flex-col gap-y-8 w-full tablet:max-w-86 mx-auto">
+<div class="settings-content settings-content-form w-full tablet:max-w-86 mx-auto">
   <p class="settings-description text-center">
     {{ translate "v2.page.settings-delete-account.default.description" (dict "date" $.ExpectedAccountDeletionTime "rfc3339" (rfc3339 $.ExpectedAccountDeletionTime)) }}
   </p>