feat(card): fix card design

abedzantout · abedzantout · commit c3c239172aeb · 2019-09-16T15:17:04.000+03:00
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -31,7 +31,8 @@ const IndexPage: NextPage = (props: Props) => {
 
             <style jsx>
                 {`
-                .cards-deck { display: grid; grid-column-gap: 1rem; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: auto;}`
+                .cards-deck { display: grid; grid-column-gap: 1rem; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: auto; rid-row-gap: 1rem;}
+                `
                 }
             </style>
         </Layout>
diff --git a/shared/components/card/index.tsx b/shared/components/card/index.tsx
@@ -7,27 +7,29 @@ const Card: FunctionComponent<Props> = ({info}) => {
     return (
         <Fragment>
             <div className="card">
-                <div className="card-header">
-
-                </div>
-
+                <div className="card-header"/>
                 <div className="card-body">
                     <h3>{info.title}</h3>
                     <p>{info.description}</p>
                 </div>
 
                 <div className="card-actions">
+                    <button className="card-actions__button">Explore</button>
                 </div>
             </div>
             <style jsx>{`
                 .card { height: 400px; width: 340px; background: #FFFFFF; box-shadow: 0 20px 20px 0 rgba(0,0,0,0.07); border-radius: 4px; overflow: hidden; };
+                .card:hover { box-shadow:0 40px 40px 0 rgba(0,0,0,0.2); cursor: pointer; }
                 .card-header {
                     height: 40%;
                     background-image: url(${info.heroImage}); 
-                    background: linear-gradient(248deg, rgba(27,21,140,0.56) 0%, rgba(50,176,201,0.56) 100%), url(${info.heroImage}) no-repeat;
+                    background: linear-gradient(45deg, rgba(18, 40, 76, 0.56), rgba(39, 173, 213, 0.56), rgba(79, 192, 176, 0.56)), url(${info.heroImage}) no-repeat;
                     background-size: 100%;
                 };
                 .card-body {padding: 1rem;};
+                .card-actions {display: flex; justify-content: center;};
+                .card-actions__button {background-image: linear-gradient(90deg, #0CB2E2 0%, #4FC0B0 100%); border-radius: 2px; color: #ffffff; padding: 1rem 4rem; border: none;};
+                .card-actions__button:hover {cursor: pointer};
             `}
             </style>
         </Fragment>

Original file line number	Diff line number	Diff line change
`@@ -31,7 +31,8 @@ const IndexPage: NextPage = (props: Props) => {`
`31`	`31`
`32`	`32`	`<style jsx>`
`33`	`33`	{`
`34`		- .cards-deck { display: grid; grid-column-gap: 1rem; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: auto;}`
	`34`	`+ .cards-deck { display: grid; grid-column-gap: 1rem; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: auto; rid-row-gap: 1rem;}`
	`35`	+ `
`35`	`36`	`}`
`36`	`37`	`</style>`
`37`	`38`	`</Layout>`