rightbar and transfer

src/components/Class/index.scss

@@ -1,4 +1,4 @@
-.paper {
+.class {
     display: flex;
     min-height: 50px;
     background-color: rgb(100, 181, 246) !important;

src/components/Class/index.tsx

@@ -1,9 +1,22 @@
 import React from "react";
 import "./index.scss";
-import Collapse from '@material-ui/core/Collapse';
+import Collapse from "@material-ui/core/Collapse";
+
+type ClassType = {
+  group_id: string;
+  day: string;
+  time: string;
+  lecturer: string;
+  room: string;
+};
+
+type group = {
+  classname:string;
+  classgroups:Array<ClassType>
+}
 
 interface ClassProps {
-  name:string;
+  data: group;
 }
 
 interface ClassState {
@@ -15,28 +28,44 @@ export default class Class extends React.Component<ClassProps, ClassState> {
     super(props);
 
     this.Open = this.Open.bind(this);
-    this.state={
+    this.state = {
-      open:false,
+      open: false,
     };
   }
 
   Open(e: React.MouseEvent) {
     this.setState({
-      open:!this.state.open
+      open: !this.state.open,
     });
   }
 
   render() {
     return (
-      <div className="paper" onClick={this.Open}>{this.props.name}
+      <div className="class" onClick={this.Open}>
+        {this.props.data.classname}
         <Collapse in={this.state.open} timeout="auto" unmountOnExit>
-        <p>1CB Pn 10.00 A0-1<br></br> dr inż. Michał Ren</p>
+          <p>
-        <p>1CB Pn 10.00 A0-1<br></br> dr inż. Michał Ren</p>
+            {this.props.data.classgroups[0].group_id} {this.props.data.classgroups[0].day}
-        <p>1CB Pn 10.00 A0-1<br></br> dr inż. Michał Ren</p>
+            {this.props.data.classgroups[0].time} {this.props.data.classgroups[0].room}
-        <p>1CB Pn 10.00 A0-1<br></br> dr inż. Michał Ren</p>
+            <br></br> {this.props.data.classgroups[0].lecturer}
-
+          </p>
-
+          <p>
-          </Collapse></div>
+            {this.props.data.classgroups[1].group_id} {this.props.data.classgroups[1].day}
+            {this.props.data.classgroups[1].time} {this.props.data.classgroups[1].room}
+            <br></br> {this.props.data.classgroups[1].lecturer}
+          </p>
+          <p>
+            {this.props.data.classgroups[0].group_id} {this.props.data.classgroups[0].day}
+            {this.props.data.classgroups[0].time} {this.props.data.classgroups[0].room}
+            <br></br> {this.props.data.classgroups[0].lecturer}
+          </p>
+          <p>
+            {this.props.data.classgroups[1].group_id} {this.props.data.classgroups[1].day}
+            {this.props.data.classgroups[1].time} {this.props.data.classgroups[1].room}
+            <br></br> {this.props.data.classgroups[1].lecturer}
+          </p>
+        </Collapse>
+      </div>
     );
   }
 }

src/components/RightBar/index.scss

@@ -1,4 +1,4 @@
-.shop-cart {
+.right-bar {
     padding-top: 10px;
     padding-left: 15px;
     padding-right: 15px;
@@ -7,8 +7,8 @@
     align-items: center;
     text-align: center;
     font-family: Lato;
+    &__text {
+      border-bottom: 1px solid;
+    }
+  
   }
-  .text {
-    border-bottom: 1px solid;
-  }
-  

src/components/RightBar/index.tsx

@@ -11,18 +11,59 @@ export default class RightBar extends React.Component<
   RightBarState
 > {
   render() {
+    var data = [
+      {
+        classname: "E-gospodarka - narzędzia i bezpieczeństwo",
+        classgroups: [
+          {
+            group_id: "1CB",
+            day: "Pn",
+            time: "10:00",
+            lecturer: "dr inż. Michał Ren",
+            room: "A2-01",
+          },
+          {
+            group_id: "1CC",
+            day: "Wt",
+            time: "12:00",
+            lecturer: "dr inż. Michał Ren",
+            room: "A3-01",
+          },
+        ],
+      },
+      {
+        classname: "Statystyka",
+        classgroups: [
+          {
+            group_id: "1CB",
+            day: "Pn",
+            time: "10:00",
+            lecturer: "dr inż. Michał Ren",
+            room: "A2-01",
+          },
+          {
+            group_id: "1CC",
+            day: "Wt",
+            time: "12:00",
+            lecturer: "dr inż. Michał Ren",
+            room: "A3-01",
+          },
+        ],
+      },
+    ];
+
     return (
-      <div className="shop-cart">
+      <div className="right-bar">
-        <div className="text">
+        <div className="right-bar__text">
           Hubert Wrzesiński<br></br>
           Semestr zimowy 2020/2021
         </div>
-        <Class name="E-gospodarka - narzędzia i bezpieczeństwo" />
+        <Class data={data[0]} />
-        <Class name="Algorytmy grafowe" />
+        <Class data={data[1]} />
-        <Class name="Podstawy programowania deklaratywnego" />
+        <Class data={data[0]} />
-        <Class name="Statystyka" />
+        <Class data={data[1]} />
-        <Class name="Wstęp do rachunku prawdopodobieństwa" />
+        <Class data={data[0]} />
-        <Class name="Technologie internetowe" />
+        <Class data={data[1]} />
       </div>
     );
   }

src/components/Transfer/index.scss

@@ -3,15 +3,22 @@
   justify-content: center;
   text-align: center;
   align-items: center;
+
 }
 
 .transfer {
   display: flex;
+  outline:none;
   width: 80%;
   height: 70%;
   padding-top: 40px;
-  background: rgba(255, 220, 97, 0.48);
+  background: rgba(255, 220, 97, 0.6);
-  border: 1px solid #000000;
+
+  border: 3px solid #000000;
+  border-radius: 5% 5% 5% 5% / 5% 5% 5% 5%;
+  text-transform: uppercase;
+  letter-spacing: 0.3ch;
+
   &__left {
     display: flex;
     justify-content: space-around;
@@ -23,18 +30,24 @@
   &__text {
     font-family: Lato;
     font-size: 50px;
+    margin-bottom: 10px;
   }
   &__input {
     width: 300px;
     height: 45px;
-    background: #d7a700;
+    background: #ffc400;
+    outline:none;
+    border: 1px solid;
+    border-radius: 22px ;
+    padding: 10px;
+    font-size: 24px;
+    transition-duration: 0.3s;
+
   }
-  &__give {
+  input:focus {
-  }
+    -webkit-box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.75);
-  &__recieve {
+    -moz-box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.75);
-  }
+    box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.75);
-  &__proposition {
+    
-  }
-  &__add {
   }
 }