Merge pull request mui#14 from oliviertassinari/polish-demo

Polish demo
mbrookes · Nov 6, 2020 · a9ca97f · a9ca97f
2 parents 18752f5 + af31b6c
commit a9ca97f
Show file tree

Hide file tree

Showing 4 changed files with 104 additions and 271 deletions.
diff --git a/docs/public/static/images/system/demo.jpg b/docs/public/static/images/system/demo.jpg
diff --git a/docs/src/pages/system/basics/Demo.js b/docs/src/pages/system/basics/Demo.js
@@ -1,162 +1,67 @@
 import * as React from 'react';
-import PropTypes from 'prop-types';
 import Box from '@material-ui/core/Box';
+import { alpha } from '@material-ui/core/styles';
+import ErrorIcon from '@material-ui/icons/Error';
 
-const CardHeader = (props) => {
-  const imgSize = [60, 90, 90, 120, 150];
+export default function Demo() {
   return (
     <Box
-      className="CardHeader"
       sx={{
-        display: 'inline-flex',
+        display: 'flex',
+        flexDirection: { xs: 'column', md: 'row' },
         alignItems: 'center',
-        justifContent: 'center',
-        bgcolor: `${props.color}.main`,
-        width: ['100%', '100%', '200px', '300px', '400px'],
-        height: ['100px', '200px', '100%', '100%', '100%'],
+        bgcolor: 'background.paper',
+        overflow: 'hidden',
+        borderRadius: '12px',
+        boxShadow: 1,
+        fontWeight: 'fontWeightBold',
       }}
     >
-      <Box
-        {...props}
-        component="img"
-        sx={{
-          border: 2,
-          borderColor: 'white',
-          display: 'block',
-          position: 'relative',
-          height: imgSize,
-          width: imgSize,
-          margin: 'auto',
-          borderRadius: '50%',
-          ...props.sx,
-        }}
+      <Img
+        sx={{ width: '100%', maxWidth: { xs: 350, md: 250 } }}
+        alt="The house from the offer."
+        src="https://images.unsplash.com/photo-1512917774080-9991f1c4c750?auto=format&fit=crop&w=400&dpr=2"
       />
-    </Box>
-  );
-};
-
-CardHeader.propTypes = {
-  color: PropTypes.oneOf([
-    'error',
-    'info',
-    'primary',
-    'secondary',
-    'success',
-    'warning',
-  ]),
-  sx: PropTypes.object,
-};
-
-const CardContent = (props) => {
-  return (
-    <Box
-      {...props}
-      sx={{
-        display: 'inline-block',
-        px: 1,
-        py: 2,
-        ...props.sx,
-      }}
-    >
-      <Box
-        className="CardContent-header"
-        sx={{
-          fontSize: [12, 14, 16, 18, 20],
-          fontWeight: [400, 400, 400, 500, 600],
-          color: `${props.color}.main`,
-          my: [1, 1, 2, 2, 2],
-        }}
-      >
-        {props.header}
-      </Box>
       <Box
         sx={{
-          fontSize: [10, 12, 14, 16, 18],
-          fontWeight: [400, 400, 400, 500, 600],
-          color: 'grey',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: { xs: 'center', md: 'flex-start' },
+          m: 3,
+          minWidth: { md: 350 },
         }}
       >
-        {props.description}
+        <Box component="span" sx={{ fontSize: 16, mt: 1 }}>
+          123 Main St, Pheonix AZ
+        </Box>
+        <Box component="span" sx={{ color: 'primary.main', fontSize: 22 }}>
+          $280,000 — $310,000
+        </Box>
+        <Box
+          sx={{
+            mt: 1.5,
+            p: 0.5,
+            backgroundColor: (theme) => alpha(theme.palette.primary.main, 0.1),
+            borderRadius: '5px',
+            color: 'primary.main',
+            fontWeight: 'fontWeightMedium',
+            display: 'flex',
+            fontSize: 12,
+            alignItems: 'center',
+            '& svg': {
+              fontSize: 21,
+              mr: 0.5,
+            },
+          }}
+        >
+          <ErrorIcon />
+          {'CONFIDENCE SCORE 85%'}
+        </Box>
       </Box>
     </Box>
   );
-};
-
-CardContent.propTypes = {
-  color: PropTypes.oneOf([
-    'error',
-    'info',
-    'primary',
-    'secondary',
-    'success',
-    'warning',
-  ]),
-  description: PropTypes.string,
-  header: PropTypes.string,
-  sx: PropTypes.object,
-};
-
-const Card = (props) => {
-  const {
-    color = 'primary',
-    profileImage,
-    header,
-    description,
-    sx,
-    ...rest
-  } = props;
-  return (
-    <Box
-      {...rest}
-      sx={{
-        display: 'flex',
-        flexDirection: ['column', 'column', 'row', 'row', 'row'],
-        width: [100, 200, 300, 400, 500],
-        border: 1,
-        borderColor: 'lightgrey',
-        borderRadius: '5px',
-        boxShadow: 3,
-        minHeight: [150, 100, 200, 300, 300],
-        ':hover': {
-          '& .CardHeader': {
-            bgcolor: `${props.color}.dark`,
-          },
-          '& .CardContent-header': {
-            color: `${props.color}.dark`,
-          },
-          boxShadow: 6,
-        },
-        ...sx,
-      }}
-    >
-      <CardHeader color={color} src={profileImage} alt={header} />
-      <CardContent color={color} header={header} description={description} />
-    </Box>
-  );
-};
-
-Card.propTypes = {
-  color: PropTypes.oneOf([
-    'error',
-    'info',
-    'primary',
-    'secondary',
-    'success',
-    'warning',
-  ]),
-  description: PropTypes.string.isRequired,
-  header: PropTypes.string,
-  profileImage: PropTypes.string,
-  sx: PropTypes.object,
-};
+}
 
-export default function Demo() {
-  return (
-    <Card
-      color="success"
-      profileImage="/static/images/cards/contemplative-reptile.jpg"
-      header="Contemplative Reptile"
-      description="This reptile is thinking about the future of our planet..."
-    />
-  );
+function Img(props) {
+  return <Box component="img" {...props} />;
 }