diff --git a/package-lock.json b/package-lock.json index 2f12f67a0..a3d351ebc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@xlabs/portal-bridge-ui", - "version": "0.1.86", + "version": "0.1.87", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@xlabs/portal-bridge-ui", - "version": "0.1.86", + "version": "0.1.87", "hasInstallScript": true, "dependencies": { "@certusone/wormhole-sdk": "^0.10.4", diff --git a/package.json b/package.json index bc68a215d..ce47191c1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@xlabs/portal-bridge-ui", - "version": "0.1.86", + "version": "0.1.87", "private": true, "dependencies": { "@certusone/wormhole-sdk": "^0.10.4", diff --git a/public/cosmos/index.css b/public/cosmos/index.css index 020febd2f..6323de42f 100644 --- a/public/cosmos/index.css +++ b/public/cosmos/index.css @@ -278,7 +278,7 @@ body { } .makeStyles-newTag-17 { - left: 142px; + left: -10px; color: #E2E1FF; bottom: 24px; position: relative; @@ -289,11 +289,20 @@ body { background-color: #3B3785; } +@media (max-width:1279.95px) { + .wormholescan-link { + margin-top: 8px; + margin-left: 0px; + } +} + @media (max-width:1279.95px) { .wormholescan-banner { height: auto; padding: 8px; flex-direction: column; + padding-top: 16px; + padding-bottom: 16px; } .wormholescan-banner p { margin: 0px; diff --git a/public/cosmos/index.html b/public/cosmos/index.html index f2c3fcd0c..d36844666 100644 --- a/public/cosmos/index.html +++ b/public/cosmos/index.html @@ -60,12 +60,6 @@
-
- NEW -
- - Wormholescan - Token Bridge @@ -81,9 +75,12 @@ FAQ - - Wormhole + + Wormholescan +
+ NEW +
diff --git a/public/sui/index.css b/public/sui/index.css index 020febd2f..6323de42f 100644 --- a/public/sui/index.css +++ b/public/sui/index.css @@ -278,7 +278,7 @@ body { } .makeStyles-newTag-17 { - left: 142px; + left: -10px; color: #E2E1FF; bottom: 24px; position: relative; @@ -289,11 +289,20 @@ body { background-color: #3B3785; } +@media (max-width:1279.95px) { + .wormholescan-link { + margin-top: 8px; + margin-left: 0px; + } +} + @media (max-width:1279.95px) { .wormholescan-banner { height: auto; padding: 8px; flex-direction: column; + padding-top: 16px; + padding-bottom: 16px; } .wormholescan-banner p { margin: 0px; diff --git a/public/sui/index.html b/public/sui/index.html index 9b3c638a3..a80ca73ff 100644 --- a/public/sui/index.html +++ b/public/sui/index.html @@ -60,12 +60,6 @@
-
- NEW -
- - Wormholescan - Token Bridge @@ -81,9 +75,12 @@ FAQ - - Wormhole + + Wormholescan +
+ NEW +
diff --git a/public/usdc-bridge/index.css b/public/usdc-bridge/index.css index a5e34a5be..e8f2e580c 100644 --- a/public/usdc-bridge/index.css +++ b/public/usdc-bridge/index.css @@ -278,7 +278,7 @@ body { } .makeStyles-newTag-17 { - left: 142px; + left: -10px; color: #E2E1FF; bottom: 24px; position: relative; @@ -384,11 +384,20 @@ body { pointer-events: none; } +@media (max-width:1279.95px) { + .wormholescan-link { + margin-top: 8px; + margin-left: 0px; + } +} + @media (max-width:1279.95px) { .wormholescan-banner { height: auto; padding: 8px; flex-direction: column; + padding-top: 16px; + padding-bottom: 16px; } .wormholescan-banner p { margin: 0px; diff --git a/public/usdc-bridge/index.html b/public/usdc-bridge/index.html index b0d3bc9e0..6c77832c8 100644 --- a/public/usdc-bridge/index.html +++ b/public/usdc-bridge/index.html @@ -51,12 +51,6 @@
-
- NEW -
- - Wormholescan - Token Bridge @@ -72,9 +66,12 @@ FAQ - - Wormhole + + Wormholescan +
+ NEW +
diff --git a/src/App.tsx b/src/App.tsx index c2b28714b..ac629b2f4 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -179,7 +179,7 @@ const useStyles = makeStyles((theme) => ({ }, newTag: { position: "relative", - left: "142px", + left: "-10px", bottom: "24px", backgroundColor: "#3B3785", color: "#E2E1FF", @@ -222,17 +222,6 @@ function App() {
- - - - Wormholescan - - FAQ - - Wormhole - + + + Wormholescan + + +
diff --git a/src/components/NewsBar/Bar.tsx b/src/components/NewsBar/Bar.tsx index 1db5d4c4d..41c91ef47 100644 --- a/src/components/NewsBar/Bar.tsx +++ b/src/components/NewsBar/Bar.tsx @@ -12,6 +12,8 @@ const useStyles = makeStyles>((theme) => ({ height: "auto", flexDirection: "column", padding: theme.spacing(1), + paddingTop: theme.spacing(2), + paddingBottom: theme.spacing(2), }, textAlign: "center", fontWeight: 500, diff --git a/src/components/NewsBar/NewsBarButton.tsx b/src/components/NewsBar/NewsBarButton.tsx index 4f53faaab..6e418a711 100644 --- a/src/components/NewsBar/NewsBarButton.tsx +++ b/src/components/NewsBar/NewsBarButton.tsx @@ -3,24 +3,30 @@ import type { Theme } from "@material-ui/core/styles"; import Link from "@material-ui/core/Link"; import makeStyles from "@material-ui/core/styles/makeStyles"; -const useStyles = makeStyles>(() => ({ - bannerLink: { - display: "inline-flex", - alignItems: "center", - borderRadius: 20, - padding: "6px 12px", - backgroundColor: "white", - color: ({ button }) => button.background, - marginLeft: "8px", - fontSize: "12px", - letterSpacing: "0.08em", - fontWeight: 600, - minHeight: "32px", - minWidth: "fit-content", - fontFamily: "Poppins", - wordWrap: "break-word", - }, -})); +const useStyles = makeStyles>( + (theme: Theme) => ({ + bannerLink: { + [theme.breakpoints.down("md")]: { + marginLeft: "0px", + marginTop: theme.spacing(1), + }, + display: "inline-flex", + alignItems: "center", + borderRadius: 20, + padding: "6px 12px", + backgroundColor: "white", + color: ({ button }) => button.background, + marginLeft: "8px", + fontSize: "12px", + letterSpacing: "0.08em", + fontWeight: 600, + minHeight: "32px", + minWidth: "fit-content", + fontFamily: "Poppins", + wordWrap: "break-word", + }, + }) +); export default function NewsBarButton({ button }: Pick) { const classes = useStyles({ button });