Banner updates (#1248)

apps/connect/public/data/banners.json

@@ -1,9 +1,9 @@
 [
   {
     "id": "string",
-    "background": "linear-gradient(90deg, rgba(6,132,249,1) 30%, rgba(0,64,124,1) 71%, rgba(8,8,44,1) 100%)",
+    "background": "linear-gradient(90deg, rgba(8,8,44,0) 0%, rgba(0,64,124,0.9948573179271709) 20%, rgba(6,132,249,1) 50%, rgba(0,64,124,1) 80%, rgba(8,8,44,1) 100%)",
     "content": {
-      "text": "Claim Your Rewards! The W staking rewards are now available for claiming."
+      "text": "Claim your rewards! W staking rewards can now be claimed."
     },
     "button": {
       "href": "https://w.wormhole.com/",
@@ -15,7 +15,7 @@
   },
   {
     "id": "string1",
-    "background": "linear-gradient(90deg, rgba(6,132,249,1) 30%, rgba(0,64,124,1) 71%, rgba(8,8,44,1) 100%)",
+    "background": "linear-gradient(90deg, rgba(8,8,44,0) 0%, rgba(0,64,124,0.9948573179271709) 20%, rgba(6,132,249,1) 50%, rgba(0,64,124,1) 80%, rgba(8,8,44,1) 100%)",
     "content": {
       "text": "Get Ready for the Next Phase of W Staking. Stay tuned for updates on the start of the next staking period."
     },

apps/connect/src/components/atoms/Bar.tsx

@@ -14,7 +14,7 @@ const Container = styled("div")<BarProps>(
     alignItems: "center",
     justifyContent: "center",
     width: "100%",
-    height: "56px",
+    height: 40,
     [theme.breakpoints.down("md")]: {
       height: "auto",
       flexDirection: "column",

apps/connect/src/components/atoms/NewsBarButton.tsx

@@ -19,7 +19,7 @@ const Link = styled(MuiLink)<{ backgroundColor: string }>(
     fontSize: FONT_SIZE.XS,
     letterSpacing: "0.08em",
     fontWeight: 600,
-    minHeight: "32px",
+    minHeight: 28,
     minWidth: "fit-content",
     fontFamily: "Poppins",
     wordWrap: "break-word",