updating ui translations

src/components/tutorials/MoveAround.jsx

@@ -10,6 +10,7 @@ export default function MoveAround({ setNextSlide }) {
 
 	if (!screensTranslations || !screensTranslations.tutorial) return <Loading />;
 	const currentScreenTranslations = screensTranslations.tutorial;
+	const uiTranslations = screensTranslations.ui;
 
 	const animationParameters = {
 		initial: { x: "100%", opacity: 0 },
@@ -31,6 +32,7 @@ export default function MoveAround({ setNextSlide }) {
 				<p className='explanation'>{currentScreenTranslations.move_around_description}</p>
 				<div className='tutorial-container__slides-controls'>
 					<button
+						title={uiTranslations.next}
 						className='cta cta--construction cta--round cta--button-icon cta--next'
 						onClick={setNextSlide}></button>
 				</div>

src/components/tutorials/PointsAndTime.jsx

@@ -14,6 +14,7 @@ export default function PointsAndTime({ setNextSlide, setPreviousSlide, startGam
 
 	if (!screensTranslations || !screensTranslations.tutorial) return <Loading />;
 	const currentScreenTranslations = screensTranslations.tutorial;
+	const uiTranslations = screensTranslations.ui;
 
 	const animationParameters = {
 		initial: { x: "100%", opacity: 0 },
@@ -36,9 +37,11 @@ export default function PointsAndTime({ setNextSlide, setPreviousSlide, startGam
 				<p className='explanation'>{currentScreenTranslations.points_and_time_description}</p>
 				<div className='tutorial-container__slides-controls'>
 					<button
+						title={uiTranslations.previous}
 						className='cta cta--construction cta--round cta--button-icon cta--previous'
 						onClick={setPreviousSlide}></button>
 					<button
+						title={uiTranslations.start}
 						className='cta cta--construction cta--round cta--button-icon cta--play'
 						onClick={() => {
 							startGame();

src/components/tutorials/Walkthrough.jsx

@@ -11,6 +11,7 @@ export default function Walkthrough({ setNextSlide, setPreviousSlide }) {
 
 	if (!screensTranslations || !screensTranslations.tutorial) return <Loading />;
 	const currentScreenTranslations = screensTranslations.tutorial;
+	const uiTranslations = screensTranslations.ui;
 
 	const animationParameters = {
 		initial: { x: "100%", opacity: 0 },
@@ -32,9 +33,11 @@ export default function Walkthrough({ setNextSlide, setPreviousSlide }) {
 				<p className='explanation'>{currentScreenTranslations.walkthrough_description}</p>
 				<div className='tutorial-container__slides-controls'>
 					<button
+						title={uiTranslations.previous}
 						className='cta cta--construction cta--round cta--button-icon cta--previous'
 						onClick={setPreviousSlide}></button>
 					<button
+						title={uiTranslations.next}
 						className='cta cta--construction cta--round cta--button-icon cta--next'
 						onClick={setNextSlide}></button>
 				</div>

src/components/ui/Nav.jsx

@@ -9,7 +9,11 @@ import Logo from "./Logo.jsx";
 
 export default function Nav() {
 	let location = useLocation();
-	const { language, changeLanguage } = useUser();
+
+	const { language, screensTranslations } = useUser();
+
+	const uiTranslations = screensTranslations.ui;
+
 	const [isMenuOpen, setIsMenuOpen] = useState(false);
 
 	const handleMenuOpen = () => {
@@ -34,11 +38,17 @@ export default function Nav() {
 		animate: { y: "0" },
 		exit: { y: "-100%" },
 	};
+
+	if (!screensTranslations || !screensTranslations) return <p>loading</p>;
+
 	return (
 		<nav className='main-menu'>
 			<Logo />
 			<LanguageSelect />
-			<button className='nav-menu-toggle cta cta--button cta--button-icon' onClick={handleMenuOpen}>
+			<button
+				title={uiTranslations.openMenu}
+				className='nav-menu-toggle cta cta--button cta--button-icon'
+				onClick={handleMenuOpen}>
 				<img className='' src={menuToggleIcon} alt='' />
 			</button>
 			{isMenuOpen && (
@@ -51,6 +61,7 @@ export default function Nav() {
 					exit={animationParameters.exit}
 					transition={{ duration: 0.4, ease: "easeOut" }}>
 					<button
+						title={uiTranslations.closeMenu}
 						className='cta cta--construction cta--button-icon cta--close'
 						onClick={handleMenuOpen}></button>
 

src/pages/Country.jsx

@@ -15,6 +15,7 @@ export default function Country() {
 
 	if (!screensTranslations || !screensTranslations.country) return <p>loading</p>;
 	const currentScreenTranslations = screensTranslations.country;
+	const uiTranslations = screensTranslations.ui;
 
 	return (
 		<motion.div
@@ -32,6 +33,7 @@ export default function Country() {
 					<CountrySelect label={currentScreenTranslations.country_label} />
 					<button
 						className='cta cta--construction cta--round cta--button-icon cta--next  '
+						title={uiTranslations.next}
 						onClick={() => {
 							navigate("/play", {
 								state: { previousUrl: location.pathame, isNext: true },

src/pages/Profile.jsx

@@ -20,6 +20,7 @@ export default function Profile() {
 
 	if (!screensTranslations || !screensTranslations.profile) return <Loading />;
 	const currentScreenTranslations = screensTranslations.profile;
+	const uiTranslations = screensTranslations.ui;
 
 	function handleChangeProfile(e) {
 		changeProfile(e.target.getAttribute("value"));
@@ -81,6 +82,7 @@ export default function Profile() {
 
 					<button
 						className='cta cta--construction cta--round cta--button-icon cta--next  '
+						title={uiTranslations.next}
 						onClick={() => {
 							navigate("/select-country");
 						}}></button>

src/pages/Welcome.jsx

@@ -22,6 +22,7 @@ export default function Welcome() {
 				<LanguageSelect />
 				<Link
 					to='/Home'
+					title={currentScreenTranslations.enter}
 					className='cta cta--construction cta--lhoist cta--button-icon cta--start'>
 					<span>{currentScreenTranslations.enter}</span>
 				</Link>