diff --git a/public/favicon.ico b/public/favicon.ico deleted file mode 100644 index bcd5dfd..0000000 Binary files a/public/favicon.ico and /dev/null differ diff --git a/public/index.html b/public/index.html index e4d7faa..b63401e 100644 --- a/public/index.html +++ b/public/index.html @@ -2,18 +2,18 @@ - + - + - React App + PlanNaPlan diff --git a/public/logo.svg b/public/logo.svg new file mode 100644 index 0000000..eed50b9 --- /dev/null +++ b/public/logo.svg @@ -0,0 +1,25 @@ + + + + + + + + + diff --git a/public/manifest.json b/public/manifest.json index cf83229..a43a8e1 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -3,9 +3,7 @@ "name": "PlanNaPlan", "icons": [ { - "src": "favicon.ico", - "sizes": "64x64 32x32 24x24 16x16", - "type": "image/x-icon" + "src": "logo.svg" } ], "start_url": ".", diff --git a/src/App.tsx b/src/App.tsx index 701f953..bf12808 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -7,7 +7,7 @@ import { appointments } from "./components/Calendar/appointments"; import RightBar from "./components/RightBar"; function App() { - const [isOpen, setOpen] = useState(false); + const [isOpenTransfer, setOpenTransfer] = useState(false); const [text, setText] = useState(""); return ( @@ -17,20 +17,16 @@ function App() { setText(e.target.value); }} handleTransfer={(e) => { - setOpen(!isOpen); + setOpenTransfer(!isOpenTransfer); }} - handleLanguage={(e) => { - alert("Language"); + onLangChange={(e) => { + console.log(e); }} - handleProfile={(e) => { - alert("Profile"); - }} - isOpen={isOpen} /> { - setOpen(!isOpen); + setOpenTransfer(!isOpenTransfer); }} />
diff --git a/src/components/Calendar/appointments.ts b/src/components/Calendar/appointments.ts index e6cf0dd..44a2562 100644 --- a/src/components/Calendar/appointments.ts +++ b/src/components/Calendar/appointments.ts @@ -20,4 +20,11 @@ export const appointments = [ id: 0, location: 'Room 1', }, + { + title: 'Twoja stara beszamel', + startDate: new Date(2020, 5, 1, 18, 45), + endDate: new Date(2020, 5, 1, 20, 0), + id: 0, + location: 'Room 1', + }, ]; diff --git a/src/components/Calendar/index.tsx b/src/components/Calendar/index.tsx index 11d617b..33d3ba3 100644 --- a/src/components/Calendar/index.tsx +++ b/src/components/Calendar/index.tsx @@ -12,13 +12,13 @@ import "moment/locale/pl"; import "./index.scss"; import { makeStyles, Theme, createStyles } from "@material-ui/core/styles"; - interface CalendarProps { data: Array; - } -interface CalendarState {currentDate: Date;} +interface CalendarState { + currentDate: Date; +} const formatDayScaleDate = ( date: moment.MomentInput, @@ -106,23 +106,22 @@ export default class Calendar extends React.PureComponent< render() { const { data } = this.props; const { currentDate } = this.state; - return ( - - - - - - + + + + + + ); } } diff --git a/src/components/TopBar/PL.png b/src/components/TopBar/PL.png new file mode 100644 index 0000000..656d382 Binary files /dev/null and b/src/components/TopBar/PL.png differ diff --git a/src/components/TopBar/index.scss b/src/components/TopBar/index.scss index 714d679..e0ae02a 100644 --- a/src/components/TopBar/index.scss +++ b/src/components/TopBar/index.scss @@ -47,6 +47,9 @@ flex-grow: 1.5; } } + &__menu{ +margin-top: 25px; + } } @media only screen and (max-width: 670px) { .top-bar { diff --git a/src/components/TopBar/index.tsx b/src/components/TopBar/index.tsx index e276c28..7d6303b 100644 --- a/src/components/TopBar/index.tsx +++ b/src/components/TopBar/index.tsx @@ -4,47 +4,64 @@ import Input from "@material-ui/core/Input"; import Transfer from "./transfer.png"; import Search from "./search.svg"; import UK from "./UK.png"; +import PL from "./PL.png"; import User from "./user.png"; import CloseIcon from "./close.svg"; +import Menu from "@material-ui/core/Menu"; +import MenuItem from "@material-ui/core/MenuItem"; interface TopBarProps { handleTransfer: (e: React.MouseEvent) => void; - handleProfile: (e: React.MouseEvent) => void; - handleLanguage: (e: React.MouseEvent) => void; + onLangChange: (lang:boolean) => void; textChangeHandler: (e: React.ChangeEvent) => void; - isOpen: boolean; } -interface TopBarState {} +interface TopBarState { + isOpenProfile: boolean; + anchorEl: null | HTMLElement; + isPolish: boolean; +} export default class TopBar extends React.Component { constructor(props: TopBarProps) { super(props); this.handleProfile = this.handleProfile.bind(this); - this.handleLanguage = this.handleLanguage.bind(this); + this.handleClose = this.handleClose.bind(this); + this.onLangChange = this.onLangChange.bind(this); this.handleTransfer = this.handleTransfer.bind(this); this.state = { - isOpen: false, + isOpenProfile: false, + anchorEl:null, + isPolish:true, }; } - handleTransfer(e: React.MouseEvent) { - this.props.handleTransfer(e); - this.setState({ - isOpen: true, - }); - } - handleChange(e: React.ChangeEvent) { this.props.textChangeHandler(e); } - handleProfile(e: React.MouseEvent) { - this.props.handleProfile(e); + handleTransfer(e: React.MouseEvent) { + 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) { + this.setState({ + isOpenProfile: !this.state.isOpenProfile, + anchorEl:e.currentTarget as HTMLElement, + }); + } + + handleClose(e: React.MouseEvent) { + this.setState({ + isOpenProfile: !this.state.isOpenProfile, + }); } render() { @@ -59,11 +76,7 @@ export default class TopBar extends React.Component {
plan na plan
- search + search { this.handleChange(e as ChangeEvent) } /> - close + close
{ change_language { src={User} onClick={this.handleProfile} /> + + Profile + My account + Logout +
); 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 6ce2a29..6ebdf5c 100644 --- a/src/components/Transfer/index.tsx +++ b/src/components/Transfer/index.tsx @@ -17,16 +17,10 @@ export default class Transfer extends React.Component< super(props); this.handleClose = this.handleClose.bind(this); - this.state = { - isOpen: true, - }; } handleClose(e: React.MouseEvent) { this.props.handleClose(e); - this.setState({ - isOpen: false, - }); } render() { @@ -40,9 +34,16 @@ export default class Transfer extends React.Component< aria-describedby="simple-modal-description" >
- +
+
Oddam
+ +
+
+
Przyjmę
+ +
+
+