Add top bar logged user info
This commit is contained in:
Kacper Donat
parent
2eabcc8b93
commit
0adbb53151
65
src/app.tsx
65
src/app.tsx
@ -3,16 +3,17 @@ import { MuiThemeProvider as ThemeProvider, StylesProvider } from "@material-ui/
|
||||
import { studentTheme } from "./ui/theme";
|
||||
import { MuiPickersUtilsProvider } from "@material-ui/pickers";
|
||||
import MomentUtils from "@date-io/moment";
|
||||
import { BrowserRouter, Switch, Route, Link } from "react-router-dom"
|
||||
import { BrowserRouter, Link, Route, Switch } from "react-router-dom"
|
||||
|
||||
import "moment/locale/pl"
|
||||
moment.locale("pl")
|
||||
|
||||
import '@/styles/overrides.scss'
|
||||
import '@/styles/header.scss'
|
||||
|
||||
import moment, { Moment } from "moment";
|
||||
import { route, routes } from "@/routing";
|
||||
import { Button, Divider } from '@material-ui/core';
|
||||
|
||||
moment.locale("pl")
|
||||
|
||||
class LocalizedMomentUtils extends MomentUtils {
|
||||
getDatePickerHeaderText(date: Moment): string {
|
||||
@ -21,28 +22,42 @@ class LocalizedMomentUtils extends MomentUtils {
|
||||
}
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<StylesProvider injectFirst>
|
||||
<MuiPickersUtilsProvider utils={ LocalizedMomentUtils } libInstance={ moment }>
|
||||
<ThemeProvider theme={ studentTheme }>
|
||||
<BrowserRouter>
|
||||
<header className="header">
|
||||
<div id="logo" className="header__logo">
|
||||
<Link to={ route('home') }>
|
||||
<img src="img/pg-logotyp.svg"/>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="header__nav">
|
||||
<nav className="header__top"></nav>
|
||||
<nav className="header__bottom"></nav>
|
||||
</div>
|
||||
</header>
|
||||
<Switch>{ routes.map(({ name, content, ...route }) => <Route { ...route } key={ name }>{ content() }</Route>) }</Switch>
|
||||
</BrowserRouter>
|
||||
</ThemeProvider>
|
||||
</MuiPickersUtilsProvider>
|
||||
</StylesProvider>
|
||||
);
|
||||
return (
|
||||
<StylesProvider injectFirst>
|
||||
<MuiPickersUtilsProvider utils={ LocalizedMomentUtils } libInstance={ moment }>
|
||||
<ThemeProvider theme={ studentTheme }>
|
||||
<BrowserRouter>
|
||||
<header className="header">
|
||||
<div id="logo" className="header__logo">
|
||||
<Link to={ route('home') }>
|
||||
<img src="img/pg-logotyp.svg"/>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="header__nav">
|
||||
<nav className="header__top">
|
||||
<ul className="header__menu"></ul>
|
||||
<div className="header__user">
|
||||
zalogowany jako: <strong>Jan Kowalski</strong>
|
||||
{' '}
|
||||
(<Link to={'#'}>wyloguj się</Link>)
|
||||
</div>
|
||||
<div className="header__divider" />
|
||||
<ul className="header__language-switcher">
|
||||
<li>pl</li>
|
||||
<li>en</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<nav className="header__bottom">
|
||||
<ul className="header__menu header__menu--main"></ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<Switch>{ routes.map(({ name, content, ...route }) => <Route { ...route } key={ name }>{ content() }</Route>) }</Switch>
|
||||
</BrowserRouter>
|
||||
</ThemeProvider>
|
||||
</MuiPickersUtilsProvider>
|
||||
</StylesProvider>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
||||
@ -144,13 +144,13 @@ export const InternshipForm: React.FunctionComponent<InternshipFormProps> = prop
|
||||
|
||||
return (
|
||||
<div className="internship-form">
|
||||
<Typography variant="h5" className="section-header">Dane osoby odbywającej praktykę</Typography>
|
||||
<Typography variant="h3" className="section-header">Dane osoby odbywającej praktykę</Typography>
|
||||
<StudentForm student={ sampleStudent }/>
|
||||
<Typography variant="h5" className="section-header">Rodzaj i program praktyki</Typography>
|
||||
<Typography variant="h3" className="section-header">Rodzaj i program praktyki</Typography>
|
||||
<InternshipProgramForm internship={ internship } onChange={ setInternship }/>
|
||||
<Typography variant="h5" className="section-header">Czas trwania praktyki</Typography>
|
||||
<Typography variant="h3" className="section-header">Czas trwania praktyki</Typography>
|
||||
<InternshipDurationForm internship={ internship } onChange={ setInternship }/>
|
||||
<Typography variant="h5" className="section-header">Miejsce odbywania praktyki</Typography>
|
||||
<Typography variant="h3" className="section-header">Miejsce odbywania praktyki</Typography>
|
||||
<CompanyForm internship={ internship } onChange={ setInternship }/>
|
||||
<Button variant="contained" color="primary">Wyślij</Button>
|
||||
</div>
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
import React, { HTMLProps, useEffect } from "react";
|
||||
import classNames from "classnames"
|
||||
import { Breadcrumbs, BreadcrumbsProps, Container, Typography } from "@material-ui/core";
|
||||
import { Box, BoxProps, Breadcrumbs, BreadcrumbsProps, Container, Typography } from "@material-ui/core";
|
||||
import "@/styles/page.scss"
|
||||
|
||||
export type PageProps = {
|
||||
title?: string;
|
||||
} & HTMLProps<any>;
|
||||
} & BoxProps;
|
||||
|
||||
export type PageHeaderProps = {
|
||||
maxWidth?: "sm" | "md" | "lg" | false
|
||||
@ -16,9 +16,9 @@ export const Page = ({ title, children, ...props }: PageProps) => {
|
||||
document.title = title ? title + " | Praktyka Studencka" : "Praktyka Studencka";
|
||||
}, [ title ])
|
||||
|
||||
return <main {...props} className={ classNames("page", props.className) }>
|
||||
return <Box {...props} className={ classNames("page", props.className) } component="main">
|
||||
{ children }
|
||||
</main>
|
||||
</Box>
|
||||
}
|
||||
|
||||
Page.Header = ({ children, maxWidth = false, ...props }: PageHeaderProps) =>
|
||||
|
||||
@ -6,8 +6,9 @@ import { Link as RouterLink } from "react-router-dom";
|
||||
import { route } from "@/routing";
|
||||
|
||||
export const MainPage = () => {
|
||||
return <Page>
|
||||
return <Page my={6}>
|
||||
<Container>
|
||||
<Typography variant="h2">Moja praktyka</Typography>
|
||||
<Stepper orientation="vertical" nonLinear>
|
||||
<Step completed active={false}>
|
||||
<StepLabel>
|
||||
|
||||
@ -4,6 +4,8 @@
|
||||
height: 110px;
|
||||
background: $main;
|
||||
display: flex;
|
||||
|
||||
color: white;
|
||||
}
|
||||
|
||||
.header__logo {
|
||||
@ -22,8 +24,39 @@
|
||||
background-color: $main-dark;
|
||||
height: 38px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 0.75rem;
|
||||
color: #e4f1fe;
|
||||
padding: 0 1rem;
|
||||
|
||||
a {
|
||||
color: #e4f1fe
|
||||
}
|
||||
|
||||
.header__divider {
|
||||
margin: 0 .5rem;
|
||||
background: lighten($main-dark, 3%);
|
||||
width: 1px;
|
||||
height: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
.header__nav {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.header__top .header__menu {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.header__language-switcher {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
text-transform: uppercase;
|
||||
|
||||
li {
|
||||
padding: 7px;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -14,4 +14,10 @@
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { createMuiTheme } from "@material-ui/core/styles";
|
||||
import { createMuiTheme, responsiveFontSizes } from "@material-ui/core/styles";
|
||||
|
||||
export const studentTheme = createMuiTheme({
|
||||
export const studentTheme = responsiveFontSizes(createMuiTheme({
|
||||
props: {
|
||||
MuiGrid: {
|
||||
spacing: 3,
|
||||
@ -16,5 +16,19 @@ export const studentTheme = createMuiTheme({
|
||||
dark: "#072138"
|
||||
}
|
||||
},
|
||||
typography: {
|
||||
h2: {
|
||||
fontSize: "3rem",
|
||||
fontWeight: 400,
|
||||
color: "#043865",
|
||||
},
|
||||
h3: {
|
||||
fontSize: "2.25rem",
|
||||
lineHeight: "1.2",
|
||||
},
|
||||
h4: {
|
||||
fontSize: "1.75rem"
|
||||
},
|
||||
},
|
||||
spacing: 8
|
||||
})
|
||||
}))
|
||||
|
||||
Loading…
Reference in New Issue
Block a user