chore(git): merge pull request #212 from 186-header-design into staging

Reviewed-on: #212
Reviewed-by: eugene <eugene@nostrdev.com>

src/App.scss

@@ -100,10 +100,10 @@ li {
   // - first-child Header height, default body padding, and center content border (10px) and padding (10px)
   // - others We don't include border and padding and scroll to the top of the image
   &:first-child {
-    scroll-margin-top: $header-height + $body-vertical-padding + 20px;
+    scroll-margin-top: $body-vertical-padding + 20px;
   }
   &:not(:first-child) {
-    scroll-margin-top: $header-height + $body-vertical-padding;
+    scroll-margin-top: $body-vertical-padding;
   }
 }
 
@@ -148,7 +148,7 @@ li {
   justify-content: start;
   align-items: start;
 
-  scroll-margin-top: $header-height + $body-vertical-padding;
+  scroll-margin-top: $body-vertical-padding;
 }
 
 [data-dev='true'] {

src/components/AppBar/AppBar.tsx

@@ -36,6 +36,9 @@ import styles from './style.module.scss'
 import { setUserRobotImage } from '../../store/userRobotImage/action'
 import { Container } from '../Container'
 import { ButtonIcon } from '../ButtonIcon'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faClose } from '@fortawesome/free-solid-svg-icons'
+import useMediaQuery from '@mui/material/useMediaQuery'
 
 const metadataController = MetadataController.getInstance()
 
@@ -118,125 +121,150 @@ export const AppBar = () => {
   }
   const isAuthenticated = authState?.loggedIn === true
 
