Part 1 (#1789)

ui/component/youtubeTransferStatus/view.jsx

@@ -159,7 +159,7 @@ export default function YoutubeTransferStatus(props: Props) {
                       properties={false}
                     />
                   ) : (
-                    <div className="section--padded">
+                    <div className="error">
                       {isNotEligible ? (
                         <div>{__('%channelName% is not eligible to be synced', { channelName })}</div>
                       ) : (

ui/scss/component/_ads.scss

@@ -392,6 +392,7 @@
   height: 26px;
   padding-top: 2px;
   background-color: var(--color-primary);
+  color: var(--color-primary-contrast);
   border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
   text-align: center;
 

ui/scss/component/_comments.scss

@@ -401,6 +401,10 @@ $thumbnailWidthSmall: 2rem;
     }
   }
 
+  .icon--ExternalLink {
+    margin-left: 0 !important;
+  }
+
   &:hover {
     .comment__menu-help {
       color: var(--color-primary-contrast);

ui/scss/component/_livestream-chat.scss

@@ -76,10 +76,6 @@ $recent-msg-button__height: 2rem;
     .recommended-content__toggles {
       margin-right: var(--spacing-xs);
 
-      .button-toggle:nth-child(2) {
-        // margin-left: 2px;
-      }
-
       .button-toggle--active {
         &:hover {
           p,
@@ -246,7 +242,6 @@ $recent-msg-button__height: 2rem;
 
     .button-toggle:not(.button-toggle--active) {
       color: var(--color-text);
-      // background-color: var(--color-header-button) !important;
       &:hover {
         filter: invert(100);
         .icon {
@@ -269,6 +264,10 @@ $recent-msg-button__height: 2rem;
     padding: 0 var(--spacing-s);
     padding-top: 0;
     padding-right: 0;
+
+    .button-toggle:last-of-type {
+      margin-right: var(--spacing-s) !important;
+    }
   }
 
   @media (max-width: $breakpoint-small) {

ui/scss/component/_main.scss

@@ -290,6 +290,12 @@ body {
             margin-top: 0;
             .channel-name {
               margin-top: 0;
+              p {
+                width: 181px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+              }
             }
           }
           span,

ui/scss/component/_wunderbar.scss

@@ -128,6 +128,7 @@
   padding-top: var(--spacing-xs);
   background-color: var(--color-background);
   border-radius: 0 0 var(--border-radius) var(--border-radius);
+  border: 2px solid var(--color-header-background);
 
   [data-highlighted] {
     .button {
@@ -247,6 +248,9 @@
   @extend .help;
   margin-top: 0;
   color: var(--color-text);
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .wunderbar__more-results {

ui/scss/component/nag.scss

@@ -1,6 +1,6 @@
 $nag-z-index: 997;
 $nag-helpful-z-index: 998;
-$nag-error-z-index: 999;
+$nag-error-z-index: 99999999999;
 
 .nag {
   z-index: $nag-z-index;
@@ -54,7 +54,6 @@ $nag-error-z-index: 999;
   right: var(--spacing-s);
   bottom: var(--spacing-s);
   width: unset;
-  // margin-right:100px;
   -webkit-backdrop-filter: blur(4px);
   backdrop-filter: blur(4px);
   box-sizing: border-box;

ui/scss/component/section.scss

@@ -4,6 +4,10 @@
   ~ .section {
     margin-top: var(--spacing-l);
   }
+
+  &.help {
+    color: var(--color-text);
+  }
 }
 
 .section--padded {

ui/scss/init/_gui.scss

@@ -411,6 +411,14 @@ img {
   }
 }
 
+.error {
+  padding: var(--spacing-s);
+  margin-bottom: var(--spacing-s);
+  border-radius: var(--border-radius);
+  background-color: rgba(255, 0, 0, 0.1);
+  border: 1px solid red;
+}
+
 .error__wrapper {
   background-color: var(--color-error);
   padding: var(--spacing-s);
@@ -1149,7 +1157,7 @@ img {
 
 [data-reach-menu-popover] {
   @media (max-width: $breakpoint-small) {
-    width: calc(100% - var(--spacing-xs) * 2);
+    // width: calc(100% - var(--spacing-xs) * 2);
     max-width: calc(100% - var(--spacing-xs) * 2);
   }
 }