From 94e9a5c87d719254c42445d6791ff631d2c4d2d8 Mon Sep 17 00:00:00 2001
From: Marco Quintana <UO287872@uniovi.es>
Date: Thu, 14 Mar 2024 18:15:57 +0100
Subject: [PATCH] Fixed login css(storeQuestion's css was conflicting) and
 changed style for main page(at least for this delivery)

---
 webapp/src/index.css                       | 23 ++++++++++++++++++++++
 webapp/src/storeQuestion/App.jsx           |  4 ++--
 webapp/src/storeQuestion/css/questions.css | 22 ++++++++++-----------
 3 files changed, 36 insertions(+), 13 deletions(-)

diff --git a/webapp/src/index.css b/webapp/src/index.css
index ec2585e8..fd67e998 100644
--- a/webapp/src/index.css
+++ b/webapp/src/index.css
@@ -11,3 +11,26 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+
+.questionStructure, button{
+  /* RGB & HSL params */
+  --label-r: 128;
+  --label-g: 128;
+  --label-b: 128;
+  --label-h: 0;
+  --label-s: 0;
+  --label-l: 50;
+
+  --perceived-lightness: calc( ((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255 );
+  --lightness-switch: max(0, min(calc((1/(var(--lightness-threshold) - var(--perceived-lightness)))), 1));
+  --lightness-threshold: 0.6;
+  --background-alpha: 0.18;
+  --border-alpha: 0.3;
+  --lighten-by: calc(((var(--lightness-threshold) - var(--perceived-lightness)) * 100) * var(--lightness-switch));
+  color: hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%));
+  background: rgba(var(--label-r), var(--label-g), var(--label-b), var(--background-alpha));
+  border-color: hsla(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%), var(--border-alpha));
+  border-radius: 3%;
+  border-style: dashed;
+}
\ No newline at end of file
diff --git a/webapp/src/storeQuestion/App.jsx b/webapp/src/storeQuestion/App.jsx
index 7be27bba..8256421c 100644
--- a/webapp/src/storeQuestion/App.jsx
+++ b/webapp/src/storeQuestion/App.jsx
@@ -51,7 +51,7 @@ function App(){
       }
 
     return (
-      <>
+      <div id='storeQuestion'>
         <h2>Almacén de preguntas</h2>
         <button
               name="openStoredQuestions"
@@ -65,7 +65,7 @@ function App(){
             <Question key={question._id} newQuestion={question} />
           ))}
         </main>
-      </>
+      </div>
     );
 
     /*
diff --git a/webapp/src/storeQuestion/css/questions.css b/webapp/src/storeQuestion/css/questions.css
index bc21cd2e..7768a26d 100644
--- a/webapp/src/storeQuestion/css/questions.css
+++ b/webapp/src/storeQuestion/css/questions.css
@@ -40,7 +40,8 @@
     border-color: hsla(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%), var(--border-alpha));
 }*/
 
-.question{
+#storeQuestion .question, #storeQuestion button{
+    /* Common styling for questions */
     /* RGB & HSL params */
     --label-r: 128;
     --label-g: 128;
@@ -62,11 +63,11 @@
     border-style: dashed;
 }
 
-body{
+#storeQuestion body{
     background-color: #fff;
 }
 
-.question .grid p{
+#storeQuestion .question .grid p{
     width: max-content;
     border-style: dashed;
     border-radius: 15%;
@@ -92,7 +93,7 @@ body{
     border-color: hsla(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%), var(--border-alpha));
 }
 
-.question .grid p.right{
+#storeQuestion .question .grid p.right{
     width: max-content;
     border-style: dashed;
     border-radius: 15%;
@@ -118,35 +119,34 @@ body{
     border-color: hsla(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%), var(--border-alpha));
 }
 
-.question .grid{
+#storeQuestion .question .grid{
     display: grid;
     grid-template-columns: auto auto;
     padding: 5px;
 }
 
-
-h2{
+#storeQuestion h2{
     width: 100%;
     text-align: center;
 }
 
-h3{
+#storeQuestion h3{
     text-align: center;
 }
 
-#root main{
+#storeQuestion main{
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(40%, 1fr));
     padding: 5px;
     grid-gap: 10px;
 }
 
-.container{
+#storeQuestion .container{
     display: flex;
     justify-content: center;
 }
 
-.container.footer{
+#storeQuestion .container.footer{
     display: flex;
     justify-content: right;
     margin-right: 1em;