From a08345b756f5ac20ccfb4b6fb98af5f281796e8b Mon Sep 17 00:00:00 2001
From: wrzesinski-hubert <wrzesinski.hubert@gmail.com>
Date: Tue, 9 Jun 2020 16:27:32 +0200
Subject: [PATCH] poprawkiv2

---
 src/App.tsx                        |  7 ++---
 src/components/TopBar/index.tsx    | 20 ++++++------
 src/components/Transfer/index.scss | 50 +++++++++++++++++++++---------
 src/components/Transfer/index.tsx  | 13 ++++++--
 4 files changed, 59 insertions(+), 31 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 1d271d6..bf12808 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -8,7 +8,6 @@ import RightBar from "./components/RightBar";
 
 function App() {
   const [isOpenTransfer, setOpenTransfer] = useState(false);
-  const [isPolish, setLanguage] = useState(true);
   const [text, setText] = useState("");
 
   return (
@@ -20,11 +19,9 @@ function App() {
         handleTransfer={(e) => {
           setOpenTransfer(!isOpenTransfer);
         }}
-        handleLanguage={(e) => {
-          setLanguage(!isPolish);
+        onLangChange={(e) => {
+          console.log(e);
         }}
-        isOpenTransfer={isOpenTransfer}
-        isPolish={isPolish}
       />
       <Transfer
         isOpen={isOpenTransfer}
diff --git a/src/components/TopBar/index.tsx b/src/components/TopBar/index.tsx
index 27bcdcc..7d6303b 100644
--- a/src/components/TopBar/index.tsx
+++ b/src/components/TopBar/index.tsx
@@ -12,16 +12,14 @@ import MenuItem from "@material-ui/core/MenuItem";
 
 interface TopBarProps {
   handleTransfer: (e: React.MouseEvent) => void;
-  handleLanguage: (e: React.MouseEvent) => void;
+  onLangChange: (lang:boolean) => void;
   textChangeHandler: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  isOpenTransfer: boolean;
-  isPolish: boolean;
-  
 }
 
 interface TopBarState {
   isOpenProfile: boolean;
   anchorEl: null | HTMLElement;
+  isPolish: boolean;
 }
 
 export default class TopBar extends React.Component<TopBarProps, TopBarState> {
@@ -29,11 +27,12 @@ export default class TopBar extends React.Component<TopBarProps, TopBarState> {
     super(props);
     this.handleProfile = this.handleProfile.bind(this);
     this.handleClose = this.handleClose.bind(this);
-    this.handleLanguage = this.handleLanguage.bind(this);
+    this.onLangChange = this.onLangChange.bind(this);
     this.handleTransfer = this.handleTransfer.bind(this);
     this.state = {
       isOpenProfile: false,
       anchorEl:null,
+      isPolish:true,
     };
   }
 
@@ -45,8 +44,11 @@ export default class TopBar extends React.Component<TopBarProps, TopBarState> {
     this.props.handleTransfer(e);
   }
 
-  handleLanguage(e: React.MouseEvent) {
-    this.props.handleLanguage(e);
+  onLangChange(e: React.MouseEvent) {
+    this.setState({
+      isPolish:!this.state.isPolish,
+    })
+    this.props.onLangChange(this.state.isPolish);
   }
 
   handleProfile(e: React.MouseEvent) {
@@ -95,8 +97,8 @@ export default class TopBar extends React.Component<TopBarProps, TopBarState> {
           <img
             className="top-bar__icon"
             alt="change_language"
-            src={this.props.isPolish ? UK : PL}
-            onClick={this.handleLanguage}
+            src={this.state.isPolish ? UK : PL}
+            onClick={this.onLangChange}
           />
           <img
             className="top-bar__icon"
diff --git a/src/components/Transfer/index.scss b/src/components/Transfer/index.scss
index a51aa27..8a45482 100644
--- a/src/components/Transfer/index.scss
+++ b/src/components/Transfer/index.scss
@@ -1,16 +1,38 @@
-.wrapper{
-    display: flex;
-    justify-content: center;
-    text-align: center;
-    align-items: center;
-    height: 80vh;
+.wrapper {
+  display: flex;
+
+  justify-content: center;
+  text-align: center;
+  align-items: center;
 }
 
-.transfer{
-    display: flex;
-    width: 80%;
-    height: 70%;
-    background-color: purple;
-    align-items: center;
-    justify-content: center;
-}
\ No newline at end of file
+.transfer {
+  display: flex;
+  flex-wrap: wrap;
+  width: 80%;
+  height: 70%;
+  padding-top: 40px;
+  background: rgba(255, 220, 97, 0.48);
+  border: 1px solid #000000;
+  justify-content: center;
+  &__text {
+    font-family: Lato;
+    font-size: 50px;
+  }
+  &__input{
+    width: 300px;
+    height: 45px;  
+    background: #D7A700;
+  }
+  &__give{
+      flex-grow: 1;
+  }
+  &__recieve{
+    flex-grow: 1;
+}
+&__proposition{
+    flex-grow: 4;
+}
+&__add{
+}
+}
diff --git a/src/components/Transfer/index.tsx b/src/components/Transfer/index.tsx
index 0a87c73..6ebdf5c 100644
--- a/src/components/Transfer/index.tsx
+++ b/src/components/Transfer/index.tsx
@@ -34,9 +34,16 @@ export default class Transfer extends React.Component<
           aria-describedby="simple-modal-description"
         >
           <div className="transfer">
-            <button type="button" onClick={this.handleClose}>
-              Close Modal
-            </button>
+            <div className="transfer__give">
+              <div className="transfer__text">Oddam</div>
+              <input className="transfer__input"></input>
+            </div>
+            <div className="transfer__receive">
+              <div className="transfer__text">Przyjmę</div>
+              <input className="transfer__input"></input>
+            </div>
+            <div className="transfer__proposition"></div>
+          <button className="transfer__add">chuj</button>
           </div>
         </Modal>
       </div>