Merge pull request #10 from antonKrizmanic/feature/mui

MUI
antonKrizmanic · Oct 12, 2024 · 3aca73f · 3aca73f
2 parents a24bb25 + 3647f36
commit 3aca73f
Show file tree

Hide file tree

Showing 25 changed files with 668 additions and 1,071 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -0,0 +1,31 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches:
+      - main  # Change this to your default branch if it's not 'main'
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout the repository
+        uses: actions/checkout@v2
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '14'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build and export the static site
+        run: npm run deploy
+
+      - name: Deploy to GitHub Pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./out
diff --git a/app/(routes)/page.tsx b/app/(routes)/page.tsx
@@ -1,10 +1,8 @@
 'use client';
 
-import BigRedButton from '@/components/Buttons/BigRedButton';
+import { Button, Stack, Typography } from '@mui/material';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
-import { Button, Typography } from "@material-tailwind/react";
-
 
 const HomePage = () => {
   const router = useRouter();
@@ -17,12 +15,12 @@ const HomePage = () => {
 
   return (
     <>
-      <Typography type="h2">Odaberite temu kviza</Typography>      
+      <Typography variant="h1" gutterBottom>Odaberite temu kviza</Typography>      
 
-      <div className="mt-3">
-        <Button isFullWidth className="mt-3"  onClick={() => handleThemeSelection('100')} variant="outline" size={'lg'}>Prva pomoć</Button>
-        <Button isFullWidth className="mt-3" onClick={() => handleThemeSelection('200')} variant="outline" size={'lg'}>Pokret Crvenog križa</Button>
-      </div>
+      <Stack spacing={1}>
+        <Button onClick={() => handleThemeSelection('100')} variant="outlined">Prva pomoć</Button>
+        <Button onClick={() => handleThemeSelection('200')} variant="outlined">Pokret Crvenog križa</Button>
+      </Stack>
     </>
   );
 };

diff --git a/app/categories/page.tsx b/app/categories/page.tsx
@@ -3,8 +3,7 @@
 import { useRouter, useSearchParams } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { get } from '../../services/HttpService';
-import BigRedButton from '@/components/Buttons/BigRedButton';
-import { Button, Typography } from "@material-tailwind/react";
+import { Button, Stack, Typography } from '@mui/material';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faArrowLeft } from '@fortawesome/free-solid-svg-icons';
 
@@ -54,24 +53,22 @@ const CategoriesPage = () => {
 
   return (
     <>
-      <Typography type="h2" className="mt-3">Odaberite kategoriju kviza</Typography>      
-      <div className="px-6 my-3">
-        <div className="flex flex-col">
-          {categories.length === 0 ? (
-            <Typography>Nije dohvaćena ni jedna kategorija</Typography>
-          ) : (
-            categories.map((category) => (
-              <Button isFullWidth className="mt-3" onClick={() => handleCategorySelection(category.id.toString())} variant="outline" size={'lg'} key={category.id}>
-                {category.name}
-              </Button>              
-            ))
-          )}
-          <Button isFullWidth className="mt-3" onClick={handleBack} variant="outline" size={'lg'}>
-            <FontAwesomeIcon icon={faArrowLeft} /> &nbsp;
-            Natrag
-          </Button>          
-        </div>
-      </div>
+      <Typography variant="h1" gutterBottom>Odaberite kategoriju kviza</Typography>
+      <Stack spacing={1} sx={{marginBottom:3}}>
+        {categories.length === 0 ? (
+          <Typography>Nije dohvaćena ni jedna kategorija</Typography>
+        ) : (
+          categories.map((category) => (
+            <Button onClick={() => handleCategorySelection(category.id.toString())} variant="outlined" key={category.id}>
+              {category.name}
+            </Button>
+          ))
+        )}
+        <Button onClick={handleBack} variant="outlined">
+          <FontAwesomeIcon icon={faArrowLeft} /> &nbsp;
+          Natrag
+        </Button>
+      </Stack>
     </>
   );
 };

diff --git a/app/init-quiz/page.tsx b/app/init-quiz/page.tsx
@@ -3,10 +3,11 @@
 import { useRouter, useSearchParams } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { post } from '../../services/HttpService';
