Refactor AlertBanner component and update top banner styles

@theme/components/Navbar/Navbar.tsx

@@ -5,7 +5,7 @@ import { slugify } from "../../helpers";
 import { Link } from "@redocly/theme/components/Link/Link";
 import { ColorModeSwitcher } from "@redocly/theme/components/ColorModeSwitcher/ColorModeSwitcher";
 import { AlgoliaSearch } from "./AlgoliaSearch";
-import arrowUpRightPurpleIcon from "../../../static/img/icons/arrow-up-right-purple.svg";
+import arrowUpRight from "../../../static/img/icons/arrow-up-right-custom.svg";
 
 // @ts-ignore
 
@@ -125,27 +125,25 @@ export function AlertBanner({ message, button, link, show }) {
   const { translate } = useTranslate();
   if (show) {
     return (
-      <div className="top-banner fixed-top">
-        <div className={`web-banner`}>
-          <div className="banner-content">
-            <div className="event-info">{translate(message)}</div>
       <a
         href={link}
         target="_blank"
-              className="ticket-button"
+        className="top-banner fixed-top web-banner"
         rel="noopener noreferrer"
         aria-label="Get Tickets for XRP Ledger Apex 2025 Event"
       >
+        <div className="banner-content">
+          <div className="event-info">{translate(message)}</div>
+          <div className="ticket-button">
             <span className="button-text">{translate(button)}</span>
             <img
-                src={arrowUpRightPurpleIcon}
+              src={arrowUpRight}
               alt="Get Tickets Icon"
               className="button-icon"
             />
+          </div>
+        </div>
       </a>
-          </div>
-        </div>
-      </div>
     );
   }
   return null;

static/img/icons/arrow-up-right-custom.svg

@@ -1,3 +1,3 @@
 <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
-<path d="M31.3046 13.2652L6 38.5698L10.4302 43L35.7348 17.6954V39.8826H42V10.1326C42 8.40252 40.5975 7 38.8674 7H9.11741V13.2652L31.3046 13.2652Z" fill="#9A52FF"/>
+<path d="M31.3046 13.2652L6 38.5698L10.4302 43L35.7348 17.6954V39.8826H42V10.1326C42 8.40252 40.5975 7 38.8674 7H9.11741V13.2652L31.3046 13.2652Z" fill="white"/>
 </svg>

styles/_top-banner.scss

@@ -1,13 +1,21 @@
 .web-banner {
+  text-decoration: none;
   display: flex;
   align-items: center;
   justify-content: center;
   height: 46px;
   color: $white;
-  background: var(--XRPL-Secondary-Blue-Purple, #7919ff);
+  background: var(--XRPL-Secondary-Blue-Purple, #7919FF);
   padding: 7px 70px;
   z-index: 9999;
-
+  cursor: pointer;
+  &:hover {
+    text-decoration: none;
+    background: var(--XRPL-Blue-Purple-700, #4A00B2);
+    .button-icon {
+      animation: iconJitter 0.7s ease forwards;
+    }
+  }
   @media (max-width: 991px) {
     padding: 0 20px;
   }
@@ -40,13 +48,14 @@
   }
 
   .ticket-button {
+    border: 1px solid var(--XRPL-Primary-White, #fff);
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 6px;
     border-radius: 3141.892px;
-    background: var(--XRPL-Primary-White, #fff);
+    background: inherit;
-    color: var(--XRPL-Secondary-Blue-Purple, #7919ff);
+    color: #FFF;
     text-align: center;
     letter-spacing: -0.16px;
     padding: 8px 16px;
@@ -57,21 +66,11 @@
     transform-origin: center;
     transition: background-color 0.3s ease, color 0.3s ease;
 
-    &:hover {
-      background: #f3f3f3;
-      color: #6a09f2;
-    }
-
     @media (max-width: 524px) {
       font: 600 12px/1 Work Sans Apex, -apple-system, Roboto, Helvetica, sans-serif;
       width: 117px;
       height: 27px;
       padding: 6px 12px;
-
-      &:hover {
-        background: #f3f3f3;
-        color: #6a09f2;
-      }
     }
   }
 
@@ -79,7 +78,6 @@
     align-self: stretch;
     margin: auto 0;
     font-size: 16px;
-    color: var(--XRPL-Secondary-Blue-Purple, #7919FF);
     @media (max-width: 524px) {
       font-size: 12px;
     }
@@ -99,10 +97,6 @@
     transform-style: preserve-3d;
   }
 
-  .ticket-button:hover .button-icon {
-    animation: iconJitter 0.7s ease forwards;
-  }
-
   @keyframes iconJitter {
     0% {
       transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(22deg) skew(0deg, 0deg);
@@ -122,3 +116,7 @@
   }
 
 }
+
+.web-banner a {
+  text-decoration: none;
+}