styled components i przerwy miedzy godzinami

src/components/Transfer.tsx

@@ -0,0 +1,115 @@
+import React from 'react';
+import Modal from '@material-ui/core/Modal';
+import Fade from '@material-ui/core/Fade';
+import Input from '@material-ui/core/Input';
+import { makeStyles } from '@material-ui/core/styles';
+import styled from 'styled-components';
+
+interface TransferProps {
+  handleClose: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  isOpen: boolean;
+}
+
+const useStyles = makeStyles({
+  wrapper: {
+    display: 'flex',
+    justifyContent: 'center',
+    textAlign: 'center',
+    alignItems: 'center',
+  },
+});
+
+const TransferStyled = styled.div`
+  display: flex;
+
+  flex-direction: row;
+
+  outline: none;
+  min-width: 35%;
+  height: 70%;
+  padding-top: 40px;
+  background: #006b96;
+  box-shadow: 0px 0px 0px 4px #006b96;
+  border: 4px solid #ffc400;
+  margin: 0 auto;
+  border-top-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+  text-transform: uppercase;
+  letter-spacing: 0.3ch;
+`;
+
+const TransferGiveStyled = styled.div`
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const TransferReceiveStyled = styled.div`
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const TransferTextStyled = styled.div`
+  font-family: Lato;
+  font-size: 30px;
+  margin-bottom: 10px;
+`;
+
+const TransferInputStyled = styled.div`
+  width: 250px;
+  height: 25px;
+  padding: 10px;
+  font-size: 24px;
+  transition-duration: 0.3s;
+  input::placeholder {
+    color: black;
+    font-weight: bold;
+    text-align: center;
+  }
+`;
+
+export const Transfer = ({ handleClose, isOpen }: TransferProps) => {
+  const classes = useStyles();
+
+  return (
+    <div>
+      <Modal
+        className={classes.wrapper}
+        open={isOpen}
+        onClose={handleClose}
+        aria-labelledby="simple-modal-title"
+        aria-describedby="simple-modal-description"
+      >
+        <Fade in={isOpen}>
+          <TransferStyled>
+            <TransferGiveStyled>
+              <TransferTextStyled>Oddam</TransferTextStyled>
+              <TransferInputStyled>
+                {' '}
+                <Input
+                  placeholder="Wyszukaj..."
+                  inputProps={{ 'aria-label': 'description' }}
+                  className="top-bar__input-field"
+                />
+              </TransferInputStyled>
+            </TransferGiveStyled>
+            <TransferReceiveStyled>
+              <TransferTextStyled>Przyjmę</TransferTextStyled>
+              <TransferInputStyled>
+                {' '}
+                <Input
+                  placeholder="Wyszukaj..."
+                  inputProps={{ 'aria-label': 'description' }}
+                  className="top-bar__input-field"
+                />
+              </TransferInputStyled>
+            </TransferReceiveStyled>
+          </TransferStyled>
+        </Fade>
+      </Modal>
+    </div>
+  );
+};