Design patch 6 (#1285)

* Adjust embedded file width in comment section

* Fix design issues

ui/scss/component/_claim-list.scss

@@ -764,7 +764,7 @@
 
 .claim-upload__progress--inner-text {
   position: absolute;
-  color: var(--color-primary-contrast);
+  color: var(--color-text);
   width: 80%;
   white-space: nowrap;
   overflow: hidden;
@@ -1286,6 +1286,25 @@ $claim-preview-progress-bar-height: 5px;
       }
     }
   }
+
+  .button--file-action {
+    width: auto;
+    max-width: 25.59px;
+    transition: max-width 0.1s;
+    padding: 0.3rem !important;
+    .button__label {
+      margin-top: 0;
+      padding-top: 0px;
+      margin-bottom: -4px;
+      margin-left: var(--spacing-xxs);
+      text-overflow: hidden;
+    }
+
+    &:hover {
+      width: auto;
+      max-width: 60px;
+    }
+  }
 }
 
 .claim-preview__active {
@@ -1299,8 +1318,8 @@ $claim-preview-progress-bar-height: 5px;
 
   .claim-preview:not(.claim-preview--collection-mine):before {
     position: absolute;
-    top: -5px;
-    left: 78px;
+    top: 0px;
+    left: 68px;
     content: '▸';
     z-index: 1;
     font-size: 4.6rem;

ui/scss/component/_file-price.scss

@@ -83,6 +83,7 @@
 .filePrice__key {
   @extend .filePrice;
   color: var(--color-gray-5);
+  top: 0;
 
   .icon {
     fill: white;

ui/scss/component/_modal.scss

@@ -66,8 +66,16 @@
   }
 
   .claim-preview__wrapper {
+    padding-top: 0;
+
+    .claim-preview-info {
+      padding-top: var(--spacing-s);
+    }
+    .claim__menu-button {
+      right: var(--spacing-xxs) !important;
+    }
     &:hover {
-      background-color: unset;
+      // background-color: unset;
     }
   }
 

ui/scss/component/_videojs.scss

@@ -187,8 +187,9 @@ $control-bar-icon-size: 0.8rem;
 .vjs-mouse-display {
   color: white !important;
   background-color: lightgrey !important;
-  width: 8px !important;
-  margin-left: -5px !important;
+  background-color: white !important;
+  // width: 8px !important;
+  // margin-left: -5px !important;
 }
 
 .vjs_video_3_ima-ad-container {

ui/scss/init/_gui.scss

@@ -1217,6 +1217,10 @@ img {
     margin-bottom: -1px !important;
     // margin-left:2px !important;
   }
+  .claim-link {
+    width: 40%;
+    margin-top: var(--spacing-xs);
+  }
 }
 .hide-ribbon {
   .claim-tile__repost-author {
@@ -1257,6 +1261,12 @@ a {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
+.video-js .vjs-volume-level {
+  &::before {
+    color: white !important;
+  }
+}
+
 // Temporary fix for focus-visible
 *:focus-visible:not(.modal):not(.card):not(.wunderbar__input):not(.menu__list):not(.menu__list--header):not(.button--secondary):not(.button-like):not(.button-dislike):not(select):not(input):not(textarea):not(video):not([data-reach-tab-panels]):not([data-reach-tabs]):not([data-reach-tab-panel]):not(.CodeMirror-code):not(.MuiModal-root):not(.MuiPaper-root):not(.card):not(#onetrust-banner-sdk) {
   background-color: rgba(var(--color-primary-dynamic), 0.2) !important;