Add announcement bar

* add rename annoucement bar

* Add link and reduce vertical padding

* remove unused default config

---------

Co-authored-by: Alexandra Carrillo <[email protected]>

Author: AyushBherwani1998

src/scss/custom.scss

@@ -830,7 +830,7 @@ code:hover .code-unfocus {
 div[class^='theme-announcement-bar'] {
   font-family: var(--font-mm-euclid);
   font-size: 1.4rem;
-  padding: 1rem 2rem;
+  padding: 0.5rem 2rem;
   text-align: center;
   border-bottom: 1px solid var(--general-gray-light);
   background-color: var(--developer-purple-light);

src/theme/AnnouncementBar/index.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { useLocation } from '@docusaurus/router'
+
+export default function AnnouncementBar(): JSX.Element | null {
+  const location = useLocation()
+  
+  // Show on smart-accounts-kit paths or main/homepage
+  const isSmartAccountsKitPath = location.pathname.includes('/smart-accounts-kit')
+  const isMainPath = location.pathname === '/'
+
+  const isValidPath = isSmartAccountsKitPath || isMainPath
+
+  if (!isValidPath) {
+    return null
+  }
+
+  return (
+    <div className="theme-announcement-bar" role="banner" data-announcement-bar="true">
+      <div style={{ textAlign: 'center' }}>
+        <strong>Delegation Toolkit is now renamed to <a href="/smart-accounts-kit">Smart Accounts Kit</a>.</strong>
+      </div>
+    </div>
+  )
+}