Skip to content

Commit

Permalink
Merge pull request #214 from Arquisoft/improve-ui
Browse files Browse the repository at this point in the history
Improve UI
  • Loading branch information
Raulms29 authored Apr 28, 2024
2 parents 38bba2f + 1894c32 commit 861bee8
Show file tree
Hide file tree
Showing 4 changed files with 82 additions and 14 deletions.
10 changes: 6 additions & 4 deletions webapp/src/components/AudioButton/AudioButton.css
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
transform: translateX(-80%) scaleX(0) scaleY(0);
opacity: 0;
}

100% {
transform: translateX(-80%) scaleX(1) scaleY(1);
opacity: 1;
Expand All @@ -14,6 +15,7 @@
transform: translateX(-80%) scaleX(1) scaleY(1);
opacity: 1;
}

100% {
transform: translateX(-80%) scaleX(0) scaleY(0);
opacity: 0;
Expand All @@ -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;
Expand Down
24 changes: 14 additions & 10 deletions webapp/src/components/Slider/ContinuousSlider.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
48 changes: 48 additions & 0 deletions webapp/src/pages/Home/Home.css
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@
from {
transform: rotate(0deg);
}

to {
transform: rotate(360deg);
}
Expand Down Expand Up @@ -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;
}
14 changes: 14 additions & 0 deletions webapp/src/pages/Home/Home.js
Original file line number Diff line number Diff line change
@@ -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'
Expand Down Expand Up @@ -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>
)
}
Expand Down

0 comments on commit 861bee8

Please sign in to comment.