Add link and reduce vertical padding

Author: alexandratran

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

@@ -17,7 +17,7 @@ export default function AnnouncementBar(): JSX.Element | null {
   return (
     <div className="theme-announcement-bar" role="banner" data-announcement-bar="true">
       <div style={{ textAlign: 'center' }}>
-        <strong>Delegation Toolkit is now renamed to Smart Accounts Kit.</strong>
+        <strong>Delegation Toolkit is now renamed to <a href="/smart-accounts-kit">Smart Accounts Kit</a>.</strong>
       </div>
     </div>
   )