+  const matches = useMediaQuery('(max-width:767px)')
+  const [isBannerVisible, setIsBannerVisible] = useState(true)
+  const handleBannerHide = () => {
+    setIsBannerVisible(false)
+  }
+
   return (
-    <AppBarMui
+    <>
-      position="fixed"
+      {isAuthenticated && isBannerVisible && (
-      className={styles.AppBar}
+        <div className={styles.banner}>
-      sx={{
+          <Container>
-        boxShadow: 'none'
+            <div className={styles.bannerInner}>
-      }}
+              SIGit is currently Alpha software (available for internal
-    >
+              testing), use at your own risk!
-      <Container>
-        <Toolbar className={styles.toolbar} disableGutters={true}>
-          <Box className={styles.logoWrapper}>
-            <img src="/logo.svg" alt="Logo" onClick={() => navigate('/')} />
-          </Box>
-
-          <Box className={styles.rightSideBox}>
-            {!isAuthenticated && (
               <Button
-                startIcon={<ButtonIcon />}
+                aria-label={`close banner`}
-                onClick={() => {
+                variant="text"
-                  navigate(appPublicRoutes.nostr)
+                onClick={handleBannerHide}
-                }}
-                variant="contained"
               >
-                LOGIN
+                <FontAwesomeIcon icon={faClose} />
               </Button>
-            )}
+            </div>
+          </Container>
+        </div>
+      )}
+      <AppBarMui
+        position={matches ? 'sticky' : 'static'}
+        className={styles.AppBar}
+        sx={{
+          boxShadow: 'none'
+        }}
+      >
+        <Container>
+          <Toolbar className={styles.toolbar} disableGutters={true}>
+            <Box className={styles.logoWrapper}>
+              <img src="/logo.svg" alt="Logo" onClick={() => navigate('/')} />
+            </Box>
 
-            {isAuthenticated && (
+            <Box className={styles.rightSideBox}>
-              <>
+              {!isAuthenticated && (
-                <Username
+                <Button
-                  username={username}
+                  startIcon={<ButtonIcon />}
-                  avatarContent={userAvatar}
+                  onClick={() => {
-                  handleClick={handleOpenUserMenu}
+                    navigate(appPublicRoutes.nostr)
-                />
-                <Menu
-                  id="menu-appbar"
-                  anchorEl={anchorElUser}
-                  anchorOrigin={{
-                    vertical: 'bottom',
-                    horizontal: 'center'
                   }}
-                  keepMounted
+                  variant="contained"
-                  transformOrigin={{
-                    vertical: 'top',
-                    horizontal: 'center'
-                  }}
-                  open={!!anchorElUser}
-                  onClose={handleCloseUserMenu}
                 >
-                  <MenuItem
+                  LOGIN
-                    sx={{
+                </Button>
-                      justifyContent: 'center',
+              )}
-                      display: { md: 'none' },
-                      fontWeight: 500,
-                      fontSize: '14px',
-                      color: 'var(--text-color)'
-                    }}
-                  >
-                    <Typography variant="h6">{username}</Typography>
-                  </MenuItem>
-                  <MenuItem
-                    onClick={handleProfile}
-                    sx={{
-                      justifyContent: 'center'
-                    }}
-                  >
-                    Profile
-                  </MenuItem>
-                  <MenuItem
-                    onClick={() => {
-                      setAnchorElUser(null)
 
-                      navigate(appPrivateRoutes.settings)
+              {isAuthenticated && (
+                <>
+                  <Username
+                    username={username}
+                    avatarContent={userAvatar}
+                    handleClick={handleOpenUserMenu}
+                  />
+                  <Menu
+                    id="menu-appbar"
+                    anchorEl={anchorElUser}
+                    anchorOrigin={{
+                      vertical: 'bottom',
+                      horizontal: 'center'
                     }}
-                    sx={{
+                    keepMounted
-                      justifyContent: 'center'
+                    transformOrigin={{
+                      vertical: 'top',
+                      horizontal: 'center'
                     }}
-                  >
+                    open={!!anchorElUser}
-                    Settings
+                    onClose={handleCloseUserMenu}
-                  </MenuItem>
-                  <MenuItem
-                    onClick={() => {
-                      setAnchorElUser(null)
-
-                      navigate(appPublicRoutes.verify)
-                    }}
-                    sx={{
-                      justifyContent: 'center'
-                    }}
-                  >
-                    Verify
-                  </MenuItem>
-                  <Link
-                    to={appPublicRoutes.source}
-                    target="_blank"
-                    style={{ color: 'inherit', textDecoration: 'inherit' }}
                   >
                     <MenuItem
+                      sx={{
+                        justifyContent: 'center',
+                        display: { md: 'none' },
+                        fontWeight: 500,
+                        fontSize: '14px',
+                        color: 'var(--text-color)'
+                      }}
+                    >
+                      <Typography variant="h6">{username}</Typography>
+                    </MenuItem>
+                    <MenuItem
+                      onClick={handleProfile}
                       sx={{
                         justifyContent: 'center'
                       }}
                     >
-                      Source
+                      Profile
                     </MenuItem>
-                  </Link>
+                    <MenuItem
-                  <MenuItem
+                      onClick={() => {
-                    onClick={handleLogout}
+                        setAnchorElUser(null)
-                    sx={{
+
-                      justifyContent: 'center'
+                        navigate(appPrivateRoutes.settings)
-                    }}
+                      }}
-                  >
+                      sx={{
-                    Logout
+                        justifyContent: 'center'
-                  </MenuItem>
+                      }}
-                </Menu>
+                    >
-              </>
+                      Settings
-            )}
+                    </MenuItem>
-          </Box>
+                    <MenuItem
-        </Toolbar>
+                      onClick={() => {
-      </Container>
+                        setAnchorElUser(null)
-    </AppBarMui>
+
+                        navigate(appPublicRoutes.verify)
+                      }}
+                      sx={{
+                        justifyContent: 'center'
+                      }}
+                    >
+                      Verify
+                    </MenuItem>
+                    <Link
+                      to={appPublicRoutes.source}
+                      target="_blank"
+                      style={{ color: 'inherit', textDecoration: 'inherit' }}
+                    >
+                      <MenuItem
+                        sx={{
+                          justifyContent: 'center'
+                        }}
+                      >
+                        Source
+                      </MenuItem>
+                    </Link>
+                    <MenuItem
+                      onClick={handleLogout}
+                      sx={{
+                        justifyContent: 'center'
+                      }}
+                    >
+                      Logout
+                    </MenuItem>
+                  </Menu>
+                </>
+              )}
+            </Box>
+          </Toolbar>
+        </Container>
+      </AppBarMui>
+    </>
   )
 }

src/components/AppBar/style.module.scss

@@ -34,3 +34,36 @@
     justify-content: flex-end;
   }
 }
+
+.banner {
+  color: #ffffff;
+  background-color: $primary-main;
+}
+
+.bannerInner {
+  display: flex;
+  gap: 10px;
+  padding-block: 10px;
+  z-index: 1;
+
+  width: 100%;
+
+  justify-content: space-between;
+  flex-direction: row;
+
+  button {
+    min-width: 44px;
+    color: inherit;
+  }
+
+  &:hover,
+  &.active,
+  &:focus-within {
+    background: $primary-main;
+    color: inherit;
+
+    button {
+      color: inherit;
+    }
+  }
+}

src/components/PDFView/PdfPageItem.tsx

@@ -33,7 +33,8 @@ const PdfPageItem = ({
   useEffect(() => {
     if (selectedMark !== null && !!markRefs.current[selectedMark.id]) {
       markRefs.current[selectedMark.id]?.scrollIntoView({
-        behavior: 'smooth'
+        behavior: 'smooth',
+        block: 'center'
       })
     }
   }, [selectedMark])

src/layouts/StickySideColumns.module.scss

@@ -42,15 +42,22 @@
 .sides {
   @media only screen and (min-width: 768px) {
     position: sticky;
-    top: $header-height + $body-vertical-padding;
+    top: $body-vertical-padding;
   }
   > :first-child {
+    // We want to keep header on smaller devices at all times
     max-height: calc(
       100dvh - $header-height - $body-vertical-padding * 2 - $tabs-height
     );
+
+    @media only screen and (min-width: 768px) {
+      max-height: calc(100dvh - $body-vertical-padding * 2);
+    }
   }
 }
 
+// Adjust the content scroll on smaller screens
+// Make sure only the inner tab is scrolling
 .scrollAdjust {
   @media only screen and (max-width: 767px) {
     max-height: calc(

src/layouts/style.module.scss

@@ -3,5 +3,5 @@
 
 .main {
   flex-grow: 1;
-  padding: $header-height + $body-vertical-padding 0 $body-vertical-padding 0;
+  padding: $body-vertical-padding 0 $body-vertical-padding 0;
 }

src/pages/settings/relays/index.tsx

@@ -233,6 +233,7 @@ export const RelaysPage = () => {
           ))}
         </Box>
       )}
+      <Footer />
     </Container>
   )
 }
@@ -428,7 +429,6 @@ const RelayItem = ({
           )}
         </List>
       </Box>
-      <Footer />
     </>
   )
 }