changed from label to Typography, changed time format

src/components/home/Meeting.tsx

@@ -1,3 +1,4 @@
+import Typography from "@mui/material/Typography";
 interface Props {
   meetingName: string;
   meetingTime: string;
@@ -9,13 +10,13 @@ function Meeting(props: Props) {
     <div className="row meeting">
       <div className="col-12">
         <div className="row">
-          <label>{props.meetingName}</label>
+          <Typography className="mylabel" sx={{ ml: 1 }}>{props.meetingName}</Typography>
         </div>
         <div className="row">
-          <label>{props.meetingTime}</label>
+          <Typography className="mylabel" sx={{ ml: 1 }}>{props.meetingTime}</Typography>
         </div>
         <div className="row">
-          <label>{props.meetingMembers}</label>
+          <Typography className="mylabel" sx={{ ml: 1 }}>{props.meetingMembers}</Typography>
         </div>
       </div>
     </div>

src/components/home/MeetingsPanel.tsx

@@ -1,17 +1,18 @@
 import Meeting from "./Meeting";
+import Typography from "@mui/material/Typography";
 
 const MeetingsPanel: React.FC = () => {
   return (
     <div className="meetings-panel">
       <div className="row current-time">
-        <label>10:34 AM</label>
+        <Typography className="mylabel" sx={{ ml: 1 }}>10:34 AM</Typography>
       </div>
       <div className="row current-date">
-        <label>Sunday, 03 Feb 2022</label>
+        <Typography className="mylabel" sx={{ ml: 1 }}>Sunday, 03 Feb 2022</Typography>
       </div>
 
-      <Meeting meetingName="meeting" meetingTime="0800-1200" meetingMembers="" />
-      <Meeting meetingName="meeting" meetingTime="0830-1100" meetingMembers="" />
+      <Meeting meetingName="Meeting Name" meetingTime="8:00am - 12:00pm" meetingMembers="Jincheng L., Matt B." />
+      <Meeting meetingName="Meeting Name" meetingTime="8:30am - 11:00am" meetingMembers="Matt B., Taehee C." />
     </div>
   );
 };

src/components/home/ShortCuts.tsx

@@ -4,6 +4,7 @@ import PhoneEnabledIcon from "@mui/icons-material/PhoneEnabled";
 import CircleIcon from "@mui/icons-material/Circle";
 import Button from "@mui/material/Button";
 import Grid from "@mui/material/Grid";
+import Typography from "@mui/material/Typography";
 
 const ShortCuts: React.FC = () => {
   return (
@@ -13,13 +14,13 @@ const ShortCuts: React.FC = () => {
           <Button className="tile">
             <PeopleIcon className="icon" />
           </Button>
-          <label>New Meeting</label>
+          <Typography className="mylabel" sx={{ ml: 1 }}>New Meeting</Typography>
         </Grid>
         <Grid item sm={6}>
           <Button className="tile">
             <AddIcon className="icon" />
           </Button>
-          <label>Join</label>
+          <Typography className="mylabel" sx={{ ml: 1 }}>Join</Typography>
         </Grid>
       </Grid>
       <Grid className="row-2" container spacing={1}>
@@ -27,13 +28,13 @@ const ShortCuts: React.FC = () => {
           <Button className="tile">
             <PhoneEnabledIcon className="icon" />
           </Button>
-          <label>Call Favourites</label>
+          <Typography className="mylabel" sx={{ ml: 1 }}>Call Favourites</Typography>
         </Grid>
         <Grid item sm={6}>
           <Button className="tile">
             <CircleIcon className="icon" />
           </Button>
-          <label>Recordings</label>
+          <Typography className="mylabel" sx={{ ml: 1 }}>Recordings</Typography>
         </Grid>
       </Grid>
     </div>

src/style/App.css

@@ -54,8 +54,9 @@ a {
   margin-top: 5vh;
 }
 
-.main-home .short-cuts label {
+.main-home .short-cuts .mylabel {
   display: inline-block;
+  margin: 0;
   width: 100px;
   text-align: center;
 }

src/style/App.css.map

@@ -1,6 +1,6 @@
 {
     "version": 3,
-    "mappings": "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",
+    "mappings": "AG8CA,AAAA,WAAW,CAAC;EACR,KAAK,EAAE,IAAI;CAAG;;AAElB,AAAA,CAAC,CAAC;EACE,eAAe,EAAE,IAAI;CAAG;;AKlD5B,AAAA,UAAU,CAAC;EAGP,SAAS,EAAE,cAAc;CA8CO;;AAjDpC,AAII,UAJM,CAIN,eAAe,CAAC;EACZ,MAAM,EAAE,IAAI;EACZ,UAAU,EAAE,IAAI;EAChB,YAAY,EAAE,KAAK;EACnB,YAAY,EPRS,OAAO;EOS5B,YAAY,EAAE,GAAG;EACjB,aAAa,EAAE,IAAI;EACnB,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,IAAI;EACZ,QAAQ,EAAE,MAAM;CAgBO;;AA7B/B,AAcQ,UAdE,CAIN,eAAe,CAUX,IAAI,CAAC;EACD,KAAK,EAAE,IAAI;CAAG;;AAf1B,AAgBQ,UAhBE,CAIN,eAAe,CAYX,aAAa,CAAC;EACV,UAAU,EAAE,MAAM;EAClB,gBAAgB,EAAE,IAAI;EACtB,WAAW,EAAE,EAAE;EACf,cAAc,EAAE,EAAE;CAAG;;AApBjC,AAqBQ,UArBE,CAIN,eAAe,CAiBX,aAAa,CAAC;EACV,UAAU,EAAE,MAAM;EAClB,gBAAgB,EAAE,IAAI;EACtB,cAAc,EAAE,EAAE;CAAG;;AAxBjC,AAyBQ,UAzBE,CAIN,eAAe,CAqBX,QAAQ,CAAC;EACL,gBAAgB,EP1BC,OAAO;EO2BxB,UAAU,EAAE,MAAM;EAClB,UAAU,EAAE,IAAI;EAChB,WAAW,EAAE,CAAC;CAAG;;AA7B7B,AA+BQ,UA/BE,CA8BN,WAAW,CACP,MAAM,CAAC;EACH,UAAU,EAAE,IAAI;CAAG;;AAhC/B,AAiCQ,UAjCE,CA8BN,WAAW,CAGP,MAAM,CAAC;EACH,UAAU,EAAE,GAAG;CAAG;;AAlC9B,AAmCQ,UAnCE,CA8BN,WAAW,CAKP,QAAQ,CAAC;EACL,OAAO,EAAE,YAAY;EACrB,MAAM,EAAE,CAAC;EACT,KAAK,EAAE,KAAK;EACZ,UAAU,EAAE,MAAM;CAAG;;AAvCjC,AAwCQ,UAxCE,CA8BN,WAAW,CAUP,KAAK,CAAC;EACF,YAAY,EAAE,IAAI;EAClB,gBAAgB,EP1CC,OAAO;EO2CxB,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;EACb,aAAa,EAAE,IAAI;CAIC;;AAjDhC,AA8CY,UA9CF,CA8BN,WAAW,CAUP,KAAK,CAMD,KAAK,CAAC;EACF,KAAK,EAAE,KAAK;EACZ,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,GAAG;CAAG;;ACjD9B,AACI,MADE,CACF,eAAe,CAAC;EACZ,WAAW,EAAE,MAAM;EACnB,MAAM,EAAE,IAAI;EACZ,UAAU,EAAE,GAAG;EACf,SAAS,EAAE,cAAc;CAqBC;;AA1BlC,AAMQ,MANF,CACF,eAAe,GAKT,CAAC,CAAC;EACA,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,MAAM;CAAG;;AAR7B,AASQ,MATF,CACF,eAAe,CAQX,WAAW,CAAC;EACR,OAAO,EAAE,YAAY;EACrB,UAAU,EAAE,MAAM;EAClB,MAAM,EAAE,IAAI;CAAG;;AAZ3B,AAaQ,MAbF,CACF,eAAe,CAYX,UAAU,CAAE;EACR,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,GAAG;EACV,gBAAgB,EAAE,OAAO;CAAG;;AAhBxC,AAiBQ,MAjBF,CACF,eAAe,CAgBX,aAAa,CAAC;EACV,OAAO,EAAE,YAAY;EACrB,UAAU,EAAE,IAAI;EAChB,MAAM,EAAE,IAAI;EACZ,WAAW,EAAE,IAAI;CAAG;;AArBhC,AAsBQ,MAtBF,CACF,eAAe,CAqBX,UAAU,CAAC;EACP,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;CAEQ;;AA1BhC,AAyBY,MAzBN,CACF,eAAe,CAqBX,UAAU,CAGN,CAAC,CAAC;EACE,KAAK,EAAE,IAAI;CAAG",
     "sources": [
         "App.sass",
         "_variables.sass",

src/style/base/_base.sass

@@ -41,6 +41,8 @@
 // label
 //     display: inline-block
 
+// html
+//     overflow-y: hidden
 
 .full-width
     width: 100%

src/style/modules/_mainHome.sass

@@ -33,8 +33,9 @@
             margin-top: 30vh
         .row-2
             margin-top: 5vh
-        label
+        .mylabel
             display: inline-block
+            margin: 0
             width: 100px
             text-align: center
         .tile