From 3cc31fa8f5a75a1f28199d5151045639f60943fa Mon Sep 17 00:00:00 2001
From: uo289267 <uo289267@uniovi.es>
Date: Sat, 2 Mar 2024 22:01:48 +0100
Subject: [PATCH] QuestionView CSS added

---
 .../components/questionView/QuestionView.css  | 29 +++++++++++++++++++
 .../components/questionView/QuestionView.js   |  6 ++--
 2 files changed, 33 insertions(+), 2 deletions(-)
 create mode 100644 webapp/src/components/questionView/QuestionView.css

diff --git a/webapp/src/components/questionView/QuestionView.css b/webapp/src/components/questionView/QuestionView.css
new file mode 100644
index 00000000..d823940f
--- /dev/null
+++ b/webapp/src/components/questionView/QuestionView.css
@@ -0,0 +1,29 @@
+button{
+    width: 100%;
+    height: 45px;
+    background: darkblue;
+    border: none;
+    outline: none;
+    border-radius: 40px;
+    box-shadow: 0 0 10px black;
+    cursor:pointer;
+    font-size: 16px;
+    color: white;
+    font-weight: 700;
+}
+
+div {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr); /* 2 columns */
+    grid-template-rows: repeat(2, 1fr); /* 2 rows */
+    gap: 10px; /* Adjust the gap between grid items */
+}
+
+/* Adjust width of child elements */
+div > * {
+    width: 100%; /* Adjust as needed */
+    margin:1em;
+}
+p{
+    text-align: center;
+}
\ No newline at end of file
diff --git a/webapp/src/components/questionView/QuestionView.js b/webapp/src/components/questionView/QuestionView.js
index 302a5e35..c939763f 100644
--- a/webapp/src/components/questionView/QuestionView.js
+++ b/webapp/src/components/questionView/QuestionView.js
@@ -1,7 +1,7 @@
 import Question from './Question';
 import QuestionGenerator from './QuestionGenerator';
 import { useEffect, useState } from 'react';
-
+import './QuestionView.css';
 
 function QuestionView(){
     const questionGenerator = new QuestionGenerator();
@@ -41,13 +41,15 @@ function QuestionView(){
 
 function QuestionComponent({questions, numQuestion, handleClick}){
     return (
-        <div>
+        <>
         <p>{questions[numQuestion].getQuestion()}</p>
+        <div>
         {questions[numQuestion].getAnswers().map((item, index) => (
             <Answer key={index} text={item} onClick={handleClick}/>
         ))}
         <p>Question counter: {numQuestion}</p>
         </div>
+        </>
     );
 }