From f32dc6c1bf2294aafc2cb046a6cdd093021e8cf9 Mon Sep 17 00:00:00 2001
From: Sudarshan Sreeram <sudarshan.sreeram19@imperial.ac.uk>
Date: Fri, 4 Sep 2020 19:11:31 +0530
Subject: [PATCH] Create and add styling for week heading card
---
.../Timeline/components/WeekHeading/index.tsx | 18 +++++++-
.../components/WeekHeading/style.module.scss | 44 +++++++++++++++++++
src/components/pages/Timeline/index.tsx | 5 +++
3 files changed, 66 insertions(+), 1 deletion(-)
diff --git a/src/components/pages/Timeline/components/WeekHeading/index.tsx b/src/components/pages/Timeline/components/WeekHeading/index.tsx
index e97ca4aa5..239d96b9e 100644
--- a/src/components/pages/Timeline/components/WeekHeading/index.tsx
+++ b/src/components/pages/Timeline/components/WeekHeading/index.tsx
@@ -1,9 +1,25 @@
import React from "react";
+import Card from "react-bootstrap/Card";
+import styles from "./style.module.scss";
+
const WeekHeading: React.FC = () => {
return (
<>
+ <Card className={styles.weekCard}>
+ <Card.Header>
+ <div className={styles.weekHeading}>Week 1</div>
+ <div className={styles.weekDateRange}>06/10 - 10/10</div>
+ </Card.Header>
+ <Card.Body>
+ <div className={styles.dayIndicator}>Mon</div>
+ <div className={styles.dayIndicator}>Tue</div>
+ <div className={styles.dayIndicator}>Wed</div>
+ <div className={styles.dayIndicator}>Thu</div>
+ <div className={styles.dayIndicator}>Fri</div>
+ </Card.Body>
+ </Card>
</>
);
};
-export default WeekHeading;
\ No newline at end of file
+export default WeekHeading;
diff --git a/src/components/pages/Timeline/components/WeekHeading/style.module.scss b/src/components/pages/Timeline/components/WeekHeading/style.module.scss
index e69de29bb..2eb17dbb2 100644
--- a/src/components/pages/Timeline/components/WeekHeading/style.module.scss
+++ b/src/components/pages/Timeline/components/WeekHeading/style.module.scss
@@ -0,0 +1,44 @@
+@import "assets/scss/custom";
+
+.weekCard {
+ width: 11.25rem;
+ height: 3.75rem;
+ border-radius: 0.5rem !important;
+ border-width: 0rem;
+ background: var(--background-color);
+ box-sizing: border-box;
+}
+
+.weekCard :global(.card-header) {
+ font-size: 14px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0.375rem 0.5rem;
+ border-radius: 0.5rem !important;
+ background: var(--primary-button);
+}
+
+.weekCard :global(.card-body) {
+ font-size: 12px;
+ display: flex;
+ justify-content: space-between;
+ align-items: middle;
+ padding: 0.5rem 0.25rem;
+}
+
+.dayIndicator {
+ color: var(--primary-text-color);
+ font-weight: 500;
+ width: 2.25rem !important;
+ text-align: center;
+}
+
+.weekDateRange {
+ color: var(--tertiary-text-color);
+}
+
+.weekHeading {
+ font-weight: 500;
+ color: var(--primary-text-color);
+}
diff --git a/src/components/pages/Timeline/index.tsx b/src/components/pages/Timeline/index.tsx
index 4395b4dcc..9d719d444 100644
--- a/src/components/pages/Timeline/index.tsx
+++ b/src/components/pages/Timeline/index.tsx
@@ -2,7 +2,11 @@ import React from "react";
import MyBreadcrumbs from "components/atoms/MyBreadcrumbs";
import styles from "./style.module.scss";
import TermSwitcher from "./components/TermSwitcher";
+<<<<<<< Updated upstream
import ModuleHeading from "./components/ModuleHeading";
+=======
+import WeekHeading from "./components/WeekHeading";
+>>>>>>> Stashed changes
interface TimelineProps {
initSideBar: () => void;
@@ -27,6 +31,7 @@ class Timeline extends React.Component<TimelineProps, {}> {
moduleCode="CO112"
title="Introduction to Computer Systems"
/>
+ <WeekHeading />
</div>
);
}
--
GitLab