rightbar and transfer

src/App.scss

@@ -2,6 +2,9 @@ body {
     margin: 0px;
     padding: 0px;
   }
+  body::-webkit-scrollbar {
+    display: none;
+  }
   .wraper{
     display: flex;
     &__rightbar{

src/components/Calendar/index.tsx

@@ -114,7 +114,7 @@ export default class Calendar extends React.PureComponent<
           startDayHour={8}
           endDayHour={20}
           excludedDays={[0, 6]}
-          cellDuration={60}
+          cellDuration={45}
           dayScaleCellComponent={DayScaleCell}
           timeTableLayoutComponent={TimeTableLayout}
           timeTableCellComponent={TimeTableCell}

src/components/Class/index.scss

@@ -0,0 +1,13 @@
+.paper {
+    display: flex;
+    min-height: 50px;
+    background-color: rgb(100, 181, 246) !important;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    margin-top: 10px;
+    padding:10px;
+    border-radius: 10px;
+    width: 90%;
+    cursor: pointer;
+  }

src/components/Class/index.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import "./index.scss";
+import Collapse from '@material-ui/core/Collapse';
+
+interface ClassProps {
+  name:string;
+}
+
+interface ClassState {
+  open: boolean;
+}
+
+export default class Class extends React.Component<ClassProps, ClassState> {
+  constructor(props: ClassProps) {
+    super(props);
+
+    this.Open = this.Open.bind(this);
+    this.state={
+      open:false,
+    };
+  }
+
+  Open(e: React.MouseEvent) {
+    this.setState({
+      open:!this.state.open
+    });
+  }
+
+  render() {
+    return (
+      <div className="paper" onClick={this.Open}>{this.props.name}
+        <Collapse in={this.state.open} timeout="auto" unmountOnExit>
+        <p>1CB Pn 10.00 A0-1<br></br> dr inż. Michał Ren</p>
+        <p>1CB Pn 10.00 A0-1<br></br> dr inż. Michał Ren</p>
+        <p>1CB Pn 10.00 A0-1<br></br> dr inż. Michał Ren</p>
+        <p>1CB Pn 10.00 A0-1<br></br> dr inż. Michał Ren</p>
+
+
+          </Collapse></div>
+    );
+  }
+}

src/components/RightBar/index.scss

@@ -8,15 +8,6 @@
     text-align: center;
     font-family: Lato;
   }
-  .paper {
-    display: flex;
-    margin-top: 10px;
-    height: 60px;
-    width: 90%;
-    background-color: #d4a8ff !important;
-    align-items: center;
-    justify-content: center;
-  }
   .text {
     border-bottom: 1px solid;
   }

src/components/RightBar/index.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import "./index.scss";
-import Paper from "@material-ui/core/Paper";
+import Class from "../Class";
+
 interface RightBarProps {}
 
 interface RightBarState {}
@@ -9,7 +10,6 @@ export default class RightBar extends React.Component<
   RightBarProps,
   RightBarState
 > {
-
   render() {
     return (
       <div className="shop-cart">
@@ -17,16 +17,14 @@ export default class RightBar extends React.Component<
           Hubert Wrzesiński<br></br>
           Semestr zimowy 2020/2021
         </div>
-        <Paper className="paper">1</Paper>
+        <Class name="E-gospodarka - narzędzia i bezpieczeństwo" />
-        <Paper className="paper">2</Paper>
+        <Class name="Algorytmy grafowe" />
-        <Paper className="paper">3</Paper>
+        <Class name="E-gospodarka - narzędzia i bezpieczeństwo" />
-        <Paper className="paper">4</Paper>
+        <Class name="Algorytmy grafowe" />
-        <Paper className="paper">5</Paper>
+        <Class name="E-gospodarka - narzędzia i bezpieczeństwo" />
-        <Paper className="paper">6</Paper>
+        <Class name="Algorytmy grafowe" />
-        <Paper className="paper">7</Paper>
+        <Class name="E-gospodarka - narzędzia i bezpieczeństwo" />
-        <Paper className="paper">8</Paper>
+        <Class name="Algorytmy grafowe" />
-        <Paper className="paper">9</Paper>
-        <Paper className="paper">10</Paper>
       </div>
     );
   }

src/components/Transfer/index.scss

@@ -1,6 +1,5 @@
 .wrapper {
   display: flex;
-
   justify-content: center;
   text-align: center;
   align-items: center;
@@ -8,13 +7,19 @@
 
 .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;
+  &__left {
+    display: flex;
+    justify-content: space-around;
+    flex-grow: 1;
+  }
+  &__right {
+    flex-grow: 4;
+  }
   &__text {
     font-family: Lato;
     font-size: 50px;
@@ -22,16 +27,13 @@
   &__input {
     width: 300px;
     height: 45px;
-    background: #D7A700;
+    background: #d7a700;
   }
   &__give {
-      flex-grow: 1;
   }
   &__recieve {
-    flex-grow: 1;
   }
   &__proposition {
-    flex-grow: 4;
   }
   &__add {
   }

src/components/Transfer/index.tsx

@@ -34,6 +34,8 @@ export default class Transfer extends React.Component<
           aria-describedby="simple-modal-description"
         >
           <div className="transfer">
+            <div className="transfer__left">
+              {/* <button className="transfer__add">chuj</button> */}
               <div className="transfer__give">
                 <div className="transfer__text">Oddam</div>
                 <input className="transfer__input"></input>
@@ -42,8 +44,10 @@ export default class Transfer extends React.Component<
                 <div className="transfer__text">Przyjmę</div>
                 <input className="transfer__input"></input>
               </div>
+            </div>
+            <div className="transfer__right">
               <div className="transfer__proposition"></div>
-          <button className="transfer__add">chuj</button>
+            </div>
           </div>
         </Modal>
       </div>