improvements to login and sign-up pages (#3357)

* New login form ui
* Move InstanceAboutAccordion to shared components
* Update closed registration alert text
* Add alert for opened registration and move them bellow login form
* Adjust flex block on signup and login views
* Replace toggle accordion with expand on links in signup and login + scrollTo
* Improve display of login alerts
* Fix missing Component suffix
* Define min-width instance-information block sign-up and login for mobile screens
* Add ability to select specific panels in instanceAboutAccorddion
* Add instance title and short-description to common instanceAboutAccordion
* Clarify title alert in login page
* Add step terms for signup

Co-authored-by: kimsible <kimsible@users.noreply.github.com>
Co-authored-by: Rigel Kent <sendmemail@rigelk.eu>

1 files changed, 17 insertions, 50 deletions

diff --git a/client/src/app/+signup/+register/register.component.scss b/client/src/app/+signup/+register/register.component.scss
index 4221354ee..d22d58c4a 100644
--- a/client/src/app/+signup/+register/register.component.scss
+++ b/client/src/app/+signup/+register/register.component.scss
@@ -1,9 +1,5 @@
 @import '_variables';
 @import '_mixins';
-@import "./_bootstrap-variables";
-
-@import '~bootstrap/scss/functions';
-@import '~bootstrap/scss/variables';
 
 .alert {
   font-size: 15px;
@@ -12,44 +8,20 @@
 
 .wrapper {
   display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-
-  & > div {
-    margin-bottom: 40px;
+  flex-direction: column;
 
-    &.register-form {
-      width: 450px;
+  .register-form {
+    max-width: 600px;
+    align-self: center;
+  }
 
-      @media screen and (max-width: $mobile-view) {
-        width: 100%;
-      }
-    }
+  .register-form,
+  .instance-information {
+    width: 100%;
+  }
 
-    &.instance-information {
-      width: 600px;
-      margin-bottom: 40px;
-
-      .block {
-        font-size: 15px;
-        margin-bottom: 15px;
-        padding: 0 $btn-padding-x;
-      }
-
-      @media screen and (max-width: 1500px) {
-        width: 450px;
-      }
-      @media screen and (max-width: $mobile-view) {
-        width: 100%;
-      }
-
-      ngb-accordion ::ng-deep {
-        .btn {
-          font-weight: $font-semibold !important;
-          color: pvar(--mainForegroundColor) !important;
-        }
-      }
-    }
+  .instance-information {
+    margin-bottom: 15px;
   }
 }
 
@@ -58,15 +30,19 @@
 }
 
 .input-group {
-  @include peertube-input-group(400px);
+  @include peertube-input-group(100%);
 }
 
 .input-group-append {
   height: 30px;
 }
 
+.form-group-terms {
+  width: 100% !important;
+}
+
 input:not([type=submit]) {
-  @include peertube-input-text(400px);
+  @include peertube-input-text(100%);
   display: block;
 
   &#username,
@@ -76,19 +52,10 @@ input:not([type=submit]) {
   }
 }
 
-@media screen and (max-width: $mobile-view) {
-  .form-group-terms,
-  .input-group,
-  input:not([type=submit]) {
-    width: 100%;
-  }
-}
-
 input[type=submit],
 button {
   @include peertube-button;
   @include orange-button;
-  
 }
 
 .name-information {