-import { Card, Typography, List, ListItem, Button } from "@material-tailwind/react";
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCircle, faArrowLeft } from '@fortawesome/free-solid-svg-icons';
-
+import { Button, Card, CardActions, CardContent, List, ListItem, Typography } from '@mui/material';
+import CircleIcon from '@mui/icons-material/Circle';
+import { red } from '@mui/material/colors';
 
 
 const InitQuizPage = () => {
@@ -64,27 +65,24 @@ const InitQuizPage = () => {
 
     return (
         <>
-
             {quizId ? (
                 <>
-                    <Typography type="h2">Malo o pravilima</Typography>
-                    <Card>
-                        <Card.Body>
-                            <List className="pb-3 text-sm">
+                    <Typography variant="h1" gutterBottom>Malo o pravilima</Typography>
+                    <Card sx={{width:'100%'}}>
+                        <CardContent>
+                            <List>
                                 {infoItems.map((item, index) => (
                                     <ListItem key={index}>
-                                        <FontAwesomeIcon icon={faCircle} className="text-red-400 h-2 w-2 m-2 rounded-full" />
+                                        <CircleIcon sx={{ color: red[500], fontSize: 12 }} /> &nbsp;
                                         {item}
                                     </ListItem>
                                 ))}
                             </List>
-                        </Card.Body>
-                        <Card.Footer>
-                            <div className="flex justify-between">
-                                <Button onClick={handleBack} variant="outline" size={'lg'}><FontAwesomeIcon icon={faArrowLeft} /> &nbsp; Natrag</Button>
-                                <Button onClick={handleStartQuiz} variant="outline" size={'lg'}>Start</Button>
-                            </div>
-                        </Card.Footer>
+                        </CardContent>
+                        <CardActions sx={{justifyContent: 'space-between'}}>
+                            <Button onClick={handleBack} variant="outlined"><FontAwesomeIcon icon={faArrowLeft} /> &nbsp; Natrag</Button>
+                            <Button onClick={handleStartQuiz} variant="outlined" sx={{marginLeft:'auto'}}>Start</Button>
+                        </CardActions>
                     </Card>
 
                 </>

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,5 +1,11 @@
 import { Metadata } from 'next';
+import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter';
+import { ThemeProvider } from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
 import '@/styles/global.css';
+import theme from '@/theme';
+import { Box, Container } from '@mui/material';
+
 
 // Checks whether the app is running in a production or development mode
 const isProduction = process.env.NODE_ENV === 'production';
@@ -35,10 +41,27 @@ type RootLayoutProps = {
 export default function RootLayout({ children }: RootLayoutProps) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <body className="min-h-screen flex flex-col bg-gray-100	">
-        <div className="flex flex-col items-center justify-center min-h-screen lg:w-1/2 mx-auto">        
-            {children}
-        </div>
+      <body>
+      <AppRouterCacheProvider options={{ enableCssLayer: true }}>
+          <ThemeProvider theme={theme}>
+            {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
+            <CssBaseline />
+            <Container maxWidth="md">
+              <Box
+                sx={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  justifyContent: { xs: 'flex-start', lg: 'center' },
+                  alignItems: 'center',
+                  minHeight: { xs: 'auto', lg: '100vh' },
+                  paddingTop: { xs: 2, md: 4 },
+                }}
+              >
+                {children}
+              </Box>
+            </Container>
+          </ThemeProvider>
+        </AppRouterCacheProvider>        
       </body>
     </html>
   );

diff --git a/app/quiz/page.tsx b/app/quiz/page.tsx
@@ -8,9 +8,9 @@ import ChooseManyQuestion from '@/components/TakeQuiz/ChooseManyQuestion';
 import TypeAnswerQuestion from '@/components/TakeQuiz/TypeAnswerQuestion';
 import MakeMatchQuestion from '@/components/TakeQuiz/MakeMatchQuestion';
 import UserInfo from '@/components/TakeQuiz/UserInfo';
-import { Card, Typography, List, ListItem, Button } from "@material-tailwind/react";
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faArrowLeft, faArrowRight } from '@fortawesome/free-solid-svg-icons';
+import { Button, Card, CardActions, CardContent, Typography } from '@mui/material';
 
 interface QuizTakeDto {
     quizId: number;
@@ -198,21 +198,21 @@ const QuizPage = () => {
     if (!quiz || quiz.questions.length === 0) {
         return (
             <Card>
-                <Card.Body>
-                    <Typography>Nažalost, ovaj kviz nema ni jedno pitanje, odaberite drugi</Typography>
-                    <Card.Footer>
-                        <Button onClick={handleBack} variant="outline" size={'lg'}><FontAwesomeIcon icon={faArrowLeft} /> &nbsp; Natrag</Button>
-                    </Card.Footer>
-                </Card.Body>
+                <CardContent>
+                    <Typography variant="body1">Nažalost, ovaj kviz nema ni jedno pitanje, odaberite drugi</Typography>
+                </CardContent>
+                <CardActions>
+                    <Button onClick={handleBack} variant="outlined"><FontAwesomeIcon icon={faArrowLeft} /> &nbsp; Natrag</Button>
+                </CardActions>
             </Card>
         );
     }
 
     const currentQuestion = quiz.questions[currentQuestionIndex];
 
     return (
-        <Card>
-            <Card.Body>
+        <Card sx={{width:'100%'}}>
+            <CardContent>
                 {showUserInfo && (
                     <UserInfo onBack={handlePreviousQuestion} onSubmit={submitQuiz} />
                 )}
@@ -228,15 +228,13 @@ const QuizPage = () => {
                 {!showUserInfo && currentQuestion.questionType === 4 && (
                     <MakeMatchQuestion question={currentQuestion} questionIndex={currentQuestionIndex} onAnswer={handleAnswer} initialAnswer={answers[currentQuestion.id]} />
                 )}
-            </Card.Body>
+            </CardContent>
             {!showUserInfo && (
-                    <Card.Footer>
-                        <div className="flex justify-between">
-                            <Button onClick={handlePreviousQuestion} disabled={!enablePrevious} variant="outline" size={'lg'}><FontAwesomeIcon icon={faArrowLeft} />&nbsp;Prethodno pitanje</Button>                            
-                            <Button onClick={handleNextQuestion} disabled={!enableNext} variant="outline" size={'lg'}>Sljedeće pitanje&nbsp;<FontAwesomeIcon icon={faArrowRight} /></Button>                            
-                        </div>
-                    </Card.Footer>
-                )}
+                <CardActions sx={{justifyContent: 'space-between'}}>
+                        <Button onClick={handlePreviousQuestion} disabled={!enablePrevious} variant="outlined"><FontAwesomeIcon icon={faArrowLeft} />&nbsp;Prethodno pitanje</Button>
+                        <Button onClick={handleNextQuestion} disabled={!enableNext} variant="outlined">Sljedeće pitanje&nbsp;<FontAwesomeIcon icon={faArrowRight} /></Button>                    
+                </CardActions>
+            )}
         </Card>
     );
 };