fix: component button styling for mfe iframe

Author: navinkarkera

cms/static/sass/course-unit-mfe-iframe-bundle.scss

@@ -43,14 +43,15 @@
     .wrapper-xblock .header-actions .actions-list .action-item .action-button {
       @extend %button-styles;
 
-      color: $black;
+      color: $primary;
 
       .fa-ellipsis-v {
         font-size: $base-font-size;
       }
 
       &:hover {
         background-color: $primary;
+        color: $white;
         border-color: $transparent;
       }
 
@@ -373,6 +374,12 @@
   }
 }
 
+.library-sync-button {
+  .action-button-text {
+    display: none;
+  }
+}
+
 .action-edit {
   .action-button-text {
     display: none;

cms/templates/studio_xblock_wrapper.html

@@ -143,7 +143,7 @@
                                     data-tooltip="${_("Update available - click to sync")}"
                                 >
                                     <span class="icon fa fa-refresh" aria-hidden="true"></span>
-                                    <span>${_("Update available")}</span>
+                                    <span class="action-button-text">${_("Update available")}</span>
                                 </button>
                             </li>
                         % endif