From da55cdbba8074ee76badb21690cd27d8490d40d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rave=20=7C=20=E5=9B=B3=E6=9B=B8=E9=A4=A8=E7=8C=AB?=
 <raphael.wickihalder@odysee.com>
Date: Mon, 4 Jul 2022 14:32:30 +0200
Subject: [PATCH] Part 1 (#1789)

---
 ui/component/youtubeTransferStatus/view.jsx |  2 +-
 ui/scss/component/_ads.scss                 |  1 +
 ui/scss/component/_comments.scss            |  4 ++++
 ui/scss/component/_livestream-chat.scss     |  9 ++++-----
 ui/scss/component/_main.scss                |  6 ++++++
 ui/scss/component/_wunderbar.scss           |  4 ++++
 ui/scss/component/nag.scss                  |  3 +--
 ui/scss/component/section.scss              |  4 ++++
 ui/scss/init/_gui.scss                      | 10 +++++++++-
 9 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/ui/component/youtubeTransferStatus/view.jsx b/ui/component/youtubeTransferStatus/view.jsx
index 3495410e5..9d3fc3b8d 100644
--- a/ui/component/youtubeTransferStatus/view.jsx
+++ b/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>
                       ) : (
diff --git a/ui/scss/component/_ads.scss b/ui/scss/component/_ads.scss
index 53a8a3108..440e7c849 100644
--- a/ui/scss/component/_ads.scss
+++ b/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;
 
diff --git a/ui/scss/component/_comments.scss b/ui/scss/component/_comments.scss
index 9bdd00add..e6a43d16d 100644
--- a/ui/scss/component/_comments.scss
+++ b/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);
diff --git a/ui/scss/component/_livestream-chat.scss b/ui/scss/component/_livestream-chat.scss
index 710e6410a..028ceb44e 100644
--- a/ui/scss/component/_livestream-chat.scss
+++ b/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) {
diff --git a/ui/scss/component/_main.scss b/ui/scss/component/_main.scss
index db4eebdf2..66af96095 100644
--- a/ui/scss/component/_main.scss
+++ b/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,
diff --git a/ui/scss/component/_wunderbar.scss b/ui/scss/component/_wunderbar.scss
index c5a0333f8..2c975f2a0 100644
--- a/ui/scss/component/_wunderbar.scss
+++ b/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 {
diff --git a/ui/scss/component/nag.scss b/ui/scss/component/nag.scss
index ba44d5fe6..8bf3f3bac 100644
--- a/ui/scss/component/nag.scss
+++ b/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;
diff --git a/ui/scss/component/section.scss b/ui/scss/component/section.scss
index 795611f7f..623082d23 100644
--- a/ui/scss/component/section.scss
+++ b/ui/scss/component/section.scss
@@ -4,6 +4,10 @@
   ~ .section {
     margin-top: var(--spacing-l);
   }
+
+  &.help {
+    color: var(--color-text);
+  }
 }
 
 .section--padded {
diff --git a/ui/scss/init/_gui.scss b/ui/scss/init/_gui.scss
index d747106ed..4a70ca2a9 100644
--- a/ui/scss/init/_gui.scss
+++ b/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);
   }
 }