From 1a670bf440f080aa21caaad98d23d54d17adbd0e Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Wed, 22 Mar 2023 11:44:10 -0300 Subject: [PATCH 01/20] hero section light mode tweaks --- docs/src/components/landing/DemoVideo.js | 41 +++++++++++++++--------- docs/src/components/landing/Hero.js | 11 ++++--- docs/src/components/landing/SignUp.js | 12 +++---- 3 files changed, 38 insertions(+), 26 deletions(-) diff --git a/docs/src/components/landing/DemoVideo.js b/docs/src/components/landing/DemoVideo.js index cef33b8a03d..6959195a58e 100644 --- a/docs/src/components/landing/DemoVideo.js +++ b/docs/src/components/landing/DemoVideo.js @@ -1,35 +1,51 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import Container from '@mui/material/Container'; -import { styled } from '@mui/material/styles'; +import { styled, alpha } from '@mui/material/styles'; const Video = styled('video')(({ theme }) => ({ - borderStyle: 'solid', - borderColor: - theme.palette.mode === 'dark' ? theme.palette.primaryDark[900] : theme.palette.grey[100], - borderRadius: theme.shape.borderRadius, overflow: 'hidden', objectFit: 'cover', width: '100%', height: '100%', + borderRadius: '5px', + border: '1px solid', + borderColor: + theme.palette.mode === 'dark' + ? 'linear-gradient(90deg, #202020 0%, #FFFFFF 100%)' + : `${theme.palette.primary[100]}`, })); const VIDEO_BREAKPOINT_GAP = 100; const VideoContainer = styled(Box)(({ theme }) => ({ - borderStyle: 'solid', maxWidth: 1100, height: { xs: 200, sm: 390, md: 445, lg: 615 }, + height: '100%', width: { xs: 360, sm: theme.breakpoints.values.sm - VIDEO_BREAKPOINT_GAP, md: theme.breakpoints.values.md + VIDEO_BREAKPOINT_GAP, lg: theme.breakpoints.values.lg + VIDEO_BREAKPOINT_GAP, }, - borderColor: - theme.palette.mode === 'dark' ? theme.palette.primaryDark[400] : theme.palette.grey[300], borderRadius: theme.shape.borderRadius, - borderWidth: '1px', + padding: 16, + background: + theme.palette.mode === 'dark' + ? 'linear-gradient(90deg, #202020 0%, #FFFFFF 100%)' + : `linear-gradient(230deg, ${theme.palette.primary[50]} 0%, ${alpha( + theme.palette.primary[100], + 0.4, + )} 150%)`, + border: '1px solid', + borderColor: + theme.palette.mode === 'dark' + ? 'linear-gradient(90deg, #202020 0%, #FFFFFF 100%)' + : `${alpha(theme.palette.primary[200], 0.5)}`, + boxShadow: + theme.palette.mode === 'dark' + ? 'linear-gradient(90deg, #202020 0%, #FFFFFF 100%)' + : `4px 0 60px ${alpha(theme.palette.primary[100], 0.8)}`, })); export default function DemoVideo() { @@ -39,17 +55,12 @@ export default function DemoVideo() { display: 'flex', flexDirection: 'row', justifyContent: 'center', - mt: { xs: theme.spacing(2.5), sm: theme.spacing(7.5) }, - py: { xs: 4, sm: 6 }, - bgcolor: theme.palette.mode === 'dark' ? 'primaryDark.900' : 'grey.50', + py: { xs: 4, sm: 8 }, })} >