filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-11-22 21:45:56 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat(Auth&&Onboarding): adjust mobile paddings

Browse Source
This commit is contained in:
Aminejv 2021-12-13 18:21:43 +01:00
parent 94d2a8696c
commit db00e04839
6 changed files with 35 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
components/core/Auth/components/AuthWrapper.js
View File

@ -22,11 +22,23 @@ const backgroundUrl = AUTH_BACKGROUNDS[backgroundIdx];
const STYLES_AUTH_FOOTER = (theme) => css`
${Styles.HORIZONTAL_CONTAINER_CENTERED};
position: fixed;
justify-content: flex-end;
bottom: 0;
left: 0;
width: 100%;
padding: 2px 24px;
background-color: ${theme.semantic.bgWhite};
& > * + * {
margin-left: 24px;
}
@media (max-width: ${theme.sizes.mobile}px) {
padding: 2px 16px;
justify-content: center;
& > * + * {
margin-left: 16px;
}
}
@supports ((-webkit-backdrop-filter: blur(75px)) or (backdrop-filter: blur(75px))) {
-webkit-backdrop-filter: blur(75px);
@ -64,14 +76,14 @@ export default function AuthWrapper({ children, isMobile, ...props }) {
<div style={{ backgroundImage: `url(${backgroundUrl})`, minHeight: height }} {...props}>
{children}
<footer css={STYLES_AUTH_FOOTER}>
<System.H6 style={{ marginLeft: "auto" }} as="a" href="/terms">
<System.H6 as="a" href="/terms">
Terms of service
</System.H6>
<System.H6 style={{ marginLeft: 24 }} as="a" href="/guidelines">
<System.H6 as="a" href="/guidelines">
Community guidelines
</System.H6>
{/** TODO(Amine): change discord link */}
<System.H6 style={{ marginLeft: 24 }} as="a" href="/">
<System.H6 as="a" href="/">
Join Discord
</System.H6>
</footer>

5
components/core/Auth/components/SignUpPopover.js
View File

@ -12,16 +12,15 @@ const STYLES_POPOVER = (theme) => css`
min-height: 544px;
width: 95vw;
border-radius: 20px;
padding: 36px 32px 36px 32px;
padding: 36px 32px;
@media (max-width: ${theme.sizes.mobile}px) {
flex-grow: 1;
margin-bottom: auto;
max-width: 100%;
width: 100%;
}
background-color: white;
@supports ((-webkit-backdrop-filter: blur(75px)) or (backdrop-filter: blur(75px))) {
background: radial-gradient(
80.79% 80.79% at 50% 50%,

4
components/system/components/fragments/Jumper.js
View File

@ -11,7 +11,7 @@ import {
AnimatePresence as FramerAnimatePresence,
motion,
} from "framer-motion";
import { useEscapeKey } from "~/common/hooks";
import { useEscapeKey, useLockScroll } from "~/common/hooks";
import { Show } from "~/components/utility/Show";
import ObjectBoxPreview from "~/components/core/ObjectBoxPreview";
@ -69,6 +69,8 @@ function AnimatePresence({ children, ...props }) {
function Root({ children, onClose, withDismissButton = true, ...props }) {
useEscapeKey(onClose);
useLockScroll();
return (
<ModalPortal>
<div>

3
components/system/components/fragments/MobileJumper.js
View File

@ -8,6 +8,7 @@ import { css } from "@emotion/react";
import { FullHeightLayout } from "~/components/system/components/FullHeightLayout";
import { motion, AnimatePresence as FramerAnimatePresence } from "framer-motion";
import { ModalPortal } from "~/components/core/ModalPortal";
import { useLockScroll } from "~/common/hooks";
/* -------------------------------------------------------------------------------------------------
* AnimatePresence
@ -42,6 +43,8 @@ const JumperContext = React.createContext({});
const useJumperContext = () => React.useContext(JumperContext);
function Root({ children, onClose, withDismissButton = true, ...props }) {
useLockScroll();
return (
<ModalPortal>
<FullHeightLayout

7
scenes/SceneAuth/index.js
View File

@ -35,7 +35,7 @@ const STYLES_ROOT = css`
background-size: cover;
`;
const STYLES_MIDDLE = css`
const STYLES_MIDDLE = (theme) => css`
position: relative;
min-height: 10%;
flex-grow: 1;
@ -45,6 +45,11 @@ const STYLES_MIDDLE = css`
flex-direction: column;
text-align: left;
padding: 24px;
@media (max-width: ${theme.sizes.mobile}px) {
padding: 24px 16px;
//NOTE(amine): additional scroll space for mobile
padding-bottom: 64px;
}
`;
const AuthScene = ({ onAuthenticate, onTwitterAuthenticate, page, onAction, ...props }) => {

7
scenes/SceneSurvey.js
View File

@ -375,7 +375,7 @@ const STYLES_ROOT = css`
background-size: cover;
`;
const STYLES_MIDDLE = css`
const STYLES_MIDDLE = (theme) => css`
position: relative;
min-height: 10%;
flex-grow: 1;
@ -385,6 +385,11 @@ const STYLES_MIDDLE = css`
flex-direction: column;
text-align: left;
padding: 24px;
@media (max-width: ${theme.sizes.mobile}px) {
padding: 24px 16px;
//NOTE(amine): additional scroll space for mobile
padding-bottom: 64px;
}
`;
const WithCustomWrapper = (Component) => (props) => {