1. modified lean cards

z · z · commit 0d38481f6cab · 2017-11-29T08:17:00.000+05:30
2. changed time icon to calendar in events
3. fluid prop to button added
diff --git a/components/events/event-card.js b/components/events/event-card.js
@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'react-emotion';
 import { space, fontSize } from 'styled-system';
 import { Flex, Box } from 'grid-emotion';
-import TimeIcon from 'react-icons/lib/md/access-time';
+import TimeIcon from 'react-icons/lib/fa/calendar';
 import format from 'date-fns/format';
 import LocationIcon from 'react-icons/lib/md/location-on';
 import AttendeesIcon from 'react-icons/lib/md/people';
diff --git a/components/learn/subject-card.js b/components/learn/subject-card.js
@@ -1,46 +1,63 @@
 import React from 'react';
 import styled from 'react-emotion';
+import { Flex, Box } from 'grid-emotion';
 import Link from 'next/link';
+import LearningIcon from 'react-icons/lib/fa/book';
+import EstimateIcon from 'react-icons/lib/md/access-time';
 
-import { breakpoints } from '../../utils/base.styles';
+import { breakpoints, Button } from '../../utils/base.styles';
 
-const Subject = styled.a`
+const SubjectCard = styled.div`
   text-decoration: none;
-  width: calc(33.33% - 40px);
-  margin: 20px;
+  width: calc(25% - 40px);
+  margin-top: 20px;
   display: inline-block;
   min-height: 200px;
-  background: #fff;
+  background: #fafafa;
   border: 1px solid #b9b9b9;
   transition: all 0.25s;
-  cursor: pointer;
-  &:hover {
-    border: 1px solid #000;
-  }
-  & .icon {
+  & .logo {
+    text-align: center;
     padding: 10px 15px;
     font-size: 10rem;
     ${breakpoints.xs} {
       font-size: 8rem;
     }
   }
   & .content {
-    padding: 10px 0 10px 30px;
+    padding: 10px;
     color: #444;
-    background: #f6f6f6;
+    background: #fff;
     text-align: left;
   }
   & .title {
     font-size: 1.5rem;
     font-size: 600;
     color: #222;
+    padding-bottom: 0.4rem;
     ${breakpoints.xs} {
       font-size: 1.2rem;
     }
   }
   & .subtitle {
     font-size: 0.8rem;
-    color: #444;
+    color: #8393a7;
+    padding-bottom: 0.4rem;
+  }
+  & .stats {
+    color: #8393a7;
+    font-size: 0.8rem;
+    padding-bottom: 0.4rem;
+  }
+  & .icons {
+    font-size: 1.1rem;
+    margin-right: 0.25rem;
+    color: #8393a7;
+  }
+  & .view {
+    width: 100%;
+    display: flex;
+    text-align: center;
   }
   ${breakpoints.md} {
     width: calc(50% - 40px);
@@ -56,15 +73,30 @@ const Subject = styled.a`
 `;
 
 export default ({ subject }) => (
-  <Link href={`/learn/subject?id=${subject.subjectId}`} as={subject.url}>
-    <Subject href={subject.url}>
-      <div className="icon">
-        <i className={subject.icon} />
-      </div>
-      <div className="content">
-        <div className="title">{subject.title}</div>
-        <div className="subtitle">{subject.domain}</div>
+  <SubjectCard>
+    <div className="logo">
+      <i className={subject.icon} />
+    </div>
+    <div className="content">
+      <div className="title">{subject.title}</div>
+      <div className="subtitle">{subject.domain}</div>
+      <Flex className="stats">
+        <Box pr={1}>
+          <LearningIcon className="icons" />
+          20 learning
+        </Box>
+        <Box>
+          <EstimateIcon className="icons" />
+          20 hours
+        </Box>
+      </Flex>
+    </div>
+    <Link href={`/learn/subject?id=${subject.subjectId}`} as={subject.url}>
+      <div className="view">
+        <Button inverted small fluid href={subject.url}>
+          VIEW GUIDE
+        </Button>
       </div>
-    </Subject>
-  </Link>
+    </Link>
+  </SubjectCard>
 );
diff --git a/pages/learn/index.js b/pages/learn/index.js
@@ -6,31 +6,43 @@ import { space } from 'styled-system';
 import Layout from '../../components/common/layout';
 import BannerSection from '../../components/common/banner';
 import SubjectCard from '../../components/learn/subject-card';
-import { Container } from '../../utils/base.styles';
+import { baseContainer, graySecondary } from '../../utils/base.styles';
 import { listOfSubjects } from '../../utils/mock-data';
 
-const SubjectsSection = styled.section`
+const LearnSection = styled.section`
   ${space};
-  background: #fff;
-  text-align: center;
+  ${baseContainer};
   position: relative;
 `;
 
+const FilterContainer = styled.div`
+  ${space};
+  border-bottom: 1px solid ${graySecondary};
+  & .title_filter {
+    text-align: center;
+  }
+  & .title_fitler_by {
+    font-weight: 400;
+  }
+`;
+
 export default () => (
   <Layout>
     <BannerSection
       textInverted
       title="Open Source Learning Guides"
       subTitle="Open Source Learning Guides to master your favorite technology"
     />
-    <SubjectsSection py={[2, 4]} px={[2, 1]}>
-      <Container>
-        <Flex justify="center" align="center" wrap>
-          {listOfSubjects.map(subject => {
-            return <SubjectCard key={subject.url} subject={subject} />;
-          })}
-        </Flex>
-      </Container>
-    </SubjectsSection>
+    <LearnSection py={[2, 3]} px={[2, 1]}>
+      <FilterContainer my={[1, 2]}>
+        <h3 className="title_filter">Available Guides</h3>
+        <h4 className="title_fitler_by">Filter by domain :</h4>
+      </FilterContainer>
+      <Flex justify="space-between" align="center" wrap>
+        {listOfSubjects.map(subject => {
+          return <SubjectCard key={subject.url} subject={subject} />;
+        })}
+      </Flex>
+    </LearnSection>
   </Layout>
 );
diff --git a/utils/base.styles.js b/utils/base.styles.js
@@ -52,6 +52,7 @@ export const baseButton = css`
 
 export const Button = styled.a`
   ${baseButton};
+  width: ${props => (props.fluid ? '100%' : 'auto')}
   background: ${props => (props.inverted ? '#7657fb' : props.ghost ? '#fff' : '#fff')}
   color: ${props => (props.inverted ? '#fff' : props.ghost ? purpleSecondary : '#222')}
   padding: ${props =>
