fix button and finishing

Author: alrafi

src/components/Button.js

@@ -5,13 +5,14 @@ const StyledButton = styled.div`
   display: inline-block;
   width: ${({ width }) => (width ? width : '120px')};
   height: 30px;
-  background-color: #009d86;
+  background-color: ${({ color }) => (color ? color : '#009d86')};
   text-align: center;
   color: #fff;
   border-radius: 40px;
   box-shadow: 2px 2px 15px rgba(25, 99, 115, 0.2);
   padding-top: 3px;
   font-size: 80%;
+  margin-bottom: 10px;
   cursor: pointer;
   ${({ menubar }) =>
     menubar &&
@@ -27,13 +28,14 @@ const StyledButton = styled.div`
   `}
 `;
 
-const Button = ({ width, menubar, subtitle, children, onClick }) => {
+const Button = ({ width, color, menubar, subtitle, children, onClick }) => {
   return (
     <StyledButton
       menubar={menubar}
       subtitle={subtitle}
       onClick={onClick}
       width={width}
+      color={color}
     >
       {children}
     </StyledButton>

src/pages/Learn/index.js

@@ -78,20 +78,10 @@ const SubWrapper = styled.div`
   }
 
   img {
-    /* margin-top: -3px; */
     margin-right: 10px;
   }
 `;
 
-const Back = styled.p`
-  font-size: 60%;
-  color: #303030;
-  margin: 2px 0 0 10px;
-  &:hover {
-    color: #009d86;
-  }
-`;
-
 // MODAL
 const customStyles = {
   content: {
@@ -161,12 +151,6 @@ const Padding = styled.div`
   padding: 0 20px;
 `;
 
-const ScoreResult = styled.p`
-  font-size: 120%;
-  font-weight: bold;
-  margin-top: 20px;
-`;
-
 const CodeResult = styled.p`
   font-family: 'Fira Code', monospace;
   font-size: 90%;
@@ -379,10 +363,22 @@ let myArr = [];
     setIsOpenCTp(false);
   };
 
-  const [ctAnswer, setCTAnswer] = useState('Silahkan submit jawaban');
+  const [ctAnswerA, setCTAnswerA] = useState('Silahkan submit jawaban');
 
-  const onCTsubmit = () => {
-    setCTAnswer('Jawaban anda tepat!');
+  const onCTsubmitA = () => {
+    setCTAnswerA('Jawaban anda tepat!');
+  };
+
+  const [ctAnswerD, setCTAnswerD] = useState('Silahkan submit jawaban');
+
+  const onCTsubmitD = () => {
+    setCTAnswerD('Jawaban anda tepat!');
+  };
+
+  const [ctAnswerP, setCTAnswerP] = useState('Silahkan submit jawaban');
+
+  const onCTsubmitP = () => {
+    setCTAnswerP('Jawaban anda tepat!');
   };
 
   return (
@@ -530,8 +526,13 @@ let myArr = [];
           <TopicDone>Materi Selesai</TopicDone>
           <img src={check} alt="completed" />
           <TopicName>Array - Perkenalan</TopicName>
+          <Link to="/learn">
+            <Button width="200px">Materi selanjutnya</Button>
+          </Link>
           <Link to="/quiz">
-            <Button width="200px">Lanjut Mengerjakan Kuis</Button>
+            <Button width="200px" color="#FF175D">
+              Lanjut Mengerjakan Kuis
+            </Button>
           </Link>
         </ModalBox>
       </Modal>
@@ -581,13 +582,13 @@ let myArr = [];
               <p>array mempunyai nilai</p>
             </CheckboxItem>
           </CheckboxWrapper>
-          <Button width="200px" onClick={onCTsubmit}>
+          <Button width="200px" onClick={onCTsubmitA}>
             Submit jawaban
           </Button>
           <SubmitWrapper>
             <img src={ilustrasiA} alt="abstraksi" className="ilustrasiA" />
           </SubmitWrapper>
-          <TextCT>{ctAnswer}</TextCT>
+          <TextCT>{ctAnswerA}</TextCT>
         </ModalBox>
       </Modal>
       {/* Modal dekomposisi */}
@@ -637,13 +638,13 @@ let myArr = [];
             </CheckboxItem>
           </CheckboxWrapper>
 
-          <Button width="200px" onClick={onCTsubmit}>
+          <Button width="200px" onClick={onCTsubmitD}>
             Submit jawaban
           </Button>
           <SubmitWrapper>
             <img src={ilustrasiD} alt="dekomposisi" className="ilustrasiD" />
           </SubmitWrapper>
-          <TextCT>{ctAnswer}</TextCT>
+          <TextCT>{ctAnswerD}</TextCT>
         </ModalBox>
       </Modal>
       {/* Modal Pola */}
@@ -693,13 +694,13 @@ let myArr = [];
             </CheckboxItem>
           </CheckboxWrapper>
 
-          <Button width="200px" onClick={onCTsubmit}>
+          <Button width="200px" onClick={onCTsubmitP}>
             Submit jawaban
           </Button>
           <SubmitWrapper>
             <img src={ilustrasiP} alt="dekomposisi" className="ilustrasiP" />
           </SubmitWrapper>
-          <TextCT>{ctAnswer}</TextCT>
+          <TextCT>{ctAnswerP}</TextCT>
         </ModalBox>
       </Modal>
     </MainWrapper>