add tag color and edit

Author: Aishwarya Nair

peer-prep/src/Components/Assets/pencil.png

@@ -38,12 +38,26 @@
     padding: 0.5rem 0.5rem;
 }
 
+.q-tag-container {
+    display: block;
+}
+
 .q-tags {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-left: 20px;
+    float: left;
+}
 
+.q-edit {
+    float: right;
+    margin-right: 10px;
+}
+
+.q-edit img {
+    width: 25px;
+    height: 25px;
 }
 
 .q-tag {
@@ -85,4 +99,20 @@
     width: 40px;
     height: 40px;
     cursor: pointer;
+}
+
+.q-tag-green {
+    background: #52CC65;
+}
+
+.q-tag-orange {
+    background: #F4B335;
+}
+
+.q-tag-red {
+    background: #F65252;
+}
+
+.q-tag-white {
+    background: #FFFFFF;
 }

peer-prep/src/Components/QuestionList/Question.css

@@ -1,6 +1,7 @@
 import React, {useState} from 'react'
 import './Question.css'
 import delete_icon from '../Assets/bin.png'
+import edit_icon from '../Assets/pencil.png'
 
 export const Question = ({question, i}) => {
     const [selected, setSelected] = useState(null);
@@ -9,6 +10,17 @@ export const Question = ({question, i}) => {
             return setSelected(null)
         }
         setSelected(i)
+    };
+    let tagClass = "q-tag";
+
+    if(question.difficulty.toLowerCase() === "easy") {
+        tagClass += " q-tag-green"
+    } else if (question.difficulty.toLowerCase() === "medium") {
+        tagClass += " q-tag-orange"
+    } else if (question.difficulty.toLowerCase() === "hard"){
+        tagClass += " q-tag-red"
+    } else {
+        tagClass += " q-tag-white"
     }
   return (
     <div className="question-container">
@@ -21,10 +33,16 @@ export const Question = ({question, i}) => {
            <span> {selected === i ? "-" : "+"}</span>
         </div>
         <div className= {selected === i ? "q-content-show": "q-content"}>
-            <div className="q-tags">
-                <div className="q-tag">{question.difficulty}</div>
-                <div className="q-tag">{question.topic}</div>
+            <div className="q-tag-container">
+                <div className="q-tags">
+                    <div className= {tagClass}>{question.difficulty}</div>
+                    <div className="q-tag">{question.topic}</div>
+                </div>
+                <div className="q-edit">
+                    <img src = {edit_icon} alt=""/>
+                </div>
             </div>
+            
             <div className="q-description">{question.description}</div>
         </div>
 

peer-prep/src/Components/QuestionList/Question.jsx

@@ -1,3 +1,11 @@
+.form-container {
+  display: flex;
+  margin: auto;
+  width: 600px;
+  gap: 20px;
+  align-items: center;
+}
+
 .container {
     display: flex;
     flex-direction: column;
@@ -78,4 +86,9 @@
     border-radius: 5px;
     font-size: 19px;
     cursor: pointer;
-  }
+  }
+
+  .ghost-btn img {
+    width: 40px;
+    visibility: hidden;
+}

peer-prep/src/Components/QuestionList/QuestionForm.css

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import './QuestionForm.css'
-
+import delete_icon from '../Assets/bin.png'
 
 export const QuestionForm = ({qId, addQuestion, setAddQ}) => {
   const [title, setTitle] = useState("");
@@ -14,37 +14,40 @@ export const QuestionForm = ({qId, addQuestion, setAddQ}) => {
     addQ(title, difficulty, topic, description)
   }
   return (
-    <form className = "container" onSubmit={handleSubmit(setAddQ, addQuestion)}>
-      <div className="q-form-header">
-        <div className="q-form-id">#{qId}</div>
-        <input type="text" className="q-form-title q-form-input" 
-        placeholder='Question Title' onChange = {
-          (e) => setTitle(e.target.value)
-        }/>
-      </div>
-       
-        <div className="q-form-tags">
-          <input type="text" className="q-form-tag q-form-input" 
-          placeholder = 'Difficulty'
-          onChange = {
-            (e) => setDifficulty(e.target.value)
+    <div className="form-container">
+      <form className = "container" onSubmit={handleSubmit(setAddQ, addQuestion)}>
+        <div className="q-form-header">
+          <div className="q-form-id">#{qId}</div>
+          <input type="text" className="q-form-title q-form-input" 
+          placeholder='Question Title' onChange = {
+            (e) => setTitle(e.target.value)
           }/>
-          <input type="text" className="q-form-tag q-form-input" 
-          placeholder = 'Topic'
-          onChange = {
-            (e) => setTopic(e.target.value)
-          }
-          />
         </div>
-        <textarea type="text" className="q-form-description q-form-input" 
-        placeholder = "Question description"
-        onChange = {
-          (e) => setDescription(e.target.value)
-        }/>
+        
+          <div className="q-form-tags">
+            <input type="text" className="q-form-tag q-form-input" 
+            placeholder = 'Difficulty'
+            onChange = {
+              (e) => setDifficulty(e.target.value)
+            }/>
+            <input type="text" className="q-form-tag q-form-input" 
+            placeholder = 'Topic'
+            onChange = {
+              (e) => setTopic(e.target.value)
+            }
+            />
+          </div>
+          <textarea type="text" className="q-form-description q-form-input" 
+          placeholder = "Question description"
+          onChange = {
+            (e) => setDescription(e.target.value)
+          }/>
 
-        <button type = "submit" className="submit-btn">Submit</button>
-   
-      
-    </form>
+          <button type = "submit" className="submit-btn">Submit</button>
+      </form>
+      <div className="ghost-btn">
+        <img src= {delete_icon} alt=""/>
+      </div>
+    </div>
   )
 }

peer-prep/src/Components/QuestionList/QuestionForm.jsx

@@ -30,8 +30,10 @@ export const Questions = () => {
       {isAddQ === false ? <div></div> : <QuestionForm qId = {qId} addQuestion = {addQuestion}
       setAddQ = {setAddQ}/>}
       <div className="add-q-btn" onClick = {() => {
-      setQId(qId + 1);
-      setAddQ(true);
+        if (!isAddQ) {
+          setQId(qId + 1);
+          setAddQ(true);
+        }
     }}> Add question</div>
     </div>