styled components i przerwy miedzy godzinami

src/components/App.tsx

@@ -1,9 +1,8 @@
 import React, { useState, useContext } from 'react';
 import { Topbar } from './Topbar';
-import { Transfer } from './Transfer/Transfer';
+import { Transfer } from './Transfer';
 import { Scheduler } from './Scheduler';
 import { Rightbar } from './Rightbar';
-import { CASContext } from '../contexts/CASProvider';
 import styled from 'styled-components';
 
 const Wrapper = styled.div`

src/components/SchedulerEvents.tsx

@@ -51,7 +51,13 @@ export const SchedulerEvents = ({ cellTop, cellWidth }: SchedulerEventsProps) =>
             return group.eventRow === index;
           })}
           indexRow={index}
-          cellTop={cellTop + (10 + 70 * index)}
+          cellTop={
+            index == 3
+              ? cellTop + (25 + 80 * index)
+              : index < 3
+              ? cellTop + (12 + 80 * index)
+              : cellTop + (25 + 80 * index)
+          }
           cellWidth={cellWidth}
         />
       ))}

src/components/SchedulerRow.tsx

@@ -13,7 +13,7 @@ const SchedulerEvent = styled.div<SchedulerEventProps>`
   top: ${(props) => props.cellTop}px;
   left: ${(props) => props.cellWidth + 5 + props.cellWidth * props.eventIndex}px;
   width: ${(props) => (props.cellWidth * 2) / 3}px;
-  height: 60px;
+  height: 69px;
   background-color: lightblue;
   z-index: 2;
 `;

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>
+  );
+};

src/components/Transfer/Transfer.tsx

@@ -1,57 +0,0 @@
-import React from 'react';
-import Modal from '@material-ui/core/Modal';
-import './index.scss';
-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',
-  },
-});
-
-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}>
-          <div className="transfer">
-            <div className="transfer__give">
-              <div className="transfer__text">Oddam</div>
-              <div className="transfer__input2">
-                {' '}
-                <Input
-                  placeholder="Wyszukaj..."
-                  inputProps={{ 'aria-label': 'description' }}
-                  className="top-bar__input-field"
-                />
-              </div>
-            </div>
-            <div className="transfer__receive">
-              <div className="transfer__text">Przyjmę</div>
-              <input className="transfer__input"></input>
-            </div>
-          </div>
-        </Fade>
-      </Modal>
-    </div>
-  );
-};

src/components/Transfer/index.scss

@@ -1,69 +0,0 @@
-.wrapper {
-  display: flex;
-  justify-content: center;
-  text-align: center;
-  align-items: center;
-}
-
-.transfer {
-  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;
-
-  &__give {
-    flex-grow: 1;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-  &__receive {
-    flex-grow: 1;
-  }
-  &__text {
-    font-family: Lato;
-    font-size: 30px;
-    margin-bottom: 10px;
-  }
-  &__input {
-    width: 250px;
-    height: 25px;
-    background: #ffc400;
-    outline: none;
-    border: 1px solid;
-    border-radius: 10px;
-    padding: 10px;
-    font-size: 24px;
-    transition-duration: 0.3s;
-  }
-  &__input:focus {
-    -webkit-box-shadow: 0px 0px 34px 1px #ffae00;
-    -moz-box-shadow: 0px 0px 34px 1px #ffae00;
-    box-shadow: 0px 0px 34px 1px #ffae00;
-  }
-  &__input2 {
-    width: 250px;
-    height: 25px;
-    padding: 10px;
-    font-size: 24px;
-    transition-duration: 0.3s;
-  }
-  input::placeholder{
-    color: black;
-    font-weight: bold;
-    text-align: center;
-  }
-}