fix: Enhanced announcement bar UI

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

@@ -12,19 +12,19 @@
 
 :root {
   /* Hotfix: Changed primary color to black to resolve conflict with Docusaurus' default primary orange after disabling Tailwind preflight CSS. Added font size and line height adjustments to compensate for the removal of Tailwind preflight. */
- 
+
   /* --ifm-color-primary-lighter: #ffb575; */
-  font-size:18px;
+  font-size: 18px;
   line-height: 1.6;
   --ifm-color-primary: #000;
 
-  --ifm-color-primary-lighter: #FFF;
+  --ifm-color-primary-lighter: #fff;
   --ifm-color-primary: #ff914d;
   --ifm-color-primary-dark: #e67643;
   --ifm-color-primary-darker: #c95919;
   --ifm-color-primary-darkest: #be2c1b;
   --ifm-color-primary-light: #ffd0a0;
-  
+
   --ifm-color-primary-lightest: #ffceb1;
   --ifm-code-font-size: 95%;
   --doc-sidebar-width: 275px !important;
@@ -37,11 +37,10 @@
 
 html[data-theme="dark"] {
   /* Hotfix: Changed 'ifm-color-primary-lighter' to white to resolve conflict with Docusaurus' default color after disabling Tailwind preflight CSS. */
-
 
   /* --ifm-color-primary-lighter: #ffb575; */
-  --ifm-color-primary-lighter: #FFF; 
-   
+  --ifm-color-primary-lighter: #fff;
+
   --ifm-color-primary: #ff914d;
   --ifm-color-primary-dark: #e67643;
   --ifm-color-primary-darker: #c95919;
@@ -112,7 +111,7 @@ html[data-theme="light"] {
 }
 
 /* Hotfix: Remove extra margin-bottom on community links subtext in the home page due to Tailwind preflight removal */
-h3{
+h3 {
   margin-bottom: 0.1rem;
 }
 h1,
@@ -213,7 +212,7 @@ div[class^="sidebar_"] .button svg {
 
 /* Pagination */
 .pagination-nav {
-  @apply flex mt-12 flex-col items-start justify-center space-x-0 space-y-5 md:flex-row md:space-x-10 md:space-y-0;
+  @apply mt-12 flex flex-col items-start justify-center space-x-0 space-y-5 md:flex-row md:space-x-10 md:space-y-0;
 }
 .pagination-nav__item {
   @apply w-full max-w-md;
@@ -228,7 +227,7 @@ div[class^="sidebar_"] .button svg {
 }
 
 .navbar__items--right {
-  @apply justify-end ml-auto flex-row-reverse;
+  @apply ml-auto flex-row-reverse justify-end;
   gap: 13px;
 }
 
@@ -336,7 +335,7 @@ footer svg {
 }
 
 /* Reset margin bottom on h3 (refer docs community section li item heading) after disabling tailwind preflight. */
-h3{
+h3 {
   margin-bottom: 1px;
 }
 
@@ -572,21 +571,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, #fadf8b, #f9bc5f) !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.01);
+}
+
+/* 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 {
@@ -604,13 +620,14 @@ a[class="breadcrumbs__link"] {
 }
 
 /* Hotfix: Manually add Tailwind preflight styles to fix clipboard issues in Safari.
-   Using `preflight: true` caused style conflicts, so these styles are directly included here. */*,
+   Using `preflight: true` caused style conflicts, so these styles are directly included here. */
+*,
 ::before,
 ::after {
   box-sizing: border-box;
   border-width: 0;
   border-style: solid;
-  border-color: theme('borderColor.DEFAULT', currentColor);
+  border-color: theme("borderColor.DEFAULT", currentColor);
 }
 
 * {
@@ -623,7 +640,7 @@ html {
   -webkit-text-size-adjust: 100%;
   -moz-tab-size: 4;
   tab-size: 4;
-  font-family: theme('fontFamily.sans', ui-sans-serif, system-ui, sans-serif);
+  font-family: theme("fontFamily.sans", ui-sans-serif, system-ui, sans-serif);
 }
 
 body {
@@ -677,9 +694,9 @@ html {
 }
 
 button,
-[type='button'],
-[type='reset'],
-[type='submit'] {
+[type="button"],
+[type="reset"],
+[type="submit"] {
   -webkit-appearance: button;
   background-color: transparent;
   background-image: none;
@@ -706,12 +723,12 @@ menu {
 }
 
 :focus-visible {
-  outline: 2px solid theme('colors.blue.600', #2563eb);
+  outline: 2px solid theme("colors.blue.600", #2563eb);
   outline-offset: 2px;
 }
 
-[type='number']::-webkit-inner-spin-button,
-[type='number']::-webkit-outer-spin-button {
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
   height: auto;
 }
 
@@ -745,7 +762,7 @@ textarea {
 }
 
 .theme-back-to-top-button {
-  background-color: #FF914D !important;
+  background-color: #ff914d !important;
   color: white !important;
 }
 
@@ -756,5 +773,3 @@ textarea {
 .theme-back-to-top-button:hover {
   background-color: #e67643 !important;
 }
-
-

src/pages/styles.module.css

@@ -141,22 +141,25 @@
 }
 
 .announcement {
-  font-weight: bold;
-  font-size: 24px;
-  padding: 48px;
+  background: linear-gradient(90deg, #ffe082, #ffb74d);
+  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;
+}

src/theme/Heading/styles.module.css

@@ -19,7 +19,7 @@ See https://twitter.com/JoshWComeau/status/1332015868725891076
 }
 
 :global(.hash-link::before) {
-  content: '#';
+  content: "#";
 }
 
 :global(.hash-link:focus),

static/css/code-block-buttons.css

@@ -1,39 +1,39 @@
 /* "Copy" code block button */
 pre {
-    position: relative;
-  }
-  
-  pre .btnIcon {
-    position: absolute;
-    top: 4px;
-    z-index: 2;
-    cursor: pointer;
-    border: 1px solid transparent;
-    padding: 0;
-    color: #fff;
-    background-color: transparent;
-    height: 30px;
-    transition: all .25s ease-out;
-  }
-  
-  pre .btnIcon:hover {
-    text-decoration: none;
-  }
-  
-  .btnIcon__body {
-    align-items: center;
-    display: flex;
-  }
-  
-  .btnIcon svg {
-    fill: currentColor;
-    margin-right: .4em;
-  }
-  
-  .btnIcon__label {
-    font-size: 11px;
-  }
-  
-  .btnClipboard {
-    right: 10px;
-  }
+  position: relative;
+}
+
+pre .btnIcon {
+  position: absolute;
+  top: 4px;
+  z-index: 2;
+  cursor: pointer;
+  border: 1px solid transparent;
+  padding: 0;
+  color: #fff;
+  background-color: transparent;
+  height: 30px;
+  transition: all 0.25s ease-out;
+}
+
+pre .btnIcon:hover {
+  text-decoration: none;
+}
+
+.btnIcon__body {
+  align-items: center;
+  display: flex;
+}
+
+.btnIcon svg {
+  fill: currentColor;
+  margin-right: 0.4em;
+}
+
+.btnIcon__label {
+  font-size: 11px;
+}
+
+.btnClipboard {
+  right: 10px;
+}

vale_styles/Google/AMPM.yml

@@ -1,6 +1,6 @@
 extends: existence
 message: "Use 'AM' or 'PM' (preceded by a space)."
-link: 'https://developers.google.com/style/word-list'
+link: "https://developers.google.com/style/word-list"
 level: error
 nonword: true
 tokens:

vale_styles/Google/Acronyms.yml

@@ -1,6 +1,6 @@
 extends: conditional
 message: "Spell out '%s', if it's unfamiliar to the audience."
-link: 'https://developers.google.com/style/abbreviations'
+link: "https://developers.google.com/style/abbreviations"
 level: suggestion
 ignorecase: false
 # Ensures that the existence of 'first' implies the existence of 'second'.

vale_styles/Google/Colons.yml

@@ -1,6 +1,6 @@
 extends: existence
 message: "'%s' should be in lowercase."
-link: 'https://developers.google.com/style/colons'
+link: "https://developers.google.com/style/colons"
 nonword: true
 level: warning
 scope: sentence

vale_styles/Google/Contractions.yml

@@ -1,6 +1,6 @@
 extends: substitution
 message: "Feel free to use '%s' instead of '%s'."
-link: 'https://developers.google.com/style/contractions'
+link: "https://developers.google.com/style/contractions"
 level: suggestion
 ignorecase: true
 action:

vale_styles/Google/DateFormat.yml

@@ -1,6 +1,6 @@
 extends: existence
 message: "Use 'July 31, 2016' format, not '%s'."
-link: 'https://developers.google.com/style/dates-times'
+link: "https://developers.google.com/style/dates-times"
 ignorecase: true
 level: error
 nonword: true

vale_styles/Google/Ellipses.yml

@@ -1,6 +1,6 @@
 extends: existence
 message: "In general, don't use an ellipsis."
-link: 'https://developers.google.com/style/ellipses'
+link: "https://developers.google.com/style/ellipses"
 nonword: true
 level: warning
 action:

vale_styles/Google/EmDash.yml

@@ -1,12 +1,12 @@
 extends: existence
 message: "Don't put a space before or after a dash."
-link: 'https://developers.google.com/style/dashes'
+link: "https://developers.google.com/style/dashes"
 nonword: true
 level: error
 action:
   name: edit
   params:
     - remove
-    - ' '
+    - " "
 tokens:
   - '\s[—–]\s'