style: icon design fixed by adding svg (#30763)

fix: style fix added for legacy button

lms/templates/discussion/_switch_experience_fragment.html

@@ -7,13 +7,21 @@ from django.utils.translation import ugettext as _
 %>
 
 % if show_banner:
-<div class="upgrade-banner d-flex bg-primary text-white align-items-center px-4 py-1">
+<div class="d-flex bg-primary text-white align-items-center px-4 py-1">
     % if show_mfe:
     <div class="d-flex w-100 small align-items-center">
         ${_("Welcome to the new discussions experience. Please share your feedback.")}
-        <a href="${legacy_url}" class="ml-2 text-white">
-            <i class="fa fa-info-circle" data-toggle="tooltip" data-placement="bottom" title="${_('View legacy experience')}"> </i>
-        </a>
+        <div class="legacy-button pl-2" role="button" tabindex="-1">
+            <svg  xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 20 20" fill="none" style="padding-top: 4px">
+                <path d="M9 5H11V7H9V5ZM9 9H11V15H9V9ZM10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 18C5.59 18 2 14.41 2 10C2 5.59 5.59 2 10 2C14.41 2 18 5.59 18 10C18 14.41 14.41 18 10 18Z" fill="white"/>
+            </svg>
+
+            <span class="tooltiptext py-2">
+                <a href="${legacy_url}" class="px-2 tooltip-link">
+                        ${_('View legacy experience')}
+                </a>
+            </span>
+        </div>
     </div>
     % else:
     <div class="d-flex w-100 small">
@@ -32,3 +40,35 @@ from django.utils.translation import ugettext as _
 </div>
 % endif
 
+
+<style>
+    /* This style is added as temporary fix to achieve design requirement as this feature will be deprecated soon */
+    /* The relevant scss files are not picking up design */
+
+    .legacy-button {
+        position: relative;
+        display: inline-block;
+    }
+    .legacy-button .tooltiptext {
+        visibility: hidden;
+        position: absolute;
+        background: #FFFFFF;
+        border-radius: 4px;
+        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15), 0px 2px 8px rgba(0, 0, 0, 0.15);
+        width: max-content;
+        top: 100%;
+        left: 0%;
+    }
+    .legacy-button:hover .tooltiptext {
+        visibility: visible;
+        opacity: 1;
+    }
+    .tooltip-link{
+        color: #454545;
+    }
+    .tooltip-link:hover {
+        background-color:#e7e7e7;
+        color: #454545 !important;
+    }
+
+</style>