Frontend de Question

Arquisoft · Apr 14, 2024 · a5a8847 · a5a8847
1 parent 2848c9a
commit a5a8847
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 7 deletions.
diff --git a/webapp/src/components/Nav.jsx b/webapp/src/components/Nav.jsx
@@ -60,7 +60,9 @@ function Nav({ goTo }) {
     <AppBar className='nav' position="static">
       <Container maxWidth="xl">
         <Toolbar disableGutters>
-        <img className="icono" src={iconImg} alt='icon'/>
+          <a className='icono' href="https://github.com/Arquisoft/wiq_es3b" target="_blank">
+            <img src={iconImg} alt='icon'/>
+          </a>
           <Typography
             variant="h6"
             noWrap
@@ -71,7 +73,7 @@ function Nav({ goTo }) {
               mr: 2,
               display: { xs: 'none', md: 'flex' },
               fontWeight: 700,
-              color: 'inherit',
+              color:'#8f95fd',
               textDecoration: 'none',
               marginLeft: '16px',
             }}
@@ -120,6 +122,13 @@ function Nav({ goTo }) {
               >
                 API DOC
               </Button>
+              <Button
+                href={"https://github.com/Arquisoft/wiq_es3b"}
+                sx={{ margin: '0 !important', padding:'6px 16px', fontWeight: '400', fontSize: '1rem',
+                my: 2, color: 'white', display: 'block' }}
+              >
+                Github
+              </Button>
             </Menu>
           </Box>
 
@@ -137,6 +146,12 @@ function Nav({ goTo }) {
               >
                 API-DOC
               </Typography>
+              <Typography component="a"
+                href={"https://github.com/Arquisoft/wiq_es3b"} className='optionsNav' target="_blank"
+                sx={{ my: 2, color: 'white', display: 'block' }}
+              >
+                Github Repo
+              </Typography>
           </Box>
 
           <Box sx={{ flexGrow: 0, flexDirection: 'row', display:'flex', alignItems: 'center', fontWeight: 'bold'}}>

diff --git a/webapp/src/components/PostGame.jsx b/webapp/src/components/PostGame.jsx
@@ -53,7 +53,7 @@ export const PostGame = ({ gameMode }) => {
 
     return (
         <div>
-            <Typography sx={{ textAlign: 'center', fontSize:'2em', margin:'0 0 0.3em 0 !important' }}>Game Over</Typography>
+            <Typography sx={{ textAlign: 'center', fontSize:'2em', margin:'0 0 0.3em 0 !important', color:'#8f95fd' }}>Game Over</Typography>
             <Card>
             <TableContainer component={Paper}>
                 <Table className='tablePost' sx={{ minWidth: '30vw' }} aria-label="simple table">

diff --git a/webapp/src/components/Question.jsx b/webapp/src/components/Question.jsx
@@ -239,15 +239,14 @@ const Question = ({ goTo, setGameFinished, settings, restart }) => {
                     { settings.gMode === "threeLife" ?
                     <div> {images} </div> :""}
                 </div>
-                <Card variant='outlined' sx={{ bgcolor: '#222', p: 2, textAlign: 'left' }}>
+                <Card variant='outlined' sx={{ bgcolor: '#222', p: 2, textAlign: 'left' }} className='questionBox'>
                     <Typography className='titleQuestion' variant='h4' sx={{ padding: '10px 40px 30px 40px', color: '#8f95fd', fontSize: '2em' }}>
                         {question}
                     </Typography>
                     <List sx={{ bgcolor: '#333' }} disablePadding>
                         {options.map((option, index) => (
-                            <ListItem onClick={() => handleSubmit(option, index)} key={index+option}
-                                sx={{ bgcolor: getBackgroundColor(option, index) }}>
-                                <ListItemButton className={isSelected ? 'disabledButton' : ''}>
+                            <ListItem onClick={() => handleSubmit(option, index)} key={index+option}>
+                                <ListItemButton className={isSelected ? 'disabledButton' : ''} sx={{ bgcolor: getBackgroundColor(option, index) }}>
                                     <ListItemText sx={{ textAlign: 'center', fontSize: '1em' }} >
                                         {option}
                                     </ListItemText>

diff --git a/webapp/src/css/nav.css b/webapp/src/css/nav.css
@@ -4,6 +4,10 @@
 }
 
 .icono {
+  display: flex;
+}
+
+.icono img {
   width: 2.5em;
 }
 
@@ -47,4 +51,16 @@
 .optionsNav:hover::before,
 .tituloNav:hover::before {
   transform: scaleX(1);
+}
+
+@media screen and (min-width: 900px) {
+
+  .icono {
+    transition: transform 0.3s ease;
+    cursor: pointer;
+  }
+
+  .icono:hover {
+    transform: translateY(-5px);
+  }
 }
diff --git a/webapp/src/css/question.css b/webapp/src/css/question.css
@@ -47,6 +47,18 @@
     text-align: center;
 }
 
+.questionBox {
+    border: 1px solid #8f95fd !important;
+    border-radius: 0.6em !important;
+}
+
+.questionBox ul,
+.questionBox > ul div,
+.botoneraPreguntas div {
+    border-radius: 1em;
+
+}
+
 @media screen and (max-width: 630px) {
 
     .titleQuestion {