From e9c9637e3cc535a2cca94e4ac89df3c379ec7625 Mon Sep 17 00:00:00 2001
From: danieldeng2 <danieldeng223@gmail.com>
Date: Wed, 5 Aug 2020 16:17:56 +0100
Subject: [PATCH] Add calendar group template
---
.../molecules/CalendarGroup/index.tsx | 24 ++++++
.../molecules/CalendarGroup/style.module.scss | 73 +++++++++++++++++++
.../components/organisms/RightBar/index.tsx | 4 +-
3 files changed, 100 insertions(+), 1 deletion(-)
create mode 100644 frontend/src/components/molecules/CalendarGroup/index.tsx
create mode 100644 frontend/src/components/molecules/CalendarGroup/style.module.scss
diff --git a/frontend/src/components/molecules/CalendarGroup/index.tsx b/frontend/src/components/molecules/CalendarGroup/index.tsx
new file mode 100644
index 000000000..9189e60fe
--- /dev/null
+++ b/frontend/src/components/molecules/CalendarGroup/index.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import Button from "react-bootstrap/Button";
+import styles from "./style.module.scss";
+import Card from "react-bootstrap/Card";
+
+const CalendarGroup: React.FC = () => {
+ return (
+ <>
+ <h1 className={styles.moduleOutlineHeading}>Today</h1>
+ <div
+ className={"btn-group-vertical " + styles.moduleOutlineButtonGroup}
+ role="group"
+ >
+ {/* <Button className={styles.moduleOutlineButton}>Progress</Button>
+ <Button className={"active " + styles.moduleOutlineButton}>
+ Module Title
+ </Button> */}
+
+ </div>
+ </>
+ );
+};
+
+export default CalendarGroup;
diff --git a/frontend/src/components/molecules/CalendarGroup/style.module.scss b/frontend/src/components/molecules/CalendarGroup/style.module.scss
new file mode 100644
index 000000000..ae6c1931c
--- /dev/null
+++ b/frontend/src/components/molecules/CalendarGroup/style.module.scss
@@ -0,0 +1,73 @@
+@import "assets/scss/custom";
+
+.moduleOutlineButton {
+ margin-bottom: 10px;
+
+ color: #000;
+ background: #f6f8fa;
+ font-size: 17px;
+ letter-spacing: 0;
+ border-width: 0px;
+ height: 40px;
+ border-radius: 5px !important;
+ text-align: left;
+
+}
+
+.moduleOutlineButton:global(.active),
+.moduleOutlineButton:active{
+ color: #fff;
+ background-color: #000 !important;
+ font-weight: 500;
+ text-align: left;
+ border-width: 0px;
+ height: 40px;
+}
+
+.moduleOutlineButton:hover {
+ background-color: #e5e5e5;
+ border-color: #fff;
+ color: #000;
+}
+
+@media (max-width: 992px) {
+ .moduleOutlineButtonGroup {
+ margin-top: 102px;
+ margin-left: 16px;
+ margin-right: 16px;
+ width: 218px !important;
+ }
+
+ .moduleOutlineHeading {
+ font-size: 24px;
+ color: #000000;
+ text-align: left;
+ margin-top: 64px;
+ margin-left: 16px;
+ margin-right: 16px;
+ position: absolute;
+ width: max-content;
+ margin-bottom: 0px;
+ }
+}
+
+@media (min-width: 992px) {
+ .moduleOutlineButtonGroup {
+ margin-top: 102px;
+ margin-left: 32px;
+ margin-right: 32px;
+ width: 186px !important;
+ }
+
+ .moduleOutlineHeading {
+ font-size: 24px;
+ color: #000000;
+ text-align: left;
+ margin-top: 64px;
+ margin-left: 32px;
+ margin-right: 32px;
+ position: absolute;
+ width: max-content;
+ margin-bottom: 0px;
+ }
+}
\ No newline at end of file
diff --git a/frontend/src/components/organisms/RightBar/index.tsx b/frontend/src/components/organisms/RightBar/index.tsx
index b3414ae98..d79f03253 100644
--- a/frontend/src/components/organisms/RightBar/index.tsx
+++ b/frontend/src/components/organisms/RightBar/index.tsx
@@ -1,10 +1,12 @@
import React from "react";
-import styles from "./style.module.scss"
+import styles from "./style.module.scss";
+import CalendarGroup from "components/molecules/CalendarGroup";
const RightBar: React.FC = () => {
return (
<div id={styles.rightbarWrapper}>
<p className={styles.rightbarStatus}>2020-08-05 15:08</p>
+ <CalendarGroup/>
</div>
);
};
--
GitLab