feat(frontend): add basic meeting card

Author: Aksh-Bansal-dev

frontend/src/App.css

@@ -13,6 +13,7 @@ body {
   --background-gradient: linear-gradient(to bottom right, #3650c7, #42abdc);
   --golden: #ffac2f;
   --dark-golden: #ff9c08;
+  --light-golden: #ffd166;
 }
 
 body::-webkit-scrollbar {

frontend/src/components/Buttons/MoreOptions.tsx

@@ -0,0 +1,16 @@
+import { IconButton, IconButtonProps } from "@material-ui/core";
+import { MoreHoriz } from "@material-ui/icons";
+import React from "react";
+
+type MoreOptionsInterface = {
+  // className?: string;
+} & IconButtonProps;
+const MoreOptions: React.FC<MoreOptionsInterface> = ({ ...props }) => {
+  return (
+    <IconButton {...props}>
+      <MoreHoriz />
+    </IconButton>
+  );
+};
+
+export default MoreOptions;

frontend/src/components/Cards/DomainCard.tsx

@@ -15,7 +15,7 @@ const useStyles = makeStyles(() =>
       margin: "1vh",
       height: "38vh",
       width: "30vh",
-      background: "#FFD166",
+      background: "#ffd166",
     },
     title: {
       fontSize: "1.2rem",

frontend/src/components/Meeting/MeetingCard.tsx

@@ -1,14 +1,17 @@
 import React from "react";
-import { createStyles, makeStyles } from "@material-ui/core/styles";
-import { Card, CardContent, Typography } from "@material-ui/core";
+import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
+import { Card, CardContent, Grid, Typography } from "@material-ui/core";
+import RegisterButton from "./RegisterButton";
+import MoreOptions from "../Buttons/MoreOptions";
 
-const useStyles = makeStyles(() =>
+const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
       margin: "2vh",
       minHeight: "20vh",
-      width: "80vh",
-      background: "#FFD166",
+      width: "90vw",
+      background: "#ffd166",
+      position: "relative",
     },
     title: {
       fontSize: "1.2rem",
@@ -19,12 +22,28 @@ const useStyles = makeStyles(() =>
     lang: {
       opacity: 0.5,
     },
+    minorText: {
+      fontSize: "0.9rem",
+      marginLeft: "1vh",
+      opacity: 0.5,
+    },
     body: {
-      marginTop: "1vh",
+      marginBottom: "1vh",
     },
-    owner: {
-      marginTop: "1vh",
-      opacity: 0.5,
+    alignRight: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "flex-end",
+      justifyContent: "center",
+      [theme.breakpoints.down("xs")]: {
+        alignItems: "flex-start",
+        // flexDirection: "row",
+      },
+    },
+    more: {
+      position: "absolute",
+      top: 2,
+      right: 2,
     },
   })
 );
@@ -36,7 +55,27 @@ const MeetingCard: React.FC = ({}) => {
   return (
     <Card className={classes.root}>
       <CardContent>
-        <Typography>hello</Typography>
+        <Grid container>
+          <Grid item xs={12} sm={6}>
+            <div>
+              <Typography className={classes.title} component="span">
+                EventName
+              </Typography>
+              <Typography className={classes.lang} component="span">
+                Bitbyte
+              </Typography>
+            </div>
+            <Typography className={classes.lang}>12:00AM 30.2.2022</Typography>
+            <Typography className={classes.body}>
+              coding coding coding coding coding coding coding{" "}
+            </Typography>
+          </Grid>
+          <Grid item xs={12} sm={6} className={classes.alignRight}>
+            <RegisterButton />
+            <Typography className={classes.minorText}>25 registers</Typography>
+          </Grid>
+        </Grid>
+        <MoreOptions className={classes.more} />
       </CardContent>
     </Card>
   );

frontend/src/components/Meeting/MeetingTabs.css

@@ -0,0 +1,3 @@
+.MuiTabs-indicator {
+  background-color: white !important;
+}

frontend/src/components/Meeting/MeetingTabs.tsx

@@ -1,11 +1,12 @@
 import React from "react";
 import SwipeableViews from "react-swipeable-views";
-import { makeStyles, Theme, useTheme } from "@material-ui/core/styles";
+import { makeStyles, useTheme } from "@material-ui/core/styles";
 import AppBar from "@material-ui/core/AppBar";
 import Tabs from "@material-ui/core/Tabs";
 import Tab from "@material-ui/core/Tab";
 import Box from "@material-ui/core/Box";
 import MeetingCard from "./MeetingCard";
+import "./MeetingTabs.css";
 
 interface TabPanelProps {
   children?: React.ReactNode;
@@ -16,9 +17,11 @@ interface TabPanelProps {
 
 function TabPanel(props: TabPanelProps) {
   const { children, value, index, ...other } = props;
+  const classes = useStyles();
 
   return (
     <div
+      className={classes.cardContainer}
       role="tabpanel"
       hidden={value !== index}
       id={`full-width-tabpanel-${index}`}
@@ -37,12 +40,19 @@ function a11yProps(index: number) {
   };
 }
 
-const useStyles = makeStyles((theme: Theme) => ({
+const useStyles = makeStyles(() => ({
   root: {
     width: "100vw",
   },
   tabbar: {
-    backgroundColor: theme.palette.background.paper,
+    color: "white",
+    background: "rgba(0, 0, 0, 0.5)",
+  },
+  cardContainer: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    overflow: "hidden",
   },
 }));
 
@@ -62,15 +72,13 @@ const MeetingTabs: React.FC = () => {
 
   return (
     <div className={classes.root}>
-      <AppBar position="static" color="default">
+      <AppBar className={classes.tabbar} position="static" color="default">
         <Tabs
-          className={classes.tabbar}
           value={value}
           onChange={handleChange}
-          indicatorColor="primary"
-          textColor="primary"
+          indicatorColor="secondary"
+          textColor="inherit"
           variant="fullWidth"
-          aria-label="full width tabs example"
         >
           <Tab label="Meetings" {...a11yProps(0)} />
           <Tab label="Polls" {...a11yProps(1)} />

frontend/src/components/Meeting/RegisterButton.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { makeStyles, createStyles, Theme } from "@material-ui/core/styles";
+import Button from "@material-ui/core/Button";
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      width: "15vh",
+      display: "flex",
+      justifyContent: "center",
+      background: "none",
+      marginTop: "4vh",
+      [theme.breakpoints.down("xs")]: {
+        marginTop: "0",
+        marginRight: "2vh",
+      },
+    },
+  })
+);
+
+const RegisterButton: React.FC = () => {
+  const classes = useStyles();
+
+  return (
+    <Button variant="outlined" className={classes.root}>
+      Register
+    </Button>
+  );
+};
+
+export default RegisterButton;