ActionCard and HelpCard updates

src/assets/icons/exclamation.js

@@ -0,0 +1,17 @@
+import React from 'react'
+
+const exclamation = () => (
+	<svg
+		width="100%"
+		height="100%"
+		viewBox="0 0 50 50"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<circle cx="25" cy="25" r="25" fill="currentColor" />
+		<rect x="21" y="8" width="8" height="21" rx="4" fill="white" />
+		<rect x="21" y="34" width="8" height="8" rx="4" fill="white" />
+	</svg>
+)
+
+export default exclamation

src/components/Student/Activity/Activity.js

@@ -1,12 +1,15 @@
 import React from 'react';
 import HelpCard from '../../../components/shared/high/HelpCard';
+import ActionCard from '../../../components/shared/high/ActionCard';
 
 const Activity = (props) => {
 
     return (
         <>
         <HelpCard type='issue' />
         <HelpCard type='feedback' />
+        <ActionCard type='resume'/>
+        <ActionCard type='start' />
         </>
     )
 }

src/components/shared/high/ActionCard.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import styled from 'styled-components';
+import resumeIcon from '../../../assets/icons/resume-pie.svg';
+import startIcon from '../../../assets/icons/start-flag.svg';
+import Icon from '../low/Icon.js';
+
+const BlueCard = styled.div`
+  text-align: center;
+  background-color: rgba(44,114,223, 0.85);
+  border-radius: 8px;
+  margin: 1em 1em;
+  padding: 4em 1em 1em;
+  max-width: 600px;
+`
+
+const WhiteIcon = styled.div`
+  color: white;
+  margin: 2em 1em 1em 1em;
+  padding: 0.25em 1em;
+`
+
+const CardText = styled.h1`
+  color: white;
+  margin: 1em 1em;
+  padding: 0.25em 1em;
+`
+
+const ActionCard = ({
+	type = 'issue',
+  onClick,
+	className
+  }) => {
+    var text, icon, size='4em';
+    if (type === 'resume'){
+      text = 'Resume Activity';
+      icon = resumeIcon;
+    } else if (type === 'start') {
+      text = 'Start Activity';
+      icon = startIcon;
+    } else {
+      // Invalid style property, you should not be here.
+    }
+
+    return (
+        <BlueCard onClick={onClick}>
+          <Icon center src={icon} height={size} width={size}></Icon>
+          <CardText>{text}</CardText>
+        </BlueCard>
+    )
+}
+
+export default ActionCard;

src/components/shared/high/HelpCard.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import styled from 'styled-components';
-import greenIcon from '../../../assets/icons/green-exclamation.png';
-import orangeIcon from '../../../assets/icons/orange-exclamation.png';
 import Button from '../low/Button.js';
 
+import ExclamationIcon from '../../../assets/icons/exclamation'
+
 const WhiteCard = styled.div`
   display: flex;
   text-align: left;
@@ -25,53 +25,50 @@ const RightColumn = styled.div`
   flex: 67%;
   padding: 0.25em 1em;
 `
-const Icon = styled.div`
-  color: white;
-  margin: 2em 1em 1em 1em;
-  padding: 0.25em 1em;
-`
 const CardText = styled.p`
   font-size: 1.1em;
   color: black;
   margin: 1em 0em;
   padding: 0.25em 0em;
-
+`
+const IconWrapper = styled.div`
+  margin: 2em auto;
+	width: 4em;
+	height: 4em;
+	color: ${props => props.color};
 `
 
 const HelpCard = ({
 	type = 'issue',
   onClick,
 	className
   }) => {
-    var title, description, btnText, btnColor, icon;
-    var width='64', height='64';
+    var title, description, btnText, color, icon;
     if (type === 'issue'){
       title = 'Raise an Issue';
       description = 'Is something unclear? Could be explained better? Raise an issue to improve the curriculum.';
       btnText = 'Raise an Issue';
-      btnColor = 'rgba(86,171,104, 1.0)';
-      icon = greenIcon;
+      color = 'rgba(86,171,104, 1.0)';
     } else if (type === 'feedback') {
       title = 'Feedback';
       description = 'Have feedback to provide? Send feedback to improve this product.';
       btnText = 'Provide Feedback';
-      btnColor = 'rgba(238,112,60, 1.0)';
-      icon = orangeIcon;
+      color = 'rgba(238,112,60, 1.0)';
     } else {
       // Invalid style property, you should not be here.
     }
 
     return (
         <WhiteCard>
           <LeftColumn>
-            <Icon>
-              <img src={icon} alt="Icon" width={width} height={height}/>
-            </Icon>
+            <IconWrapper color={color}>
+              <ExclamationIcon />
+            </IconWrapper>
           </LeftColumn>
           <RightColumn>
             <h1>{title}</h1>
             <CardText>{description}</CardText>
-            <Button dark={btnColor} invert onClick={onClick}>{btnText}</Button>
+            <Button dark={color} invert onClick={onClick}>{btnText}</Button>
           </RightColumn>
         </WhiteCard>
     )