diff --git a/src/components/App.tsx b/src/components/App.tsx index 3194e91..dbc7646 100644 --- a/src/components/App.tsx +++ b/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` diff --git a/src/components/SchedulerEvents.tsx b/src/components/SchedulerEvents.tsx index 963d83f..e9f3daf 100644 --- a/src/components/SchedulerEvents.tsx +++ b/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} /> ))} diff --git a/src/components/SchedulerRow.tsx b/src/components/SchedulerRow.tsx index eb81f1c..42fd6d6 100644 --- a/src/components/SchedulerRow.tsx +++ b/src/components/SchedulerRow.tsx @@ -13,7 +13,7 @@ const SchedulerEvent = styled.div` 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; `; diff --git a/src/components/Transfer.tsx b/src/components/Transfer.tsx new file mode 100644 index 0000000..58442b4 --- /dev/null +++ b/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) => 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 ( +
+ + + + + Oddam + + {' '} + + + + + Przyjmę + + {' '} + + + + + + +
+ ); +}; diff --git a/src/components/Transfer/Transfer.tsx b/src/components/Transfer/Transfer.tsx deleted file mode 100644 index 59c66e6..0000000 --- a/src/components/Transfer/Transfer.tsx +++ /dev/null @@ -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) => 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 ( -
- - -
-
-
Oddam
-
- {' '} - -
-
-
-
Przyjmę
- -
-
-
-
-
- ); -}; diff --git a/src/components/Transfer/index.scss b/src/components/Transfer/index.scss deleted file mode 100644 index cef0e2b..0000000 --- a/src/components/Transfer/index.scss +++ /dev/null @@ -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; - } -}