Updated styles for auth pages

• Updated:
- styles for auth pages

app/views/auth/confirmations/new.html.haml

@@ -2,6 +2,8 @@
   = t('auth.resend_confirmation')
 
 = simple_form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post }) do |f|
+  %h2.form-title Resend confirmation instructions 
+
   = render 'shared/error_messages', object: resource
 
   .fields-group

app/views/auth/passwords/new.html.haml

@@ -2,6 +2,8 @@
   = t('auth.reset_password')
 
 = simple_form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f|
+  %h2.form-title Reset Gab Password
+
   = render 'shared/error_messages', object: resource
 
   .fields-group

app/views/auth/registrations/new.html.haml

@@ -5,6 +5,8 @@
   = render partial: 'shared/og'
 
 = simple_form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f|
+  %h2.form-title Sign up for Gab
+
   = render 'shared/error_messages', object: resource
 
   - if @invite.present? && @invite.autofollow?
@@ -32,7 +34,7 @@
 
   = f.input :invite_code, as: :hidden
 
-  .fields-group
+  .fields-group-agreement
     = f.input :agreement, as: :boolean, wrapper: :with_label, label: t('auth.checkbox_agreement_html', about_tos_path: about_tos_path)
 
   .actions

app/views/auth/sessions/new.html.haml

@@ -5,13 +5,15 @@
   = render partial: 'shared/og'
 
 = simple_form_for(resource, as: resource_name, url: session_path(resource_name)) do |f|
+  %h2.form-title Log into Gab
+
   .fields-group
     - if use_seamless_external_login?
       = f.input :email, autofocus: true, wrapper: :with_label, label: t('simple_form.labels.defaults.username_or_email'), input_html: { 'aria-label' => t('simple_form.labels.defaults.username_or_email') }, hint: false
     - else
       = f.input :email, autofocus: true, wrapper: :with_label, label: t('simple_form.labels.defaults.email'), input_html: { 'aria-label' => t('simple_form.labels.defaults.email') }, hint: false
   .fields-group
-    = f.input :password, wrapper: :with_label, label: t('simple_form.labels.defaults.password'), input_html: { 'aria-label' => t('simple_form.labels.defaults.password'), :autocomplete => 'off' }, hint: false
+    = f.input :password, wrapper: :with_label, label: t('simple_form.labels.defaults.password'), input_html: { 'aria-label' => t('simple_form.labels.defaults.password'), :autocomplete => 'off' }, hint: false 
 
   .actions
     = f.button :button, t('auth.login'), type: :submit

app/views/layouts/auth.html.haml

@@ -1,14 +1,13 @@
 - content_for :header_tags do
   = javascript_pack_tag 'public', integrity: true, crossorigin: 'anonymous'
-  %link(rel='stylesheet' href='/legacy/common.css')
+  %link(rel='stylesheet' href='/legacy/auth.css')
-  %link(rel='stylesheet' href='/legacy/default.css')
 
 - content_for :content do
   .container
     .logo-container
-      %h1
+      %h1{:title => 'Gab.com', :aria-level => '1', :role => 'heading'}
         = link_to root_path do
-          = image_pack_tag 'logo_full.png', alt: 'Gab Social'
+          = image_pack_tag 'logo_full.png', alt: 'Gab Social', height: '48px'
 
     .form-container
       = render 'flashes'

public/legacy/auth.css

