From cc23412c74107d24b1c4c3a25feaa23f5b027c03 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Wed, 20 Jan 2021 23:54:54 +0100 Subject: [PATCH 1/3] [branding] Add Join Us block --- docs/pages/branding/about.tsx | 373 ++++++++++-------- .../modules/branding/BrandingBeginToday.tsx | 1 - docs/src/modules/branding/BrandingFooter.tsx | 9 +- docs/src/modules/branding/BrandingRoot.tsx | 15 - 4 files changed, 207 insertions(+), 191 deletions(-) diff --git a/docs/pages/branding/about.tsx b/docs/pages/branding/about.tsx index 7d0d0d98fa68e4..c3fb8cd084c625 100644 --- a/docs/pages/branding/about.tsx +++ b/docs/pages/branding/about.tsx @@ -2,9 +2,11 @@ import * as React from 'react'; import Container from '@material-ui/core/Container'; import Typography from '@material-ui/core/Typography'; import Grid from '@material-ui/core/Grid'; -import Link from '@material-ui/core/Link'; +import Link from 'docs/src/modules/components/Link'; import Button from '@material-ui/core/Button'; +import Box from '@material-ui/core/Box'; import QuestionAnswerIcon from '@material-ui/icons/QuestionAnswer'; +import NavigateNextIcon from '@material-ui/icons/NavigateNext'; import BrandingCard from 'docs/src/modules/branding/BrandingCard'; import UnderlinedText from 'docs/src/modules/branding/UnderlinedText'; import FeedbackIcon from 'docs/src/modules/branding/icons/Feedback'; @@ -16,132 +18,191 @@ import BrandingRoot from 'docs/src/modules/branding/BrandingRoot'; import BrandingBeginToday from 'docs/src/modules/branding/BrandingBeginToday'; import BrandingDiscoverMore from 'docs/src/modules/branding/BrandingDiscoverMore'; -export default function Page() { +function BrandingJoinUs() { return ( - - - - Material-UI is awesome. -
- How can I support the project? + + + + + Join our team of creators & innovators - There are many ways to support Material-UI: - - - } title="Spread the word"> - - Evangelize Material-UI by linking to{' '} - material-ui.com on your website, every - backlink matters! Follow us on{' '} - Twitter, like and retweet the - important news. Or just talk about us with your friends. - - - - - } - title="Give us feedback" - > - - Tell us what we're doing well or where we can improve. Please upvote ( - - 👍 - - ) the issues that you are the most interested in seeing solved.{' '} - - Give us feedback + + If you love the challenge of doing things differently, empowering creativity, and making + real connections along the way–then this may be the place for you. + + + + + ); +} + +function BrandingSupportUs() { + return ( + + + Material-UI is awesome. +
+ How can I support the project? + + There are many ways to support Material-UI: + + + } title="Spread the word"> + + Evangelize Material-UI by linking to{' '} + material-ui.com on your website, every + backlink matters! Follow us on{' '} + Twitter, like and retweet the + important news. Or just talk about us with your friends. + + + + + } + title="Give us feedback" + > + + Tell us what we're doing well or where we can improve. Please upvote ( + + đź‘Ť + + ) the issues that you are the most interested in seeing solved.{' '} + + Give us feedback + + + + + + } + title="Make changes happen" + sx={{ + ul: { + position: 'relative', + ml: 0, + pl: '1.3em', + }, + 'ul li:before': { + content: '"-"', + position: 'absolute', + left: 0, + }, + }} + > +
    +
  • + Edit the documentation. Every page has an "EDIT THIS PAGE" link in the top + right. +
    • +
  • + Report bugs or missing features by{' '} + creating an issue. +
    • +
  • + Review and comment on existing{' '} + pull requests and{' '} + issues. +
    • +
  • + Help translate the + documentation. +
    • +
  • + + Improve our documentation - - - - - } - title="Make changes happen" - sx={{ - ul: { - position: 'relative', - ml: 0, - pl: '1.3em', - }, - 'ul li:before': { - content: '"-"', - position: 'absolute', - left: 0, - }, - }} - > -
      -
    • - Edit the documentation. Every page has an "EDIT THIS PAGE" link in the - top right. -
      • -
    • - Report bugs or missing features by{' '} - - creating an issue - - . -
      • -
    • - Review and comment on existing{' '} - pull requests and{' '} - issues. -
      • -
    • - Help translate the - documentation. -
      • -
    • - - Improve our documentation - - , fix bugs, or add features by{' '} - - submitting a pull request - - . -
      • -
    -     -     - - } title="Support us financially"> - - If you use Material-UI in a commercial project and would like to support its - continued development by becoming a Sponsor, or in a side or hobby project and would - like to become a Backer, you can do so through OpenCollective. - - - All funds donated are managed transparently, and Sponsors receive recognition in the - README and on the Material-UI home page. - - - - - - } title="Help new users"> - - You can answer questions on{' '} - - StackOverflow + , fix bugs, or add features by{' '} + + submitting a pull request . - - - +
    • +
