fix back button to compt thinking and hint

Author: alrafi

src/assets/left-arrow.png

@@ -3,13 +3,13 @@ import styled from 'styled-components';
 import { LeftSection as QuizSectionLayout } from '../../components/LayoutSection';
 import { Link } from 'react-router-dom';
 import {
-  Topic,
   SubTopic,
   Text,
   CodeBox,
   CodeText,
   SubTitle,
 } from '../../components/contentComponent';
+import leftArrow from '../../assets/left-arrow.png';
 
 const SubWrapper = styled.div`
   display: flex;
@@ -18,25 +18,26 @@ const SubWrapper = styled.div`
     color: #303030;
     text-decoration: none;
   }
-`;
 
-const Back = styled.p`
-  font-size: 60%;
-  color: #303030;
-  margin: 2px 0 0 10px;
-  &:hover {
-    color: #009d86;
+  img {
+    /* margin-top: -3px; */
+    margin-right: 10px;
   }
 `;
 
+const Topic = styled.p`
+  font-size: 70%;
+  margin-top: 2px;
+`;
+
 const QuizSection = () => {
   return (
     <QuizSectionLayout>
       <SubWrapper>
-        <Topic>Kuis | Array</Topic>
         <Link to="/quiz-list" className="link">
-          <Back>(back to Quiz List)</Back>
+          <img src={leftArrow} alt="back" />
         </Link>
+        <Topic>Kuis | Array</Topic>
       </SubWrapper>
       <SubTopic>Rotasi Matriks</SubTopic>
       <SubTitle>Deskripsi</SubTitle>

src/pages/Quiz/QuizSection.js

@@ -10,6 +10,7 @@ import {
   RightSection as ResultSection,
 } from '../../../components/LayoutSection';
 import { Link } from 'react-router-dom';
+import leftArrow from '../../../assets/left-arrow.png';
 
 const BoxResult = styled.div`
   width: 100%;
@@ -48,17 +49,21 @@ const SubWrapper = styled.div`
     color: #303030;
     text-decoration: none;
   }
-`;
 
-const Back = styled.p`
-  font-size: 60%;
-  color: #303030;
-  margin: 10px 0 0 5px;
-  &:hover {
-    color: #009d86;
+  img {
+    margin-top: 7px;
+    margin-right: 10px;
   }
 `;
 
+const TextHint = styled.p`
+  font-size: 80%;
+  line-height: 20px;
+  margin-top: 20px;
+  margin-bottom: 30px;
+  font-weight: bold;
+`;
+
 const Abstraksi = () => {
   const [color1, setColor1] = useState('#009d86');
   const [color2, setColor2] = useState('#009d86');
@@ -137,15 +142,16 @@ const Abstraksi = () => {
       <QuizSection />
       <AnswerSection padding="20px">
         <SubWrapper>
-          <SubTopic>Abstraksi</SubTopic>
           <Link to="/quiz" className="link">
-            <Back>(back to computational thinking)</Back>
+            <img src={leftArrow} alt="back" />
           </Link>
+          <SubTopic>Abstraksi</SubTopic>
         </SubWrapper>
         <Text>
           Silahkan pilih <span>Abstraksi</span> mana saja yang tepat untuk
           persoalan di samping.
         </Text>
+        <TextHint>Hint: Jawaban yang tepat bisa lebih dari satu</TextHint>
         <CheckboxWrapper>
           <CheckboxItem
             id={1}

src/pages/Quiz/component/Abstraksi.js

@@ -18,6 +18,7 @@ import rightArrow from '../../../assets/right-arrow.png';
 import adaptive from '../../../assets/adaptive.png';
 import { TextHighlight } from '../../../components/contentComponent';
 import { Link } from 'react-router-dom';
+import leftArrow from '../../../assets/left-arrow.png';
 
 const TitleEditor = styled.p`
   font-size: 120%;
@@ -54,14 +55,10 @@ const SubWrapper = styled.div`
     color: #303030;
     text-decoration: none;
   }
-`;
 
-const Back = styled.p`
-  font-size: 60%;
-  color: #303030;
-  margin: 10px 0 0 10px;
-  &:hover {
-    color: #009d86;
+  img {
+    margin-top: 7px;
+    margin-left: 20px;
   }
 `;
 
@@ -229,10 +226,10 @@ const rotasiMatriks = (m, n, matriks) => {
       <QuizSection />
       <CodeSection>
         <SubWrapper>
-          <TitleEditor>Algoritma</TitleEditor>
           <Link to="/quiz" className="link">
-            <Back>(back to computational thinking)</Back>
+            <img src={leftArrow} alt="back" />
           </Link>
+          <TitleEditor>Algoritma</TitleEditor>
         </SubWrapper>
         <Text>
           Silahkan tulis <span>Algoritma</span> yang tepat untuk persoalan di

src/pages/Quiz/component/Algoritma.js

@@ -10,6 +10,7 @@ import {
   RightSection as ResultSection,
 } from '../../../components/LayoutSection';
 import { Link } from 'react-router-dom';
+import leftArrow from '../../../assets/left-arrow.png';
 
 const BoxResult = styled.div`
   width: 100%;
@@ -48,17 +49,21 @@ const SubWrapper = styled.div`
     color: #303030;
     text-decoration: none;
   }
-`;
 
-const Back = styled.p`
-  font-size: 60%;
-  color: #303030;
-  margin: 10px 0 0 10px;
-  &:hover {
-    color: #009d86;
+  img {
+    margin-top: 7px;
+    margin-right: 10px;
   }
 `;
 
+const TextHint = styled.p`
+  font-size: 80%;
+  line-height: 20px;
+  margin-top: 20px;
+  margin-bottom: 30px;
+  font-weight: bold;
+`;
+
 const Dekomposisi = () => {
   const [color1, setColor1] = useState('#009d86');
   const [color2, setColor2] = useState('#009d86');
@@ -137,15 +142,16 @@ const Dekomposisi = () => {
       <QuizSection />
       <AnswerSection padding="20px">
         <SubWrapper>
-          <SubTopic>Dekomposisi</SubTopic>
           <Link to="/quiz" className="link">
-            <Back>(back to computational thinking)</Back>
+            <img src={leftArrow} alt="back" />
           </Link>
+          <SubTopic>Dekomposisi</SubTopic>
         </SubWrapper>
         <Text>
           Silahkan pilih <span>Dekomposisi</span> mana saja yang tepat untuk
           persoalan di samping.
         </Text>
+        <TextHint>Hint: Jawaban yang tepat bisa lebih dari satu</TextHint>
         <CheckboxWrapper>
           <CheckboxItem
             id={1}

src/pages/Quiz/component/Dekomposisi.js

@@ -10,6 +10,7 @@ import {
   RightSection as ResultSection,
 } from '../../../components/LayoutSection';
 import { Link } from 'react-router-dom';
+import leftArrow from '../../../assets/left-arrow.png';
 
 const BoxResult = styled.div`
   width: 100%;
@@ -48,17 +49,21 @@ const SubWrapper = styled.div`
     color: #303030;
     text-decoration: none;
   }
-`;
 
-const Back = styled.p`
-  font-size: 60%;
-  color: #303030;
-  margin: 10px 0 0 10px;
-  &:hover {
-    color: #009d86;
+  img {
+    margin-top: 7px;
+    margin-right: 10px;
   }
 `;
 
+const TextHint = styled.p`
+  font-size: 80%;
+  line-height: 20px;
+  margin-top: 20px;
+  margin-bottom: 30px;
+  font-weight: bold;
+`;
+
 const PengenalanPola = () => {
   const [color1, setColor1] = useState('#009d86');
   const [color2, setColor2] = useState('#009d86');
@@ -137,15 +142,16 @@ const PengenalanPola = () => {
       <QuizSection />
       <AnswerSection padding="20px">
         <SubWrapper>
-          <SubTopic>Pengenalan Pola</SubTopic>
           <Link to="/quiz" className="link">
-            <Back>(back to computational thinking)</Back>
+            <img src={leftArrow} alt="back" />
           </Link>
+          <SubTopic>Pengenalan Pola</SubTopic>
         </SubWrapper>
         <Text>
           Silahkan pilih <span>Pengenalan Pola</span> mana saja yang tepat untuk
           persoalan di samping.
         </Text>
+        <TextHint>Hint: Jawaban yang tepat bisa lebih dari satu</TextHint>
         <CheckboxWrapper>
           <CheckboxItem
             id={1}