Enhanced announcement bar UI

Author: riddhij-7

docusaurus.config.js

@@ -99,7 +99,7 @@ module.exports = {
     },
     announcementBar: {
       id: "announcementBar_1", // Increment on change
-      content: `⭐️ If you like Keploy, give it a star on <a target="_blank" rel="noopener noreferrer" href="https://github.com/keploy/keploy">GitHub</a> and follow us on <a target="_blank" rel="noopener noreferrer" href="https://twitter.com/keployio">Twitter</a> ❤️ `,
+      content: ` If you like Keploy, give it a star ⭐️ on <a target="_blank" rel="noopener noreferrer" href="https://github.com/keploy/keploy">GitHub</a> and follow us on <a target="_blank" rel="noopener noreferrer" href="https://twitter.com/keployio">Twitter</a> ❤️ `,
     },
     prism: {
       theme: prismThemes.vsLight,

src/css/custom.css

@@ -572,21 +572,38 @@ td img {
   background-size: 24px 24px;
 }
 
-div[class^="announcementBar_"] {
-  --site-announcement-bar-stripe-color1: hsl(
-    var(--site-primary-hue-saturation) 88%
-  );
-  --site-announcement-bar-stripe-color2: hsl(
-    var(--site-primary-hue-saturation) 95%
-  );
-  background: repeating-linear-gradient(
-    35deg,
-    var(--site-announcement-bar-stripe-color1),
-    var(--site-announcement-bar-stripe-color1) 20px,
-    var(--site-announcement-bar-stripe-color2) 10px,
-    var(--site-announcement-bar-stripe-color2) 40px
-  );
-  font-weight: bold;
+.theme-announcement-bar,
+.announcementBar_mb4j {
+  background: linear-gradient(90deg, #ffcc33, #ff884d) !important;
+  color: #000 !important;
+  position: relative !important;
+  font-weight: 600 !important;
+  font-size: 1.1rem !important;
+  text-align: center;
+  padding: 1.5rem 0 !important;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+}
+
+/* Optional: Dark theme gradient */
+html[data-theme='dark'] .theme-announcement-bar,
+html[data-theme='dark'] .announcementBar_mb4j {
+  background: linear-gradient(90deg, #1e1e2f, #3a3a5c) !important;
+  color: #fff !important;
+}
+
+.announcementBarClose_gvF7 {
+  position: absolute !important;
+  right: 1rem !important;
+  top: 50% !important;
+  transform: translateY(-50%) !important;
+  background: transparent !important;
+  border: none !important;
+  cursor: pointer;
+  opacity: 0.8;
+}
+
+.announcementBarClose_gvF7:hover {
+  opacity: 1;
 }
 
 .list-disc > a {

src/pages/styles.module.css

@@ -141,22 +141,25 @@
 }
 
 .announcement {
-  font-weight: bold;
-  font-size: 24px;
-  padding: 48px;
+  background: linear-gradient(90deg, #ffcc33, #ff884d);
+  font-weight: 600;
+  font-size: 1.1rem;
+  color: #000;
+  padding: 1.5rem 0;
   margin: 0 auto;
   text-align: center;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
 }
 
 .announcementDark {
-  background-color: #20232a;
+  background: linear-gradient(90deg, #1e1e2f, #3a3a5c);
   color: #fff;
   /* Reapply the primary color, because it has been locally overridden as
    * the dark theme color */
-  --ifm-link-color: var(--ifm-color-primary);
+  --ifm-link-color: #ffd966;
 }
 
 .announcementInner {
   margin: 0 auto;
-  max-width: 768px;
+  max-width: 900px;
 }