Increase button size to 18

app/assets/javascripts/vue_shared/components/toggle_button.vue

@@ -76,9 +76,9 @@ export default {
       @click="toggleFeature"
     >
       <gl-loading-icon class="loading-icon" />
-      <span class="toggle-icon gl-bg-white">
+      <span class="toggle-icon">
         <gl-icon
-          :size="16"
+          :size="18"
           :name="toggleIcon"
           :class="value ? 'gl-fill-blue-500' : 'gl-fill-gray-400'"
         />

app/assets/stylesheets/framework/toggle.scss

@@ -53,11 +53,9 @@
     border-radius: 9px;
     background: $white;
     transition: all 0.2s ease;
-
-    & {
-      width: $default-icon-size;
-      height: $default-icon-size;
-    }
+    width: $default-icon-size;
+    height: $default-icon-size;
+    
   }
 
   .loading-icon {

app/views/projects/pages_domains/_certificate.html.haml

@@ -19,8 +19,8 @@
           "aria-label": _("Automatic certificate management using Let's Encrypt") }
           = f.hidden_field :auto_ssl_enabled?, class: "js-project-feature-toggle-input"
           %span.toggle-icon
-            = sprite_icon("status_success_borderless", size: 16, css_class: "gl-fill-blue-500 toggle-status-checked")
-            = sprite_icon("status_failed_borderless", size: 16, css_class: "gl-fill-gray-400 toggle-status-unchecked")
+            = sprite_icon("status_success_borderless", size: 18, css_class: "gl-fill-blue-500 toggle-status-checked")
+            = sprite_icon("status_failed_borderless", size: 18, css_class: "gl-fill-gray-400 toggle-status-unchecked")
         %p.text-secondary.mt-3
           - docs_link_url = help_page_path("user/project/pages/custom_domains_ssl_tls_certification/lets_encrypt_integration.md")
           - docs_link_start = "<a href=\"%{docs_link_url}\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"text-nowrap\">".html_safe % { docs_link_url: docs_link_url }

app/views/shared/buttons/_project_feature_toggle.html.haml

@@ -12,5 +12,5 @@
   - if yield.present?
     = yield
   %span.toggle-icon
-    = sprite_icon('status_success_borderless', size: 16, css_class: 'gl-fill-blue-500 toggle-status-checked')
-    = sprite_icon('status_failed_borderless', size: 16, css_class: 'gl-fill-gray-400 toggle-status-unchecked')
+    = sprite_icon('status_success_borderless', size: 18, css_class: 'gl-fill-blue-500 toggle-status-checked')
+    = sprite_icon('status_failed_borderless', size: 18, css_class: 'gl-fill-gray-400 toggle-status-unchecked')

spec/frontend/vue_shared/components/toggle_button_spec.js

@@ -32,7 +32,7 @@ describe('Toggle Button', () => {
 
     it('renders input status icon', () => {
       expect(vm.$el.querySelectorAll('span.toggle-icon').length).toEqual(1);
-      expect(vm.$el.querySelectorAll('svg.s16').length).toEqual(1);
+      expect(vm.$el.querySelectorAll('svg.s18').length).toEqual(1);
     });
   });