From 1cdc017384b51123d87b3c6078507d57b23fb56e Mon Sep 17 00:00:00 2001
From: Quentin Gliech <quenting@element.io>
Date: Fri, 15 Sep 2023 18:20:30 +0200
Subject: [PATCH] frontend: have better margins everywhere

---
 frontend/src/components/Layout.module.css          | 7 ++++---
 templates/components/navbar.html                   | 2 +-
 templates/pages/account/emails/add.html            | 2 +-
 templates/pages/account/emails/verify.html         | 2 +-
 templates/pages/account/password.html              | 2 +-
 templates/pages/index.html                         | 2 +-
 templates/pages/login.html                         | 2 +-
 templates/pages/policy_violation.html              | 2 +-
 templates/pages/reauth.html                        | 2 +-
 templates/pages/register.html                      | 2 +-
 templates/pages/upstream_oauth2/do_register.html   | 2 +-
 templates/pages/upstream_oauth2/link_mismatch.html | 2 +-
 templates/pages/upstream_oauth2/suggest_link.html  | 2 +-
 13 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/Layout.module.css b/frontend/src/components/Layout.module.css
index c15f37ae..3351a1c6 100644
--- a/frontend/src/components/Layout.module.css
+++ b/frontend/src/components/Layout.module.css
@@ -14,9 +14,10 @@
  */
 
 .container {
-    width: 378px;
-    margin: var(--cpd-space-10x) auto var(--cpd-space-6x) auto;
-    padding-bottom: var(--cpd-space-10x)
+    box-sizing: border-box;
+    max-width: calc(378px + var(--cpd-space-6x) * 2);
+    margin: 0 auto;
+    padding: var(--cpd-space-6x);
 }
 
 .footer {
diff --git a/templates/components/navbar.html b/templates/components/navbar.html
index e98609f3..91ae7c80 100644
--- a/templates/components/navbar.html
+++ b/templates/components/navbar.html
@@ -15,7 +15,7 @@ limitations under the License.
 #}
 
 {% macro top() %}
-  <nav class="container mx-auto py-2 flex-initial flex items-center px-2" role="navigation" aria-label="main navigation">
+  <nav class="container mx-auto py-2 flex-initial flex items-center px-8" role="navigation" aria-label="main navigation">
     <div class="flex-1"></div>
 
     <div class="grid grid-flow-col auto-cols-max gap-4 place-items-center">
diff --git a/templates/pages/account/emails/add.html b/templates/pages/account/emails/add.html
index f3a90982..ca0c4304 100644
--- a/templates/pages/account/emails/add.html
+++ b/templates/pages/account/emails/add.html
@@ -19,7 +19,7 @@ limitations under the License.
 {% block content %}
   {{ navbar::top() }}
   <section class="flex items-center justify-center flex-1">
-    <form method="POST" class="grid grid-cols-1 gap-6 w-96 m-2">
+    <form method="POST" class="grid grid-cols-1 gap-6 w-96 my-2 mx-8">
       <div class="text-center">
         <h1 class="text-lg text-center font-medium">Add an email address</h1>
       </div>
diff --git a/templates/pages/account/emails/verify.html b/templates/pages/account/emails/verify.html
index 1f80e988..5a7f1b31 100644
--- a/templates/pages/account/emails/verify.html
+++ b/templates/pages/account/emails/verify.html
@@ -19,7 +19,7 @@ limitations under the License.
 {% block content %}
   {{ navbar::top() }}
   <section class="flex items-center justify-center flex-1">
-    <form method="POST" class="grid grid-cols-1 gap-6 w-96 m-2">
+    <form method="POST" class="grid grid-cols-1 gap-6 w-96 my-2 mx-8">
       <div class="text-center">
         <h1 class="text-lg text-center font-medium">Email verification</h1>
         <p>Please enter the 6-digit code sent to: <span class="font-semibold">{{ email.email }}</span></p>
diff --git a/templates/pages/account/password.html b/templates/pages/account/password.html
index 31bb13b8..a26d0b93 100644
--- a/templates/pages/account/password.html
+++ b/templates/pages/account/password.html
@@ -18,7 +18,7 @@ limitations under the License.
 
 {% block content %}
   {{ navbar::top() }}
-  <section class="container mx-auto grid gap-4 grid-cols-1 md:grid-cols-2 xl:grid-cols-3 p-2">
+  <section class="container mx-auto grid gap-4 grid-cols-1 md:grid-cols-2 xl:grid-cols-3 py-2 px-8">
     <form class="rounded border-2 border-grey-50 dark:border-grey-450 p-4 grid gap-4 xl:grid-cols-2 grid-cols-1 place-content-start" method="POST">
       <h2 class="text-xl font-semibold xl:col-span-2">Change my password</h2>
       <input type="hidden" name="csrf" value="{{ csrf_token }}" />
diff --git a/templates/pages/index.html b/templates/pages/index.html
index f0d88ae5..bc0dfc5c 100644
--- a/templates/pages/index.html
+++ b/templates/pages/index.html
@@ -19,7 +19,7 @@ limitations under the License.
 {% block content %}
   {{ navbar::top() }}
   <section class="flex-1 flex flex-col items-center justify-center">
-    <div>
+    <div class="my-2 mx-8">
       <h1 class="my-2 text-5xl font-semibold leading-tight">Matrix Authentication Service</h1>
       <p class="text-lg">
         OpenID Connect discovery document:
diff --git a/templates/pages/login.html b/templates/pages/login.html
index fd3842de..645c215f 100644
--- a/templates/pages/login.html
+++ b/templates/pages/login.html
@@ -18,7 +18,7 @@ limitations under the License.
 
 {% block content %}
   <section class="flex items-center justify-center flex-1">
-    <form method="POST" class="grid grid-cols-1 gap-6 w-96 m-2">
+    <form method="POST" class="grid grid-cols-1 gap-6 w-96 my-2 mx-8">
       {% if not password_disabled %}
         {% if next and next.kind == "link_upstream" %}
           <div class="text-center">
diff --git a/templates/pages/policy_violation.html b/templates/pages/policy_violation.html
index 1adb233a..68b51d8e 100644
--- a/templates/pages/policy_violation.html
+++ b/templates/pages/policy_violation.html
@@ -18,7 +18,7 @@ limitations under the License.
 
 {% block content %}
   <section class="flex items-center justify-center flex-1">
-    <div class="w-96 m-2">
+    <div class="w-96 my-2 mx-8">
       <div class="grid grid-cols-1 gap-6">
         <h1 class="text-xl font-semibold">The authorization request was denied the policy enforced by this service.</h1>
         <p>This might be because of the client which authored the request, the currently logged in user, or the request itself.</p>
diff --git a/templates/pages/reauth.html b/templates/pages/reauth.html
index fe738c86..00b5a443 100644
--- a/templates/pages/reauth.html
+++ b/templates/pages/reauth.html
@@ -18,7 +18,7 @@ limitations under the License.
 
 {% block content %}
   <section class="flex items-center justify-center flex-1">
-    <div class="w-96 m-4">
+    <div class="w-96 my-2 mx-8">
       <form method="POST" class="grid grid-cols-1 gap-6">
         <div class="text-center">
           <h1 class="text-lg text-center font-medium">Hi {{ current_session.user.username }}</h1>
diff --git a/templates/pages/register.html b/templates/pages/register.html
index 5db13b57..f5d106ce 100644
--- a/templates/pages/register.html
+++ b/templates/pages/register.html
@@ -18,7 +18,7 @@ limitations under the License.
 
 {% block content %}
   <section class="flex items-center justify-center flex-1">
-    <form method="POST" class="grid grid-cols-1 gap-6 w-96">
+    <form method="POST" class="grid grid-cols-1 gap-6 w-96 my-2 mx-8">
       <div class="text-center">
         <h1 class="text-lg text-center font-medium">Create an account</h1>
         <p>Please create an account to get started:</p>
diff --git a/templates/pages/upstream_oauth2/do_register.html b/templates/pages/upstream_oauth2/do_register.html
index 96925e1f..87f4aa4c 100644
--- a/templates/pages/upstream_oauth2/do_register.html
+++ b/templates/pages/upstream_oauth2/do_register.html
@@ -18,7 +18,7 @@ limitations under the License.
 
 {% block content %}
   <section class="flex items-center justify-center flex-1">
-    <div class="grid grid-cols-1 gap-6 w-96">
+    <div class="grid grid-cols-1 gap-6 w-96 my-2 mx-8">
       <form method="POST" class="grid grid-cols-1 gap-6">
         <h1 class="rounded-lg bg-grey-25 dark:bg-grey-450 p-2 text-center font-medium text-lg">
           {% if force_localpart %}
diff --git a/templates/pages/upstream_oauth2/link_mismatch.html b/templates/pages/upstream_oauth2/link_mismatch.html
index 1a858db0..1e6018d9 100644
--- a/templates/pages/upstream_oauth2/link_mismatch.html
+++ b/templates/pages/upstream_oauth2/link_mismatch.html
@@ -19,7 +19,7 @@ limitations under the License.
 {% block content %}
   {{ navbar::top() }}
   <section class="flex items-center justify-center flex-1">
-    <div class="grid grid-cols-1 gap-6 w-96">
+    <div class="grid grid-cols-1 gap-6 w-96 my-2 mx-8">
       <h1 class="rounded-lg bg-grey-25 dark:bg-grey-450 p-2 flex flex-col font-medium text-lg text-center">
         This upstream account is already linked to another account.
       </h1>
diff --git a/templates/pages/upstream_oauth2/suggest_link.html b/templates/pages/upstream_oauth2/suggest_link.html
index ca68dfe4..3b07b5f1 100644
--- a/templates/pages/upstream_oauth2/suggest_link.html
+++ b/templates/pages/upstream_oauth2/suggest_link.html
@@ -19,7 +19,7 @@ limitations under the License.
 {% block content %}
   {{ navbar::top() }}
   <section class="flex items-center justify-center flex-1">
-    <div class="grid grid-cols-1 gap-6 w-96">
+    <div class="grid grid-cols-1 gap-6 w-96 my-2 mx-8">
       <h1 class="rounded-lg bg-grey-25 dark:bg-grey-450 p-2 flex flex-col font-medium text-lg text-center">
         Link to your existing account
       </h1>