diff --git a/.eslintrc.json b/.eslintrc.json index f4ff131c7..a3118ae59 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -10,7 +10,7 @@ { "files": ["**/*.d.ts"], "parser": "@typescript-eslint/parser", - "plugins": ["@typescript-eslint", "plugin:@typescript-eslint/recommended"] + "plugins": ["@typescript-eslint"] } ], "parser": "@typescript-eslint/parser", diff --git a/custom.d.ts b/custom.d.ts index d3a9edae7..f7579cca6 100644 --- a/custom.d.ts +++ b/custom.d.ts @@ -12,3 +12,8 @@ declare module '*.png' { const content: any export = content } + +declare module '*.jpg' { + const content: any + export = content +} diff --git a/package.json b/package.json index cadc64bcc..7d4f9490b 100644 --- a/package.json +++ b/package.json @@ -38,8 +38,8 @@ "@types/react": "^17.0.20", "@types/react-dom": "^17.0.9", "@types/ziggy-js": "^1.0.1", - "@typescript-eslint/eslint-plugin": "^4.31.0", - "@typescript-eslint/parser": "^4.31.0", + "@typescript-eslint/eslint-plugin": "^5.28.0", + "@typescript-eslint/parser": "^5.28.0", "autoprefixer": "^10.2.4", "axios": "^0.21", "babel-eslint": "^10.1.0", diff --git a/public/translation_en.json b/public/translation_en.json index d8e03409f..aa4840f62 100644 --- a/public/translation_en.json +++ b/public/translation_en.json @@ -256,7 +256,13 @@ "welcome": { "welcome-text-1": "Welcome to ", "session-tome": "Session Tome", - "welcome-text-2": ". Create an account to manage your characters, campaigns and items at D&D events.", - "upcoming-events": "Upcoming Events" + "welcome-text-2": "Create an account to manage your characters, campaigns and items at D&D events.", + "what-is-dnd": "What is Dungeons & Dragons?", + "dnd-definition": "Dungeons & Dragons is a tabletop game where shared storytelling and improvisation makes for an experience like no other.", + "more-definition": "For more information, please visit the", + "what-is-adventure-league": "What is Dungeons & Dragons Adventurers League?", + "adventure-league-definition": "Adventurers League is an official program of organized Dungeons & Dragons gameplay. Each game or module is around 4 hours in duration, and each module belongs to a unified seasonal storyline. Players that create an AL character and record their rewards and can take that character anywhere in the world where D&D Adventurers League games are played and join in the action!", + "wizard-of-coast-website": "official Wizards of the Coast website.", + "official-site": "official website." } } \ No newline at end of file diff --git a/public/translation_fr.json b/public/translation_fr.json index 60c0e86f1..b78d5be42 100644 --- a/public/translation_fr.json +++ b/public/translation_fr.json @@ -257,7 +257,13 @@ "welcome": { "welcome-text-1": "Bienvenue à ", "session-tome": "Session Tome", - "welcome-text-2": ". Créer un compte pour gérer vos personnages, campagnes et objets pour les parties de D&D.", - "upcoming-events": "Évènements à venir" + "welcome-text-2": "Créer un compte pour gérer vos personnages, campagnes et objets pour les parties de D&D.", + "what-is-dnd": "Qu'est ce que c'est Donjons & Dragons?", + "dnd-definition": "Dungeons & Dragons (D&D) est une jeu de table mettant de l’avant des histoires, de la narration ainsi que de l’improvisation pour vous faire vivre des expériences stimulantes et uniques.", + "more-definition": "Pour plus d’information, visitez", + "what-is-adventure-league": "Qu'est ce que c'est la Ligue des Aventuriers de Donjons & Dragons?", + "adventure-league-definition": "Adventurers League (AL) est le programme officiel de jeu organisé par Wizards of the Coast. Chaque aventure ou module est d’une durée approximative de 4 heures. Ces aventures sont reliées à des saisons thématiques spécifiques. Les joueurs créent un personnage AL et enregistre leur progrès et peuvent ainsi jouer ce personnage n’importe où sur la planète.", + "wizard-of-coast-website": "le site officiel de Wizards of the Coast.", + "official-site": "le site web officiel" } } diff --git a/resources/icons/dice.svg b/resources/icons/dice.svg new file mode 100644 index 000000000..86962ca4b --- /dev/null +++ b/resources/icons/dice.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/resources/images/dnd-banner.png b/resources/images/dnd-banner.png new file mode 100644 index 000000000..0299ddc65 Binary files /dev/null and b/resources/images/dnd-banner.png differ diff --git a/resources/js/Layouts/ApplicationLayout/ApplicationLayout.tsx b/resources/js/Layouts/ApplicationLayout/ApplicationLayout.tsx index b880145a9..2d1a91188 100644 --- a/resources/js/Layouts/ApplicationLayout/ApplicationLayout.tsx +++ b/resources/js/Layouts/ApplicationLayout/ApplicationLayout.tsx @@ -125,6 +125,9 @@ const ApplicationLayout = ({children}: LayoutProps) => { width: '0.4em', height: '0.4em', }, + '*::-webkit-scrollbar-track': { + backgroundColor: '#23272a', + }, '*::-webkit-scrollbar-thumb': { backgroundColor: '#babac0', borderRadius: 16, diff --git a/resources/js/Pages/Welcome/Welcome.tsx b/resources/js/Pages/Welcome/Welcome.tsx index bb650eafb..672fb1ef1 100644 --- a/resources/js/Pages/Welcome/Welcome.tsx +++ b/resources/js/Pages/Welcome/Welcome.tsx @@ -1,19 +1,50 @@ -import {Box, Container, Grid, Typography} from '@mui/material' -import {Select} from 'Components' +import {Grid, Link, Typography} from '@mui/material' import i18n from 'i18next' +import dice from 'Icons/dice.svg' +import dndBanner from 'Images/dnd-banner.png' import {useTranslation} from 'react-i18next' +import SVG from 'react-inlinesvg' import styled from 'styled-components' import {UserType} from 'Types/global' -const StyledBox = styled(Box)` +const Container = styled.div` + text-align: center; + max-width: 70%; + margin: 0px auto; + padding: 24px; + + @media only screen and (max-width: 1200px) { + width: 100%; + } +` + +const StyledImg = styled.img` + width: 100%; +` + +const StyledSVG = styled(SVG)` + margin-right: 0.5em; +` + +const StyledText = styled.p` font-family: 'Cinzel Decorative', cursive; font-size: 16px; + display: inline; text-align: center; ` -const CenteredGrid = styled(Grid)` - align-items: center; - justify-content: center; +const StyledTypography = styled(Typography)<{align?: string}>` + text-align: ${(props) => (props.align ? props.align : 'start')}; + margin-bottom: 12px; +` + +const StyledLink = styled(Link)` + display: inline; + text-decoration: none; +` + +const LanguageSelector = styled(Typography)` + cursor: pointer; ` type WelcomeProps = { @@ -28,36 +59,61 @@ const Welcome = (props: WelcomeProps) => { const {user} = auth return ( - - + + - + {t('welcome.welcome-text-1')} - {t('welcome.session-tome')} + {t('welcome.session-tome')} + + {t('welcome.welcome-text-2')} - + - - {!user && ( - - - -