Create custom theme

itsmeurbi · itsmeurbi · commit 0c9d26f289c4 · 2024-06-13T13:48:18.000-06:00
diff --git a/index.html b/index.html
@@ -2,11 +2,11 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/ico" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>Web Dev Talks</title>
   </head>
-  <body>
+  <body style="margin: 0">
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
diff --git a/public/WDT.svg b/public/WDT.svg
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,10 +1,14 @@
 import { BrowserRouter } from 'react-router-dom'
 import Router from './routes'
+import { ThemeProvider } from '@mui/material/styles';
+import theme from './theme'
 
 export default function App() {
   return(
     <BrowserRouter>
-      <Router/>
+      <ThemeProvider theme={theme}>
+        <Router/>
+      </ThemeProvider>
     </BrowserRouter>
   )
 }
diff --git a/src/LanguageSelector.tsx b/src/LanguageSelector.tsx
@@ -23,6 +23,7 @@ export const LanguageSelector = () => {
             id="demo-simple-select"
             value={language}
             label="Idioma"
+            color="primary"
             onChange={onChangeLang}
           >
            {LANGUAGES.map(({code, label}) => (
diff --git a/src/NavBar.tsx b/src/NavBar.tsx
@@ -1,12 +1,15 @@
 import { useTranslation } from 'react-i18next'
 import { Link } from 'react-router-dom'
 import { useSurvey } from './hooks/useSurvey'
-import AppBar from '@mui/material/AppBar'
-import Toolbar from '@mui/material/Toolbar'
-import Typography from '@mui/material/Typography'
-import Container from '@mui/material/Container'
-import Button from '@mui/material/Button'
-import Avatar from '@mui/icons-material/Adb'
+import {
+  Box,
+  AppBar,
+  Toolbar,
+  Typography,
+  Container,
+  Button,
+  Avatar
+} from '@mui/material'
 import { LanguageSelector } from './LanguageSelector';
 const LOGO = 'src/assets/images/logo.png'
 
@@ -16,28 +19,30 @@ function NavBar({ selected = null }) {
 
   return (
     <>
-      <AppBar position="static">
+      <AppBar position="sticky" color="default">
         <Container maxWidth="xl">
           <Toolbar disableGutters>
-            <Link to="/" style={{ textDecoration: 'none' }}>
+            <Link to="/" style={{ textDecoration: 'none', marginRight: '1rem' }}>
               <Avatar src={LOGO} alt="Logo WDT" sx={{ width: '100%', height: '100%', maxWidth: '50px' }} />
             </Link>
-            <Link to="/sponsorship" style={{ textDecoration: 'none' }}>
-              <Button sx={{ my: 2, color: 'white', display: 'block' }} >
+            <Link to="/sponsorship" style={{ textDecoration: 'none', height: '100%' }}>
+              <Button sx={{ height: '100%'}}>
                 <Typography>{t("navbar.sponsorship", "¿Te interesa patrocinar?")}</Typography>
               </Button>
             </Link>
-            <Link to="/about" style={{ textDecoration: 'none' }}>
-              <Button sx={{ my: 2, color: 'white', display: 'block' }} >
+            <Link to="/about" style={{ textDecoration: 'none', height: '100%' }}>
+              <Button sx={{ height: '100%'}}>
                 <Typography>{t("navbar.aboutUs", "Acerca de nosotros")}</Typography>
               </Button>
             </Link>
-            <Link to="/" onClick={openSurvey} style={{ textDecoration: 'none' }}>
-              <Button sx={{ my: 2, color: 'white', display: 'block' }} >
+            <Link to="/" onClick={openSurvey} style={{ textDecoration: 'none', height: '100%' }}>
+              <Button sx={{ height: '100%'}}>
                 <Typography>{t("navbar.survey", "Encuesta")}</Typography>
               </Button>
             </Link>
-            <LanguageSelector/>
+            <Box sx={{ ml: 1 }}>
+              <LanguageSelector/>
+            </Box>
           </Toolbar>
         </Container>
       </AppBar>
diff --git a/src/theme.ts b/src/theme.ts
@@ -0,0 +1,19 @@
+import { createTheme } from '@mui/material/styles';
+
+const theme = createTheme({
+  palette: {
+    primary: {
+      main: '#1c1c17',
+    },
+    secondary: {
+      main: '#3298cc',
+    },
+    background: {
+      default: '#ffffff'
+    }
+  },
+  typography: {
+  },
+});
+
+export default theme

Original file line number	Diff line number	Diff line change
`@@ -23,6 +23,7 @@ export const LanguageSelector = () => {`
`23`	`23`	`id="demo-simple-select"`
`24`	`24`	`value={language}`
`25`	`25`	`label="Idioma"`
	`26`	`+ color="primary"`
`26`	`27`	`onChange={onChangeLang}`
`27`	`28`	`>`
`28`	`29`	`{LANGUAGES.map(({code, label}) => (`