@@ -0,0 +1,255 @@
+* {
+  font-family: var(--font_family)
+}
+
+.container {
+  display: flex;
+  width: 100%;
+  min-height: 100vh;
+  overflow:hidden;
+  overflow-y:scroll;
+  flex-direction: column;
+  align-items: center;
+  padding-bottom: 20px;
+}
+
+.logo-container {
+  display: flex;
+  width: 100%;
+  margin-top: 1.5rem;
+  align-items: center;
+  justify-content: center;
+}
+
+.logo-container h1 {
+  margin: 0;
+  display: flex;
+  height: 80px;
+  align-items: center;
+}
+
+.form-container {
+  display: flex;
+  padding: 20px;
+  min-width: 360px;
+  max-width: 400px;
+  border-radius: 8px;
+  flex-direction: column;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+  background-color: white;
+}
+
+@media (min-width:0px) and (max-width:767px) {
+  .form-container {
+    max-width: none !important;
+    min-width: 280px !important;
+    width: 90%;
+    border-radius: 0 !important;
+  }
+}
+
+.simple_form {
+  display: flex;
+  margin: 0;
+  flex-direction: column;
+}
+
+.form-title {
+  display: flex;
+  color: var(--text_color_primary);
+  margin: 0;
+  font-family: var(--font_family);
+  color: var(--color_black);
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+  margin-bottom: 15px;
+  font-size: 18px;
+  font-weight: 500;
+}
+
+.fields-group {
+  display: flex;
+  width: 100%;
+  margin-bottom: 20px;
+  padding: 0;
+}
+
+.form-footer,
+.actions,
+.fields-group .label_input__wrapper {
+  display: flex;
+  width: 100%;
+  margin: 0;
+  padding: 0; 
+}
+
+.fields-group-agreement .with_label,
+.fields-group .with_label {
+  display: flex;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  flex-direction: column;
+}
+
+.fields-group .with_label .label_input {
+  display: flex;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  flex-direction: column;
+}
+
+.fields-group .with_label .label_input > label {
+  display: flex;
+  width: 100%;
+  margin: 0;
+  margin-bottom: 5px;
+  padding: 0;
+  font-family: var(--font_family);
+  color: var(--text_color_secondary);
+  font-size: 12px;
+}
+
+abbr {
+  text-decoration: none;
+}
+
+.fields-group .with_label .hint {
+  font-family: var(--font_family);
+  margin-top: 5px;
+  font-size: 12px;
+  color: var(--text_color_secondary);
+}
+
+.fields-group .with_label .error {
+  margin-top: 5px;
+  font-size: 12px;
+  color: red;
+}
+
+.fields-group .with_label .label_input input {
+  display: flex;
+  width: 100%;
+  line-height: 46px;
+  height: 46px;
+  border-radius: 8px;
+  border-width: 1px;
+  outline: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  padding-left: 10px;
+  font-size: 18px;
+  color: var(--text_color_primary);
+  background-color: var(--color_white);
+  border-color: var(--border_color_secondary);
+}
+
+button.btn {
+  display: flex;
+  width: 100%;
+  margin-top: 5px;
+  background-color: var(--color_brand);
+  color: white;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  line-height: 46px;
+  height: 46px;
+  border-radius: 8px;
+  border: none;
+  font-family: var(--font_family);
+  color: var(--color_white);
+  font-weight: 600;
+  font-size: 18px;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+button.btn:hover {
+  background-color: var(--color_brand-dark);
+}
+
+.no-list {
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  padding: 20px 20px 0 20px;
+  margin-top: 20px;
+  border-top: 1px solid var(--border_color_secondary);
+  list-style: none;
+}
+
+.no-list li {
+  display: flex;
+  padding: 5px 10px;
+  cursor: pointer;
+}
+
+.no-list li a {
+  font-family: var(--font_family);
+  color: var(--text_color_tertiary);
+  font-size: 14px;
+  text-decoration: none;
+}
+
+.fields-group-agreement {
+  display: flex;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  margin-bottom: 15px;
+}
+
+.fields-group-agreement .with_label .label_input {
+  display: flex;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  flex-direction: row;
+  align-items: center;
+}
+
+.fields-group-agreement .with_label .label_input label {
+  display: flex;
+  margin: 0;
+  padding: 0;
+  font-family: var(--font_family);
+  color: var(--text_color_secondary);
+  font-size: 14px;
+}
+
+.fields-group-agreement .with_label .label_input label a {
+  font-family: var(--font_family);
+  color: var(--color_brand);
+  margin: 0;
+  padding: 0;
+  margin-left: 5px;
+  font-size: 14px;
+}
+
+.flash-message {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+  text-align: center;
+}
+
+.alert.flash-message {
+  color: red;
+}
+
+.notice.flash-message {
+  color: grey;
+}
+
+.subtle-hint a {
+  color: var(--color_brand);
+}