Merge pull request #214 from Arquisoft/improve-ui

Improve UI
Arquisoft · Apr 28, 2024 · 861bee8 · 861bee8
2 parents 38bba2f + 1894c32
commit 861bee8
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 14 deletions.
diff --git a/webapp/src/components/AudioButton/AudioButton.css b/webapp/src/components/AudioButton/AudioButton.css
@@ -3,6 +3,7 @@
         transform: translateX(-80%) scaleX(0) scaleY(0);
         opacity: 0;
     }
+
     100% {
         transform: translateX(-80%) scaleX(1) scaleY(1);
         opacity: 1;
@@ -14,6 +15,7 @@
         transform: translateX(-80%) scaleX(1) scaleY(1);
         opacity: 1;
     }
+
     100% {
         transform: translateX(-80%) scaleX(0) scaleY(0);
         opacity: 0;
@@ -34,12 +36,12 @@
 
 .volume-slider-container {
     position: absolute;
-    top: 100%;
-    left: 50%;
+    top: 40px;
+    left: 48px;
     transform: translateX(-80%) scaleX(0) scaleY(0);
-    transform-origin: 80% top;
+    transform-origin: top;
     width: auto;
-    max-width: calc(100vw - 20px); 
+    max-width: calc(100vw - 20px);
     min-width: 100px;
     background: #fff;
     border: 1px solid #ccc;

diff --git a/webapp/src/components/Slider/ContinuousSlider.js b/webapp/src/components/Slider/ContinuousSlider.js
@@ -8,19 +8,23 @@ import VolumeUp from '@mui/icons-material/VolumeUp';
 const ContinuousSlider = ({ volume, handleVolumeChange }) => {
 
     return (
-        <Box sx={{ width: 300 }}>
-            <Stack spacing={2} direction="row" sx={{ mb: 1, 
-                        '& .MuiSlider-thumb': {
-                            bgcolor: '#717bee',
-                        },'& .MuiSlider-track': {
-                            bgcolor: '#717bee',
-                        }}} alignItems="center">
-                <VolumeDown />
-                <Slider aria-label="Volume" value={volume} onChange={handleVolumeChange} />
+        <Box sx={{ height: 300 }}>
+            <Stack spacing={2} direction="column" sx={{
+                mb: 1,
+                '& .MuiSlider-thumb': {
+                    bgcolor: '#717bee',
+                }, '& .MuiSlider-track': {
+                    bgcolor: '#717bee',
+                }
+            }} alignItems="center">
                 <VolumeUp />
+                <Box sx={{ height: 220 }}>
+                    <Slider aria-label="Volume" value={volume} onChange={handleVolumeChange} orientation="vertical" defaultValue={50} />
+                </Box>
+                <VolumeDown />
             </Stack>
         </Box>
     );
 }
 
-export default ContinuousSlider;
+export default ContinuousSlider;
diff --git a/webapp/src/pages/Home/Home.css b/webapp/src/pages/Home/Home.css
@@ -38,6 +38,7 @@
     from {
         transform: rotate(0deg);
     }
+
     to {
         transform: rotate(360deg);
     }
@@ -71,4 +72,51 @@
 
 .username {
     color: #61dafb;
+}
+
+.swipe {
+    position: relative;
+    background-color: #F1F7F7;
+    width: 200px;
+    height: 60px;
+    color: black;
+    border-radius: 60px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-decoration: none;
+    letter-spacing: 2px;
+    border-top: 0.5px solid rgba(0, 0, 0, 0.35);
+    border-left: 0.5px solid rgba(0, 0, 0, 0.35);
+    padding-left: 40px;
+    cursor: pointer;
+    transition: 0.35s ease;
+}
+
+.swipe:hover {
+    padding-left: 0;
+    padding-right: 40px;
+    color: #324B4C;
+}
+
+.container {
+    position: absolute;
+    left: 5px;
+    width: 50px;
+    height: 50px;
+    background: #717bee;
+    border-radius: 50%;
+    transition: 0.35s ease;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #f1f4f7;
+}
+
+.swipe:hover .container {
+    left: calc(100% - 55px);
+}
+
+.btn:-webkit-any-link {
+    text-decoration: none !important;
 }
diff --git a/webapp/src/pages/Home/Home.js b/webapp/src/pages/Home/Home.js
@@ -1,6 +1,7 @@
 import { useEffect } from 'react'
 import { useAuth } from '../../hooks/useAuth'
 import { useNavigate } from 'react-router-dom'
+import { Link } from 'react-router-dom'
 import './Home.css'
 
 import { useTranslation } from 'react-i18next'
@@ -29,6 +30,19 @@ function Home() {
       ) : (
         <div>Please, login to play the game</div>
       )}
+
+      <Link to="game" class="btn">
+        <div class="swipe">{t("play.nav_title")}
+          <span class="container">
+            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path d="M0 0h24v24H0z" fill="none">
+              </path>
+              <path d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z" fill="currentColor">
+              </path>
+            </svg>
+          </span>
+        </div>
+      </Link>
     </div>
   )
 }