From 9f0fd83fc0cc874e14ffd3cb06fe1658e399b80d Mon Sep 17 00:00:00 2001 From: mgabdev <> Date: Thu, 20 Aug 2020 16:30:46 -0500 Subject: [PATCH] Updated styles for auth pages MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit • Updated: - styles for auth pages --- app/views/auth/confirmations/new.html.haml | 2 + app/views/auth/passwords/new.html.haml | 2 + app/views/auth/registrations/new.html.haml | 4 +- app/views/auth/sessions/new.html.haml | 4 +- app/views/layouts/auth.html.haml | 7 +- public/legacy/auth.css | 255 +++++++++++++++++++++ 6 files changed, 268 insertions(+), 6 deletions(-) create mode 100644 public/legacy/auth.css diff --git a/app/views/auth/confirmations/new.html.haml b/app/views/auth/confirmations/new.html.haml index 4a1bedaa..7a6b19d1 100644 --- a/app/views/auth/confirmations/new.html.haml +++ b/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 diff --git a/app/views/auth/passwords/new.html.haml b/app/views/auth/passwords/new.html.haml index bae5b24b..d5040aae 100644 --- a/app/views/auth/passwords/new.html.haml +++ b/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 diff --git a/app/views/auth/registrations/new.html.haml b/app/views/auth/registrations/new.html.haml index 40d57b67..c094a6c9 100644 --- a/app/views/auth/registrations/new.html.haml +++ b/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 diff --git a/app/views/auth/sessions/new.html.haml b/app/views/auth/sessions/new.html.haml index ceb16940..9c00e80b 100644 --- a/app/views/auth/sessions/new.html.haml +++ b/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 diff --git a/app/views/layouts/auth.html.haml b/app/views/layouts/auth.html.haml index 8ca56b1e..0b14a6c7 100644 --- a/app/views/layouts/auth.html.haml +++ b/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/default.css') + %link(rel='stylesheet' href='/legacy/auth.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' diff --git a/public/legacy/auth.css b/public/legacy/auth.css new file mode 100644 index 00000000..713ca9f4 --- /dev/null +++ b/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); +} \ No newline at end of file