fix(ds): unify SSO sign-in buttons on DS::Button; drop bespoke Google CSS (#2152)

The Google button used Google's prebuilt `gsi-material-button` (its own CSS
file + hardcoded hex colors), leaving it the odd one out: capped at 400px (its
`max-width` overrode `w-full`) so it sat narrower than the OpenID/GitHub
buttons, and rendered as a glaring white block in dark mode with no theming.

Render every SSO provider through one `DS::Button(variant: :outline,
full_width: true)` so the stack is consistent and reads as secondary to the
primary email "Log in" CTA. Google keeps its official multi-color "G" mark and
"Sign in with Google" wording (brand-compliant) via a new `google-icon.svg`
asset and an additive `icon_custom:` flag on the button (defaults false — no
change to any existing button). Delete `google-sign-in.css` and its import.

app/assets/images/google-icon.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-hidden="true" focusable="false">
+  <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"/>
+  <path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"/>
+  <path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"/>
+  <path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"/>
+</svg>

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";

app/assets/tailwind/google-sign-in.css

@@ -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%;
-  }
-}

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 %>

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

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" %>
-        <div class="text-center">
-          <%= button_to "/auth/#{provider_name}", method: :post, form: { data: { turbo: false } }, class: "gsi-material-button w-full" do %>
-            <div class="gsi-material-button-state"></div>
-            <div class="gsi-material-button-content-wrapper">
-              <div class="gsi-material-button-icon">
-                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: block;">
-                  <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path>
-                  <path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path>
-                  <path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"></path>
-                  <path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path>
-                  <path fill="none" d="M0 0h48v48H0z"></path>
-                </svg>
-              </div>
-              <span class="gsi-material-button-contents"><%= provider[:label].presence || t(".google_auth_connect") %></span>
-              <span style="display: none;"><%= provider[:label].presence || t(".google_auth_connect") %></span>
-            </div>
-          <% end %>
-        </div>
-      <% 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 %>
-          <span><%= provider[:label].presence || t(".#{provider_id}", default: provider[:name].to_s.titleize) %></span>
-        <% 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 %>
   </div>
 <% elsif !AuthConfig.local_login_form_visible? %>

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