Updated the card fonts and the contact page to use the new Grid2

porfanid · Nov 24, 2024 · f37b9e9 · f37b9e9
1 parent e9840c6
commit f37b9e9
Show file tree

Hide file tree

Showing 4 changed files with 111 additions and 59 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,7 +18,9 @@
   "dependencies": {
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
+    "@fontsource/indie-flower": "^5.1.0",
     "@fontsource/montserrat": "^5.1.0",
+    "@fontsource/pacifico": "^5.1.0",
     "@fontsource/roboto": "^5.1.0",
     "@mui/icons-material": "^6.1.6",
     "@mui/material": "^6.1.6",

diff --git a/src/Contact.jsx b/src/Contact.jsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
-import { Typography, TextField, Button, Alert, CircularProgress, Box, Paper, Grid } from '@mui/material';
-import { getFunctions, httpsCallable } from 'firebase/functions';
+import { Typography, TextField, Button, Alert, CircularProgress, Box, Paper, Skeleton } from '@mui/material';
+import Grid2 from '@mui/material/Grid2'; // Import Grid2 from MUI
+import { httpsCallable } from 'firebase/functions';
 import { functions } from "./firebase.js";
 
 function Contact() {
@@ -10,6 +11,7 @@ function Contact() {
     const [success, setSuccess] = useState(false);
     const [error, setError] = useState(null);
     const [loading, setLoading] = useState(false);
+    const [mapLoading, setMapLoading] = useState(true);
 
     const sendContactMessage = httpsCallable(functions, 'sendContactMessage');
 
@@ -44,9 +46,30 @@ function Contact() {
                 <Typography variant="body1" gutterBottom>
                     Συμπληρώστε την παρακάτω φόρμα για να επικοινωνήσετε μαζί μας.
                 </Typography>
-                <Grid container spacing={4}>
-                    <Grid item xs={12} md={6}>
-                        <form onSubmit={handleSubmit}>
+                {/* Main Container */}
+                <Grid2 container spacing={3} sx={{display: 'flex',justifyContent: 'evenly',}}>
+                    {/* Left Column (Form) */}
+                    <Grid2
+                        item
+                        xs={12}  // Full width on small screens
+                        md={2}
+                        lg={2}// 50% width on medium and larger screens
+                        sx={{
+                            display: 'flex',
+                            flexDirection: 'column',
+                            justifyContent: 'center',
+                            alignItems: 'flex-start',
+                            width: {
+                                sm:"100%",
+                                md:"40%"
+                            },
+                            marginRight:{
+                                sm:0,
+                                md: "100px"
+                            }
+                        }}
+                    >
+                        <form onSubmit={handleSubmit} style={{ width: '100%' }}>
                             <TextField
                                 label="Όνομα"
                                 variant="outlined"
@@ -79,20 +102,37 @@ function Contact() {
                         </form>
                         {success && <Alert severity="success" sx={{ marginTop: 2 }}>Το μήνυμα στάλθηκε με επιτυχία!</Alert>}
                         {error && <Alert severity="error" sx={{ marginTop: 2 }}>{error}</Alert>}
-                    </Grid>
-                    <Grid item xs={12} md={6}>
+                    </Grid2>
+
+                    {/* Right Column (Map) */}
+                    <Grid2
+                        item
+                        xs={12}  // Full width on small screens
+                        md={5}   // 50% width on medium and larger screens
+                        sx={{
+                            display: 'flex',
+                            justifyContent: 'center',
+                            alignItems: 'center',
+                            width: {
+                                sm:"100%",
+                                md:"40%"
+                            },
+                        }}
+                    >
+                        {mapLoading && <Skeleton variant="rectangular" width="100%" height={400} />}
                         <iframe
                             width="100%"
                             height="400"
-                            style={{ border: 0 }}
+                            style={{ border: 0, display: mapLoading ? 'none' : 'block' }}
                             src="https://www.google.com/maps/embed/v1/place?q=Pindarou%209,%20Ioannina,%2045332&key=AIzaSyDuSYLGWDUpKE0Mtc_SjG6OSp9Btt9mXzU"
+                            onLoad={() => setMapLoading(false)}
                             allowFullScreen
                         ></iframe>
-                    </Grid>
-                </Grid>
+                    </Grid2>
+                </Grid2>
             </Paper>
         </Box>
     );
 }
 
-export default Contact;
+export default Contact;
diff --git a/src/Home/Departments/DepartmentCard.jsx b/src/Home/Departments/DepartmentCard.jsx
@@ -7,6 +7,9 @@ import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
 import { useSpring, animated } from '@react-spring/web';
 import useMediaQuery from "@mui/material/useMediaQuery";
 import { useTheme } from "@mui/styles";
+import '@fontsource/pacifico';
+import '@fontsource/roboto';
+import '@fontsource/indie-flower';
 
 const DepartmentCard = ({ department, chief }) => {
     const theme = useTheme();
@@ -21,7 +24,7 @@ const DepartmentCard = ({ department, chief }) => {
     const overlayAnimation = useSpring({
         loop: true,
         from: { transform: 'rotate(0deg)' },
-        to: { transform: 'rotate(30deg)' },
+        to: { transform: 'rotate(360deg)' },
         config: { duration: 5000 },
     });
 
@@ -116,59 +119,52 @@ const DepartmentCard = ({ department, chief }) => {
                     )
                 )}
             </Box>
-            <CardContent>
-                <Typography
-                    variant="h5"
-                    sx={{
-                        fontFamily: "'Comic Sans MS', cursive",
-                        fontWeight: 'bold',
-                        textAlign: 'center',
-                    }}
-                >
+            <CardContent sx={{ flexGrow: 1 }}>
+                <Typography variant="h5" component="div" sx={{ fontFamily: "'Comic Sans MS', 'Comic Sans', cursive",
+                    fontWeight: 'bold',
+                    textAlign: 'center', }}>
                     {department.name}
                 </Typography>
-                <Typography
-                    variant="subtitle1"
-                    sx={{
-                        marginTop: 2,
-                        fontWeight: 'bold',
-                        textAlign: 'center',
-                    }}
-                >
+                <Typography variant="subtitle1" component="div" sx={{ marginTop: "3vh", marginBottom: "2vh", fontWeight: 'italic', fontFamily: "'Indie Flower', cursive" }}>
                     {department.moto}
                 </Typography>
-
-                <Typography
-                    variant="subtitle2"
-                    sx={{
-                        marginTop: 2,
-                        fontWeight: 'bold',
-                        textAlign: 'center',
-                    }}
-                >
-                    {department.age} χρονών
-                </Typography>
-
-                {chief && (
-                    <Box sx={{ marginTop: 2 }}>
-                        <Typography variant="body1" sx={{ textAlign: 'center' }}>
-                            <FaceIcon sx={{ marginRight: 1, verticalAlign: 'middle' }} />
-                            Αρχηγός: {chief.name}
-                        </Typography>
-                        <Typography variant="body2" sx={{ textAlign: 'center', marginTop: 1 }}>
-                            <PhoneIcon sx={{ marginRight: 1, verticalAlign: 'middle' }} />
-                            Τηλέφωνο: {chief.phone}
-                        </Typography>
-                        <Typography variant="body2" sx={{ textAlign: 'center', marginTop: 1 }}>
-                            <EmailIcon sx={{ marginRight: 1, verticalAlign: 'middle' }} />
-                            Email: {chief.email}
+                {department.age && (
+                    <Typography variant="body2" sx={{ marginBottom: '10px', display: 'flex', alignItems: 'center', fontFamily: "'Roboto', sans-serif" }}>
+                        <FaceIcon sx={{ marginRight: '5px' }} />
+                        {department.age} χρονών
+                    </Typography>
+                )}
+                {chief && <>
+                    {chief.meetingDate && (
+                        <Typography variant="body2" sx={{ marginTop: '5px', display: 'flex', alignItems: 'center', fontFamily: "'Roboto', sans-serif" }}>
+                            <CalendarTodayIcon sx={{ marginRight: '5px' }} />
+                            {chief.meetingDate}
                         </Typography>
-                        <Typography variant="body2" sx={{ textAlign: 'center', marginTop: 1 }}>
-                            <CalendarTodayIcon sx={{ marginRight: 1, verticalAlign: 'middle' }} />
-                            Συνάντηση: {chief.meeting}
+                    )}
+                    {chief.name ? (
+                        <Box sx={{ backgroundColor: '#B0BEC5', padding: '10px', borderRadius: '10px', marginTop: '10px' }}>
+                            <Typography variant="subtitle1" sx={{ fontWeight: 'bold', color: department.bgColor, fontFamily: "'Comic Sans MS', 'Comic Sans', cursive" }}>
+                                Chief: {chief.name}
+                            </Typography>
+                            {chief.phone && (
+                                <Typography variant="body2" sx={{ color: '#37474f', marginTop: '5px', display: 'flex', alignItems: 'center', fontFamily: "'Roboto', sans-serif" }}>
+                                    <PhoneIcon sx={{ marginRight: '5px' }} />
+                                    {chief.phone}
+                                </Typography>
+                            )}
+                            {chief.email && (
+                                <Typography variant="body2" sx={{ color: '#37474f', marginTop: '5px', display: 'flex', alignItems: 'center', fontFamily: "'Roboto', sans-serif" }}>
+                                    <EmailIcon sx={{ marginRight: '5px' }} />
+                                    {chief.email}
+                                </Typography>
+                            )}
+                        </Box>
+                    ) : (
+                        <Typography variant="body2" color="text.secondary" sx={{ marginTop: '10px', fontFamily: "'Roboto', sans-serif" }}>
+                            No chief information available.
                         </Typography>
-                    </Box>
-                )}
+                    )}
+                </>}
             </CardContent>
         </Card>
     );