css class component

src/App.scss

@@ -7,9 +7,6 @@ body {
   }
   .wraper{
     display: flex;
-    &__rightbar{
-      flex-grow: 1;
-    }
     &__calendar{
       width: 85%;
     }

src/App.tsx

@@ -75,7 +75,8 @@ function App() {
           <Schedule data={appointments} />
         </div>
         <div className="wraper__rightbar">
-          <RightBar onClassHover={(group_id,class_id)=>{console.log("group id: ",group_id,"class id",class_id)}} lectures={data}/>
+          <RightBar onClassHover={(group_id,class_id)=>{console.log("group id: ",group_id,"class id",class_id)}} lectures={data}
+          onClassClick={(group_id,class_id)=>{console.log("group id: ",group_id,"class id",class_id)}}/>
         </div>
       </div>
 

src/components/Class/index.scss

@@ -6,7 +6,33 @@
     justify-content: center;
     flex-direction: column;
     margin-top: 10px;
-    padding:10px;
+    padding-top:10px;
+    padding-bottom:10px;
     border-radius: 10px;
     cursor: pointer;
+    align-items: stretch;
+    &__group{
+      padding-top: 1px;
+      padding-bottom: 1px;
+      &:hover{
+        cursor: pointer;
+        transition: 1s;
+        background-color: #8BC8FB;
+      }
+    }
+    &__name{
+      padding-top: 10px;
+      padding-bottom: 10px;
+    }
+    &__expandIcon{
+      margin-top: 5px;
+      width: 20px;
+      transition: 0.2s;
+    }
+    &__expandIconRotate{
+      margin-top: 5px;
+      width: 20px;
+      transition: 0.5s;
+      transform: scaleY(-1);
+    }
   }

src/components/Class/index.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import "./index.scss";
 import Collapse from "@material-ui/core/Collapse";
+import ExpandIcon from "./expand.png";
 
 type ClassType = {
   group_id: string;
@@ -17,6 +18,7 @@ export type Group = {
 
 interface ClassProps {
   onClassHover: (group_id: String, class_id: String) => void;
+  onClassClick: (group_id: String, class_id: String) => void;
   data: Group;
 }
 
@@ -42,11 +44,11 @@ export default class Class extends React.Component<ClassProps, ClassState> {
 
   render() {
     return (
-      <div className="class" onClick={this.Open}>
-        {this.props.data.classname}
+      <div className="class" >
+        <div className="class__name" onClick={this.Open}>{this.props.data.classname}</div>
         <Collapse in={this.state.open} timeout="auto" unmountOnExit>
-          <div className="class__group">
           {this.props.data.classgroups.map((classgroup, index) => (
+            <div className="class__group">
               <p
                 onMouseOver={() =>
                   this.props.onClassHover(
@@ -54,13 +56,22 @@ export default class Class extends React.Component<ClassProps, ClassState> {
                     this.props.data.classgroups[index].group_id
                   )
                 }
+                onClick={() =>
+                  this.props.onClassClick(
+                    this.props.data.classname,
+                    this.props.data.classgroups[index].group_id
+                  )
+                }
               >
                 {classgroup.group_id} {classgroup.day} {classgroup.time}{" "}
                 {classgroup.room} <br></br> {classgroup.lecturer}
-              </p>
-            ))}
+              </p>{" "}
             </div>
+          ))}
         </Collapse>
+        <div onClick={this.Open}>
+          <img alt="expand" src={ExpandIcon} className={`class__expandIcon${this.state.open?"Rotate":""}`} />
+        </div>
       </div>
     );
   }

src/components/RightBar/index.scss

@@ -2,7 +2,6 @@
     padding-top: 10px;
     padding-left: 15px;
     padding-right: 15px;
-    align-items: center;
     text-align: center;
     font-family: Lato;
     &__text {

src/components/RightBar/index.tsx

@@ -4,7 +4,7 @@ import Class, { Group } from "../Class";
 
 interface RightBarProps {
   onClassHover: (group_id: String, class_id: String) => void;
-  // onClick(group_id:String,class_id:String):() => void;
+  onClassClick: (group_id: String, class_id: String) => void;
   lectures: Array<Group>;
 }
 
@@ -24,6 +24,7 @@ export default class RightBar extends React.Component<
         {this.props.lectures.map((classgroup, index) => (
           <Class
             onClassHover={this.props.onClassHover}
+            onClassClick={this.props.onClassClick}
             data={classgroup}
             key={index}
           />

src/components/Transfer/index.scss

@@ -45,9 +45,9 @@
 
   }
   input:focus {
-    -webkit-box-shadow: 0px 0px 18px 8px rgba(0,0,0,0.75);
-    -moz-box-shadow: 0px 0px 18px 8px rgba(0,0,0,0.75);
-    box-shadow: 0px 0px 18px 8px rgba(0,0,0,0.75);
+    -webkit-box-shadow: 0px 0px 18px 8px #ffae00;
+    -moz-box-shadow: 0px 0px 18px 8px #ffae00;
+    box-shadow: 0px 0px 18px 8px #ffae00;
     
   }
 }