Merge pull request 'topbar' (#1) from topbar into master

Reviewed-by: filipizydorczyk <filip.izydorczyk@protonmail.com>

package.json

@@ -42,5 +42,6 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+  "optionalDependencies": {}
 }

src/App.tsx

@@ -1,11 +1,36 @@
-import React from "react";
-import TopBar from "./components/TopBar/index"
+import React, { useState } from "react";
+import TopBar from "./components/TopBar/";
+import Transfer from "./components/Transfer/";
 import "./App.scss";
 
 function App() {
+  const [isOpen, setOpen] = useState(false);
+  const [text, setText] = useState("");
+
   return (
     <div className="App">
-			<TopBar></TopBar>
+      <TopBar
+        textChangeHandler={(e) => {
+          setText(e.target.value);
+        }}
+        handleTransfer={(e) => {
+          setOpen(!isOpen);
+        }}
+        handleLanguage={(e)=>{
+          alert("chuj1");
+        }}
+        handleProfile={(e)=>{
+          alert("chuj2");
+        }}
+        isOpen={isOpen}
+      />
+      <Transfer
+        isOpen={isOpen}
+        handleClose={(e) => {
+          setOpen(!isOpen);
+        }}
+      />
+	  <h1>{text}</h1>
     </div>
   );
 }

src/components/TopBar/close.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg height="48" viewBox="0 0 48 48" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M38 12.83l-2.83-2.83-11.17 11.17-11.17-11.17-2.83 2.83 11.17 11.17-11.17 11.17 2.83 2.83 11.17-11.17 11.17 11.17 2.83-2.83-11.17-11.17z"/><path d="M0 0h48v48h-48z" fill="none"/></svg>

src/components/TopBar/index.css

@@ -1,105 +0,0 @@
-.bar {
-  background-color: #ffdc61;
-  height: 80px;
-  padding: 5px;
-  font-family: comic sans MS;
-  font-size: 24px;
-  font-weight: bold;
-  position: relative;
-}
-
-.logo {
-  width: 80px;
-  height: 80px;
-  float: left;
-}
-
-.rest {
-  margin-top: 20px;
-  overflow: hidden;
-}
-
-.tekst {
-  width: 200px;
-  float: left;
-}
-
-.iconSearch {
-  width: 35px;
-  float: left;
-}
-
-.inputdiv {
-  width: 70%;
-  float: left;
-  transition: width 1s;
-}
-
-.input {
-  width: 96%;
-  float: left;
-  transition: width 1s;
-}
-
-@media only screen and (max-width: 1400px) {
-  .inputdiv {
-    width: 50%;
-    float: left;
-  }
-
-  .input {
-    width: 76%;
-    float: left;
-  }
-}
-
-@media only screen and (max-width: 870px) {
-    .tekst {
-        display: none;
-      }
-  .iconClose{
-      display: none;
-  }
-  .iconUser {
-    width: 37px !important;
-    float: right;
-  }
-
-  .transfer {
-    margin-left: 10px !important;
-    width: 37px !important;
-    float: right;
-  }
-
-  .UK {
-    margin-left: 10px !important;
-    width: 35px !important;
-    float: right;
-  }
-}
-
-.search {
-  overflow: hidden;
-}
-
-.iconClose {
-  width: 35px;
-  float: left;
-}
-
-.iconUser {
-  width: 47px;
-  float: right;
-}
-
-.transfer {
-  margin-left: 25px;
-  width: 47px;
-  float: right;
-}
-
-.UK {
-  margin-left: 25px;
-  width: 45px;
-  float: right;
-}

src/components/TopBar/index.scss

@@ -0,0 +1,71 @@
+.top-bar {
+  background-color: #ffdc61;
+  height: 80px;
+  padding: 5px;
+  font-family: comic sans MS;
+  font-size: 24px;
+  font-weight: bold;
+  display: flex;
+  justify-content: space-between;
+
+  &__logo {
+    display: flex;
+    align-items: center;
+    flex-grow: 0.5;
+    justify-content: flex-start;
+
+    &-image {
+      width: 80px;
+      height: 80px;
+    }
+  }
+
+  &__input {
+    &-div {
+      width: 70%;
+      display: flex;
+      align-items: center;
+      flex-grow: 3;
+    }
+
+    &-field {
+      width: 96%;
+    }
+
+    &-icon{
+      width: 35px;
+    }
+  }
+
+  &__icon {
+    width: 50px;
+    cursor: pointer;
+    &-box {
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      flex-grow: 1.5;
+    }
+  }
+}
+@media only screen and (max-width: 670px) {
+  .top-bar {
+    &__tekst {
+      display: none;
+    }
+    &__icon {
+      width: 35px;
+    }
+    &__logo-image {
+      width: 60px;
+      height: 60px;
+    }
+
+    &__input-icon{
+        width: 25px;
+      }
+    }
+  }
+
+
+

src/components/TopBar/index.tsx

@@ -1,49 +1,101 @@
-import React from "react";
-import "./index.css";
+import React, { ChangeEvent } from "react";
+import "./index.scss";
 import Input from "@material-ui/core/Input";
