Front page

src/components/ButtonPrimary.js

@@ -0,0 +1,21 @@
+import React from "react";
+import { withStyles } from "@material-ui/core/styles";
+import Button from "@material-ui/core/Button";
+
+const StyledButton = withStyles({
+  root: {
+    background: "none",
+    color: "white",
+    margin: "16px 16px 16px 0px",
+    padding: "8px 12px 8px 12px",
+    borderColor: "white",
+    border: "solid 1px",
+  },
+  label: {
+    textTransform: "none",
+  },
+})(Button);
+
+export default function ButtonPrimary(props) {
+  return <StyledButton>{props.text}</StyledButton>;
+}

src/components/ButtonSecondary.js

@@ -0,0 +1,23 @@
+import React from "react";
+import { withStyles } from "@material-ui/core/styles";
+import Button from "@material-ui/core/Button";
+
+const StylizedButton = withStyles({
+  root: {
+    background: "#01c3a9",
+    color: "white",
+    margin: "16px 16px 16px 0px",
+    padding: "8px 12px 8px 12px",
+    borderColor: "white",
+    "&:hover": {
+      backgroundColor: "#00af98",
+    },
+  },
+  label: {
+    textTransform: "none",
+  },
+})(Button);
+
+export default function ButtonSecondary(props) {
+  return <StylizedButton>{props.text}</StylizedButton>;
+}

src/components/CustomTextInput.js

@@ -0,0 +1,38 @@
+import React from "react";
+import TextField from "@material-ui/core/TextField";
+import { makeStyles } from "@material-ui/core/styles";
+import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
+
+const styles = makeStyles({
+  root: {
+    margin: "6px",
+    textDecorationColor: "#0e8496",
+  },
+  input: {
+    color: "#0e8496",
+  },
+});
+
+const theme = createMuiTheme({
+  palette: {
+    primary: {
+      main: "#0e8496",
+    },
+  },
+});
+
+export default function CustomTextInput(props) {
+  const classes = styles();
+  return (
+    <ThemeProvider theme={theme}>
+      <TextField
+        id={props.id}
+        className={classes.root}
+        label={props.label}
+        type="search"
+        variant="outlined"
+        InputProps={{ className: classes.input }}
+      ></TextField>
+    </ThemeProvider>
+  );
+}

src/components/Footer.js

@@ -0,0 +1,11 @@
+import React from "react";
+
+export default class Footer extends React.Component {
+  render() {
+    return (
+      <div className="footer">
+        <p>Bankai Software 2020</p>
+      </div>
+    );
+  }
+}

src/components/SearchPanel.js

@@ -0,0 +1,21 @@
+import React from "react";
+import ButtonSecondary from "./ButtonSecondary";
+import CustomTextInput from "./CustomTextInput";
+
+export default class SearchPanel extends React.Component {
+  render() {
+    return (
+      <div className="searchPanel">
+        <CustomTextInput
+          color="primary"
+          id="search"
+          label="Miasto, nazwa lokalu,..."
+          type="search"
+        />
+        <div className="btnContainer">
+          <ButtonSecondary text="Szukaj" />
+        </div>
+      </div>
+    );
+  }
+}

src/components/TopBar.js

@@ -0,0 +1,15 @@
+import React from "react";
+import ButtonSecondary from "./ButtonSecondary";
+import logo from "../public/logo_mint.svg";
+
+export default function TopBar() {
+  return (
+    <div className="topBar">
+      <img src={logo} className="topBarLogo" alt="Menui logo" />
+      <div>
+        <ButtonSecondary text="Dodaj Lokal" />
+        <ButtonSecondary text="Logowanie" />
+      </div>
+    </div>
+  );
+}