From 2e410e2c92c721cd15f6a1857531bd98ddd22996 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Mon, 9 Aug 2021 16:43:53 +0700 Subject: [PATCH 001/101] fix relative imports --- docs/src/components/home/CoreShowcase.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/docs/src/components/home/CoreShowcase.tsx b/docs/src/components/home/CoreShowcase.tsx index 6e35fa791859de..734c829ad5c8dc 100644 --- a/docs/src/components/home/CoreShowcase.tsx +++ b/docs/src/components/home/CoreShowcase.tsx @@ -8,9 +8,14 @@ import ReplayRounded from '@material-ui/icons/ReplayRounded'; import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; import { getDesignTokens, getThemedComponents } from 'docs/src/modules/brandingTheme'; import MarkdownElement from 'docs/src/components/markdown/MarkdownElement'; -import MaterialDesignDemo, { demoCode as materialDemoCode } from './MaterialDesignDemo'; -import ShowcaseContainer from './ShowcaseContainer'; -import { getMaterialThemeFrames, produceThemeOptions } from './showcaseUtils'; +import MaterialDesignDemo, { + demoCode as materialDemoCode, +} from 'docs/src/components/home/MaterialDesignDemo'; +import ShowcaseContainer from 'docs/src/components/home/ShowcaseContainer'; +import { + getMaterialThemeFrames, + produceThemeOptions, +} from 'docs/src/components/home/showcaseUtils'; const defaultTheme = createTheme(); const darkDesignTokens = getDesignTokens('dark'); From 1c9e1f6e06bc1c312c99d549acd6841bc03cad39 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Mon, 9 Aug 2021 18:03:13 +0700 Subject: [PATCH 002/101] remove scaling --- docs/src/components/home/Hero.tsx | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/docs/src/components/home/Hero.tsx b/docs/src/components/home/Hero.tsx index f2bb3f4fe813a9..da2ae960ad9536 100644 --- a/docs/src/components/home/Hero.tsx +++ b/docs/src/components/home/Hero.tsx @@ -69,11 +69,7 @@ const grid = [ height: 119, }, { - ui: ( - - - - ), + ui: , width: 310, height: 50, }, @@ -171,9 +167,6 @@ export default function Hero() { 'sans-serif', ].join(','), }, - transform: { xs: 'scale(0.9)', xl: 'scale(1)' }, - transformOrigin: 'top left', - transition: 'transform 0.3s', }} > {grid.map((config, index) => ( From 6c1748f16f42d9f4314eeacce6078efe49cc2a37 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Mon, 9 Aug 2021 18:23:02 +0700 Subject: [PATCH 003/101] fix references mobile columns --- docs/src/components/home/CompaniesGrid.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/docs/src/components/home/CompaniesGrid.tsx b/docs/src/components/home/CompaniesGrid.tsx index 138c26cda68d29..7521016f8eeb32 100644 --- a/docs/src/components/home/CompaniesGrid.tsx +++ b/docs/src/components/home/CompaniesGrid.tsx @@ -1,6 +1,12 @@ import * as React from 'react'; +import { styled } from '@material-ui/core/styles'; import Grid from '@material-ui/core/Grid'; +const Img = styled('img')({ + maxWidth: '100%', + height: 'auto', +}); + export const CORE_COMPANIES = [ { src: '/static/branding/companies/coursera.svg', @@ -47,7 +53,8 @@ export default function CompaniesGrid({ data }: { data: Array - {imgProps.alt} + {imgProps.alt} ))} From 431c7e86c4eb614b243d0d0ed452115cf1a8dd75 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Mon, 9 Aug 2021 18:44:11 +0700 Subject: [PATCH 004/101] update ThemeToggle to new design --- .../src/components/header/ThemeModeToggle.tsx | 100 +++--------------- docs/src/layouts/AppHeader.tsx | 4 +- 2 files changed, 17 insertions(+), 87 deletions(-) diff --git a/docs/src/components/header/ThemeModeToggle.tsx b/docs/src/components/header/ThemeModeToggle.tsx index bf7e256f6a9eac..ffe11cbb27b612 100644 --- a/docs/src/components/header/ThemeModeToggle.tsx +++ b/docs/src/components/header/ThemeModeToggle.tsx @@ -1,94 +1,24 @@ import * as React from 'react'; -import { styled, alpha } from '@material-ui/core/styles'; -import SwitchUnstyled, { - switchUnstyledClasses, - SwitchUnstyledProps, -} from '@material-ui/unstyled/SwitchUnstyled'; +import IconButton from '@material-ui/core/IconButton'; import DarkModeOutlined from '@material-ui/icons/DarkModeOutlined'; import LightModeOutlined from '@material-ui/icons/LightModeOutlined'; -const Root = styled('span')(({ theme }) => ({ - fontSize: 0, - color: '#fff', - position: 'relative', - display: 'inline-block', - width: 40, - height: 17, - backgroundColor: theme.palette.grey[100], - borderRadius: 10, - margin: 10, - cursor: 'pointer', - transition: theme.transitions.create('background-color'), - [`& .${switchUnstyledClasses.thumb}`]: { - display: 'inline-flex', - alignItems: 'center', - justifyContent: 'center', - position: 'absolute', - padding: 2, - width: 24, - height: 24, - top: -3, - left: 0, - borderRadius: 24, - backgroundColor: theme.palette.primary.main, - transform: 'rotate(-90deg)', - transition: theme.transitions.create(['transform', 'left']), - '& > svg': { - width: 18, - height: 18, - }, - '&:before': { - content: '""', - display: 'block', - position: 'absolute', - borderRadius: '50%', - zIndex: -1, - top: 0, - left: 0, - right: 0, - bottom: 0, - transform: 'scale(0)', - transition: theme.transitions.create('transform'), - backgroundColor: alpha(theme.palette.primary.main, 0.4), - }, - }, - [`&.${switchUnstyledClasses.checked} .${switchUnstyledClasses.thumb}`]: { - left: 16, - transform: 'rotate(0deg)', - }, - [`&.${switchUnstyledClasses.focusVisible} .${switchUnstyledClasses.thumb}`]: { - '&:before': { - transform: 'scale(1.3)', - }, - }, - [`& .${switchUnstyledClasses.input}`]: { - cursor: 'inherit', - position: 'absolute', - width: '100%', - height: '100%', - top: 0, - left: 0, - opacity: 0, - zIndex: 1, - margin: 0, - }, - [`&.${switchUnstyledClasses.checked}`]: { - background: theme.palette.primary[200], - }, -})); - -const ThemeModeToggle = (props: SwitchUnstyledProps) => { +const ThemeModeToggle = (props: { checked: boolean; onChange: (checked: boolean) => void }) => { return ( - : , - }, - input: { 'aria-label': 'Theme mode toggle' }, + props.onChange(!props.checked)} + sx={{ + color: (theme) => (theme.palette.mode === 'dark' ? '#fff' : 'primary.main'), + borderRadius: 1, + p: 0.5, + border: '1px solid', + bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.700' : 'transparent'), + borderColor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.500' : 'grey.200'), }} - /> + > + {props.checked ? : } + ); }; diff --git a/docs/src/layouts/AppHeader.tsx b/docs/src/layouts/AppHeader.tsx index a1d3c95ce09231..eaa36a26909f4e 100644 --- a/docs/src/layouts/AppHeader.tsx +++ b/docs/src/layouts/AppHeader.tsx @@ -35,9 +35,9 @@ export default function AppHeader() { const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)'); const preferredMode = prefersDarkMode ? 'dark' : 'light'; - const handleChangeThemeMode = (event: React.ChangeEvent) => { + const handleChangeThemeMode = (checked: boolean) => { let paletteMode = 'system'; - paletteMode = event.target.checked ? 'dark' : 'light'; + paletteMode = checked ? 'dark' : 'light'; if (paletteMode === null) { return; } From d7c088d58f1365a62a6cd2afb9b175c54a32c601 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Mon, 9 Aug 2021 18:47:04 +0700 Subject: [PATCH 005/101] fix semantic issue --- docs/src/components/header/HeaderNavDropdown.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/docs/src/components/header/HeaderNavDropdown.tsx b/docs/src/components/header/HeaderNavDropdown.tsx index 303ab5f06604fb..22d6f06a3973ce 100644 --- a/docs/src/components/header/HeaderNavDropdown.tsx +++ b/docs/src/components/header/HeaderNavDropdown.tsx @@ -14,6 +14,9 @@ const Anchor = styled('a')<{ component?: React.ElementType }>(({ theme }) => ({ ...theme.typography.body2, fontWeight: 700, textDecoration: 'none', + border: 'none', + width: '100%', + backgroundColor: 'transparent', color: theme.palette.mode === 'dark' ? '#fff' : theme.palette.text.secondary, cursor: 'pointer', display: 'flex', @@ -119,7 +122,7 @@ export default function HeaderNavDropdown() {
  • setProductsOpen((bool) => !bool)} sx={{ justifyContent: 'space-between' }} > From 906648b513a5b3ce5d305b9826831c2028bd3d38 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Mon, 9 Aug 2021 18:51:51 +0700 Subject: [PATCH 006/101] add meta tag --- docs/pages/branding/home.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/docs/pages/branding/home.tsx b/docs/pages/branding/home.tsx index 5e642b6ba2677e..cae17c7e4c7d2a 100644 --- a/docs/pages/branding/home.tsx +++ b/docs/pages/branding/home.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; +import Head from 'docs/src/modules/components/Head'; import ThemeProvider from 'docs/src/modules/ThemeContext'; import CssBaseline from '@material-ui/core/CssBaseline'; import Divider from '@material-ui/core/Divider'; @@ -17,6 +18,12 @@ export default function Home() { return ( + From 50032cdffbdba5d3b97e26ef98b356a73609d80f Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Mon, 9 Aug 2021 22:35:57 +0700 Subject: [PATCH 007/101] fix heading descending order --- docs/src/components/home/Testimonials.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/components/home/Testimonials.tsx b/docs/src/components/home/Testimonials.tsx index d4fa7287ca37c3..f6e0797c3a6263 100644 --- a/docs/src/components/home/Testimonials.tsx +++ b/docs/src/components/home/Testimonials.tsx @@ -31,7 +31,7 @@ const UserFeedback = ({ }) => { return (
    - + {quote} From 2ed9431a4d68a7efbb62ed5ce7107344259e7fda Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Mon, 9 Aug 2021 22:36:21 +0700 Subject: [PATCH 008/101] wrap code demo with NoSsr to reduce DOM size --- docs/src/components/home/ShowcaseContainer.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/src/components/home/ShowcaseContainer.tsx b/docs/src/components/home/ShowcaseContainer.tsx index ad364c47efe163..6bb6f0900e793a 100644 --- a/docs/src/components/home/ShowcaseContainer.tsx +++ b/docs/src/components/home/ShowcaseContainer.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import Box from '@material-ui/core/Box'; +import NoSsr from '@material-ui/core/NoSsr'; import Paper from '@material-ui/core/Paper'; export default function ShowcaseContainer({ @@ -58,7 +59,7 @@ export default function ShowcaseContainer({ borderBottomRightRadius: 10, }} > - {code} + {code} ); From f3e331d7b028192be0c5ef2acdcaac52044a05d7 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Mon, 9 Aug 2021 22:45:15 +0700 Subject: [PATCH 009/101] fix a11y issues --- docs/src/components/header/ThemeModeToggle.tsx | 1 + docs/src/components/home/MaterialDesignDemo.tsx | 3 ++- docs/src/components/home/Sponsors.tsx | 5 +++-- 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/docs/src/components/header/ThemeModeToggle.tsx b/docs/src/components/header/ThemeModeToggle.tsx index ffe11cbb27b612..dffb666d6c3ec2 100644 --- a/docs/src/components/header/ThemeModeToggle.tsx +++ b/docs/src/components/header/ThemeModeToggle.tsx @@ -7,6 +7,7 @@ const ThemeModeToggle = (props: { checked: boolean; onChange: (checked: boolean) return ( props.onChange(!props.checked)} sx={{ color: (theme) => (theme.palette.mode === 'dark' ? '#fff' : 'primary.main'), diff --git a/docs/src/components/home/MaterialDesignDemo.tsx b/docs/src/components/home/MaterialDesignDemo.tsx index 54613d57544322..7cf2f5fcddc010 100644 --- a/docs/src/components/home/MaterialDesignDemo.tsx +++ b/docs/src/components/home/MaterialDesignDemo.tsx @@ -112,7 +112,7 @@ export default function MaterialDesignDemo() { Michael Scott - + @@ -135,6 +135,7 @@ export default function MaterialDesignDemo() { {active ? 'Active' : 'Inactive'} account setActive(event.target.checked)} sx={{ ml: 'auto' }} diff --git a/docs/src/components/home/Sponsors.tsx b/docs/src/components/home/Sponsors.tsx index 0126ad011ea509..e668079931d16e 100644 --- a/docs/src/components/home/Sponsors.tsx +++ b/docs/src/components/home/Sponsors.tsx @@ -119,7 +119,7 @@ const Sponsors = () => { noLinkStyle href={item.href} target="_blank" - rel="sponsored" + rel="sponsored noopener" variant="outlined" sx={{ height: '100%', display: 'flex', flexDirection: 'column' }} > @@ -157,6 +157,7 @@ const Sponsors = () => { }} > { noLinkStyle href={item.href} target="_blank" - rel="sponsored" + rel="sponsored noopener" variant="outlined" sx={{ height: '100%', display: 'flex', flexDirection: 'column' }} > From 32e1e412be8075760d09c9a051ea0239cb907266 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Tue, 10 Aug 2021 10:22:02 +0700 Subject: [PATCH 010/101] Add more sponsors and adjust img sizes --- .../static/sponsors/elevator-logo-2x.png | Bin 0 -> 746 bytes docs/public/static/sponsors/elevator-logo.png | Bin 0 -> 506 bytes .../public/static/sponsors/hoodie-bees-2x.png | Bin 0 -> 2996 bytes docs/public/static/sponsors/hoodie-bees.png | Bin 0 -> 1661 bytes docs/public/static/sponsors/movavi-2x.png | Bin 0 -> 642 bytes docs/public/static/sponsors/movavi.png | Bin 0 -> 402 bytes .../static/sponsors/spice-factory-2x.png | Bin 0 -> 178 bytes docs/public/static/sponsors/spice-factory.png | Bin 0 -> 183 bytes docs/src/components/home/Sponsors.tsx | 164 +++++++++++------- 9 files changed, 102 insertions(+), 62 deletions(-) create mode 100644 docs/public/static/sponsors/elevator-logo-2x.png create mode 100644 docs/public/static/sponsors/elevator-logo.png create mode 100644 docs/public/static/sponsors/hoodie-bees-2x.png create mode 100644 docs/public/static/sponsors/hoodie-bees.png create mode 100644 docs/public/static/sponsors/movavi-2x.png create mode 100644 docs/public/static/sponsors/movavi.png create mode 100644 docs/public/static/sponsors/spice-factory-2x.png create mode 100644 docs/public/static/sponsors/spice-factory.png diff --git a/docs/public/static/sponsors/elevator-logo-2x.png b/docs/public/static/sponsors/elevator-logo-2x.png new file mode 100644 index 0000000000000000000000000000000000000000..99ce9f0a2424b46a6eb70d62dca6f90ea85a40fa GIT binary patch literal 746 zcmV<%FBHb(9xHTt8e>;M()2O8%95bFRG>;@X_0~hW95cq?N>;M$&02A&P zD(xLG^=EVJ7b);AJnR4z>Hrh!02S*78SDTP>i`q!02J;MCGbO0>;M$%01)c{6iuDg z9{>OVB6LztQvfq&zs!J{Kw#w{K;`lfOz+>ardhL$fN)^epOApRbFVO>rxPLo00It4 zL_t(o!|m7GZrd;rMNv~XS5kGeD%(-qI6eRWk%e2(q&ht_A@UYzKLvNA#I_&N3 z?R}tYuGFNj*FY;zU+^7j*VOf1fO>GG3>cflfhVAJv^ja`S733xV+XvX53FNB2By<>gR<{D|QLC(O?yGC5;3(3u?Y=rIDF|J%J0ITu8` zcKBaQI3Q42a{4jawSp){UjwL3Ik#xnBOrV8|1GySUXmmJ0=lrPW~RoY!jzLo-^o-n zf3oGY(XOu0%>2!kGYL7w%%fP&DM^kr<4cso&G>9Nmsk!rBk%oAj@WQHnLJ>8haJ!m zIrmrxHSn;&ChhRB(0In<1lQ~3oAISVu6%fbU`54Id(hRIo@ zTb9>yem)pshR8VslfPtDPH^^}RXqmo{J>OBS_SZ`zg-k@l~eKqH+;cWnlYx0RphzCrdI_9M(o6=nhUSrh&7paGU|#=CsX6TJ c?R~+114fpva-&pK_5c6?07*qoM6N<$f|k}&umAu6 literal 0 HcmV?d00001 diff --git a/docs/public/static/sponsors/elevator-logo.png b/docs/public/static/sponsors/elevator-logo.png new file mode 100644 index 0000000000000000000000000000000000000000..9e05cd60a52089e00d078858e47b7145d29cf9fb GIT binary patch literal 506 zcmV9#502Jx~74uSG`J<`q0~hQE8tMQP=Kv7y7b)%~HSPcq>i`t&02J&7 z8tVWP?=C#;9Wd`hQuJqY>Hre#02J*26zKpH=KvJz02Ekhs|)}D z03mczPE!CgOw544U}iw_<$xfvnGitl<=>2^b6MHHpOA2`e^5Y4eHofgAh^`_|!!*)eE*L#>NOU4~tdu?nk7@L%EN^d8K-9!~Fgi&B zu6#T-_=UQT#V8kAoWirAaZ00n6^~OJD;KWpF{;Up0O-($0v=~KV9QX45xD_39h-*W zMl1CjhO!&5VaVYRKa-n8z#BU@bb=wP3Sr20pNJ?!@nh wwAL_sF*nZz=dhSzr3GqGN`h5!Hn07*qoM6N<$f``@8@Bjb+ literal 0 HcmV?d00001 diff --git a/docs/public/static/sponsors/hoodie-bees-2x.png b/docs/public/static/sponsors/hoodie-bees-2x.png new file mode 100644 index 0000000000000000000000000000000000000000..fabf7c011c57fa67015eda10869dea1b1f75c5e7 GIT binary patch literal 2996 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 Hu0mjfUT5y0 literal 0 HcmV?d00001 diff --git a/docs/public/static/sponsors/movavi-2x.png b/docs/public/static/sponsors/movavi-2x.png new file mode 100644 index 0000000000000000000000000000000000000000..ee93f4ed9905993695a9bf812783002d67e774c6 GIT binary patch literal 642 zcmeAS@N?(olHy`uVBq!ia0vp^0U*r53?z4+XPOVB>;rs4T!FN#tgMWT44jmZkbrO% z6cps-N?9Ic3j#7C+;e&BY@}#CNoPeV|=ZyWp93P42xj z*Kgc9Fp)9%@1zrbGX>*IE4AfM{#x)Z_AmTdR6DPGRC{>-H|Y0{`)*{VTe-yiG~vA{MwV%PN&(Q)n;}vX+JkG zIB;*q^Q8w`Wj^PYTx>q{bpEP^NB&F6oZn*~w(DcY7S;Es3XV2mN?(>5XsK@%n&!S!`#%hW6)d zeEwmzN7?-!uMRM<#Pmo3w8Kzv^Swi>?DjO}e`K7S VUBi5!AD9vtJYD@<);T3K0RW6D6#M`H literal 0 HcmV?d00001 diff --git a/docs/public/static/sponsors/movavi.png b/docs/public/static/sponsors/movavi.png new file mode 100644 index 0000000000000000000000000000000000000000..f1db15a84320d573957f75570b2588c38d02fdf1 GIT binary patch literal 402 zcmeAS@N?(olHy`uVBq!ia0vp^8X(NU3?z3ec*FxK`v9L1S0F7TBO@y-3nb;_jfBTE6*C@3gE)I+4UW*glD8X-~=8(>dg$^t5un1b;d;8*lzVFN<5=veL9nV)}Ih^MBxJSpso^O}29bh*8JnEEbPoGuJ!O1o9%c(%cK@5Z@{Mdt9tf7PA(%lImz^^1iH?!S3g z7wvoJ^Xl^q`QFInqs~4@GJf3)`Ep}<&dWQ;UfnQUGTC$2Ee21e9hbP@f37?dQr)l5 z_N7uHNO#LDMRw+mKHIeWA};S*C1@jC?J;N7tj|AW&&uuG5To28Q5GN}m~idmnU=tA z+sRxE_snwASXOV$jJai_UNznOZ*6Sp`{|cR4| V|4&~u;XBah44$rjF6*2UngG)NliUCR literal 0 HcmV?d00001 diff --git a/docs/public/static/sponsors/spice-factory-2x.png b/docs/public/static/sponsors/spice-factory-2x.png new file mode 100644 index 0000000000000000000000000000000000000000..42461afa70649bc42111747a6546fe53437a882e GIT binary patch literal 178 zcmeAS@N?(olHy`uVBq!ia0vp^0U*r63?ysp-_HY5(g8jpu0Yz`USnaS+7m;e`3)KY z4jSHeQ0|IEHu}PhMd8;6+2zv%uEHT<%*A z1sZU*sdBV7GB9ynPEbe;dAQ=x!xaGnY%CtrrEHGGA5c1F?%)^X<;bz#6+Vp?s RUO=-LJYD@<);T3K0RRU^I4}SJ literal 0 HcmV?d00001 diff --git a/docs/public/static/sponsors/spice-factory.png b/docs/public/static/sponsors/spice-factory.png new file mode 100644 index 0000000000000000000000000000000000000000..09c8c926903e1eaba3edc05c1c41fbf01612201b GIT binary patch literal 183 zcmeAS@N?(olHy`uVBq!ia0vp^8X(NV3?%C=ER6$F>H$6>u0YzyPUEqG(EJ9q`3!lO literal 0 HcmV?d00001 diff --git a/docs/src/components/home/Sponsors.tsx b/docs/src/components/home/Sponsors.tsx index e668079931d16e..4499396eaf3f10 100644 --- a/docs/src/components/home/Sponsors.tsx +++ b/docs/src/components/home/Sponsors.tsx @@ -8,16 +8,19 @@ import Paper from '@material-ui/core/Paper'; import Link from 'docs/src/modules/components/Link'; import IconButton from '@material-ui/core/IconButton'; import AddRounded from '@material-ui/icons/AddRounded'; +import LaunchRounded from '@material-ui/icons/LaunchRounded'; const DIAMONDs = [ { - logo: 'https://avatars3.githubusercontent.com/u/1287123?s=256', + src: 'https://avatars3.githubusercontent.com/u/1287123?s=40', + srcSet: 'https://avatars3.githubusercontent.com/u/1287123?s=80 2x', name: 'Octopus Deploy', description: 'Repetable relayable deployments.', href: 'https://octopus.com/', }, { - logo: 'https://avatars3.githubusercontent.com/u/8424863?s=256', + src: 'https://avatars3.githubusercontent.com/u/8424863?s=40', + srcSet: 'https://avatars3.githubusercontent.com/u/8424863?s=80 2x', name: 'Doit International', description: 'Management platform for Google Clound and AWS.', href: 'https://www.doit-intl.com/', @@ -25,29 +28,61 @@ const DIAMONDs = [ ]; const GOLDs = [ { - logo: 'https://github.com/tidelift.png?size=96', + src: 'https://avatars.githubusercontent.com/u/30204434?s=40', + srcSet: 'https://avatars.githubusercontent.com/u/30204434?s=80 2x', name: 'Tidelift', description: 'Enterprise-ready open source software.', href: 'https://tidelift.com/', }, { - logo: 'https://github.com/teambit.png?size=96', + src: 'https://avatars.githubusercontent.com/u/24789812?size=40', + srcSet: 'https://avatars.githubusercontent.com/u/24789812?size=80 2x', name: 'Bit', description: 'The fastest way to share code.', href: 'https://bit.dev/', }, { - logo: 'https://images.opencollective.com/callemall/a6946da/logo/96.png', + src: 'https://images.opencollective.com/callemall/a6946da/logo/40.png', + srcSet: 'https://images.opencollective.com/callemall/a6946da/logo/80.png 2x', name: 'Text-em-all', description: 'The easy way to message your group.', href: 'https://www.text-em-all.com/', }, { - logo: 'https://images.opencollective.com/canadacasino/5b19004/logo/96.png', + src: 'https://images.opencollective.com/canadacasino/5b19004/logo/40.png', + srcSet: 'https://images.opencollective.com/canadacasino/5b19004/logo/80.png 2x', name: 'Canada Casino', description: 'Safe and rewarding online casino experience', href: 'https://casinocanada.com/', }, + { + src: '/static/sponsors/spice-factory.png', + srcSet: '/static/sponsors/spice-factory-2x.png', + name: 'Spice Factory', + description: 'Next gen digital product studio.', + href: 'https://spicefactory.co/', + }, + { + src: '/static/sponsors/elevator-logo.png', + srcSet: '/static/sponsors/elevator-logo-2x.png', + name: 'Elevator', + description: 'The dopest new hip hop, upcoming artsits, music.', + href: 'https://www.elevatormag.com/', + }, + { + src: '/static/sponsors/movavi.png', + srcSet: '/static/sponsors/movavi-2x.png', + name: 'Movavi', + description: 'Screen recorder for Mac.', + href: 'https://www.movavi.com/', + }, + { + src: '/static/sponsors/hoodie-bees.png', + srcSet: '/static/sponsors/hoodie-bees-2x.png', + name: 'Hoodie Bees', + description: 'Horse community.', + href: 'https://www.hoodiebees.com/', + }, ]; function Label({ @@ -101,6 +136,58 @@ function Label({ ); } +const SponsorCard = ({ + item, + bottom, +}: { + item: typeof DIAMONDs[number]; + bottom: React.ReactElement; +}) => { + return ( + + + + + + {item.name}{' '} + + + + {item.description} + + + + {bottom} + + ); +}; + const Sponsors = () => { return ( @@ -114,33 +201,7 @@ const Sponsors = () => { {DIAMONDs.map((item) => ( - - - - - - {item.name} - - - {item.description} - - - - - + Diamond sponsor} /> ))} @@ -188,35 +249,14 @@ const Sponsors = () => { {GOLDs.map((item) => ( - - - - - - {item.name} - - - {item.description} - - - - - + + Gold sponsor + + } + /> ))} From b62e48ca8775fb187bb2c7f138fee50a46f82fd1 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Tue, 10 Aug 2021 10:22:32 +0700 Subject: [PATCH 011/101] fix imports --- docs/src/layouts/AppFooter.tsx | 2 +- docs/src/layouts/AppHeader.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/src/layouts/AppFooter.tsx b/docs/src/layouts/AppFooter.tsx index 6ab68eaaa3aaf4..9a2e18c5aaea87 100644 --- a/docs/src/layouts/AppFooter.tsx +++ b/docs/src/layouts/AppFooter.tsx @@ -9,7 +9,7 @@ import InputBase from '@material-ui/core/InputBase'; import Button from '@material-ui/core/Button'; import Link from '@material-ui/core/Link'; import SvgMuiLogo from 'docs/src/icons/SvgMuiLogo'; -import ROUTES from '../route'; +import ROUTES from 'docs/src/route'; export default function AppFooter() { return ( diff --git a/docs/src/layouts/AppHeader.tsx b/docs/src/layouts/AppHeader.tsx index eaa36a26909f4e..2f9984cd8ba943 100644 --- a/docs/src/layouts/AppHeader.tsx +++ b/docs/src/layouts/AppHeader.tsx @@ -10,7 +10,7 @@ import HeaderNavBar from 'docs/src/components/header/HeaderNavBar'; import HeaderNavDropdown from 'docs/src/components/header/HeaderNavDropdown'; import ThemeModeToggle from 'docs/src/components/header/ThemeModeToggle'; import { getCookie } from 'docs/src/modules/utils/helpers'; -import { useChangeTheme } from '../modules/ThemeContext'; +import { useChangeTheme } from 'docs/src/modules/ThemeContext'; const Header = styled('div', { shouldForwardProp: (prop) => prop !== 'trigger', @@ -64,7 +64,7 @@ export default function AppHeader() { - + From ed82e20c2d02dfd1299c5e94a9da0e39572da938 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Tue, 10 Aug 2021 10:22:59 +0700 Subject: [PATCH 012/101] fix lowercase and increase maxwidth --- docs/src/components/home/DesignSystemComponents.tsx | 5 +++-- docs/src/components/home/HeroEnd.tsx | 2 +- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/docs/src/components/home/DesignSystemComponents.tsx b/docs/src/components/home/DesignSystemComponents.tsx index 4e4e23bf31f0a0..eb839b2e42e7ed 100644 --- a/docs/src/components/home/DesignSystemComponents.tsx +++ b/docs/src/components/home/DesignSystemComponents.tsx @@ -8,6 +8,7 @@ import { Theme, ThemeOptions, } from '@material-ui/core/styles'; +import { capitalize } from '@material-ui/core/utils'; import Box from '@material-ui/core/Box'; import Button from '@material-ui/core/Button'; import Alert from '@material-ui/core/Alert'; @@ -160,7 +161,7 @@ function Demo({ }} > {control.values.map((value) => ( - + ))} @@ -249,7 +250,7 @@ function buildTheme(theme: Theme): ThemeOptions { }, iconSizeSmall: { '& > *:nth-of-type(1)': { - fontSize: 16, + fontSize: 14, }, }, iconSizeMedium: { diff --git a/docs/src/components/home/HeroEnd.tsx b/docs/src/components/home/HeroEnd.tsx index 414feeb463bfdd..cbd79d3a5bc13c 100644 --- a/docs/src/components/home/HeroEnd.tsx +++ b/docs/src/components/home/HeroEnd.tsx @@ -26,7 +26,7 @@ const HeroEnd = () => { Go live! - + Start building with MUI today! From 42246f35bd02cd43dc62e81cfc9686abf634a19b Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Tue, 10 Aug 2021 11:59:46 +0700 Subject: [PATCH 013/101] add hidden store template images to load before hand --- docs/src/components/home/ProductSuite.tsx | 5 ++++- docs/src/components/home/StoreTemplatesBanner.tsx | 11 +++++++++++ 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/docs/src/components/home/ProductSuite.tsx b/docs/src/components/home/ProductSuite.tsx index 83d9c763884a76..2b19e7977a6fc1 100644 --- a/docs/src/components/home/ProductSuite.tsx +++ b/docs/src/components/home/ProductSuite.tsx @@ -7,7 +7,9 @@ import GradientText from 'docs/src/components/typography/GradientText'; import ProductsSwitcher from 'docs/src/components/home/ProductsSwitcher'; import CoreShowcase from 'docs/src/components/home/CoreShowcase'; import ShowcaseContainer from 'docs/src/components/home/ShowcaseContainer'; -import StoreTemplatesBanner from 'docs/src/components/home/StoreTemplatesBanner'; +import StoreTemplatesBanner, { + LazyStoreTemplateImages, +} from 'docs/src/components/home/StoreTemplatesBanner'; import DesignKits from 'docs/src/components/home/DesignKits'; const ProductSuite = () => { @@ -38,6 +40,7 @@ const ProductSuite = () => { + {productIndex === 0 && } {productIndex === 1 && } {productIndex === 2 && } diff --git a/docs/src/components/home/StoreTemplatesBanner.tsx b/docs/src/components/home/StoreTemplatesBanner.tsx index f364a912553cb7..9edd0b3e45b6a6 100644 --- a/docs/src/components/home/StoreTemplatesBanner.tsx +++ b/docs/src/components/home/StoreTemplatesBanner.tsx @@ -24,6 +24,17 @@ const Image = styled('img')(({ theme }) => ({ filter: 'drop-shadow(0px 4px 20px rgba(61, 71, 82, 0.25))', })); +export const LazyStoreTemplateImages = () => ( + + + + + + + + +); + export default function StoreTemplatesBanner() { const [appearIndexes, setAppearIndexes] = React.useState>([0]); React.useEffect(() => { From 40717e350845a30e1d34781c9153e2b719297e58 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Tue, 10 Aug 2021 12:05:22 +0700 Subject: [PATCH 014/101] load DesignKitBg before hand --- docs/src/components/home/DesignKits.tsx | 15 +++++++++++++++ docs/src/components/home/ProductSuite.tsx | 3 ++- docs/src/components/home/StoreTemplatesBanner.tsx | 11 ++++++++++- 3 files changed, 27 insertions(+), 2 deletions(-) diff --git a/docs/src/components/home/DesignKits.tsx b/docs/src/components/home/DesignKits.tsx index 2226523f126b8e..836f1d933de6f7 100644 --- a/docs/src/components/home/DesignKits.tsx +++ b/docs/src/components/home/DesignKits.tsx @@ -15,6 +15,21 @@ const Image = styled('img')({ objectPosition: 'top left', }); +export const LazyDesignKitsBg = () => ( + + + +); + export default function DesignKits() { const [appearIndexes, setAppearIndexes] = React.useState>([0]); React.useEffect(() => { diff --git a/docs/src/components/home/ProductSuite.tsx b/docs/src/components/home/ProductSuite.tsx index 2b19e7977a6fc1..0a7e7319b6b254 100644 --- a/docs/src/components/home/ProductSuite.tsx +++ b/docs/src/components/home/ProductSuite.tsx @@ -10,7 +10,7 @@ import ShowcaseContainer from 'docs/src/components/home/ShowcaseContainer'; import StoreTemplatesBanner, { LazyStoreTemplateImages, } from 'docs/src/components/home/StoreTemplatesBanner'; -import DesignKits from 'docs/src/components/home/DesignKits'; +import DesignKits, { LazyDesignKitsBg } from 'docs/src/components/home/DesignKits'; const ProductSuite = () => { const [productIndex, setProductIndex] = React.useState(0); @@ -41,6 +41,7 @@ const ProductSuite = () => { + {productIndex === 0 && } {productIndex === 1 && } {productIndex === 2 && } diff --git a/docs/src/components/home/StoreTemplatesBanner.tsx b/docs/src/components/home/StoreTemplatesBanner.tsx index 9edd0b3e45b6a6..215b644cd84257 100644 --- a/docs/src/components/home/StoreTemplatesBanner.tsx +++ b/docs/src/components/home/StoreTemplatesBanner.tsx @@ -25,7 +25,16 @@ const Image = styled('img')(({ theme }) => ({ })); export const LazyStoreTemplateImages = () => ( - + From c3c8d4dbe543ff79c90acf9cab38e1f720d31665 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Tue, 10 Aug 2021 12:07:25 +0700 Subject: [PATCH 015/101] change maxHeight to prevent layout shift --- docs/src/components/home/ShowcaseContainer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/components/home/ShowcaseContainer.tsx b/docs/src/components/home/ShowcaseContainer.tsx index 6bb6f0900e793a..5279de65c82816 100644 --- a/docs/src/components/home/ShowcaseContainer.tsx +++ b/docs/src/components/home/ShowcaseContainer.tsx @@ -49,7 +49,7 @@ export default function ShowcaseContainer({ maxWidth: '100%', position: 'relative', minHeight: 200, - maxHeight: 540, + maxHeight: 516, borderWidth: '0 1px 1px 1px', borderStyle: 'solid', borderColor: (theme) => From 27de4480178f788e1819a15e8052b6e0332ff2c6 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Tue, 10 Aug 2021 12:12:23 +0700 Subject: [PATCH 016/101] remove hardcoded year at Footer --- docs/src/layouts/AppFooter.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/layouts/AppFooter.tsx b/docs/src/layouts/AppFooter.tsx index 9a2e18c5aaea87..143d2de18e6008 100644 --- a/docs/src/layouts/AppFooter.tsx +++ b/docs/src/layouts/AppFooter.tsx @@ -177,7 +177,7 @@ export default function AppFooter() { - Currently v4.11.0. Released under the MIT License. Copyright © 2020 Material-UI. + Copyright © {new Date().getFullYear()} Material-UI. From bec25efd761b655875ae40215282b3bda08ca6ec Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Tue, 10 Aug 2021 12:29:54 +0700 Subject: [PATCH 017/101] add social links to Footer --- docs/src/layouts/AppFooter.tsx | 37 +++++++++++++++++++++++++++++++++- 1 file changed, 36 insertions(+), 1 deletion(-) diff --git a/docs/src/layouts/AppFooter.tsx b/docs/src/layouts/AppFooter.tsx index 143d2de18e6008..87136809fcaa9e 100644 --- a/docs/src/layouts/AppFooter.tsx +++ b/docs/src/layouts/AppFooter.tsx @@ -6,8 +6,13 @@ import Container from '@material-ui/core/Container'; import Divider from '@material-ui/core/Divider'; import Typography from '@material-ui/core/Typography'; import InputBase from '@material-ui/core/InputBase'; +import IconButton from '@material-ui/core/IconButton'; import Button from '@material-ui/core/Button'; import Link from '@material-ui/core/Link'; +import Stack from '@material-ui/core/Stack'; +import TwitterIcon from '@material-ui/icons/Twitter'; +import GitHubIcon from '@material-ui/icons/GitHub'; +import LinkedInIcon from '@material-ui/icons/LinkedIn'; import SvgMuiLogo from 'docs/src/icons/SvgMuiLogo'; import ROUTES from 'docs/src/route'; @@ -23,7 +28,7 @@ export default function AppFooter() { gap: (theme) => theme.spacing(4, 2), gridTemplateColumns: { xs: '1fr', sm: '1fr 1fr', md: '1fr 1.75fr', lg: '1fr 1fr' }, gridTemplateRows: 'auto', - '& a': { + '& a:not(.MuiIconButton-root)': { mt: 1, color: 'text.secondary', typography: 'body2', @@ -49,6 +54,7 @@ export default function AppFooter() { display: 'inline-flex', borderRadius: 1, overflow: 'hidden', + mb: 1, }} > + + + + + + + + + + +
    Date: Tue, 10 Aug 2021 13:49:18 +0700 Subject: [PATCH 018/101] switch to MUI send in blue --- docs/src/components/footer/EmailSubscribe.tsx | 111 ++++++++++++++++++ docs/src/layouts/AppFooter.tsx | 49 +------- 2 files changed, 113 insertions(+), 47 deletions(-) create mode 100644 docs/src/components/footer/EmailSubscribe.tsx diff --git a/docs/src/components/footer/EmailSubscribe.tsx b/docs/src/components/footer/EmailSubscribe.tsx new file mode 100644 index 00000000000000..f48f678cd05b54 --- /dev/null +++ b/docs/src/components/footer/EmailSubscribe.tsx @@ -0,0 +1,111 @@ +import * as React from 'react'; +import { styled, Theme } from '@material-ui/core/styles'; +import { SxProps } from '@material-ui/system'; +import Alert from '@material-ui/core/Alert'; +import AlertTitle from '@material-ui/core/AlertTitle'; +import InputBase from '@material-ui/core/InputBase'; +import Button from '@material-ui/core/Button'; + +const Form = styled('form')(({ theme }) => ({ + display: 'inline-flex', + borderRadius: theme.shape.borderRadius, + overflow: 'hidden', +})); + +function searchParams(params: any) { + return Object.keys(params) + .filter((key) => params[key] != null) + .map((key) => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`) + .join('&'); +} + +export default function EmailSubscribe({ sx }: { sx?: SxProps }) { + const [form, setForm] = React.useState<'sent' | 'loading' | 'pristine'>('pristine'); + const handleSubmit = async (event: React.FormEvent) => { + event.preventDefault(); + setForm('loading'); + const target = event.target as { + elements?: { email?: { value: string } }; + }; + await fetch( + 'https://f0433e60.sibforms.com/serve/MUIEAMMuohK-i-XUkJaUj3Lq3zr3rVeAPmgssEBsyiTktpqrImORJiFMQ1PLfZ1W1PGb-FzKhlfuPWlLNfx90j5R2qC7C219ec8AVcBsxlIRDG5znwaXr6gzAyth6W93bLiK4otXL_iBLFV43QqHrKZKORXA0LGq6seXbasTiAHh5EtqWFGK2zw8mlwYssGnIT_7ZZXiWC_iqubZ', + { + method: 'POST', + headers: { + 'Content-Type': 'application/x-www-form-urlencoded', + }, + mode: 'no-cors', + body: searchParams({ + EMAIL: target.elements?.email?.value, + email_address_check: '', + locale: 'en', + }), + }, + ); + setForm('sent'); + }; + if (form === 'sent') { + return ( + + + Thanks! Check your email. + + You should get a confirmation email soon. Open it up and confirm your email + address so that we can keep you up to date. + + ); + } + return ( +
    + + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[900] + : theme.palette.grey[100], + px: 1, + py: 0.5, + typography: 'body2', + flexGrow: 1, + minWidth: 200, + }} + /> + + + ); +} diff --git a/docs/src/layouts/AppFooter.tsx b/docs/src/layouts/AppFooter.tsx index 87136809fcaa9e..550be3a6ec9dfa 100644 --- a/docs/src/layouts/AppFooter.tsx +++ b/docs/src/layouts/AppFooter.tsx @@ -5,15 +5,14 @@ import Box from '@material-ui/core/Box'; import Container from '@material-ui/core/Container'; import Divider from '@material-ui/core/Divider'; import Typography from '@material-ui/core/Typography'; -import InputBase from '@material-ui/core/InputBase'; import IconButton from '@material-ui/core/IconButton'; -import Button from '@material-ui/core/Button'; import Link from '@material-ui/core/Link'; import Stack from '@material-ui/core/Stack'; import TwitterIcon from '@material-ui/icons/Twitter'; import GitHubIcon from '@material-ui/icons/GitHub'; import LinkedInIcon from '@material-ui/icons/LinkedIn'; import SvgMuiLogo from 'docs/src/icons/SvgMuiLogo'; +import EmailSubscribe from 'docs/src/components/footer/EmailSubscribe'; import ROUTES from 'docs/src/route'; export default function AppFooter() { @@ -47,51 +46,7 @@ export default function AppFooter() { No spam, guaranteed. - - - theme.palette.mode === 'dark' - ? theme.palette.primaryDark[900] - : theme.palette.grey[100], - px: 1, - py: 0.5, - typography: 'body2', - flexGrow: 1, - minWidth: 200, - }} - /> - - + Date: Wed, 11 Aug 2021 14:17:48 +0700 Subject: [PATCH 019/101] add store routes --- docs/src/route.ts | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/docs/src/route.ts b/docs/src/route.ts index ae71daffe8ae95..4d055ddbc62450 100644 --- a/docs/src/route.ts +++ b/docs/src/route.ts @@ -20,6 +20,15 @@ const ROUTES = { careers: '/company/careers/', support: '/getting-started/support/#professional-support-premium', contactUs: '/branding/contact-us/', + storeFigma: 'https://material-ui.com/store/items/figma-react/', + storeSketch: 'https://material-ui.com/store/items/sketch-react/', + storeXD: 'https://material-ui.com/store/items/adobe-xd-react/', + storeTemplateMaterialApp: 'https://material-ui.com/store/items/material-app/', + storeTemplateBarza: 'https://material-ui.com/store/items/bazar-pro-react-ecommerce-template/', + storeTemplateMinimalFree: 'https://material-ui.com/store/items/minimal-dashboard-free/', + storeTemplateMinimalDashboard: 'https://material-ui.com/store/items/minimal-dashboard/', + storeTemplateBerry: 'https://material-ui.com/store/items/berry-react-material-admin/', + storeTemplateWebbee: 'https://material-ui.com/store/items/webbee-landing-page/', }; export default ROUTES; From dcd604adda4a05e4931e2f41ace96c3fcb2e93f6 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 11 Aug 2021 14:18:06 +0700 Subject: [PATCH 020/101] rework design kits section --- docs/src/components/home/DesignKits.tsx | 262 +++++++++++++++++----- docs/src/components/home/ProductSuite.tsx | 4 +- 2 files changed, 213 insertions(+), 53 deletions(-) diff --git a/docs/src/components/home/DesignKits.tsx b/docs/src/components/home/DesignKits.tsx index 836f1d933de6f7..8277b4269c1df8 100644 --- a/docs/src/components/home/DesignKits.tsx +++ b/docs/src/components/home/DesignKits.tsx @@ -1,32 +1,100 @@ import * as React from 'react'; -import { styled } from '@material-ui/core/styles'; +import { styled, alpha } from '@material-ui/core/styles'; import Avatar from '@material-ui/core/Avatar'; -import Fade from '@material-ui/core/Fade'; import Box from '@material-ui/core/Box'; +import Fade from '@material-ui/core/Fade'; +import Typography from '@material-ui/core/Typography'; +import ROUTES from 'docs/src/route'; +import LaunchRounded from '@material-ui/icons/LaunchRounded'; + +const ratio = 1367 / 939; -const Image = styled('img')({ +const Image = styled('img')(({ theme }) => ({ display: 'block', - position: 'absolute', - top: 0, - right: 0, - width: '100%', - height: '100%', + width: 200, + height: 200 / ratio, + [theme.breakpoints.up('sm')]: { + width: 300, + height: 300 / ratio, + }, + [theme.breakpoints.up('md')]: { + width: 450, + height: 450 / ratio, + }, + border: '6px solid', + borderColor: theme.palette.mode === 'dark' ? theme.palette.grey[800] : theme.palette.grey[400], + borderRadius: theme.shape.borderRadius, objectFit: 'cover', - objectPosition: 'top left', + filter: 'drop-shadow(0px 4px 20px rgba(61, 71, 82, 0.25))', +})); + +const Anchor = styled('a')({ + display: 'inline-block', + position: 'relative', + transition: '0.3s', + borderRadius: '50%', + '&:hover': { + boxShadow: '0 6px 12px 0 rgba(0,0,0,0.12)', + '& > div': { + opacity: 1, + }, + }, }); -export const LazyDesignKitsBg = () => ( +const DesignTool = React.forwardRef( + ({ brand, ...props }, ref) => { + return ( + + + alpha(theme.palette.primaryDark[500], 0.8), + color: '#fff', + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + }} + > + Goto store + + + + ); + }, +); + +export const LazyDesignKitImages = () => ( - + + + + + + ); @@ -34,7 +102,7 @@ export default function DesignKits() { const [appearIndexes, setAppearIndexes] = React.useState>([0]); React.useEffect(() => { const time = setTimeout(() => { - if (appearIndexes.length < 3) { + if (appearIndexes.length < 6) { setAppearIndexes((current) => [...current, current.length]); } }, 200); @@ -45,45 +113,72 @@ export default function DesignKits() { return ( - - - - (theme.palette.mode === 'dark' ? 'primaryDark.900' : 'grey.50'), - }} - /> - - (theme.palette.mode === 'dark' ? 'primaryDark.900' : 'grey.50'), + opacity: 0.6, + zIndex: 1, + }} + /> + + `linear-gradient(to bottom, ${ + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[900] + : theme.palette.grey[50] + } 0%, transparent 30%, transparent 70%, ${ + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[900] + : theme.palette.grey[50] + } 100%)`, + zIndex: 2, + }} + /> + + `linear-gradient(to right, ${ + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[900] + : theme.palette.grey[50] + }, transparent)`, + zIndex: 2, + }} + /> + - + - + - + + + + + + + + + + + + + + + + + + + + + + + + + ); } diff --git a/docs/src/components/home/ProductSuite.tsx b/docs/src/components/home/ProductSuite.tsx index 0a7e7319b6b254..98c201fa9d265e 100644 --- a/docs/src/components/home/ProductSuite.tsx +++ b/docs/src/components/home/ProductSuite.tsx @@ -10,7 +10,7 @@ import ShowcaseContainer from 'docs/src/components/home/ShowcaseContainer'; import StoreTemplatesBanner, { LazyStoreTemplateImages, } from 'docs/src/components/home/StoreTemplatesBanner'; -import DesignKits, { LazyDesignKitsBg } from 'docs/src/components/home/DesignKits'; +import DesignKits, { LazyDesignKitImages } from 'docs/src/components/home/DesignKits'; const ProductSuite = () => { const [productIndex, setProductIndex] = React.useState(0); @@ -41,7 +41,7 @@ const ProductSuite = () => { - + {productIndex === 0 && } {productIndex === 1 && } {productIndex === 2 && } From 7a45e732735527b22a0b74a5f873272b08d6e40b Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 11 Aug 2021 14:18:23 +0700 Subject: [PATCH 021/101] add links to store for template section --- .../components/home/StoreTemplatesBanner.tsx | 90 ++++++++++++++++--- 1 file changed, 79 insertions(+), 11 deletions(-) diff --git a/docs/src/components/home/StoreTemplatesBanner.tsx b/docs/src/components/home/StoreTemplatesBanner.tsx index 215b644cd84257..5dba450a5c0d6f 100644 --- a/docs/src/components/home/StoreTemplatesBanner.tsx +++ b/docs/src/components/home/StoreTemplatesBanner.tsx @@ -1,7 +1,10 @@ import * as React from 'react'; -import { styled } from '@material-ui/core/styles'; +import { styled, alpha } from '@material-ui/core/styles'; import Box from '@material-ui/core/Box'; import Fade from '@material-ui/core/Fade'; +import Typography from '@material-ui/core/Typography'; +import ROUTES from 'docs/src/route'; +import LaunchRounded from '@material-ui/icons/LaunchRounded'; const ratio = 1367 / 939; @@ -24,6 +27,68 @@ const Image = styled('img')(({ theme }) => ({ filter: 'drop-shadow(0px 4px 20px rgba(61, 71, 82, 0.25))', })); +const Anchor = styled('a')({ + display: 'inline-block', + position: 'relative', + transition: '0.3s', + borderRadius: '50%', + '&:hover': { + '& > div': { + opacity: 1, + }, + }, +}); + +const StoreTemplate = React.forwardRef< + HTMLAnchorElement, + { brand: 'material-app' | 'barza' | 'minimal-free' | 'minimal-dashboard' | 'berry' | 'webbee' } +>(({ brand, ...props }, ref) => { + const linkMapping = { + 'material-app': ROUTES.storeTemplateMaterialApp, + barza: ROUTES.storeTemplateBarza, + 'minimal-free': ROUTES.storeTemplateMinimalFree, + 'minimal-dashboard': ROUTES.storeTemplateMinimalDashboard, + berry: ROUTES.storeTemplateBerry, + webbee: ROUTES.storeTemplateBerry, + }; + return ( + + + alpha(theme.palette.primaryDark[500], 0.8), + color: '#fff', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + }} + > + Goto store + + + + ); +}); + export const LazyStoreTemplateImages = () => ( (theme.palette.mode === 'dark' ? 'primaryDark.900' : 'grey.50'), opacity: (theme) => (theme.palette.mode === 'dark' ? 0.6 : 0), zIndex: 1, @@ -86,6 +152,7 @@ export default function StoreTemplatesBanner() { left: 0, width: '100%', height: '100%', + pointerEvents: 'none', background: (theme) => `linear-gradient(to bottom, ${ theme.palette.mode === 'dark' @@ -107,6 +174,7 @@ export default function StoreTemplatesBanner() { left: 0, width: 400, height: '100%', + pointerEvents: 'none', background: (theme) => `linear-gradient(to right, ${ theme.palette.mode === 'dark' @@ -131,10 +199,10 @@ export default function StoreTemplatesBanner() { gridTemplateRows: 'min-content', gap: { xs: 2, sm: 4, md: 8 }, width: 'min-content', - animation: 'slideup 30s ease-out forwards', + animation: 'slideup 20s ease-out forwards', '@keyframes slideup': { '0%': { - transform: 'translateY(-450px)', + transform: 'translateY(-250px)', }, '100%': { transform: 'translateY(-60px)', @@ -143,13 +211,13 @@ export default function StoreTemplatesBanner() { }} > - + - + - + - + - + - + From 0bbfe91e1f26e13f1a8bbe3da06f4e6d397cf0f5 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 11 Aug 2021 14:53:57 +0700 Subject: [PATCH 022/101] fix themed components --- .../components/cards/NotificationCard.tsx | 4 +- .../src/pages/components/cards/PlayerCard.tsx | 8 +- .../date-picker/ThemeDatePicker.tsx | 20 ++- .../pages/components/slider/ThemeSlider.tsx | 53 +++++--- .../pages/components/tables/FolderTable.tsx | 6 +- docs/src/pages/components/tabs/ThemeTabs.tsx | 9 +- .../components/timeline/ThemeTimeline.tsx | 122 ++++++++++-------- .../toggle-button/ViewToggleButton.tsx | 4 +- 8 files changed, 138 insertions(+), 88 deletions(-) diff --git a/docs/src/pages/components/cards/NotificationCard.tsx b/docs/src/pages/components/cards/NotificationCard.tsx index 81c7ef5bab9c75..bb6be315430f89 100644 --- a/docs/src/pages/components/cards/NotificationCard.tsx +++ b/docs/src/pages/components/cards/NotificationCard.tsx @@ -73,12 +73,12 @@ export default function NotificationCard() { }, }), grey, - divider: mode === 'dark' ? primaryDark[400] : grey[200], + divider: mode === 'dark' ? primaryDark[500] : grey[200], success: { main: '#1DB45A', }, background: { - paper: mode === 'dark' ? primaryDark[700] : '#fff', + paper: mode === 'dark' ? primaryDark[800] : '#fff', }, }, shape: { diff --git a/docs/src/pages/components/cards/PlayerCard.tsx b/docs/src/pages/components/cards/PlayerCard.tsx index e54b35f1f2a857..a71a3fd3f25fb2 100644 --- a/docs/src/pages/components/cards/PlayerCard.tsx +++ b/docs/src/pages/components/cards/PlayerCard.tsx @@ -51,9 +51,9 @@ export default function PlayerCard() { palette: { mode, background: { - paper: mode === 'dark' ? primaryDark[700] : '#fff', + paper: mode === 'dark' ? primaryDark[800] : '#fff', }, - divider: mode === 'dark' ? primaryDark[400] : grey[200], + divider: mode === 'dark' ? primaryDark[500] : grey[200], ...(mode === 'light' && { text: { primary: grey[900], @@ -81,7 +81,7 @@ export default function PlayerCard() { styleOverrides: { root: { border: '1px solid', - borderColor: mode === 'dark' ? primaryDark[400] : '#fff', + borderColor: mode === 'dark' ? primaryDark[500] : '#fff', }, }, }, @@ -92,7 +92,7 @@ export default function PlayerCard() { styleOverrides: { root: { border: '1px solid', - borderColor: mode === 'dark' ? primaryDark[400] : grey[200], + borderColor: mode === 'dark' ? primaryDark[500] : grey[200], }, }, }, diff --git a/docs/src/pages/components/date-picker/ThemeDatePicker.tsx b/docs/src/pages/components/date-picker/ThemeDatePicker.tsx index 93bd4806ac5d70..2e16b9feb46dbd 100644 --- a/docs/src/pages/components/date-picker/ThemeDatePicker.tsx +++ b/docs/src/pages/components/date-picker/ThemeDatePicker.tsx @@ -59,7 +59,7 @@ export default function ThemeDatePicker() { mode, primary, background: { - paper: mode === 'dark' ? primaryDark[700] : '#fff', + paper: mode === 'dark' ? primaryDark[800] : '#fff', }, }, shape: { @@ -90,20 +90,33 @@ export default function ThemeDatePicker() { MuiCalendarPicker: { styleOverrides: { root: { + width: '100%', '& .MuiTypography-caption': { color: mode === 'dark' ? grey[600] : grey[700], + height: 24, }, '[role="presentation"]': { '& .MuiIconButton-root': { padding: 0, }, }, + '& .PrivatePickersSlideTransition-root': { + minHeight: 180, + }, + '[role="row"]': { + justifyContent: 'space-around', + }, + '& .MuiCalendarPicker-viewTransitionContainer > div > div': { + justifyContent: 'space-around', + }, }, }, }, MuiPickersDay: { styleOverrides: { root: { + width: 24, + height: 24, color: mode === 'dark' ? primary[200] : grey[800], fontWeight: 500, }, @@ -125,9 +138,12 @@ export default function ThemeDatePicker() { sx={{ '& > div': { border: '1px solid', - borderColor: mode === 'dark' ? primaryDark[400] : grey[200], + borderColor: mode === 'dark' ? primaryDark[500] : grey[200], borderRadius: 1, }, + '& > div > div > div': { + width: '100%', + }, }} > - 'Temperature'} - orientation="vertical" - getAriaValueText={valuetext} - defaultValue={[25, 50]} - marks={[ - { value: 0 }, - { value: 25 }, - { value: 50 }, - { value: 75 }, - { value: 100 }, - ]} - valueLabelFormat={valuetext} - valueLabelDisplay="on" - /> + + 'Temperature'} + orientation="vertical" + getAriaValueText={valuetext} + defaultValue={[25, 50]} + marks={[ + { value: 0 }, + { value: 25 }, + { value: 50 }, + { value: 75 }, + { value: 100 }, + ]} + valueLabelFormat={valuetext} + valueLabelDisplay="on" + /> +
    ); diff --git a/docs/src/pages/components/tables/FolderTable.tsx b/docs/src/pages/components/tables/FolderTable.tsx index ce63cb484aeaa3..cdbfe640016511 100644 --- a/docs/src/pages/components/tables/FolderTable.tsx +++ b/docs/src/pages/components/tables/FolderTable.tsx @@ -123,12 +123,12 @@ export default function BasicTable() { secondary: grey[600], }, }), - divider: mode === 'dark' ? primaryDark[400] : grey[200], + divider: mode === 'dark' ? primaryDark[500] : grey[200], success: { main: mode === 'dark' ? '#21CC66' : '#1AA251', }, background: { - paper: mode === 'dark' ? primaryDark[700] : '#fff', + paper: mode === 'dark' ? primaryDark[800] : '#fff', }, }, typography: { @@ -143,7 +143,7 @@ export default function BasicTable() { MuiTableCell: { styleOverrides: { root: { - borderColor: mode === 'dark' ? primaryDark[400] : grey[200], + borderColor: mode === 'dark' ? primaryDark[500] : grey[200], }, sizeSmall: { padding: '0.625rem 1rem', diff --git a/docs/src/pages/components/tabs/ThemeTabs.tsx b/docs/src/pages/components/tabs/ThemeTabs.tsx index 3e11016805ef93..38af11084d437f 100644 --- a/docs/src/pages/components/tabs/ThemeTabs.tsx +++ b/docs/src/pages/components/tabs/ThemeTabs.tsx @@ -54,7 +54,7 @@ export default function ThemeTabs() { MuiTabs: { styleOverrides: { root: { - backgroundColor: mode === 'dark' ? primary[800] : primary[500], + backgroundColor: mode === 'dark' ? primary[700] : primary[500], borderRadius: 10, boxShadow: '0px 20px 25px rgba(0, 0, 0, 0.1), 0px 10px 10px rgba(0, 0, 0, 0.04)', @@ -95,7 +95,12 @@ export default function ThemeTabs() { return ( - + diff --git a/docs/src/pages/components/timeline/ThemeTimeline.tsx b/docs/src/pages/components/timeline/ThemeTimeline.tsx index 384a0882546834..dacc942cd25701 100644 --- a/docs/src/pages/components/timeline/ThemeTimeline.tsx +++ b/docs/src/pages/components/timeline/ThemeTimeline.tsx @@ -9,6 +9,7 @@ import TimelineSeparator from '@material-ui/lab/TimelineSeparator'; import TimelineConnector from '@material-ui/lab/TimelineConnector'; import TimelineContent from '@material-ui/lab/TimelineContent'; import TimelineDot from '@material-ui/lab/TimelineDot'; +import InfoOutlined from '@material-ui/icons/InfoOutlined'; const primary = { 50: '#F0F7FF', @@ -63,13 +64,21 @@ export default function BasicTimeline() { palette: { mode, primary, - text: { - primary: grey[900], - secondary: grey[800], - }, - divider: mode === 'dark' ? primaryDark[400] : grey[200], + ...(mode === 'light' && { + text: { + primary: grey[900], + secondary: grey[800], + }, + }), + ...(mode === 'dark' && { + text: { + primary: '#fff', + secondary: grey[500], + }, + }), + divider: mode === 'dark' ? primaryDark[500] : grey[200], background: { - paper: mode === 'dark' ? primaryDark[700] : '#fff', + paper: mode === 'dark' ? primaryDark[800] : '#fff', }, }, shape: { @@ -132,59 +141,66 @@ export default function BasicTimeline() { ); return ( - - - - 1 - - + + + 1 + + + - Add space and style to the account + Add these properties: - - - - - - - Margin Top - - - - - - - Padding Bottom - - - - - - Flexbox - - + + + + + + + + Margin Top + + + + + + + Padding Bottom + + + + + + Flexbox + + diff --git a/docs/src/pages/components/toggle-button/ViewToggleButton.tsx b/docs/src/pages/components/toggle-button/ViewToggleButton.tsx index 0a2b7199bcaa94..812402498731df 100644 --- a/docs/src/pages/components/toggle-button/ViewToggleButton.tsx +++ b/docs/src/pages/components/toggle-button/ViewToggleButton.tsx @@ -75,7 +75,7 @@ export default function ViewToggleButton() { palette: { mode, primary, - divider: mode === 'dark' ? primaryDark[400] : grey[200], + divider: mode === 'dark' ? primaryDark[500] : grey[200], grey, }, typography: { @@ -95,7 +95,7 @@ export default function ViewToggleButton() { MuiToggleButtonGroup: { styleOverrides: { root: { - backgroundColor: mode === 'dark' ? primaryDark[700] : '#fff', + backgroundColor: mode === 'dark' ? primaryDark[800] : '#fff', }, }, }, From f7b910820e6002b1e47e813cb42c7eb922fa1b87 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 11 Aug 2021 16:14:58 +0700 Subject: [PATCH 023/101] add new themed components --- .../components/accordion/ThemeAccordion.js | 190 ++++++++++++++++++ .../components/accordion/ThemeAccordion.tsx | 188 +++++++++++++++++ .../components/cards/NotificationCard.js | 4 +- docs/src/pages/components/cards/PlayerCard.js | 8 +- docs/src/pages/components/cards/TaskCard.js | 2 +- docs/src/pages/components/cards/TaskCard.tsx | 2 +- .../components/date-picker/ThemeDatePicker.js | 20 +- .../pages/components/slider/ThemeSlider.js | 53 +++-- .../pages/components/switches/ThemeSwitch.js | 93 +++++++++ .../pages/components/switches/ThemeSwitch.tsx | 92 +++++++++ .../pages/components/tables/FolderTable.js | 6 +- docs/src/pages/components/tabs/ThemeTabs.js | 13 +- docs/src/pages/components/tabs/ThemeTabs.tsx | 4 +- .../components/timeline/ThemeTimeline.js | 122 ++++++----- .../toggle-button/ThemeToggleButton.js | 122 +++++++++++ .../toggle-button/ThemeToggleButton.tsx | 120 +++++++++++ .../toggle-button/ViewToggleButton.js | 4 +- 17 files changed, 949 insertions(+), 94 deletions(-) create mode 100644 docs/src/pages/components/accordion/ThemeAccordion.js create mode 100644 docs/src/pages/components/accordion/ThemeAccordion.tsx create mode 100644 docs/src/pages/components/switches/ThemeSwitch.js create mode 100644 docs/src/pages/components/switches/ThemeSwitch.tsx create mode 100644 docs/src/pages/components/toggle-button/ThemeToggleButton.js create mode 100644 docs/src/pages/components/toggle-button/ThemeToggleButton.tsx diff --git a/docs/src/pages/components/accordion/ThemeAccordion.js b/docs/src/pages/components/accordion/ThemeAccordion.js new file mode 100644 index 00000000000000..358a96f3bea447 --- /dev/null +++ b/docs/src/pages/components/accordion/ThemeAccordion.js @@ -0,0 +1,190 @@ +import * as React from 'react'; +import { ThemeProvider, createTheme, useTheme } from '@material-ui/core/styles'; +import Accordion from '@material-ui/core/Accordion'; +import AccordionSummary from '@material-ui/core/AccordionSummary'; +import AccordionDetails from '@material-ui/core/AccordionDetails'; +import Box from '@material-ui/core/Box'; +import Typography from '@material-ui/core/Typography'; +import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; +import Folder from '@material-ui/icons/Folder'; + +const primary = { + 50: '#F0F7FF', + 100: '#C2E0FF', + 200: '#80BFFF', + 300: '#66B2FF', + 400: '#3399FF', + 500: '#007FFF', + 600: '#0072E5', + 700: '#0059B2', + 800: '#004C99', + 900: '#003A75', +}; + +const primaryDark = { + 50: '#E2EDF8', + 100: '#CEE0F3', + 200: '#91B9E3', + 300: '#5090D3', + 400: '#265D97', + 500: '#1E4976', + 600: '#173A5E', + 700: '#132F4C', + 800: '#001E3C', + 900: '#0A1929', +}; + +const grey = { + 50: '#F3F6F9', + 100: '#EAEEF3', + 200: '#E5E8EC', + 300: '#D7DCE1', + 400: '#BFC7CF', + 500: '#AAB4BE', + 600: '#96A3B0', + 700: '#8796A5', + 800: '#5A6978', + 900: '#3D4752', +}; + +export default function ViewToggleButton() { + /* + * Note: this demo use `theme.palette.mode` from `useTheme` to make dark mode works in the documentation only. + * + * Normally, you would implement dark mode via internal state and/or system preference at the root of the application. + * For more detail about toggling dark mode: https://next.material-ui.com/customization/palette/#toggling-color-mode + */ + const globalTheme = useTheme(); + const mode = globalTheme.palette.mode; + + const theme = React.useMemo( + () => + createTheme({ + palette: { + mode, + primary, + divider: mode === 'dark' ? primaryDark[500] : grey[200], + grey, + background: { + paper: mode === 'dark' ? primaryDark[800] : '#fff', + }, + ...(mode === 'light' && { + text: { + primary: grey[900], + secondary: grey[800], + }, + }), + ...(mode === 'dark' && { + text: { + primary: '#fff', + secondary: grey[500], + }, + }), + }, + typography: { + fontFamily: ['-apple-system', 'BlinkMacSystemFont', 'sans-serif'].join( + ',', + ), + }, + shape: { + borderRadius: 10, + }, + spacing: 10, + components: { + MuiButtonBase: { + defaultProps: { + disableTouchRipple: true, + }, + }, + MuiAccordion: { + styleOverrides: { + root: { + '&.Mui-expanded': { + margin: 0, + }, + '&:not(:first-of-type)': { + marginTop: -1, + }, + }, + }, + }, + MuiAccordionSummary: { + styleOverrides: { + root: { + '&.Mui-expanded': { + minHeight: 'auto', + }, + }, + content: { + flexDirection: 'column', + margin: '20px 0 !important', + '& svg': { + color: mode === 'dark' ? grey[800] : grey[500], + marginRight: 20, + }, + }, + expandIconWrapper: { + color: primary[500], + }, + }, + }, + MuiAccordionDetails: { + styleOverrides: { + root: { + paddingTop: 0, + }, + }, + }, + }, + }), + [mode], + ); + + return ( + +
    + + } + aria-controls="panel1a-content" + id="panel1a-header" + > + + +
    + Fonts + + Typefaces used in this branding project. + +
    +
    +
    + + + Tag line headings (h1, h2) use `Plus Jakarta Sans`, whereas the rest of + the elements use `IBM Plex Sans`. + + +
    + + } + aria-controls="panel2a-content" + id="panel2a-header" + > + + +
    + Libs + + Cool ones we used on some our apps. + +
    +
    +
    +
    +
    +
    + ); +} diff --git a/docs/src/pages/components/accordion/ThemeAccordion.tsx b/docs/src/pages/components/accordion/ThemeAccordion.tsx new file mode 100644 index 00000000000000..460971c51368db --- /dev/null +++ b/docs/src/pages/components/accordion/ThemeAccordion.tsx @@ -0,0 +1,188 @@ +import * as React from 'react'; +import { ThemeProvider, createTheme, useTheme } from '@material-ui/core/styles'; +import Accordion from '@material-ui/core/Accordion'; +import AccordionSummary from '@material-ui/core/AccordionSummary'; +import AccordionDetails from '@material-ui/core/AccordionDetails'; +import Box from '@material-ui/core/Box'; +import Typography from '@material-ui/core/Typography'; +import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; +import Folder from '@material-ui/icons/Folder'; + +const primary = { + 50: '#F0F7FF', + 100: '#C2E0FF', + 200: '#80BFFF', + 300: '#66B2FF', + 400: '#3399FF', + 500: '#007FFF', + 600: '#0072E5', + 700: '#0059B2', + 800: '#004C99', + 900: '#003A75', +}; +const primaryDark = { + 50: '#E2EDF8', + 100: '#CEE0F3', + 200: '#91B9E3', + 300: '#5090D3', + 400: '#265D97', + 500: '#1E4976', + 600: '#173A5E', + 700: '#132F4C', + 800: '#001E3C', + 900: '#0A1929', +}; +const grey = { + 50: '#F3F6F9', + 100: '#EAEEF3', + 200: '#E5E8EC', + 300: '#D7DCE1', + 400: '#BFC7CF', + 500: '#AAB4BE', + 600: '#96A3B0', + 700: '#8796A5', + 800: '#5A6978', + 900: '#3D4752', +}; + +export default function ViewToggleButton() { + /* + * Note: this demo use `theme.palette.mode` from `useTheme` to make dark mode works in the documentation only. + * + * Normally, you would implement dark mode via internal state and/or system preference at the root of the application. + * For more detail about toggling dark mode: https://next.material-ui.com/customization/palette/#toggling-color-mode + */ + const globalTheme = useTheme(); + const mode = globalTheme.palette.mode; + + const theme = React.useMemo( + () => + createTheme({ + palette: { + mode, + primary, + divider: mode === 'dark' ? primaryDark[500] : grey[200], + grey, + background: { + paper: mode === 'dark' ? primaryDark[800] : '#fff', + }, + ...(mode === 'light' && { + text: { + primary: grey[900], + secondary: grey[800], + }, + }), + ...(mode === 'dark' && { + text: { + primary: '#fff', + secondary: grey[500], + }, + }), + }, + typography: { + fontFamily: ['-apple-system', 'BlinkMacSystemFont', 'sans-serif'].join( + ',', + ), + }, + shape: { + borderRadius: 10, + }, + spacing: 10, + components: { + MuiButtonBase: { + defaultProps: { + disableTouchRipple: true, + }, + }, + MuiAccordion: { + styleOverrides: { + root: { + '&.Mui-expanded': { + margin: 0, + }, + '&:not(:first-of-type)': { + marginTop: -1, + }, + }, + }, + }, + MuiAccordionSummary: { + styleOverrides: { + root: { + '&.Mui-expanded': { + minHeight: 'auto', + }, + }, + content: { + flexDirection: 'column', + margin: '20px 0 !important', + '& svg': { + color: mode === 'dark' ? grey[800] : grey[500], + marginRight: 20, + }, + }, + expandIconWrapper: { + color: primary[500], + }, + }, + }, + MuiAccordionDetails: { + styleOverrides: { + root: { + paddingTop: 0, + }, + }, + }, + }, + }), + [mode], + ); + + return ( + +
    + + } + aria-controls="panel1a-content" + id="panel1a-header" + > + + +
    + Fonts + + Typefaces used in this branding project. + +
    +
    +
    + + + Tag line headings (h1, h2) use `Plus Jakarta Sans`, whereas the rest of + the elements use `IBM Plex Sans`. + + +
    + + } + aria-controls="panel2a-content" + id="panel2a-header" + > + + +
    + Libs + + Cool ones we used on some our apps. + +
    +
    +
    +
    +
    +
    + ); +} diff --git a/docs/src/pages/components/cards/NotificationCard.js b/docs/src/pages/components/cards/NotificationCard.js index 2bc241829093a4..783211300e848b 100644 --- a/docs/src/pages/components/cards/NotificationCard.js +++ b/docs/src/pages/components/cards/NotificationCard.js @@ -69,12 +69,12 @@ export default function NotificationCard() { }, }), grey, - divider: mode === 'dark' ? primaryDark[400] : grey[200], + divider: mode === 'dark' ? primaryDark[500] : grey[200], success: { main: '#1DB45A', }, background: { - paper: mode === 'dark' ? primaryDark[700] : '#fff', + paper: mode === 'dark' ? primaryDark[800] : '#fff', }, }, shape: { diff --git a/docs/src/pages/components/cards/PlayerCard.js b/docs/src/pages/components/cards/PlayerCard.js index 7e733afc3dbce1..a26ed1903bc897 100644 --- a/docs/src/pages/components/cards/PlayerCard.js +++ b/docs/src/pages/components/cards/PlayerCard.js @@ -52,9 +52,9 @@ export default function PlayerCard() { palette: { mode, background: { - paper: mode === 'dark' ? primaryDark[700] : '#fff', + paper: mode === 'dark' ? primaryDark[800] : '#fff', }, - divider: mode === 'dark' ? primaryDark[400] : grey[200], + divider: mode === 'dark' ? primaryDark[500] : grey[200], ...(mode === 'light' && { text: { primary: grey[900], @@ -82,7 +82,7 @@ export default function PlayerCard() { styleOverrides: { root: { border: '1px solid', - borderColor: mode === 'dark' ? primaryDark[400] : '#fff', + borderColor: mode === 'dark' ? primaryDark[500] : '#fff', }, }, }, @@ -93,7 +93,7 @@ export default function PlayerCard() { styleOverrides: { root: { border: '1px solid', - borderColor: mode === 'dark' ? primaryDark[400] : grey[200], + borderColor: mode === 'dark' ? primaryDark[500] : grey[200], }, }, }, diff --git a/docs/src/pages/components/cards/TaskCard.js b/docs/src/pages/components/cards/TaskCard.js index dced102399f850..688517cf4afc63 100644 --- a/docs/src/pages/components/cards/TaskCard.js +++ b/docs/src/pages/components/cards/TaskCard.js @@ -113,7 +113,7 @@ export default function TaskCard() { - + Assigned to Michael Scott diff --git a/docs/src/pages/components/cards/TaskCard.tsx b/docs/src/pages/components/cards/TaskCard.tsx index 782eecf8e9c33d..5f9ec895aab47f 100644 --- a/docs/src/pages/components/cards/TaskCard.tsx +++ b/docs/src/pages/components/cards/TaskCard.tsx @@ -119,7 +119,7 @@ export default function TaskCard() { - + Assigned to Michael Scott diff --git a/docs/src/pages/components/date-picker/ThemeDatePicker.js b/docs/src/pages/components/date-picker/ThemeDatePicker.js index 70ed8c3de054a3..579e8d30147e5f 100644 --- a/docs/src/pages/components/date-picker/ThemeDatePicker.js +++ b/docs/src/pages/components/date-picker/ThemeDatePicker.js @@ -61,7 +61,7 @@ export default function ThemeDatePicker() { mode, primary, background: { - paper: mode === 'dark' ? primaryDark[700] : '#fff', + paper: mode === 'dark' ? primaryDark[800] : '#fff', }, }, shape: { @@ -93,20 +93,33 @@ export default function ThemeDatePicker() { MuiCalendarPicker: { styleOverrides: { root: { + width: '100%', '& .MuiTypography-caption': { color: mode === 'dark' ? grey[600] : grey[700], + height: 24, }, '[role="presentation"]': { '& .MuiIconButton-root': { padding: 0, }, }, + '& .PrivatePickersSlideTransition-root': { + minHeight: 180, + }, + '[role="row"]': { + justifyContent: 'space-around', + }, + '& .MuiCalendarPicker-viewTransitionContainer > div > div': { + justifyContent: 'space-around', + }, }, }, }, MuiPickersDay: { styleOverrides: { root: { + width: 24, + height: 24, color: mode === 'dark' ? primary[200] : grey[800], fontWeight: 500, }, @@ -128,9 +141,12 @@ export default function ThemeDatePicker() { sx={{ '& > div': { border: '1px solid', - borderColor: mode === 'dark' ? primaryDark[400] : grey[200], + borderColor: mode === 'dark' ? primaryDark[500] : grey[200], borderRadius: 1, }, + '& > div > div > div': { + width: '100%', + }, }} > - 'Temperature'} - orientation="vertical" - getAriaValueText={valuetext} - defaultValue={[25, 50]} - marks={[ - { value: 0 }, - { value: 25 }, - { value: 50 }, - { value: 75 }, - { value: 100 }, - ]} - valueLabelFormat={valuetext} - valueLabelDisplay="on" - /> + + 'Temperature'} + orientation="vertical" + getAriaValueText={valuetext} + defaultValue={[25, 50]} + marks={[ + { value: 0 }, + { value: 25 }, + { value: 50 }, + { value: 75 }, + { value: 100 }, + ]} + valueLabelFormat={valuetext} + valueLabelDisplay="on" + /> +
    ); diff --git a/docs/src/pages/components/switches/ThemeSwitch.js b/docs/src/pages/components/switches/ThemeSwitch.js new file mode 100644 index 00000000000000..712b3c54dea042 --- /dev/null +++ b/docs/src/pages/components/switches/ThemeSwitch.js @@ -0,0 +1,93 @@ +import * as React from 'react'; +import { ThemeProvider, createTheme, useTheme } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; +import Switch from '@material-ui/core/Switch'; + +const primary = { + 50: '#F0F7FF', + 100: '#C2E0FF', + 200: '#80BFFF', + 300: '#66B2FF', + 400: '#3399FF', + 500: '#007FFF', + 600: '#0072E5', + 700: '#0059B2', + 800: '#004C99', + 900: '#003A75', +}; + +const grey = { + 50: '#F3F6F9', + 100: '#EAEEF3', + 200: '#E5E8EC', + 300: '#D7DCE1', + 400: '#BFC7CF', + 500: '#AAB4BE', + 600: '#96A3B0', + 700: '#8796A5', + 800: '#5A6978', + 900: '#3D4752', +}; + +export default function ThemeTabs() { + /* + * Note: this demo use `theme.palette.mode` from `useTheme` to make dark mode works in the documentation only. + * + * Normally, you would implement dark mode via internal state and/or system preference at the root of the application. + * For more detail about toggling dark mode: https://next.material-ui.com/customization/palette/#toggling-color-mode + */ + const globalTheme = useTheme(); + const mode = globalTheme.palette.mode; + const theme = React.useMemo( + () => + createTheme({ + palette: { + mode, + primary, + }, + components: { + MuiSwitch: { + styleOverrides: { + root: { + width: 32, + height: 20, + padding: 0, + }, + switchBase: { + padding: 3, + color: '#fff', + '&.Mui-checked': { + transform: 'translateX(12px)', + color: '#fff', + '& + .MuiSwitch-track': { + opacity: 1, + }, + }, + }, + thumb: { + padding: 0, + height: 14, + width: 14, + boxShadow: 'none', + }, + track: { + borderRadius: 20, + opacity: 1, + backgroundColor: grey[400], + }, + }, + }, + }, + }), + [mode], + ); + + return ( + + + + + + + ); +} diff --git a/docs/src/pages/components/switches/ThemeSwitch.tsx b/docs/src/pages/components/switches/ThemeSwitch.tsx new file mode 100644 index 00000000000000..596a6f93efbab9 --- /dev/null +++ b/docs/src/pages/components/switches/ThemeSwitch.tsx @@ -0,0 +1,92 @@ +import * as React from 'react'; +import { ThemeProvider, createTheme, useTheme } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; +import Switch from '@material-ui/core/Switch'; + +const primary = { + 50: '#F0F7FF', + 100: '#C2E0FF', + 200: '#80BFFF', + 300: '#66B2FF', + 400: '#3399FF', + 500: '#007FFF', + 600: '#0072E5', + 700: '#0059B2', + 800: '#004C99', + 900: '#003A75', +}; +const grey = { + 50: '#F3F6F9', + 100: '#EAEEF3', + 200: '#E5E8EC', + 300: '#D7DCE1', + 400: '#BFC7CF', + 500: '#AAB4BE', + 600: '#96A3B0', + 700: '#8796A5', + 800: '#5A6978', + 900: '#3D4752', +}; + +export default function ThemeTabs() { + /* + * Note: this demo use `theme.palette.mode` from `useTheme` to make dark mode works in the documentation only. + * + * Normally, you would implement dark mode via internal state and/or system preference at the root of the application. + * For more detail about toggling dark mode: https://next.material-ui.com/customization/palette/#toggling-color-mode + */ + const globalTheme = useTheme(); + const mode = globalTheme.palette.mode; + const theme = React.useMemo( + () => + createTheme({ + palette: { + mode, + primary, + }, + components: { + MuiSwitch: { + styleOverrides: { + root: { + width: 32, + height: 20, + padding: 0, + }, + switchBase: { + padding: 3, + color: '#fff', + '&.Mui-checked': { + transform: 'translateX(12px)', + color: '#fff', + '& + .MuiSwitch-track': { + opacity: 1, + }, + }, + }, + thumb: { + padding: 0, + height: 14, + width: 14, + boxShadow: 'none', + }, + track: { + borderRadius: 20, + opacity: 1, + backgroundColor: grey[400], + }, + }, + }, + }, + }), + [mode], + ); + + return ( + + + + + + + ); +} diff --git a/docs/src/pages/components/tables/FolderTable.js b/docs/src/pages/components/tables/FolderTable.js index 0f19c7705b25ec..5bad118118e394 100644 --- a/docs/src/pages/components/tables/FolderTable.js +++ b/docs/src/pages/components/tables/FolderTable.js @@ -115,12 +115,12 @@ export default function BasicTable() { secondary: grey[600], }, }), - divider: mode === 'dark' ? primaryDark[400] : grey[200], + divider: mode === 'dark' ? primaryDark[500] : grey[200], success: { main: mode === 'dark' ? '#21CC66' : '#1AA251', }, background: { - paper: mode === 'dark' ? primaryDark[700] : '#fff', + paper: mode === 'dark' ? primaryDark[800] : '#fff', }, }, typography: { @@ -135,7 +135,7 @@ export default function BasicTable() { MuiTableCell: { styleOverrides: { root: { - borderColor: mode === 'dark' ? primaryDark[400] : grey[200], + borderColor: mode === 'dark' ? primaryDark[500] : grey[200], }, sizeSmall: { padding: '0.625rem 1rem', diff --git a/docs/src/pages/components/tabs/ThemeTabs.js b/docs/src/pages/components/tabs/ThemeTabs.js index 0631fbb9c18853..9998439dc62295 100644 --- a/docs/src/pages/components/tabs/ThemeTabs.js +++ b/docs/src/pages/components/tabs/ThemeTabs.js @@ -54,7 +54,7 @@ export default function ThemeTabs() { MuiTabs: { styleOverrides: { root: { - backgroundColor: mode === 'dark' ? primary[800] : primary[500], + backgroundColor: mode === 'dark' ? primary[700] : primary[500], borderRadius: 10, boxShadow: '0px 20px 25px rgba(0, 0, 0, 0.1), 0px 10px 10px rgba(0, 0, 0, 0.04)', @@ -65,8 +65,8 @@ export default function ThemeTabs() { content: '""', display: 'block', position: 'absolute', - left: 20, - right: 20, + left: 40, + right: 40, height: '100%', backgroundColor: '#fff', }, @@ -95,7 +95,12 @@ export default function ThemeTabs() { return ( - + diff --git a/docs/src/pages/components/tabs/ThemeTabs.tsx b/docs/src/pages/components/tabs/ThemeTabs.tsx index 38af11084d437f..8ef6edee3571cd 100644 --- a/docs/src/pages/components/tabs/ThemeTabs.tsx +++ b/docs/src/pages/components/tabs/ThemeTabs.tsx @@ -65,8 +65,8 @@ export default function ThemeTabs() { content: '""', display: 'block', position: 'absolute', - left: 20, - right: 20, + left: 40, + right: 40, height: '100%', backgroundColor: '#fff', }, diff --git a/docs/src/pages/components/timeline/ThemeTimeline.js b/docs/src/pages/components/timeline/ThemeTimeline.js index deb3ea11ef5713..1959f367a2d804 100644 --- a/docs/src/pages/components/timeline/ThemeTimeline.js +++ b/docs/src/pages/components/timeline/ThemeTimeline.js @@ -9,6 +9,7 @@ import TimelineSeparator from '@material-ui/lab/TimelineSeparator'; import TimelineConnector from '@material-ui/lab/TimelineConnector'; import TimelineContent from '@material-ui/lab/TimelineContent'; import TimelineDot from '@material-ui/lab/TimelineDot'; +import InfoOutlined from '@material-ui/icons/InfoOutlined'; const primary = { 50: '#F0F7FF', @@ -65,13 +66,21 @@ export default function BasicTimeline() { palette: { mode, primary, - text: { - primary: grey[900], - secondary: grey[800], - }, - divider: mode === 'dark' ? primaryDark[400] : grey[200], + ...(mode === 'light' && { + text: { + primary: grey[900], + secondary: grey[800], + }, + }), + ...(mode === 'dark' && { + text: { + primary: '#fff', + secondary: grey[500], + }, + }), + divider: mode === 'dark' ? primaryDark[500] : grey[200], background: { - paper: mode === 'dark' ? primaryDark[700] : '#fff', + paper: mode === 'dark' ? primaryDark[800] : '#fff', }, }, shape: { @@ -135,59 +144,66 @@ export default function BasicTimeline() { return ( - - - - 1 - - + + + 1 + + + - Add space and style to the account + Add these properties: - - - - - - - Margin Top - - - - - - - Padding Bottom - - - - - - Flexbox - - + + + + + + + + Margin Top + + + + + + + Padding Bottom + + + + + + Flexbox + + diff --git a/docs/src/pages/components/toggle-button/ThemeToggleButton.js b/docs/src/pages/components/toggle-button/ThemeToggleButton.js new file mode 100644 index 00000000000000..3abe3503196af1 --- /dev/null +++ b/docs/src/pages/components/toggle-button/ThemeToggleButton.js @@ -0,0 +1,122 @@ +import * as React from 'react'; +import { ThemeProvider, createTheme, useTheme } from '@material-ui/core/styles'; +import ToggleButton from '@material-ui/core/ToggleButton'; +import ToggleButtonGroup from '@material-ui/core/ToggleButtonGroup'; + +const primary = { + 50: '#F0F7FF', + 100: '#C2E0FF', + 200: '#80BFFF', + 300: '#66B2FF', + 400: '#3399FF', + 500: '#007FFF', + 600: '#0072E5', + 700: '#0059B2', + 800: '#004C99', + 900: '#003A75', +}; + +const primaryDark = { + 50: '#E2EDF8', + 100: '#CEE0F3', + 200: '#91B9E3', + 300: '#5090D3', + 400: '#265D97', + 500: '#1E4976', + 600: '#173A5E', + 700: '#132F4C', + 800: '#001E3C', + 900: '#0A1929', +}; + +const grey = { + 50: '#F3F6F9', + 100: '#EAEEF3', + 200: '#E5E8EC', + 300: '#D7DCE1', + 400: '#BFC7CF', + 500: '#AAB4BE', + 600: '#96A3B0', + 700: '#8796A5', + 800: '#5A6978', + 900: '#3D4752', +}; + +export default function ViewToggleButton() { + const [lang, setLang] = React.useState('javascript'); + /* + * Note: this demo use `theme.palette.mode` from `useTheme` to make dark mode works in the documentation only. + * + * Normally, you would implement dark mode via internal state and/or system preference at the root of the application. + * For more detail about toggling dark mode: https://next.material-ui.com/customization/palette/#toggling-color-mode + */ + const globalTheme = useTheme(); + const mode = globalTheme.palette.mode; + + const theme = React.useMemo( + () => + createTheme({ + palette: { + mode, + primary, + divider: mode === 'dark' ? primaryDark[500] : grey[200], + grey, + }, + typography: { + fontFamily: ['-apple-system', 'BlinkMacSystemFont', 'sans-serif'].join( + ',', + ), + }, + shape: { + borderRadius: 10, + }, + components: { + MuiButtonBase: { + defaultProps: { + disableTouchRipple: true, + }, + }, + MuiToggleButtonGroup: { + styleOverrides: { + root: { + backgroundColor: mode === 'dark' ? primaryDark[800] : '#fff', + }, + }, + }, + MuiToggleButton: { + styleOverrides: { + root: { + textTransform: 'none', + fontWeight: 600, + color: grey[700], + borderColor: mode === 'dark' ? primaryDark[500] : grey[200], + '&.Mui-selected': { + borderColor: `${primary[500]} !important`, + color: mode === 'dark' ? '#fff' : primary[500], + backgroundColor: mode === 'dark' ? primary[800] : primaryDark[50], + }, + }, + }, + }, + }, + }), + [mode], + ); + + return ( + + setLang(value)} + aria-label="language" + > + Javascript + HTML + CSS + + + ); +} diff --git a/docs/src/pages/components/toggle-button/ThemeToggleButton.tsx b/docs/src/pages/components/toggle-button/ThemeToggleButton.tsx new file mode 100644 index 00000000000000..e84ac0e47254c0 --- /dev/null +++ b/docs/src/pages/components/toggle-button/ThemeToggleButton.tsx @@ -0,0 +1,120 @@ +import * as React from 'react'; +import { ThemeProvider, createTheme, useTheme } from '@material-ui/core/styles'; +import ToggleButton from '@material-ui/core/ToggleButton'; +import ToggleButtonGroup from '@material-ui/core/ToggleButtonGroup'; + +const primary = { + 50: '#F0F7FF', + 100: '#C2E0FF', + 200: '#80BFFF', + 300: '#66B2FF', + 400: '#3399FF', + 500: '#007FFF', + 600: '#0072E5', + 700: '#0059B2', + 800: '#004C99', + 900: '#003A75', +}; +const primaryDark = { + 50: '#E2EDF8', + 100: '#CEE0F3', + 200: '#91B9E3', + 300: '#5090D3', + 400: '#265D97', + 500: '#1E4976', + 600: '#173A5E', + 700: '#132F4C', + 800: '#001E3C', + 900: '#0A1929', +}; +const grey = { + 50: '#F3F6F9', + 100: '#EAEEF3', + 200: '#E5E8EC', + 300: '#D7DCE1', + 400: '#BFC7CF', + 500: '#AAB4BE', + 600: '#96A3B0', + 700: '#8796A5', + 800: '#5A6978', + 900: '#3D4752', +}; + +export default function ViewToggleButton() { + const [lang, setLang] = React.useState('javascript'); + /* + * Note: this demo use `theme.palette.mode` from `useTheme` to make dark mode works in the documentation only. + * + * Normally, you would implement dark mode via internal state and/or system preference at the root of the application. + * For more detail about toggling dark mode: https://next.material-ui.com/customization/palette/#toggling-color-mode + */ + const globalTheme = useTheme(); + const mode = globalTheme.palette.mode; + + const theme = React.useMemo( + () => + createTheme({ + palette: { + mode, + primary, + divider: mode === 'dark' ? primaryDark[500] : grey[200], + grey, + }, + typography: { + fontFamily: ['-apple-system', 'BlinkMacSystemFont', 'sans-serif'].join( + ',', + ), + }, + shape: { + borderRadius: 10, + }, + components: { + MuiButtonBase: { + defaultProps: { + disableTouchRipple: true, + }, + }, + MuiToggleButtonGroup: { + styleOverrides: { + root: { + backgroundColor: mode === 'dark' ? primaryDark[800] : '#fff', + }, + }, + }, + MuiToggleButton: { + styleOverrides: { + root: { + textTransform: 'none', + fontWeight: 600, + color: grey[700], + borderColor: mode === 'dark' ? primaryDark[500] : grey[200], + '&.Mui-selected': { + borderColor: `${primary[500]} !important`, + color: mode === 'dark' ? '#fff' : primary[500], + backgroundColor: mode === 'dark' ? primary[800] : primaryDark[50], + }, + }, + }, + }, + }, + }), + [mode], + ); + + return ( + + setLang(value)} + aria-label="language" + > + Javascript + HTML + CSS + + + ); +} diff --git a/docs/src/pages/components/toggle-button/ViewToggleButton.js b/docs/src/pages/components/toggle-button/ViewToggleButton.js index 4bb863b6b8817c..f4e8e13782bebe 100644 --- a/docs/src/pages/components/toggle-button/ViewToggleButton.js +++ b/docs/src/pages/components/toggle-button/ViewToggleButton.js @@ -75,7 +75,7 @@ export default function ViewToggleButton() { palette: { mode, primary, - divider: mode === 'dark' ? primaryDark[400] : grey[200], + divider: mode === 'dark' ? primaryDark[500] : grey[200], grey, }, typography: { @@ -95,7 +95,7 @@ export default function ViewToggleButton() { MuiToggleButtonGroup: { styleOverrides: { root: { - backgroundColor: mode === 'dark' ? primaryDark[700] : '#fff', + backgroundColor: mode === 'dark' ? primaryDark[800] : '#fff', }, }, }, From 2310e39f000ae96e5778ee1a56c0ea7071ba45fa Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 11 Aug 2021 16:40:33 +0700 Subject: [PATCH 024/101] refactor hero section --- docs/src/components/home/Hero.tsx | 162 +++++------------- .../src/pages/components/cards/PlayerCard.tsx | 2 +- .../pages/components/switches/ThemeSwitch.js | 2 +- .../pages/components/switches/ThemeSwitch.tsx | 2 +- 4 files changed, 47 insertions(+), 121 deletions(-) diff --git a/docs/src/components/home/Hero.tsx b/docs/src/components/home/Hero.tsx index b4d24050f7ec41..201e487f25b51e 100644 --- a/docs/src/components/home/Hero.tsx +++ b/docs/src/components/home/Hero.tsx @@ -1,8 +1,10 @@ import * as React from 'react'; import Box from '@material-ui/core/Box'; +import Button from '@material-ui/core/Button'; import Container from '@material-ui/core/Container'; import Grid from '@material-ui/core/Grid'; import Typography from '@material-ui/core/Typography'; +import Stack from '@material-ui/core/Stack'; import GradientText from 'docs/src/components/typography/GradientText'; import PlayerCard from 'docs/src/pages/components/cards/PlayerCard'; import TaskCard from 'docs/src/pages/components/cards/TaskCard'; @@ -14,88 +16,11 @@ import FolderTable from 'docs/src/pages/components/tables/FolderTable'; import ThemeTabs from 'docs/src/pages/components/tabs/ThemeTabs'; import ThemeTimeline from 'docs/src/pages/components/timeline/ThemeTimeline'; import ViewToggleButton from 'docs/src/pages/components/toggle-button/ViewToggleButton'; +import ThemeToggleButton from 'docs/src/pages/components/toggle-button/ThemeToggleButton'; +import ThemeSwitch from 'docs/src/pages/components/switches/ThemeSwitch'; +import ThemeAccordion from 'docs/src/pages/components/accordion/ThemeAccordion'; import GetStartedButtons from 'docs/src/components/home/GetStartedButtons'; -const MAX_WIDTH = 1000; -const SPAN_SIZE = 10; -const GAP = 0; -const GUTTER = 30; -const grid = [ - { - ui: , - width: 330, - height: 280, - sx: { - '& > .MuiCard-root': { - height: '100%', - width: '100%', - maxWidth: '100%', - }, - }, - }, - { - ui: , - width: 320, - height: 380, - }, - { - width: MAX_WIDTH - (320 + GUTTER) - (320 + GUTTER), - height: 388, - }, - { - ui: , - width: 70, - height: 180, - }, - { - ui: , - width: 180, - height: 70, - sx: { alignSelf: 'flex-end' }, - }, - { - width: MAX_WIDTH - (320 + GUTTER) - (320 + GUTTER), - height: 135, - }, - { - ui: , - width: 220, - height: 32, - sx: { alignSelf: 'center' }, - }, - { - ui: , - width: 313, - height: 119, - }, - { - ui: , - width: 310, - height: 50, - }, - { - ui: , - width: 379, - height: 100, - }, - { - ui: , - width: 260, - height: 188, - }, - { - ui: , - width: 270, - height: 160, - }, -]; - -function getSpan(value: number) { - // x * SPAN_SIZE + (x - 1) * GAP = width - // x * (SPAN_SIZE + GAP) = width + GAP - return Math.ceil((value + GAP) / (SPAN_SIZE + GAP)); -} - export default function Hero() { return ( @@ -133,7 +58,6 @@ export default function Hero() { sx={{ maxHeight: '100%', display: { xs: 'none', md: 'initial' } }} >