asie/system-praktyk-front
1
0
Fork 0
forked from system-praktyk/system-praktyk-front
Code Issues Pull Requests Releases Wiki Activity

Add new theme based on new GUT style guide

Browse Source
This commit is contained in:
Kacper Donat 2020-07-10 20:10:31 +02:00
parent 774e89a3ec
commit 2eabcc8b93
10 changed files with 106 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/img/pg-logotyp.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

1
public/index.html
View File

@ -7,6 +7,7 @@
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap&subset=latin,latin-ext" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap&subset=latin,latin-ext" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>Zgłoszenie praktyki studenckiej</title> <title>Zgłoszenie praktyki studenckiej</title>
<base href="/">
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>

21
src/app.tsx
View File

@ -1,18 +1,18 @@
import React from 'react'; import React from 'react';
import { Container, Typography } from "@material-ui/core";
import { MuiThemeProvider as ThemeProvider, StylesProvider } from "@material-ui/core/styles"; import { MuiThemeProvider as ThemeProvider, StylesProvider } from "@material-ui/core/styles";
import { studentTheme } from "./ui/theme"; import { studentTheme } from "./ui/theme";
import { InternshipForm } from "@/forms/Internship";
import { MuiPickersUtilsProvider } from "@material-ui/pickers"; import { MuiPickersUtilsProvider } from "@material-ui/pickers";
import MomentUtils from "@date-io/moment"; import MomentUtils from "@date-io/moment";
import { BrowserRouter, Switch, Route } from "react-router-dom" import { BrowserRouter, Switch, Route, Link } from "react-router-dom"
import "moment/locale/pl" import "moment/locale/pl"
moment.locale("pl") moment.locale("pl")
import '@/styles/overrides.scss' import '@/styles/overrides.scss'
import '@/styles/header.scss'
import moment, { Moment } from "moment"; import moment, { Moment } from "moment";
import { routes } from "@/routing"; import { route, routes } from "@/routing";
class LocalizedMomentUtils extends MomentUtils { class LocalizedMomentUtils extends MomentUtils {
getDatePickerHeaderText(date: Moment): string { getDatePickerHeaderText(date: Moment): string {
@ -26,9 +26,18 @@ function App() {
<MuiPickersUtilsProvider utils={ LocalizedMomentUtils } libInstance={ moment }> <MuiPickersUtilsProvider utils={ LocalizedMomentUtils } libInstance={ moment }>
<ThemeProvider theme={ studentTheme }> <ThemeProvider theme={ studentTheme }>
<BrowserRouter> <BrowserRouter>
<div className="app"> <header className="header">
<Switch>{ routes.map(({ name, content, ...route }) => <Route { ...route } key={ name }>{ content() }</Route>) }</Switch> <div id="logo" className="header__logo">
<Link to={ route('home') }>
<img src="img/pg-logotyp.svg"/>
</Link>
</div> </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> </BrowserRouter>
</ThemeProvider> </ThemeProvider>
</MuiPickersUtilsProvider> </MuiPickersUtilsProvider>

17
src/pages/base.tsx
View File

@ -1,10 +1,16 @@
import React, { HTMLProps, useEffect } from "react"; import React, { HTMLProps, useEffect } from "react";
import classNames from "classnames" import classNames from "classnames"
import { Breadcrumbs, BreadcrumbsProps, Container, Typography } from "@material-ui/core";
import "@/styles/page.scss"
export type PageProps = { export type PageProps = {
title?: string; title?: string;
} & HTMLProps<any>; } & HTMLProps<any>;
export type PageHeaderProps = {
maxWidth?: "sm" | "md" | "lg" | false
} & HTMLProps<HTMLDivElement>
export const Page = ({ title, children, ...props }: PageProps) => { export const Page = ({ title, children, ...props }: PageProps) => {
useEffect(() => { useEffect(() => {
document.title = title ? title + " | Praktyka Studencka" : "Praktyka Studencka"; document.title = title ? title + " | Praktyka Studencka" : "Praktyka Studencka";
@ -14,3 +20,14 @@ export const Page = ({ title, children, ...props }: PageProps) => {
{ children } { children }
</main> </main>
} }
Page.Header = ({ children, maxWidth = false, ...props }: PageHeaderProps) =>
<section {...props} className={classNames("page__header", props.className)}>
<Container maxWidth={ maxWidth }>
{ children }
</Container>
</section>
Page.Title = ({ children }: HTMLProps<any>) => <Typography variant="h2" className="page__title">{ children }</Typography>
Page.Breadcrumbs = ({ children, ...props }: BreadcrumbsProps) => <Breadcrumbs { ...props}>{ children }</Breadcrumbs>

18
src/pages/main.tsx
View File

@ -1,8 +1,8 @@
import React from "react"; import React from "react";
import { Page } from "@/pages/base"; import { Page } from "@/pages/base";
import { Container, Typography, Button, Divider, Box, Stepper, Step, StepLabel, StepContent } from "@material-ui/core"; import { Container, Typography, Button, Divider, Box, Stepper, Step, StepLabel, StepContent, Link } from "@material-ui/core";
import { InternshipForm } from "@/forms/Internship"; import { InternshipForm } from "@/forms/Internship";
import { Link } from "react-router-dom"; import { Link as RouterLink } from "react-router-dom";
import { route } from "@/routing"; import { route } from "@/routing";
export const MainPage = () => { export const MainPage = () => {
@ -21,7 +21,7 @@ export const MainPage = () => {
<Step active> <Step active>
<StepLabel>Zgłoszenie praktyki</StepLabel> <StepLabel>Zgłoszenie praktyki</StepLabel>
<StepContent> <StepContent>
<Button to={ route("internship_proposal") } variant="contained" color="primary" component={ Link }>Formularz zgłoszenia praktyki</Button> <Button to={ route("internship_proposal") } variant="contained" color="primary" component={ RouterLink }>Formularz zgłoszenia praktyki</Button>
</StepContent> </StepContent>
</Step> </Step>
</Stepper> </Stepper>
@ -31,10 +31,14 @@ export const MainPage = () => {
export const InternshipFormPage = () => { export const InternshipFormPage = () => {
return <Page title="Zgłoszenie praktyki"> return <Page title="Zgłoszenie praktyki">
<Page.Header maxWidth="md">
<Page.Breadcrumbs>
<Link component={ RouterLink } to={ route("home") }>Moja praktyka</Link>
<Typography color="textPrimary">Zgłoszenie praktyki</Typography>
</Page.Breadcrumbs>
<Page.Title>Zgłoszenie praktyki</Page.Title>
</Page.Header>
<Container maxWidth={"md"}> <Container maxWidth={"md"}>
<Typography variant="h3">Zgłoszenie Praktyki</Typography>
<Typography variant="subtitle1">UX Demo</Typography>
<InternshipForm /> <InternshipForm />
</Container> </Container>
</Page> </Page>
@ -50,7 +54,7 @@ export const NotFoundPage = () => {
<Divider variant="fullWidth" /> <Divider variant="fullWidth" />
</Box> </Box>
<Button to={ route("home") } color="primary" component={ Link }>strona główna</Button> <Button to={ route("home") } color="primary" component={ RouterLink }>strona główna</Button>
</Container> </Container>
</Page> </Page>
} }

5
src/styles/_variables.scss Normal file
View File

@ -0,0 +1,5 @@
$brand: #043865;
$main: #052f52;
$main-dark: #072138;

29
src/styles/header.scss Normal file
View File

@ -0,0 +1,29 @@
@import "variables";
.header {
height: 110px;
background: $main;
display: flex;
}
.header__logo {
width: 152px;
background: $brand;
display: flex;
align-items: center;
justify-content: center;
img {
width: 100px;
}
}
.header__top {
background-color: $main-dark;
height: 38px;
width: 100%;
}
.header__nav {
flex: 1 1 auto;
}

5
src/styles/overrides.scss
View File

@ -11,6 +11,7 @@
margin-top: 1.5rem; margin-top: 1.5rem;
} }
#root { html, body {
margin: 100px 0; margin: 0;
padding: 0;
} }

14
src/styles/page.scss Normal file
View File

@ -0,0 +1,14 @@
@import "variables";
.page__header {
background-color: #e9f0f5;
padding: 20px 0;
margin-bottom: 2rem;
}
.page__title {
color: $brand;
font-size: 3rem;
font-weight: 400;
line-height: 1.5;
}

9
src/ui/theme.ts
View File

@ -5,6 +5,15 @@ export const studentTheme = createMuiTheme({
MuiGrid: { MuiGrid: {
spacing: 3, spacing: 3,
xs: 12, xs: 12,
},
MuiContainer: {
maxWidth: "md"
}
},
palette: {
primary: {
main: "#043865",
dark: "#072138"
} }
}, },
spacing: 8 spacing: 8