Merge branch 'fix-vnext-startup-style' into 'master'

Generate startup css as if com_and_canary

See merge request gitlab-org/gitlab!71134

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

@@ -315,6 +315,9 @@ h1 {
   padding-left: 0.6em;
   border-radius: 10rem;
 }
+.bg-transparent {
+  background-color: transparent !important;
+}
 .rounded-circle {
   border-radius: 50% !important;
 }
@@ -359,6 +362,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;
@@ -856,6 +873,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;
@@ -1822,9 +1845,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;
 }
@@ -1843,6 +1875,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

@@ -295,6 +295,9 @@ h1 {
   padding-left: 0.6em;
   border-radius: 10rem;
 }
+.bg-transparent {
+  background-color: transparent !important;
+}
 .rounded-circle {
   border-radius: 50% !important;
 }
@@ -339,6 +342,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;
@@ -836,6 +853,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;
@@ -1591,9 +1614,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;
 }
@@ -1612,6 +1644,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

@@ -315,6 +315,9 @@ h1 {
   padding-left: 0.6em;
   border-radius: 10rem;
 }
+.bg-transparent {
+  background-color: transparent !important;
+}
 .rounded-circle {
   border-radius: 50% !important;
 }
@@ -359,6 +362,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;
@@ -856,6 +873,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;
@@ -1822,9 +1845,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;
 }
@@ -1843,6 +1875,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

@@ -295,6 +295,9 @@ h1 {
   padding-left: 0.6em;
   border-radius: 10rem;
 }
+.bg-transparent {
+  background-color: transparent !important;
+}
 .rounded-circle {
   border-radius: 50% !important;
 }
@@ -339,6 +342,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;
@@ -836,6 +853,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;
@@ -1591,9 +1614,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;
 }
@@ -1612,6 +1644,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