feat: masonary

packages/metavinci/src/components/ArtCard/index.less

@@ -1,7 +1,6 @@
 
 .art-card {
   min-width: 200px;
-  max-width: 300px;
   margin-top: 30px;
   filter: drop-shadow(0px 2px 6px rgba(0, 0, 0, 0.1));
   border-radius: 8px;
@@ -29,4 +28,11 @@
     font-size: 20px;
     font-weight: 600;
   }
+
+}
+
+.small {
+  max-width: 300px;
+  margin-left: auto;
+  margin-right: auto;
 }

packages/metavinci/src/components/ArtCard/index.tsx

@@ -14,6 +14,7 @@ export const ArtCard = ({
   description,
   artist,
   preview,
+  small,
 }: {
   image?: string;
   category?: MetadataCategory
@@ -22,11 +23,12 @@ export const ArtCard = ({
   description?: string;
   artist?: string;
   preview?: boolean;
+  small?: boolean
 }) => {
   return (
     <Card
       hoverable={true}
-      className="art-card"
+      className={`art-card ${small ? 'small' : ''}`}
       cover={<ArtContent category={category} content={image} />}
     >
       <Meta

packages/metavinci/src/views/artCreate/index.tsx

@@ -278,6 +278,7 @@ const InfoStep = (props: {
               category={props.attributes.category}
               name={props.attributes.name}
               symbol={props.attributes.symbol}
+              small={true}
             />
           )}
         </Col>
@@ -368,6 +369,7 @@ const RoyaltiesStep = (props: {
               category={props.attributes.category}
               name={props.attributes.name}
               symbol={props.attributes.symbol}
+              small={true}
             />
           )}
         </Col>
@@ -465,6 +467,7 @@ const LaunchStep = (props: {
               category={props.attributes.category}
               name={props.attributes.name}
               symbol={props.attributes.symbol}
+              small={true}
             />
           )}
         </Col>

packages/metavinci/src/views/home/index.less

@@ -42,7 +42,11 @@ a:active {
   display: -ms-flexbox; /* Not needed if autoprefixing */
   display: flex;
   width: auto;
+  margin-left: auto;
+  margin-right: auto;
+  margin-left: -30px;
 }
+
 .my-masonry-grid_column {
   padding-left: 30px; /* gutter size */
   background-clip: padding-box;

packages/metavinci/src/views/home/index.tsx

@@ -31,7 +31,7 @@ export const HomeView = () => {
       <Layout>
         <Content style={{ display: 'flex', flexWrap: 'wrap' }}>
           <Col style={{ width: '100%' }}>
-            <Row style={{ marginBottom: 30, marginTop: 20, fontSize: 20, fontWeight: 600 }}>Featured</Row>
+            <Row style={{ marginTop: 20, fontSize: 20, fontWeight: 600 }}>Featured</Row>
             <Row>
               <Masonry
                 breakpointCols={breakpointColumnsObj}