12 files changed, 76 insertions, 22 deletions

diff --git a/app/assets/stylesheets/framework/broadcast_messages.scss b/app/assets/stylesheets/framework/broadcast_messages.scss
index d3e7d751e63..95ea3d90a0e 100644
--- a/app/assets/stylesheets/framework/broadcast_messages.scss
+++ b/app/assets/stylesheets/framework/broadcast_messages.scss
@@ -1,7 +1,5 @@
 .broadcast-message {
-  @extend .alert-warning;
-  padding: 10px;
-  text-align: center;
+  padding: $gl-padding-8;
 
   div,
   p {
@@ -15,9 +13,29 @@
   }
 }
 
-.broadcast-message-preview {
+.broadcast-banner-message {
+  @extend .broadcast-message;
+  @extend .alert-warning;
+  text-align: center;
+}
+
+.broadcast-notification-message {
   @extend .broadcast-message;
-  margin-bottom: 20px;
+
+  position: fixed;
+  bottom: $gl-padding;
+  right: $gl-padding;
+  max-width: 300px;
+  width: auto;
+  background: $white-light;
+  border: 1px solid $gray-200;
+  box-shadow: 0 1px 2px 0 rgba($black, 0.1);
+  border-radius: $border-radius-default;
+  z-index: 999;
+
+  &.preview {
+    position: static;
+  }
 }
 
 .toggle-colors {
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index 767832e242c..1b549c0a4f0 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -29,7 +29,7 @@
   &:focus,
   &:active {
     background-color: $btn-active-gray;
-    box-shadow: $gl-btn-active-background;
+    box-shadow: none;
   }
 }
 
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 4b7dda3a2ff..dc119b52f4e 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -55,6 +55,10 @@
   background-color: $gray-light;
 }
 
+.bg-white {
+  background-color: $white;
+}
+
 .bg-line-target-blue {
   background: $line-target-blue;
 }
@@ -456,6 +460,8 @@ img.emoji {
 .w-8em { width: 8em; }
 .w-3rem { width: 3rem; }
 .w-15p { width: 15%; }
+.w-30p { width: 30%; }
+.w-60p { width: 60%; }
 .w-70p { width: 70%; }
 
 .h-12em { height: 12em; }
@@ -573,6 +579,7 @@ img.emoji {
 .gl-font-size-large { font-size: $gl-font-size-large; }
 
 .gl-line-height-24 { line-height: $gl-line-height-24; }
+.gl-line-height-14 { line-height: $gl-line-height-14; }
 
 .gl-font-size-12 { font-size: $gl-font-size-12; }
 .gl-font-size-14 { font-size: $gl-font-size-14; }
diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index 8e0314bc6da..1a017f03ebb 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -207,6 +207,14 @@
           border-left-color: mix($blame-gray, $blame-cyan, $i / 4 * 100%);
         }
       }
+
+      .doc-versions {
+        color: $gray-600;
+
+        &:hover {
+          color: $gray-900;
+        }
+      }
     }
 
     &.logs {
diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss
index 1c252584047..b5d1c3f6732 100644
--- a/app/assets/stylesheets/framework/filters.scss
+++ b/app/assets/stylesheets/framework/filters.scss
@@ -88,6 +88,7 @@
   }
 
   .name,
+  .operator,
   .value {
     display: inline-block;
     padding: 2px 7px;
@@ -101,6 +102,12 @@
     text-transform: capitalize;
   }
 
+  .operator {
+    background-color: $white-normal;
+    color: $filter-value-text-color;
+    margin-right: 1px;
+  }
+
   .value-container {
     display: flex;
     align-items: center;
@@ -147,6 +154,10 @@
     background-color: $filter-name-selected-color;
   }
 
+  .operator {
+    box-shadow: inset 0 0 0 100px $filtered-search-term-shadow-color;
+  }
+
   .value-container {
     box-shadow: inset 0 0 0 100px $filtered-search-term-shadow-color;
   }
@@ -260,6 +271,11 @@
     max-width: none;
     min-width: 100%;
   }
