Merge pull request #15 from smswithoutborders/dev

updates about responsiveness
smswithoutborders · Jun 25, 2024 · 3037775 · 3037775
2 parents 654b5ab + 70872f8
commit 3037775
Show file tree

Hide file tree

Showing 6 changed files with 481 additions and 236 deletions.
diff --git a/package.json b/package.json
@@ -4,9 +4,10 @@
 	"version": "0.1.0",
 	"private": true,
 	"dependencies": {
+		"@craco/craco": "^7.1.0",
 		"@emotion/react": "^11.11.4",
 		"@emotion/styled": "^11.11.5",
-		"@mui/icons-material": "^5.15.15",
+		"@mui/icons-material": "^5.15.20",
 		"@mui/material": "^5.15.20",
 		"@testing-library/jest-dom": "^5.14.1",
 		"@testing-library/react": "^13.0.0",
@@ -20,6 +21,7 @@
 		"react-i18next": "^14.1.2",
 		"react-icons": "^5.1.0",
 		"react-material-ui-carousel": "^3.4.2",
+		"react-responsive-carousel": "^3.2.23",
 		"react-router-dom": "^6.22.3",
 		"react-scripts": "5.0.1",
 		"react-scroll": "^1.9.0",

diff --git a/src/Components/FAQs.js b/src/Components/FAQs.js
@@ -1,6 +1,13 @@
 import * as React from "react";
-import { Accordion, AccordionSummary, AccordionDetails, Typography } from "@mui/material";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import {
+	Typography,
+	Accordion,
+	AccordionSummary,
+	AccordionDetails,
+	useMediaQuery,
+	styled
+} from "@mui/material";
+import { ExpandMore as ExpandMoreIcon } from "@mui/icons-material";
 import { useTranslation } from "react-i18next";
 
 const FAQ = [
@@ -26,49 +33,65 @@ const FAQ = [
 	}
 ];
 
+// Styled components for enhanced design
+const CustomAccordion = styled(Accordion)(({ theme }) => ({
+	marginBottom: theme.spacing(2),
+	borderRadius: theme.spacing(1),
+	boxShadow: "0px 4px 8px rgba(0, 0, 0, 0.1)",
+	transition: "box-shadow 0.3s ease-out",
+
+	"&:hover": {
+		boxShadow: "0px 8px 16px rgba(0, 0, 0, 0.2)"
+	}
+}));
+
+const CustomAccordionSummary = styled(AccordionSummary)(({ theme }) => ({
+	backgroundColor: theme.palette.primary.main,
+	color: theme.palette.primary.contrastText,
+	borderBottom: `1px solid ${theme.palette.primary.dark}`,
+	borderRadius: theme.spacing(1, 1, 0, 0),
+
+	"&.Mui-expanded": {
+		minHeight: 64
+	}
+}));
+
+const CustomAccordionDetails = styled(AccordionDetails)(({ theme }) => ({
+	backgroundColor: theme.palette.background.default,
+	padding: theme.spacing(2),
+	borderTop: `1px solid ${theme.palette.primary.dark}`,
+	borderRadius: theme.spacing(0, 0, 1, 1)
+}));
+
 export default function Faqs() {
-	const [expanded, setExpanded] = React.useState(0);
+	const [expanded, setExpanded] = React.useState(null);
 	const { t } = useTranslation();
+	const isMobile = useMediaQuery((theme) => theme.breakpoints.down("sm"));
 
 	const handleChange = (panel) => (event, isExpanded) => {
-		setExpanded(isExpanded ? panel : false);
+		setExpanded(isExpanded ? panel : null);
 	};
 
 	return (
-		<div style={{ padding: "20px", marginBottom: "20px", maxWidth: "800px", margin: "0 auto" }}>
-			<h1>{t("FAQ.FAQ")}</h1>
+		<div style={{ padding: isMobile ? "10px" : "20px", maxWidth: "800px", margin: "0 auto" }}>
+			<Typography variant="h4" gutterBottom align="center">
+				{t("FAQ.FAQ")}
+			</Typography>
 			{FAQ.map((item, index) => (
-				<Accordion
-					key={index}
-					expanded={expanded === index}
-					onChange={handleChange(index)}
-					sx={{
-						mb: 2,
-						backgroundColor: "hsl(243, 87%, 12%)",
-						boxShadow: expanded === index ? "0px 4px 4px rgba(0, 0, 0, 0.25)" : "none",
-						borderRadius: 8,
-						color: "white"
-					}}
-				>
-					<AccordionSummary
+				<CustomAccordion key={index} expanded={expanded === index} onChange={handleChange(index)}>
+					<CustomAccordionSummary
 						expandIcon={<ExpandMoreIcon />}
 						aria-controls={`faq${index}-content`}
 						id={`faq${index}-header`}
-						sx={{
-							minHeight: 64,
-							"& .MuiAccordionSummary-content": {
-								margin: "12px 0"
-							}
-						}}
 					>
-						<Typography variant="body1" sx={{ fontWeight: 700, color: "white" }}>
+						<Typography variant={isMobile ? "body1" : "subtitle1"} sx={{ fontWeight: 600 }}>
 							{t(item.question)}
 						</Typography>
-					</AccordionSummary>
-					<AccordionDetails>
-						<Typography>{t(item.answer)}</Typography>
-					</AccordionDetails>
-				</Accordion>
+					</CustomAccordionSummary>
+					<CustomAccordionDetails>
+						<Typography variant={isMobile ? "body2" : "body1"}>{t(item.answer)}</Typography>
+					</CustomAccordionDetails>
+				</CustomAccordion>
 			))}
 		</div>
 	);

diff --git a/src/Components/LanguageSwitcher.js b/src/Components/LanguageSwitcher.js
@@ -1,24 +1,41 @@
-import React from "react";
+import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { FormControl, Select, MenuItem } from "@mui/material";
+import { FormControl, MenuItem, IconButton, Menu, Box } from "@mui/material";
+import LanguageIcon from "@mui/icons-material/Language";
 
 const LanguageSwitcher = () => {
 	const { i18n } = useTranslation();
-	const [language, setLanguage] = React.useState(i18n.language);
+	const [anchorEl, setAnchorEl] = useState(null);
 
-	const handleChange = (event) => {
-		const newLanguage = event.target.value;
-		setLanguage(newLanguage);
-		i18n.changeLanguage(newLanguage);
+	const handleLanguageMenuClick = (event) => {
+		setAnchorEl(event.currentTarget);
+	};
+
+	const handleLanguageMenuClose = () => {
+		setAnchorEl(null);
+	};
+
+	const handleLanguageChange = (lang) => {
+		i18n.changeLanguage(lang);
+		setAnchorEl(null);
 	};
 
 	return (
 		<FormControl variant="outlined" size="small">
-			<Select value={language} onChange={handleChange} displayEmpty>
-				<MenuItem value="en">🇺🇸 English</MenuItem>
-				<MenuItem value="fr">🇫🇷 French</MenuItem>
-				<MenuItem value="fa">🇮🇷 فارسی</MenuItem>
-			</Select>
+			<Box sx={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
+				<IconButton
+					color="inherit"
+					onClick={handleLanguageMenuClick}
+					sx={{ display: { xs: "", md: "block" } }}
+				>
+					<LanguageIcon />
+				</IconButton>
+				<Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleLanguageMenuClose}>
+					<MenuItem onClick={() => handleLanguageChange("en")}>🇺🇸 English</MenuItem>
+					<MenuItem onClick={() => handleLanguageChange("fr")}>🇫🇷 Français</MenuItem>
+					<MenuItem onClick={() => handleLanguageChange("fa")}>🇮🇷 فارسی</MenuItem>
+				</Menu>
+			</Box>
 		</FormControl>
 	);
 };

diff --git a/src/Components/Nav.js b/src/Components/Nav.js
@@ -185,7 +185,7 @@ export default function BackToTop(props) {
 									<Typography>{t("Nav.help")}</Typography>
 								</a>
 								<a
-									href="https://github.com/deku-messaging"
+									href="https://github.com/smswithoutborders"
 									target="_blank"
 									rel="noreferrer"
 									className="menu-link"