diff --git a/src/App.scss b/src/App.scss index c4fa323..29e7e8f 100644 --- a/src/App.scss +++ b/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'] { diff --git a/src/components/AppBar/AppBar.tsx b/src/components/AppBar/AppBar.tsx index aaabbd3..4176a42 100644 --- a/src/components/AppBar/AppBar.tsx +++ b/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 ( - - - - - Logo navigate('/')} /> - - - - {!isAuthenticated && ( + <> + {isAuthenticated && isBannerVisible && ( +
+ +
+ SIGit is currently Alpha software (available for internal + testing), use at your own risk! - )} +
+
+
+ )} + + + + + Logo navigate('/')} /> + - {isAuthenticated && ( - <> - - + {!isAuthenticated && ( + + )} - navigate(appPrivateRoutes.settings) + {isAuthenticated && ( + <> + + - Settings - - { - setAnchorElUser(null) - - navigate(appPublicRoutes.verify) - }} - sx={{ - justifyContent: 'center' - }} - > - Verify - - + {username} + + - Source + Profile - - - Logout - - - - )} - - - - + { + setAnchorElUser(null) + + navigate(appPrivateRoutes.settings) + }} + sx={{ + justifyContent: 'center' + }} + > + Settings + + { + setAnchorElUser(null) + + navigate(appPublicRoutes.verify) + }} + sx={{ + justifyContent: 'center' + }} + > + Verify + + + + Source + + + + Logout + + + + )} +
+
+
+
+ ) } diff --git a/src/components/AppBar/style.module.scss b/src/components/AppBar/style.module.scss index 6b15c93..07cfe31 100644 --- a/src/components/AppBar/style.module.scss +++ b/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; + } + } +} diff --git a/src/components/PDFView/PdfPageItem.tsx b/src/components/PDFView/PdfPageItem.tsx index bbf6e4e..5d4be7d 100644 --- a/src/components/PDFView/PdfPageItem.tsx +++ b/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]) diff --git a/src/layouts/StickySideColumns.module.scss b/src/layouts/StickySideColumns.module.scss index a116720..5b6d890 100644 --- a/src/layouts/StickySideColumns.module.scss +++ b/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( diff --git a/src/layouts/style.module.scss b/src/layouts/style.module.scss index 6c8aa59..1ad8647 100644 --- a/src/layouts/style.module.scss +++ b/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; } diff --git a/src/pages/settings/relays/index.tsx b/src/pages/settings/relays/index.tsx index 4ed5d62..a1f5223 100644 --- a/src/pages/settings/relays/index.tsx +++ b/src/pages/settings/relays/index.tsx @@ -233,6 +233,7 @@ export const RelaysPage = () => { ))} )} +