+
+  .btn-helptext {
+    margin-left: auto;
+    color: var(--gray);
+  }
 }
 
 .filtered-search-history-dropdown-wrapper {
diff --git a/app/assets/stylesheets/framework/highlight.scss b/app/assets/stylesheets/framework/highlight.scss
index 58516cbd1a9..ee6e53adaf7 100644
--- a/app/assets/stylesheets/framework/highlight.scss
+++ b/app/assets/stylesheets/framework/highlight.scss
@@ -8,7 +8,7 @@
   pre {
     padding: 10px 0;
     border: 0;
-    border-radius: 0 0 $border-radius-default $border-radius-default;
+    border-radius: 0 0 $border-radius-default;
     font-family: $monospace-font;
     font-size: $code-font-size;
     line-height: 1.5;
diff --git a/app/assets/stylesheets/framework/icons.scss b/app/assets/stylesheets/framework/icons.scss
index a53f5d85949..9ae313db4c1 100644
--- a/app/assets/stylesheets/framework/icons.scss
+++ b/app/assets/stylesheets/framework/icons.scss
@@ -20,6 +20,7 @@
 }
 
 .ci-status-icon-pending,
+.ci-status-icon-waiting-for-resource,
 .ci-status-icon-failed-with-warnings,
 .ci-status-icon-success-with-warnings {
   svg {
diff --git a/app/assets/stylesheets/framework/job_log.scss b/app/assets/stylesheets/framework/job_log.scss
index 4a57a458c50..fefc51bf1f7 100644
--- a/app/assets/stylesheets/framework/job_log.scss
+++ b/app/assets/stylesheets/framework/job_log.scss
@@ -22,6 +22,7 @@
   min-width: $job-line-number-width;
   margin-left: -$job-line-number-margin;
   padding-right: 1em;
+  user-select: none;
 
   &:hover,
   &:active,
diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss
index 4aba633e182..738150dbd2e 100644
--- a/app/assets/stylesheets/framework/lists.scss
+++ b/app/assets/stylesheets/framework/lists.scss
@@ -101,6 +101,13 @@ ul.unstyled-list > li {
   border-bottom: 0;
 }
 
+ul.list-items-py-2 {
+  > li {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+  }
+}
+
 // Generic content list
 ul.content-list {
   @include basic-list;
diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss
index bf0f1da6aa3..d54648cc34b 100644
--- a/app/assets/stylesheets/framework/mixins.scss
+++ b/app/assets/stylesheets/framework/mixins.scss
@@ -271,18 +271,13 @@
   }
 
   .btn-scroll.animate {
-    .first-triangle {
-      animation: blinking-scroll-button 1s ease infinite;
-      animation-delay: 0.3s;
-    }
-
-    .second-triangle {
-      animation: blinking-scroll-button 1s ease infinite;
-      animation-delay: 0.2s;
+    .scroll-arrow {
+      animation: blinking-scroll-button 1.5s ease-in-out infinite;
     }
 
-    .third-triangle {
-      animation: blinking-scroll-button 1s ease infinite;
+    .scroll-dot {
+      animation: blinking-scroll-button 1.5s ease-in-out infinite;
+      animation-delay: 0.3s;
     }
 
     &:disabled {
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index 39e7e4bb7e5..a1bfa03a5ac 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -179,15 +179,15 @@
 
     tbody {
       background-color: $white-light;
+
+      td {
+        border-color: $gray-200;
+      }
     }
 
     tr {
       th {
-        border-bottom: solid 2px $gl-gray-200;
-      }
-
-      td {
-        border-color: $gl-gray-200;
+        border-bottom: solid 2px $gray-300;
       }
     }
 
diff --git a/app/assets/stylesheets/framework/variables_overrides.scss b/app/assets/stylesheets/framework/variables_overrides.scss
index 604b48e11ab..7538459c97b 100644
--- a/app/assets/stylesheets/framework/variables_overrides.scss
+++ b/app/assets/stylesheets/framework/variables_overrides.scss
@@ -12,6 +12,7 @@ $font-family-sans-serif: $regular-font;
 $font-family-monospace: $monospace-font;
 $btn-line-height: 20px;
 $table-accent-bg: $gray-light;
+$table-border-color: $gray-200;
 $card-border-color: $border-color;
 $card-cap-bg: $gray-light;
 $success: $green-500;