diff --git a/app/assets/images/google-icon.svg b/app/assets/images/google-icon.svg new file mode 100644 index 000000000..31f21e61d --- /dev/null +++ b/app/assets/images/google-icon.svg @@ -0,0 +1,6 @@ + diff --git a/app/assets/tailwind/application.css b/app/assets/tailwind/application.css index ddbda9b04..035b80946 100644 --- a/app/assets/tailwind/application.css +++ b/app/assets/tailwind/application.css @@ -10,7 +10,6 @@ @import "./simonweb_pickr.css"; -@import "./google-sign-in.css"; @import "./date-picker-dark-mode.css"; @import "./print-report.css"; @import "./privacy-mode.css"; diff --git a/app/assets/tailwind/google-sign-in.css b/app/assets/tailwind/google-sign-in.css deleted file mode 100644 index 151b14fe3..000000000 --- a/app/assets/tailwind/google-sign-in.css +++ /dev/null @@ -1,106 +0,0 @@ -@layer components { - .gsi-material-button { - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - -webkit-appearance: none; - background-color: WHITE; - background-image: none; - border: 1px solid #747775; - -webkit-border-radius: 4px; - border-radius: 4px; - -webkit-box-sizing: border-box; - box-sizing: border-box; - color: #1f1f1f; - cursor: pointer; - font-family: 'Roboto', arial, sans-serif; - font-size: 14px; - height: 40px; - letter-spacing: 0.25px; - outline: none; - overflow: hidden; - padding: 0 12px; - position: relative; - text-align: center; - -webkit-transition: background-color .218s, border-color .218s, box-shadow .218s; - transition: background-color .218s, border-color .218s, box-shadow .218s; - vertical-align: middle; - white-space: nowrap; - width: auto; - max-width: 400px; - min-width: min-content; - display: inline-flex; - } - - .gsi-material-button .gsi-material-button-icon { - height: 20px; - margin-right: 12px; - min-width: 20px; - width: 20px; - } - - .gsi-material-button .gsi-material-button-content-wrapper { - -webkit-align-items: center; - align-items: center; - display: flex; - -webkit-flex-direction: row; - flex-direction: row; - -webkit-flex-wrap: nowrap; - flex-wrap: nowrap; - height: 100%; - justify-content: space-between; - position: relative; - width: 100%; - } - - .gsi-material-button .gsi-material-button-contents { - -webkit-flex-grow: 1; - flex-grow: 1; - font-family: 'Roboto', arial, sans-serif; - font-weight: 500; - overflow: hidden; - text-overflow: ellipsis; - vertical-align: top; - } - - .gsi-material-button .gsi-material-button-state { - -webkit-transition: opacity .218s; - transition: opacity .218s; - bottom: 0; - left: 0; - opacity: 0; - position: absolute; - right: 0; - top: 0; - } - - .gsi-material-button:disabled { - cursor: default; - background-color: #ffffff61; - border-color: #1f1f1f1f; - } - - .gsi-material-button:disabled .gsi-material-button-contents { - opacity: 38%; - } - - .gsi-material-button:disabled .gsi-material-button-icon { - opacity: 38%; - } - - .gsi-material-button:not(:disabled):active .gsi-material-button-state, - .gsi-material-button:not(:disabled):focus .gsi-material-button-state { - background-color: #303030; - opacity: 12%; - } - - .gsi-material-button:not(:disabled):hover { - -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15); - box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15); - } - - .gsi-material-button:not(:disabled):hover .gsi-material-button-state { - background-color: #303030; - opacity: 8%; - } -} diff --git a/app/components/DS/button.html.erb b/app/components/DS/button.html.erb index 557db0bd9..8186a4349 100644 --- a/app/components/DS/button.html.erb +++ b/app/components/DS/button.html.erb @@ -1,6 +1,6 @@ <%= container do %> <% if icon && (icon_position != :right) %> - <%= helpers.icon(icon, size: size, color: icon_color, class: icon_classes) %> + <%= helpers.icon(icon, size: size, color: icon_color, custom: icon_custom, class: icon_classes) %> <% end %> <% unless icon_only? %> @@ -8,6 +8,6 @@ <% end %> <% if icon && icon_position == :right %> - <%= helpers.icon(icon, size: size, color: icon_color) %> + <%= helpers.icon(icon, size: size, color: icon_color, custom: icon_custom) %> <% end %> <% end %> diff --git a/app/components/DS/buttonish.rb b/app/components/DS/buttonish.rb index f1e864511..d7fa580a6 100644 --- a/app/components/DS/buttonish.rb +++ b/app/components/DS/buttonish.rb @@ -55,13 +55,14 @@ class DS::Buttonish < DesignSystemComponent } }.freeze - attr_reader :variant, :size, :href, :icon, :icon_position, :text, :full_width, :extra_classes, :frame, :opts + attr_reader :variant, :size, :href, :icon, :icon_custom, :icon_position, :text, :full_width, :extra_classes, :frame, :opts - def initialize(variant: :primary, size: :md, href: nil, text: nil, icon: nil, icon_position: :left, full_width: false, frame: nil, **opts) + def initialize(variant: :primary, size: :md, href: nil, text: nil, icon: nil, icon_custom: false, icon_position: :left, full_width: false, frame: nil, **opts) @variant = variant.to_s.underscore.to_sym @size = size.to_sym @href = href @icon = icon + @icon_custom = icon_custom @icon_position = icon_position.to_sym @text = text @full_width = full_width diff --git a/app/views/sessions/new.html.erb b/app/views/sessions/new.html.erb index c51f4977a..60a9409a7 100644 --- a/app/views/sessions/new.html.erb +++ b/app/views/sessions/new.html.erb @@ -55,34 +55,27 @@ <% providers.each do |provider| %> <% provider_id = provider[:id].to_s %> <% provider_name = provider[:name].to_s %> + <% is_google = provider_id == "google" || provider[:strategy].to_s == "google_oauth2" %> + <% default_label = is_google ? t(".google_auth_connect") : t(".#{provider_id}", default: provider[:name].to_s.titleize) %> - <% if provider_id == "google" || provider[:strategy].to_s == "google_oauth2" %> -
- <%= button_to "/auth/#{provider_name}", method: :post, form: { data: { turbo: false } }, class: "gsi-material-button w-full" do %> -
-
-
- - - - - - - -
- <%= provider[:label].presence || t(".google_auth_connect") %> - <%= provider[:label].presence || t(".google_auth_connect") %> -
- <% end %> -
- <% else %> - <%= button_to "/auth/#{provider_name}", method: :post, form: { data: { turbo: false } }, class: "w-full inline-flex items-center justify-center gap-2 rounded-md border border-secondary bg-container px-4 py-2 text-sm font-medium text-primary hover:bg-secondary transition" do %> - <% if provider[:icon].present? %> - <%= icon provider[:icon], size: "sm" %> - <% end %> - <%= provider[:label].presence || t(".#{provider_id}", default: provider[:name].to_s.titleize) %> - <% end %> - <% end %> + <%# + SSO buttons use the design-system outline button so they stay consistent + with each other and read as secondary to the primary email "Log in" CTA. + Google keeps its official multi-color "G" mark + "Sign in with Google" + wording (brand-compliant) via the custom-icon asset, so no bespoke CSS. + %> + <%= render DS::Button.new( + href: "/auth/#{provider_name}", + method: :post, + variant: :outline, + size: :md, + full_width: true, + icon: is_google ? "google-icon" : provider[:icon].presence, + icon_custom: is_google, + text: provider[:label].presence || default_label, + class: "gap-2", + form: { data: { turbo: false } } + ) %> <% end %> <% elsif !AuthConfig.local_login_form_visible? %> diff --git a/test/controllers/sessions_controller_test.rb b/test/controllers/sessions_controller_test.rb index d3ec232ef..e2a201974 100644 --- a/test/controllers/sessions_controller_test.rb +++ b/test/controllers/sessions_controller_test.rb @@ -112,9 +112,10 @@ class SessionsControllerTest < ActionDispatch::IntegrationTest assert_match %r{/auth/openid_connect}, @response.body assert_match /Sign in with Keycloak/, @response.body - # Google-branded button + # Google-branded button — DS outline button carrying Google's official + # multi-color "G" mark (one of its brand hexes proves the inline SVG rendered). assert_match %r{/auth/google_oauth2}, @response.body - assert_match /gsi-material-button/, @response.body + assert_match /#4285F4/i, @response.body assert_match /Sign in with Google/, @response.body end