diff --git a/public/img/pg-logotyp.svg b/public/img/pg-logotyp.svg new file mode 100644 index 0000000..3cf3f61 --- /dev/null +++ b/public/img/pg-logotyp.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/index.html b/public/index.html index 6482fd8..076a951 100644 --- a/public/index.html +++ b/public/index.html @@ -7,6 +7,7 @@ Zgłoszenie praktyki studenckiej + diff --git a/src/app.tsx b/src/app.tsx index db5e4cf..c9b9018 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -1,18 +1,18 @@ import React from 'react'; -import { Container, Typography } from "@material-ui/core"; import { MuiThemeProvider as ThemeProvider, StylesProvider } from "@material-ui/core/styles"; import { studentTheme } from "./ui/theme"; -import { InternshipForm } from "@/forms/Internship"; import { MuiPickersUtilsProvider } from "@material-ui/pickers"; 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" moment.locale("pl") import '@/styles/overrides.scss' +import '@/styles/header.scss' + import moment, { Moment } from "moment"; -import { routes } from "@/routing"; +import { route, routes } from "@/routing"; class LocalizedMomentUtils extends MomentUtils { getDatePickerHeaderText(date: Moment): string { @@ -26,9 +26,18 @@ function App() { -
- { routes.map(({ name, content, ...route }) => { content() }) } -
+
+ +
+ + +
+
+ { routes.map(({ name, content, ...route }) => { content() }) } diff --git a/src/pages/base.tsx b/src/pages/base.tsx index 7d487d4..b8f1ff3 100644 --- a/src/pages/base.tsx +++ b/src/pages/base.tsx @@ -1,10 +1,16 @@ import React, { HTMLProps, useEffect } from "react"; import classNames from "classnames" +import { Breadcrumbs, BreadcrumbsProps, Container, Typography } from "@material-ui/core"; +import "@/styles/page.scss" export type PageProps = { title?: string; } & HTMLProps; +export type PageHeaderProps = { + maxWidth?: "sm" | "md" | "lg" | false +} & HTMLProps + export const Page = ({ title, children, ...props }: PageProps) => { useEffect(() => { document.title = title ? title + " | Praktyka Studencka" : "Praktyka Studencka"; @@ -14,3 +20,14 @@ export const Page = ({ title, children, ...props }: PageProps) => { { children } } + +Page.Header = ({ children, maxWidth = false, ...props }: PageHeaderProps) => +
+ + { children } + +
+ +Page.Title = ({ children }: HTMLProps) => { children } + +Page.Breadcrumbs = ({ children, ...props }: BreadcrumbsProps) => { children } diff --git a/src/pages/main.tsx b/src/pages/main.tsx index 9f94398..8fcb80d 100644 --- a/src/pages/main.tsx +++ b/src/pages/main.tsx @@ -1,8 +1,8 @@ import React from "react"; 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 { Link } from "react-router-dom"; +import { Link as RouterLink } from "react-router-dom"; import { route } from "@/routing"; export const MainPage = () => { @@ -21,7 +21,7 @@ export const MainPage = () => { Zgłoszenie praktyki - + @@ -31,10 +31,14 @@ export const MainPage = () => { export const InternshipFormPage = () => { return + + + Moja praktyka + Zgłoszenie praktyki + + Zgłoszenie praktyki + - Zgłoszenie Praktyki - UX Demo - @@ -50,7 +54,7 @@ export const NotFoundPage = () => { - + } diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss new file mode 100644 index 0000000..520af2e --- /dev/null +++ b/src/styles/_variables.scss @@ -0,0 +1,5 @@ +$brand: #043865; + +$main: #052f52; +$main-dark: #072138; + diff --git a/src/styles/header.scss b/src/styles/header.scss new file mode 100644 index 0000000..b13891b --- /dev/null +++ b/src/styles/header.scss @@ -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; +} diff --git a/src/styles/overrides.scss b/src/styles/overrides.scss index e143cac..78aa4a2 100644 --- a/src/styles/overrides.scss +++ b/src/styles/overrides.scss @@ -11,6 +11,7 @@ margin-top: 1.5rem; } -#root { - margin: 100px 0; +html, body { + margin: 0; + padding: 0; } diff --git a/src/styles/page.scss b/src/styles/page.scss new file mode 100644 index 0000000..8b41597 --- /dev/null +++ b/src/styles/page.scss @@ -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; +} diff --git a/src/ui/theme.ts b/src/ui/theme.ts index a6286bd..f03db04 100644 --- a/src/ui/theme.ts +++ b/src/ui/theme.ts @@ -5,6 +5,15 @@ export const studentTheme = createMuiTheme({ MuiGrid: { spacing: 3, xs: 12, + }, + MuiContainer: { + maxWidth: "md" + } + }, + palette: { + primary: { + main: "#043865", + dark: "#072138" } }, spacing: 8