added quiz end card ui

DashaBes · Dec 24, 2019 · d5bf737 · d5bf737
1 parent bf5b3f2
commit d5bf737
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 0 deletions.
diff --git a/src/components/core/UI/Card.react.jsx b/src/components/core/UI/Card.react.jsx
@@ -7,6 +7,7 @@ const Card = ({
   onDrop,
   onDragLeave,
   rounded,
+  small,
   transparent,
   dashed,
 }) => {
@@ -15,6 +16,7 @@ const Card = ({
       className={[
         classes.Card,
         rounded && classes.rounded,
+        small && classes.small,
         transparent && classes.transparent,
         dashed && classes.dashed
       ].join(' ')}

diff --git a/src/components/core/UI/style/Card.module.css b/src/components/core/UI/style/Card.module.css
@@ -14,6 +14,22 @@
   box-shadow: 2.5px 5px 15px rgba(0, 0, 0, 0.25);
 }
 
+.small {
+  background: #EFEFEF;
+  border: none;
+  width: 9rem;
+  height: 5rem;
+  padding: 0.5rem;
+  border-radius: 0.5rem;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  text-align: center;
+}
+.small:hover {
+  background-color: var(--color-primary);
+  border-color: var(--transparent);
+  color: var(--color-light);
+}
+
 .dashed {
   border-width: 3px;
   border-style: dashed;

diff --git a/src/quiz/Quiz.react.jsx b/src/quiz/Quiz.react.jsx
@@ -12,6 +12,7 @@ import Timer from '../components/core/UI/Timer.react';
 import ProgressRing from './components/QuizProgress.react';
 import QuizScore from './components/QuizScore.react';
 import IconWrapper from '../components/core/UI/IconWrapper.react';
+import QuizEnd from './QuizEnd.react';
 
 const Quiz = ({data, finishQuiz}) => {
   const [answer, setAnswer] = useState(null);

diff --git a/src/quiz/QuizEnd.module.css b/src/quiz/QuizEnd.module.css
@@ -0,0 +1,3 @@
+.heading {
+  margin: 3rem;
+}
diff --git a/src/quiz/QuizEnd.react.jsx b/src/quiz/QuizEnd.react.jsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import Card from '../components/core/UI/Card.react';
+import Button from '../components/core/UI/Button.react';
+import VerticalLayout from '../components/core/layout/VerticalLayout.react';
+import HorizontalLayout from '../components/core/layout/HorizontalLayout.react';
+import Text from '../components/core/UI/Text.react';
+import classes from './QuizEnd.module.css';
+
+const QuizEnd = () => {
+  return (
+      <Card rounded>
+        <VerticalLayout center="horizontal">
+          <div className={classes.heading}>
+            <Text type="header2" variant="primary" bold>
+            You're done!
+            </Text>
+          </div>
+          <div>
+            <HorizontalLayout spaceBetween='1'>
+              <Card small>
+                <VerticalLayout center='middle'>
+                  <Text>retry quiz</Text>
+                </VerticalLayout>
+              </Card>
+              <Card small>
+                <VerticalLayout center='middle'>
+                  <Text>retry incorrect questions only</Text>
+                </VerticalLayout>
+              </Card>
+              <Card small>
+                <VerticalLayout center='middle'>
+                  <Text>home</Text>
+                </VerticalLayout>
+              </Card>
+            </HorizontalLayout>
+          </div>
+        </VerticalLayout>
+      </Card>
+
+  );
+};
+
+export default QuizEnd;