-import SearchIcon from "@material-ui/icons/Search";
-import CloseIcon from "@material-ui/icons/Close";
+import Transfer from "./transfer.png";
+import Search from "./search.svg";
+import UK from "./UK.png";
+import User from "./user.png";
+import CloseIcon from "./close.svg";
+
+interface TopBarProps {
+  handleTransfer: (e: React.MouseEvent) => void;
+  handleProfile: (e: React.MouseEvent) => void;
+  handleLanguage: (e: React.MouseEvent) => void;
+  textChangeHandler: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  isOpen: boolean;
+}
+
+interface TopBarState {}
+
+export default class TopBar extends React.Component<TopBarProps, TopBarState> {
+  constructor(props: TopBarProps) {
+    super(props);
+    this.handleProfile = this.handleProfile.bind(this);
+    this.handleLanguage = this.handleLanguage.bind(this);
+    this.handleTransfer = this.handleTransfer.bind(this);
+    this.state = {
+      isOpen: false,
+    };
+  }
+
+  handleTransfer(e: React.MouseEvent) {
+    this.props.handleTransfer(e);
+    this.setState({
+      isOpen: true,
+    });
+  }
+
+  handleChange(e: React.ChangeEvent<HTMLInputElement>) {
+    this.props.textChangeHandler(e);
+  }
+
+  handleProfile(e: React.MouseEvent) {
+    this.props.handleProfile(e);
+  }
+
+  handleLanguage(e: React.MouseEvent) {
+    this.props.handleLanguage(e);
+  }
 
-export default class TopBar extends React.Component {
   render() {
     return (
-      <div className="bar">
+      <div className="top-bar">
+        <div className="top-bar__logo">
           <img
-          className="logo"
+            className="top-bar__logo-image"
             alt="logo"
             src="https://plannaplan.pl/img/logo.svg"
           />
-        <div className="rest">
-          <div className="tekst"> plan na plan </div>
-          <div className="inputdiv">
-            <div className="iconSearch">
-              <SearchIcon fontSize="large"></SearchIcon>
+          <div className="top-bar__tekst"> plan na plan </div>
         </div>
-            <div className="search">
+        <div className="top-bar__input-div">
+        <img
+            className="top-bar__input-icon"
+            alt="search"
+            src={Search}
+          />
           <Input
             placeholder="Wyszukaj..."
             inputProps={{ "aria-label": "description" }}
-                className="input"
-              />
-              <div className="iconClose">
-                <CloseIcon fontSize="large"></CloseIcon>
-              </div>
-            </div>
-          </div>
-          <img
-            className="transfer"
-            alt="logo"
-            src="https://plannaplan.pl/img/transfer.png"
+            className="top-bar__input-field"
+            onChange={(e) =>
+              this.handleChange(e as ChangeEvent<HTMLInputElement>)
+            }
           />
         <img
-            className="UK"
-            alt="logo"
-            src="https://plannaplan.pl/img/UK.png"
+            className="top-bar__input-icon"
+            alt="close"
+            src={CloseIcon}
+          />
+        </div>
+        <div className="top-bar__icon-box">
+          <img
+            className="top-bar__icon"
+            alt="transfer"
+            src={Transfer}
+            onClick={this.handleTransfer}
           />
           <img
-            className="iconUser"
-            alt="logo"
-            src="https://plannaplan.pl/img/user.svg"
+            className="top-bar__icon"
+            alt="change_language"
+            src={UK}
+            onClick={this.handleLanguage}
+          />
+          <img
+            className="top-bar__icon"
+            alt="profile"
+            src={User}
+            onClick={this.handleProfile}
           />
         </div>
       </div>

src/components/TopBar/search.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height="512px" id="Layer_1" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" width="512px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M344.5,298c15-23.6,23.8-51.6,23.8-81.7c0-84.1-68.1-152.3-152.1-152.3C132.1,64,64,132.2,64,216.3  c0,84.1,68.1,152.3,152.1,152.3c30.5,0,58.9-9,82.7-24.4l6.9-4.8L414.3,448l33.7-34.3L339.5,305.1L344.5,298z M301.4,131.2  c22.7,22.7,35.2,52.9,35.2,85c0,32.1-12.5,62.3-35.2,85c-22.7,22.7-52.9,35.2-85,35.2c-32.1,0-62.3-12.5-85-35.2  c-22.7-22.7-35.2-52.9-35.2-85c0-32.1,12.5-62.3,35.2-85c22.7-22.7,52.9-35.2,85-35.2C248.5,96,278.7,108.5,301.4,131.2z"/></svg>

src/components/Transfer/index.scss

@@ -0,0 +1,16 @@
+.wrapper{
+    display: flex;
+    justify-content: center;
+    text-align: center;
+    align-items: center;
+    height: 80vh;
+}
+
+.transfer{
+    display: flex;
+    width: 80%;
+    height: 70%;
+    background-color: purple;
+    align-items: center;
+    justify-content: center;
+}

src/components/Transfer/index.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import Modal from "@material-ui/core/Modal";
+import "./index.scss";
+
+interface TransferProps {
+  handleClose: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  isOpen: boolean;
+}
+
+interface TransferState {}
+
+export default class Transfer extends React.Component<
+  TransferProps,
+  TransferState
+> {
+  constructor(props: TransferProps) {
+    super(props);
+
+    this.handleClose = this.handleClose.bind(this);
+    this.state = {
+      isOpen: true,
+    };
+  }
+
+  handleClose(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
+    this.props.handleClose(e);
+    this.setState({
+      isOpen: false,
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <Modal
+          className="wrapper"
+          open={this.props.isOpen}
+          onClose={this.handleClose}
+          aria-labelledby="simple-modal-title"
+          aria-describedby="simple-modal-description"
+        >
+          <div className="transfer">
+            <button type="button" onClick={this.handleClose}>
+              Close Modal
+            </button>
+          </div>
+        </Modal>
+      </div>
+    );
+  }
+}

src/dupa.txt

@@ -1 +0,0 @@
-dupa