[SDESK-7088] UI issue - translation widget in the list view - text is…

… not visible
superdesk · Nov 2, 2023 · e8f9f16 · e8f9f16
1 parent ace27a0
commit e8f9f16
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 24 deletions.
diff --git a/scripts/apps/highlights/styles/highlights.scss b/scripts/apps/highlights/styles/highlights.scss
@@ -80,28 +80,28 @@
 .highlights-list-menu {
     padding: 5px 0;
     margin: 6px 0 0 0;
-    background-color: $black !important;
-    border-radius: 4px;
+    background-color: var(--color-dropdown-menu-Bg) !important;
+    border-radius: var(--b-radius--medium);
     max-width: 700px;
     min-width: 180px;
     overflow-y: auto;
     &:before {
         display: none;
     }
-
+    &:not(.dropdown__menu) {
+        box-shadow: var(--sd-shadow__dropdown);
+    }
     li {
         position: relative;
-        color: $white;
+        color: var(--color-text);
         padding: 0.4rem 1.2rem;
         width: 100%;
         display: flex;
         flex-direction: row; 
         align-items: center;
         justify-content: space-between;
-
         .dropdown__menu-label {
-            font-size: 11px;
-            padding-left: 0;
+            padding-inline-start: 0;
             color: var(--color-text-lighter);
             overflow: hidden;
             white-space: nowrap;
@@ -110,40 +110,41 @@
         }
         .dropdown__menu-close {
             position: absolute;
-            top: 4px; 
-            right: 8px;
+            inset-block-start: 4px; 
+            inset-inline-end: 8px;
             padding: 0; 
             margin: 0;
             border: 0; 
             width: auto;
-            @include opacity(50);
+            opacity: 0.5;
             background-color: transparent;
             i { 
-                margin-right: 0;
+                margin-inline-end: 0;
             }
             &:hover, &:focus {
                 background-color: transparent;
-                @include opacity(100);
+                opacity: 1;
             }
         }
         .btn {
             flex-shrink: 0;
         }
         & span {
-            color: $white;
+            color: var(--color-text);
             margin: 0;
             padding: 0;
         }
     }
+
 }
 
 .highlights-dropdown {
     .dropdown__menu {
         .dropdown__menu-label {
-            text-align: left;
-            line-height: 16px;
+            text-align: start;
+            line-height: 1.5;
             padding: 0 16px;
-            margin-bottom: 5px;
+            margin-block-end: 4px;
         }
         button {
             max-width: 250px;

diff --git a/scripts/apps/search/components/HighlightsList.tsx b/scripts/apps/search/components/HighlightsList.tsx
@@ -73,7 +73,7 @@ export class HighlightsList extends React.Component<IProps> {
                 <li>
                     <div className="dropdown__menu-label">{gettext('Marked For')}</div>
                     <button className="dropdown__menu-close" onClick={this.closeMenu}>
-                        <i className="icon-close-small icon--white" />
+                        <i className="icon-close-small" />
                     </button>
                 </li>
 

diff --git a/scripts/apps/search/components/translations-list-wrapper.tsx b/scripts/apps/search/components/translations-list-wrapper.tsx
@@ -12,7 +12,7 @@ interface IProps {
 export class TranslationsListWrapper extends React.PureComponent<IProps> {
     render() {
         return (
-            <ul className="highlights-list-menu">
+            <ul data-theme="dark-ui" className="highlights-list-menu">
                 <li>
                     <div className="dropdown__menu-label">{this.props.label}</div>
                     <button
@@ -21,7 +21,7 @@ export class TranslationsListWrapper extends React.PureComponent<IProps> {
                             this.props.close();
                         }}
                     >
-                        <i className="icon-close-small icon--white" />
+                        <i className="icon-close-small" />
                     </button>
                 </li>
 

diff --git a/styles/sass/labels.scss b/styles/sass/labels.scss
@@ -196,17 +196,20 @@ $priority-label-color-6 : #c0c9a1;
     color: $color;
 }
 .state-label {
-    display: inline-block;
-    line-height: 1.4rem;
+    display: inline-flex;
+    line-height: 1.6rem;
+    height: 1.6rem;
     font-size: 0.9rem;
     letter-spacing: 0.125em;
     text-transform: uppercase;
-    @include border-radius(8px);
-    padding: 0 0.8rem;
+    border-radius: var(--b-radius--full);
+    padding-inline: 0.8rem;
     border: 1px solid;
+    align-items: center;
     vertical-align: middle;
+    justify-content: center;
+    font-weight: 500;
     @include state-color();
-    @include text-semibold();
 
     &.state_embargo {
         @include state-color($state-color-embargo !important);