Add top bar logged user info

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 (
+    return (
-      <StylesProvider injectFirst>
+        <StylesProvider injectFirst>
-          <MuiPickersUtilsProvider utils={ LocalizedMomentUtils } libInstance={ moment }>
+            <MuiPickersUtilsProvider utils={ LocalizedMomentUtils } libInstance={ moment }>
-              <ThemeProvider theme={ studentTheme }>
+                <ThemeProvider theme={ studentTheme }>
-                  <BrowserRouter>
+                    <BrowserRouter>
-                      <header className="header">
+                        <header className="header">
-                          <div id="logo" className="header__logo">
+                            <div id="logo" className="header__logo">
-                              <Link to={ route('home') }>
+                                <Link to={ route('home') }>
-                                  <img src="img/pg-logotyp.svg"/>
+                                    <img src="img/pg-logotyp.svg"/>
-                              </Link>
+                                </Link>
-                          </div>
+                            </div>
-                          <div className="header__nav">
+                            <div className="header__nav">
-                              <nav className="header__top"></nav>
+                                <nav className="header__top">
-                              <nav className="header__bottom"></nav>
+                                    <ul className="header__menu"></ul>
-                          </div>
+                                    <div className="header__user">
-                      </header>
+                                        zalogowany jako: <strong>Jan Kowalski</strong>
-                      <Switch>{ routes.map(({ name, content, ...route }) => <Route { ...route } key={ name }>{ content() }</Route>) }</Switch>
+                                        {' '}
-                  </BrowserRouter>
+                                        (<Link to={'#'}>wyloguj się</Link>)
-              </ThemeProvider>
+                                    </div>
-          </MuiPickersUtilsProvider>
+                                    <div className="header__divider" />
-      </StylesProvider>
+                                    <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;

src/forms/Internship.tsx

@@ -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>

src/pages/base.tsx

@@ -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) =>

src/pages/main.tsx

@@ -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>

src/styles/header.scss

@@ -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;
+  }
+}

src/styles/overrides.scss

@@ -14,4 +14,10 @@
 html, body {
   margin: 0;
   padding: 0;
+
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+}
+
+* {
+  box-sizing: border-box;
 }

src/ui/theme.ts

@@ -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
-})
+}))