1 files changed, 43 insertions, 52 deletions

diff --git a/app/assets/stylesheets/startup/startup-general.scss b/app/assets/stylesheets/startup/startup-general.scss
index 2f79c86cdc6..0d35c400676 100644
--- a/app/assets/stylesheets/startup/startup-general.scss
+++ b/app/assets/stylesheets/startup/startup-general.scss
@@ -295,10 +295,18 @@ h1 {
   padding-left: 0.6em;
   border-radius: 10rem;
 }
+.badge-success {
+  color: #fff;
+  background-color: #108548;
+}
 .badge-info {
   color: #fff;
   background-color: #1f75cb;
 }
+.badge-warning {
+  color: #fff;
+  background-color: #ab6100;
+}
 .bg-transparent {
   background-color: transparent !important;
 }
@@ -375,6 +383,34 @@ a.gl-badge.badge-info:active {
     0 0 0 1px rgba(255, 255, 255, 0.4), 0 0 0 4px rgba(31, 117, 203, 0.48);
   outline: none;
 }
+.gl-badge.badge-success {
+  background-color: #c3e6cd;
+  color: #24663b;
+}
+a.gl-badge.badge-success.active,
+a.gl-badge.badge-success:active {
+  color: #0a4020;
+  background-color: #91d4a8;
+}
+a.gl-badge.badge-success:active {
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8),
+    0 0 0 1px rgba(255, 255, 255, 0.4), 0 0 0 4px rgba(31, 117, 203, 0.48);
+  outline: none;
+}
+.gl-badge.badge-warning {
+  background-color: #f5d9a8;
+  color: #8f4700;
+}
+a.gl-badge.badge-warning.active,
+a.gl-badge.badge-warning:active {
+  color: #5c2900;
+  background-color: #e9be74;
+}
+a.gl-badge.badge-warning:active {
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8),
+    0 0 0 1px rgba(255, 255, 255, 0.4), 0 0 0 4px rgba(31, 117, 203, 0.48);
+  outline: none;
+}
 .gl-button .gl-badge {
   top: 0;
 }
@@ -818,7 +854,7 @@ input {
   .container-fluid
   .navbar-nav
   li
-  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge) {
+  .badge.badge-pill:not(.gl-badge) {
   box-shadow: none;
   font-weight: 600;
 }
@@ -901,44 +937,6 @@ input {
   line-height: 18px;
   margin: 4px 0 4px 2px;
 }
-.title-container
-  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge),
-.navbar-nav
-  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge) {
-  position: inherit;
-  font-weight: 400;
-  margin-left: -6px;
-  font-size: 11px;
-  color: var(--gray-950, #fff);
-  padding: 0 5px;
-  line-height: 12px;
-  border-radius: 7px;
-  box-shadow: 0 1px 0 rgba(76, 78, 84, 0.2);
-}
-.title-container
-  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).green-badge,
-.navbar-nav
-  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).green-badge {
-  background-color: var(--green-400, #2da160);
-}
-.title-container
-  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).merge-requests-count,
-.navbar-nav
-  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).merge-requests-count {
-  background-color: var(--orange-400, #c17d10);
-}
-.title-container
-  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).todos-count,
-.navbar-nav
-  .badge.badge-pill:not(.merge-request-badge):not(.version-check-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;
@@ -1084,6 +1082,8 @@ input {
 }
 .nav-sidebar li .nav-item-name {
   flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .nav-sidebar li > a,
 .nav-sidebar li > .fly-out-top-item-container {
@@ -1316,7 +1316,8 @@ input {
 .nav-sidebar-inner-scroll {
   height: 100%;
   width: 100%;
-  overflow: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
 }
 .nav-sidebar-inner-scroll > div.context-header {
   margin-top: 0.25rem;
@@ -1697,18 +1698,9 @@ 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;
 }
@@ -1730,9 +1722,8 @@ svg.s16 {
 .gl-pr-2 {
   padding-right: 0.25rem;
 }
-.gl-py-1 {
-  padding-top: 0.125rem;
-  padding-bottom: 0.125rem;
+.gl-ml-n2 {
+  margin-left: -0.25rem;
 }
 .gl-ml-3 {
   margin-left: 0.5rem;