replace wormhole link with wormholescan link (#475)

* replace wormhole link with wormholescan link * add padding to the bottom on mobile view * bump version * run prettier * setup padding to 16px for the banner
XLabs · Oct 25, 2023 · cb1d7cd · cb1d7cd
1 parent 89bd6da
commit cb1d7cd
Show file tree

Hide file tree

Showing 11 changed files with 86 additions and 69 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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
@@ -60,12 +60,6 @@
           <div class="spacer"></div>
           <div class="links-list">
             <div class="links-list-inner">
-              <div class="MuiChip-root makeStyles-newTag-17 MuiChip-sizeSmall">
-                <span class="MuiChip-label MuiChip-labelSmall">NEW</span>
-              </div>
-              <a class="link" href="https://wormholescan.io" target="_blank" aria-current="page">
-                Wormholescan
-              </a>
               <a class="link" href="/" target="_blank" aria-current="page">
                 Token Bridge
               </a>
@@ -81,9 +75,12 @@
               <a class="link" href="https://portalbridge.com/docs" target="_blank" rel="noopener noreferrer">
                 FAQ
               </a>
-              <a class="link" href="https://wormhole.com/" target="_blank" rel="noopener noreferrer">
-                Wormhole
+              <a class="link" href="https://wormholescan.io" target="_blank" aria-current="page">
+                Wormholescan
               </a>
+              <div class="MuiChip-root makeStyles-newTag-17 MuiChip-sizeSmall">
+                <span class="MuiChip-label MuiChip-labelSmall">NEW</span>
+              </div>
             </div>
           </div>
           <div class="help-container">

diff --git 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
@@ -60,12 +60,6 @@
           <div class="spacer"></div>
           <div class="links-list">
             <div class="links-list-inner">
-              <div class="MuiChip-root makeStyles-newTag-17 MuiChip-sizeSmall">
-                <span class="MuiChip-label MuiChip-labelSmall">NEW</span>
-              </div>
-              <a class="link" href="https://wormholescan.io" target="_blank" aria-current="page">
-                Wormholescan
-              </a>
               <a class="link" href="/" target="_blank" aria-current="page">
                 Token Bridge
               </a>
@@ -81,9 +75,12 @@
               <a class="link" href="https://portalbridge.com/docs" target="_blank" rel="noopener noreferrer">
                 FAQ
               </a>
-              <a class="link" href="https://wormhole.com/" target="_blank" rel="noopener noreferrer">
-                Wormhole
+              <a class="link" href="https://wormholescan.io" target="_blank" aria-current="page">
+                Wormholescan
               </a>
+              <div class="MuiChip-root makeStyles-newTag-17 MuiChip-sizeSmall">
+                <span class="MuiChip-label MuiChip-labelSmall">NEW</span>
+              </div>
             </div>
           </div>
           <div class="help-container">

diff --git 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
@@ -51,12 +51,6 @@
           <div class="spacer"></div>
           <div class="links-list">
             <div class="links-list-inner">
-              <div class="MuiChip-root makeStyles-newTag-17 MuiChip-sizeSmall">
-                <span class="MuiChip-label MuiChip-labelSmall">NEW</span>
-              </div>
-              <a class="link" href="https://wormholescan.io" target="_blank" aria-current="page">
-                Wormholescan
-              </a>
               <a class="link" href="/" target="_blank" aria-current="page">
                 Token Bridge
               </a>
@@ -72,9 +66,12 @@
               <a class="link" href="https://portalbridge.com/docs" target="_blank" rel="noopener noreferrer">
                 FAQ
               </a>
-              <a class="link" href="https://wormhole.com/" target="_blank" rel="noopener noreferrer">
-                Wormhole
+              <a class="link" href="https://wormholescan.io" target="_blank" aria-current="page">
+                Wormholescan
               </a>
+              <div class="MuiChip-root makeStyles-newTag-17 MuiChip-sizeSmall">
+                <span class="MuiChip-label MuiChip-labelSmall">NEW</span>
+              </div>
             </div>
           </div>
           <div class="help-container">

diff --git 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() {
           <div className={classes.spacer} />
           <Hidden implementation="css" xsDown>
             <div style={{ display: "flex", alignItems: "center" }}>
-              <Box>
-                <Chip className={classes.newTag} label="NEW" size="small" />
-                <Link
-                  href="https://wormholescan.io"
-                  target="_blank"
-                  color="inherit"
-                  className={classes.link}
-                >
-                  Wormholescan
-                </Link>
-              </Box>
               <Link
                 component={NavLink}
                 to="/transfer"
@@ -277,15 +266,17 @@ function App() {
               >
                 FAQ
               </Link>
-              <Link
-                href="https://wormhole.com/"
-                target="_blank"
-                rel="noopener noreferrer"
-                color="inherit"
-                className={classes.link}
-              >
-                Wormhole
-              </Link>
+              <Box>
+                <Link
+                  href="https://wormholescan.io"
+                  target="_blank"
+                  color="inherit"
+                  className={classes.link}
+                >
+                  Wormholescan
+                </Link>
+                <Chip className={classes.newTag} label="NEW" size="small" />
+              </Box>
             </div>
           </Hidden>
           <Hidden implementation="css" smUp>

diff --git a/src/components/NewsBar/Bar.tsx b/src/components/NewsBar/Bar.tsx
@@ -12,6 +12,8 @@ const useStyles = makeStyles<Theme, Pick<Message, "background">>((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
@@ -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<Theme, Pick<Message, "button">>(() => ({
-  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, Pick<Message, "button">>(
+  (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<Message, "button">) {
   const classes = useStyles({ button });