[Glitch] Add server rules to sign-up flow

Port 679274465b3a2aaf87a13553f08104d6d3f1d275 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

2 files changed, 44 insertions, 11 deletions

diff --git a/app/javascript/flavours/glitch/styles/containers.scss b/app/javascript/flavours/glitch/styles/containers.scss
index b8d0fdad2..f0caeb4c5 100644
--- a/app/javascript/flavours/glitch/styles/containers.scss
+++ b/app/javascript/flavours/glitch/styles/containers.scss
@@ -9,11 +9,7 @@
 }
 
 .logo-container {
-  margin: 100px auto 50px;
-
-  @media screen and (max-width: 500px) {
-    margin: 40px auto 0;
-  }
+  margin: 50px auto;
 
   h1 {
     display: flex;
diff --git a/app/javascript/flavours/glitch/styles/forms.scss b/app/javascript/flavours/glitch/styles/forms.scss
index 8ae2b5bd8..6ab1189da 100644
--- a/app/javascript/flavours/glitch/styles/forms.scss
+++ b/app/javascript/flavours/glitch/styles/forms.scss
@@ -6,9 +6,10 @@ code {
 }
 
 .form-container {
-  max-width: 400px;
+  max-width: 450px;
   padding: 20px;
-  margin: 0 auto;
+  padding-bottom: 50px;
+  margin: 50px auto;
 }
 
 .indicator-icon {
@@ -123,13 +124,34 @@ code {
   }
 
   .title {
-    color: #d9e1e8;
-    font-size: 20px;
-    line-height: 28px;
-    font-weight: 400;
+    font-size: 28px;
+    line-height: 33px;
+    font-weight: 700;
+    margin-bottom: 15px;
+  }
+
+  .lead {
+    font-size: 17px;
+    line-height: 22px;
+    color: $secondary-text-color;
     margin-bottom: 30px;
   }
 
+  .rules-list {
+    list-style: decimal;
+    font-size: 17px;
+    line-height: 22px;
+    font-weight: 500;
+    background: transparent;
+    border: 0;
+    padding: 0.5em 1em !important;
+    margin-bottom: 30px;
+
+    li {
+      border-color: lighten($ui-base-color, 8%);
+    }
+  }
+
   .hint {
     color: $darker-text-color;
 
@@ -451,6 +473,11 @@ code {
     }
   }
 
+  .stacked-actions {
+    margin-top: 30px;
+    margin-bottom: 15px;
+  }
+
   button,
   .button,
   .block-button {
@@ -502,6 +529,16 @@ code {
     }
   }
 
+  .button.button-tertiary {
+    padding: 9px;
+
+    &:hover,
+    &:focus,
+    &:active {
+      padding: 10px;
+    }
+  }
+
   select {
     appearance: none;
     box-sizing: border-box;