poprawkiv2

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}

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"

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;
-}
+.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{
+}
+}

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>