+ - + + } title="Support us financially"> + + If you use Material-UI in a commercial project and would like to support its continued + development by becoming a Sponsor, or in a side or hobby project and would like to + become a Backer, you can do so through OpenCollective. + + + All funds donated are managed transparently, and Sponsors receive recognition in the + README and on the Material-UI home page. + + + + + + } title="Help new users"> + + You can answer questions on{' '} + + StackOverflow + + . + + + + + + ); +} + +export default function Page() { + return ( + + + @@ -157,7 +218,6 @@ export default function Page() { // import CardHeader from '@material-ui/core/CardHeader'; // import CardContent from '@material-ui/core/CardContent'; // import Avatar from '@material-ui/core/Avatar'; -// import NavigateNextIcon from '@material-ui/icons/NavigateNext'; // import { experimentalStyled as styled } from '@material-ui/core/styles'; // import QuestionAnswerIcon from '@material-ui/icons/QuestionAnswer'; // import Quote from 'docs/src/modules/branding/Quote'; @@ -365,13 +425,13 @@ export default function Page() { // justifyContent="center" // > // -// +// // We're on a mission to make building UIs with{' '} // React fun. // // // -// +// // Material-UI started back in 2014 to unify{' '} // React and{' '} // Material Design. @@ -459,17 +519,17 @@ export default function Page() { // // // -// +// // Our mission // // // -// +// // Our company is focused on making React UI development faster, simpler, and // accessible to more people. We build open source and commercial tools used by over // two millions developers in production. // -// +// // We're proud not only of the products we make, but also the community and // partnerships we've cultivated with other developers and companies. // @@ -499,7 +559,7 @@ export default function Page() { // top: { xs: 'calc(100% - 60px)', md: 'calc(100% - 80px)' }, // }} // /> -// +// // Our values // // Transparency, most of our work is public @@ -512,7 +572,7 @@ export default function Page() { // // -// +// // Our vision is to provide material to build UIs. We // have an elegant React implementation of the Material Design guidelines that can be // customized to fully match your brand. @@ -530,7 +590,7 @@ export default function Page() { // /> // // -// +// // The Material Design guidelines are an incredible starting point, but they do not // provide guidance on all aspects or needs of an application. In addition to the // guidelines-specific implementation,{' '} @@ -549,7 +609,7 @@ export default function Page() { // // -// +// // // We focus on providing all the low-level tools needed to build a rich user-interface // with React. @@ -589,7 +649,7 @@ export default function Page() { // // // -// +// // From a developer's point of view, we want Material-UI to: // // Deliver on fully encapsulated/composable React components, @@ -616,7 +676,7 @@ export default function Page() { // }} // /> // -// +// // Team // // @@ -642,12 +702,12 @@ export default function Page() { // }} // /> // -// +// // Company // // // -// +// // The development of the project and its ecosystem is guided by an international team. // // @@ -732,12 +792,12 @@ export default function Page() { // }} // /> // -// +// // Community contributors // // // -// +// // Some members of the community have so enriched it, that they deserve special mention. // // @@ -802,12 +862,12 @@ export default function Page() { // // -// +// // Community Emeriti // // // -// +// // We honor some no-longer-active core team members who have made valuable contributons // in the past. They advise us from time-to-time. // @@ -903,38 +963,3 @@ export default function Page() { // // // - -// -// -// -// -// Join our team of creators & innovators -// -// - -// -// -// If you love the challenge of doing things differently, empowering creativity, and -// making real connections along the way–then this may be the place for you. -// -// - -// -// -// -// -// -// diff --git a/docs/src/modules/branding/BrandingBeginToday.tsx b/docs/src/modules/branding/BrandingBeginToday.tsx index 70838528c37523..08e2f9e08ad817 100644 --- a/docs/src/modules/branding/BrandingBeginToday.tsx +++ b/docs/src/modules/branding/BrandingBeginToday.tsx @@ -52,7 +52,6 @@ export default function BrandingBeginToday() { position: 'absolute', right: 0, top: 'calc(100% - 81px)', - zIndex: 200, visibility: ['hidden', 'visible'], }} /> diff --git a/docs/src/modules/branding/BrandingFooter.tsx b/docs/src/modules/branding/BrandingFooter.tsx index 8e2add5758072c..8dc9c29266d804 100644 --- a/docs/src/modules/branding/BrandingFooter.tsx +++ b/docs/src/modules/branding/BrandingFooter.tsx @@ -207,16 +207,23 @@ export default function BrandingFooter() { target="_blank" href="https://github.com/mui-org/material-ui" aria-label="github" + title="GitHub" > - + diff --git a/docs/src/modules/branding/BrandingRoot.tsx b/docs/src/modules/branding/BrandingRoot.tsx index bd3552c7c684ea..6346a0e1274b52 100644 --- a/docs/src/modules/branding/BrandingRoot.tsx +++ b/docs/src/modules/branding/BrandingRoot.tsx @@ -238,21 +238,6 @@ theme = createMuiTheme(theme, { }, }, }, - { - props: { variant: 'contained', color: 'secondary' }, - style: { - '&:hover': { - backgroundColor: darken(theme.palette.secondary.main, 0.15), - // Reset on touch devices, it doesn't add specificity - '@media (hover: none)': { - backgroundColor: theme.palette.secondary.main, - }, - }, - '&:active': { - backgroundColor: darken(theme.palette.secondary.main, 0.3), - }, - }, - }, { props: { size: 'small' }, style: { From 7e28197ee31369071d3c9849f98fa12a4f1d8e49 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Thu, 21 Jan 2021 00:12:36 +0100 Subject: [PATCH 2/3] remove alt --- docs/pages/branding/about.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/pages/branding/about.tsx b/docs/pages/branding/about.tsx index c3fb8cd084c625..d556f85be119c2 100644 --- a/docs/pages/branding/about.tsx +++ b/docs/pages/branding/about.tsx @@ -31,7 +31,7 @@ function BrandingJoinUs() { // @@ -501,7 +501,7 @@ export default function Page() { // Date: Thu, 21 Jan 2021 19:10:59 +0100 Subject: [PATCH 3/3] reduce lag feeling --- docs/src/modules/branding/BrandingRoot.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/src/modules/branding/BrandingRoot.tsx b/docs/src/modules/branding/BrandingRoot.tsx index 6346a0e1274b52..1eb3d7a426ca14 100644 --- a/docs/src/modules/branding/BrandingRoot.tsx +++ b/docs/src/modules/branding/BrandingRoot.tsx @@ -208,14 +208,14 @@ theme = createMuiTheme(theme, { boxShadow: `0 0 0 0.25rem ${alpha(theme.palette.greyD7, 0.5)}`, }, '&:hover': { - backgroundColor: darken(theme.palette.greyD7, 0.1), + backgroundColor: darken(theme.palette.greyD7, 0.07), // Reset on touch devices, it doesn't add specificity '@media (hover: none)': { backgroundColor: theme.palette.greyD7, }, }, '&:active': { - backgroundColor: darken(theme.palette.greyD7, 0.2), + backgroundColor: darken(theme.palette.greyD7, 0.18), }, }, }, @@ -227,14 +227,14 @@ theme = createMuiTheme(theme, { boxShadow: `0 0 0 0.25rem ${alpha(theme.palette.primary.main, 0.5)}`, }, '&:hover': { - backgroundColor: darken(theme.palette.primary.main, 0.15), + backgroundColor: darken(theme.palette.primary.main, 0.12), // Reset on touch devices, it doesn't add specificity '@media (hover: none)': { backgroundColor: theme.palette.primary.main, }, }, '&:active': { - backgroundColor: darken(theme.palette.primary.main, 0.3), + backgroundColor: darken(theme.palette.primary.main, 0.25), }, }, },