Generate startup css as if com_and_canary

This fixes the vNext badge from temporarily rendering weirdly.

Changelog: fixed

app/assets/stylesheets/startup/startup-dark.scss

@@ -331,6 +331,9 @@ h1 {
   padding-left: 0.6em;
   border-radius: 10rem;
 }
+.bg-transparent {
+  background-color: transparent !important;
+}
 .rounded-circle {
   border-radius: 50% !important;
 }
@@ -375,6 +378,20 @@ h1 {
 .m-auto {
   margin: auto !important;
 }
+.gl-badge {
+  display: inline-flex;
+  align-items: center;
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+.gl-button .gl-badge {
+  top: 0;
+}
 .gl-form-input,
 .gl-form-input.form-control {
   background-color: #333;
@@ -875,6 +892,12 @@ input {
 .navbar-nav .badge.badge-pill:not(.merge-request-badge).todos-count {
   background-color: var(--blue-400, #1f75cb);
 }
+.title-container .canary-badge .badge,
+.navbar-nav .canary-badge .badge {
+  font-size: 12px;
+  line-height: 16px;
+  padding: 0 0.5rem;
+}
 @media (max-width: 575.98px) {
   .navbar-gitlab .container-fluid {
     font-size: 18px;
@@ -1841,9 +1864,18 @@ body.gl-dark {
   white-space: nowrap;
   width: 1px;
 }
+.gl-bg-green-500 {
+  background-color: #2da160;
+}
 .gl-border-none\! {
   border-style: none !important;
 }
+.gl-rounded-pill {
+  border-radius: 0.75rem;
+}
+.gl-text-white {
+  color: #333;
+}
 .gl-display-none {
   display: none;
 }
@@ -1862,6 +1894,10 @@ body.gl-dark {
 .gl-pr-2 {
   padding-right: 0.25rem;
 }
+.gl-py-1 {
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
+}
 .gl-ml-3 {
   margin-left: 0.5rem;
 }

app/assets/stylesheets/startup/startup-general.scss

@@ -311,6 +311,9 @@ h1 {
   padding-left: 0.6em;
   border-radius: 10rem;
 }
+.bg-transparent {
+  background-color: transparent !important;
+}
 .rounded-circle {
   border-radius: 50% !important;
 }
@@ -355,6 +358,20 @@ h1 {
 .m-auto {
   margin: auto !important;
 }
+.gl-badge {
+  display: inline-flex;
+  align-items: center;
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+.gl-button .gl-badge {
+  top: 0;
+}
 .gl-form-input,
 .gl-form-input.form-control {
   background-color: #fff;
@@ -855,6 +872,12 @@ input {
 .navbar-nav .badge.badge-pill:not(.merge-request-badge).todos-count {
   background-color: var(--blue-400, #428fdc);
 }
+.title-container .canary-badge .badge,
+.navbar-nav .canary-badge .badge {
+  font-size: 12px;
+  line-height: 16px;
+  padding: 0 0.5rem;
+}
 @media (max-width: 575.98px) {
   .navbar-gitlab .container-fluid {
     font-size: 18px;
@@ -1610,9 +1633,18 @@ svg.s16 {
   white-space: nowrap;
   width: 1px;
 }
+.gl-bg-green-500 {
+  background-color: #108548;
+}
 .gl-border-none\! {
   border-style: none !important;
 }
+.gl-rounded-pill {
+  border-radius: 0.75rem;
+}
+.gl-text-white {
+  color: #fff;
+}
 .gl-display-none {
   display: none;
 }
@@ -1631,6 +1663,10 @@ svg.s16 {
 .gl-pr-2 {
   padding-right: 0.25rem;
 }
+.gl-py-1 {
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
+}
 .gl-ml-3 {
   margin-left: 0.5rem;
 }

ee/app/assets/stylesheets/startup/startup-dark.scss

@@ -331,6 +331,9 @@ h1 {
   padding-left: 0.6em;
   border-radius: 10rem;
 }
+.bg-transparent {
+  background-color: transparent !important;
+}
 .rounded-circle {
   border-radius: 50% !important;
 }
@@ -375,6 +378,20 @@ h1 {
 .m-auto {
   margin: auto !important;
 }
+.gl-badge {
+  display: inline-flex;
+  align-items: center;
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+.gl-button .gl-badge {
+  top: 0;
+}
 .gl-form-input,
 .gl-form-input.form-control {
   background-color: #333;
@@ -875,6 +892,12 @@ input {
 .navbar-nav .badge.badge-pill:not(.merge-request-badge).todos-count {
   background-color: var(--blue-400, #1f75cb);
 }
+.title-container .canary-badge .badge,
+.navbar-nav .canary-badge .badge {
+  font-size: 12px;
+  line-height: 16px;
+  padding: 0 0.5rem;
+}
 @media (max-width: 575.98px) {
   .navbar-gitlab .container-fluid {
     font-size: 18px;
@@ -1841,9 +1864,18 @@ body.gl-dark {
   white-space: nowrap;
   width: 1px;
 }
+.gl-bg-green-500 {
+  background-color: #2da160;
+}
 .gl-border-none\! {
   border-style: none !important;
 }
+.gl-rounded-pill {
+  border-radius: 0.75rem;
+}
+.gl-text-white {
+  color: #333;
+}
 .gl-display-none {
   display: none;
 }
@@ -1862,6 +1894,10 @@ body.gl-dark {
 .gl-pr-2 {
   padding-right: 0.25rem;
 }
+.gl-py-1 {
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
+}
 .gl-ml-3 {
   margin-left: 0.5rem;
 }

ee/app/assets/stylesheets/startup/startup-general.scss

@@ -311,6 +311,9 @@ h1 {
   padding-left: 0.6em;
   border-radius: 10rem;
 }
+.bg-transparent {
+  background-color: transparent !important;
+}
 .rounded-circle {
   border-radius: 50% !important;
 }
@@ -355,6 +358,20 @@ h1 {
 .m-auto {
   margin: auto !important;
 }
+.gl-badge {
+  display: inline-flex;
+  align-items: center;
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+.gl-button .gl-badge {
+  top: 0;
+}
 .gl-form-input,
 .gl-form-input.form-control {
   background-color: #fff;
@@ -855,6 +872,12 @@ input {
 .navbar-nav .badge.badge-pill:not(.merge-request-badge).todos-count {
   background-color: var(--blue-400, #428fdc);
 }
+.title-container .canary-badge .badge,
+.navbar-nav .canary-badge .badge {
+  font-size: 12px;
+  line-height: 16px;
+  padding: 0 0.5rem;
+}
 @media (max-width: 575.98px) {
   .navbar-gitlab .container-fluid {
     font-size: 18px;
@@ -1610,9 +1633,18 @@ svg.s16 {
   white-space: nowrap;
   width: 1px;
 }
+.gl-bg-green-500 {
+  background-color: #108548;
+}
 .gl-border-none\! {
   border-style: none !important;
 }
+.gl-rounded-pill {
+  border-radius: 0.75rem;
+}
+.gl-text-white {
+  color: #fff;
+}
 .gl-display-none {
   display: none;
 }
@@ -1631,6 +1663,10 @@ svg.s16 {
 .gl-pr-2 {
   padding-right: 0.25rem;
 }
+.gl-py-1 {
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
+}
 .gl-ml-3 {
   margin-left: 0.5rem;
 }

spec/frontend/fixtures/startup_css.rb

@@ -18,6 +18,10 @@ RSpec.describe 'Startup CSS fixtures', type: :controller do
     let(:project) { create(:project, :public, :repository, description: 'Code and stuff', creator: user) }
 
     before do
+      # We want vNext badge to be included and com/canary don't remove/hide any other elements.
+      # This is why we're turning com and canary on by default for now.
+      allow(Gitlab).to receive(:com?).and_return(true)
+      allow(Gitlab).to receive(:canary?).and_return(true)
       sign_in(user)
     end