From 70d1893788a3047976f9bba8429e670603a801d4 Mon Sep 17 00:00:00 2001
From: YHhaoareyou <mlapenang1998@gmail.com>
Date: Tue, 1 Nov 2022 21:44:52 +0900
Subject: [PATCH 1/3] update feeds

---
 feeds/public/feeds | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/feeds/public/feeds b/feeds/public/feeds
index f572f3194..487ee13a4 160000
--- a/feeds/public/feeds
+++ b/feeds/public/feeds
@@ -1 +1 @@
-Subproject commit f572f31944cc1fbcb5ac7b31d71f3517747dfacf
+Subproject commit 487ee13a48bfcd2dff090c9e6a44d24f51e3e1ff

From 3caff528a71b76af304922f340e1aefb0c56e905 Mon Sep 17 00:00:00 2001
From: YHhaoareyou <mlapenang1998@gmail.com>
Date: Wed, 16 Nov 2022 17:37:02 +0900
Subject: [PATCH 2/3] update feeds

---
 feeds/public/feeds | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/feeds/public/feeds b/feeds/public/feeds
index 487ee13a4..792153ee4 160000
--- a/feeds/public/feeds
+++ b/feeds/public/feeds
@@ -1 +1 @@
-Subproject commit 487ee13a48bfcd2dff090c9e6a44d24f51e3e1ff
+Subproject commit 792153ee423e782e0fa6f7cbc89dace48c6359b0

From de444fbd6bef2bb820b5011c0e9d8c0195dea6a2 Mon Sep 17 00:00:00 2001
From: YHhaoareyou <mlapenang1998@gmail.com>
Date: Sat, 11 Mar 2023 14:44:31 +0900
Subject: [PATCH 3/3] Update start and end time of each period

---
 .../src/components/timetable/TimeRowItem.tsx  | 65 ++++++++++++++-----
 .../src/components/timetable/TimeRowList.tsx  | 32 +++++----
 2 files changed, 70 insertions(+), 27 deletions(-)

diff --git a/syllabus/src/components/timetable/TimeRowItem.tsx b/syllabus/src/components/timetable/TimeRowItem.tsx
index f41857bfc..f662b92f5 100644
--- a/syllabus/src/components/timetable/TimeRowItem.tsx
+++ b/syllabus/src/components/timetable/TimeRowItem.tsx
@@ -1,6 +1,9 @@
 import React from "react";
 
 import styled from "styled-components";
+import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import getSchoolIconPath from "@app/utils/get-school-icon-path";
 
 const StyledListItem = styled("li")`
   display: flex;
@@ -13,29 +16,61 @@ const StyledListItem = styled("li")`
   border-right-style: solid;
 `;
 
-const StyledSpan = styled("span")`
-  font-size: 1.5em;
-  font-weight: 600;
-`;
+type OtherPeriod = {
+  school: string;
+  s: string | number;
+  e: string | number;
+}
 
-const StyledTime = styled("time")`
-  font-size: 0.8em;
-`;
+type Period = {
+  s: string | number;
+  p: string | number;
+  e: string | number;
+  o?: OtherPeriod[]
+}
 
 type Props = {
-  period: {
-    s: string | number;
-    p: string | number;
-    e: string | number;
-  };
+  period: Period;
 };
 
+const schoolIconImage = (school: string) => (
+  <img
+    src={getSchoolIconPath(school, "en")}
+    width="24px"
+    height="24px"
+    alt={school}
+    className="inline"
+  />
+);
+
+const OtherPeriod = ({ periods }: { periods: OtherPeriod[] }) => (
+  <div className="pt-2">
+    {
+      periods.map(period => <p className="mb-2">{schoolIconImage(period.school)} {period.s} ~ {period.e}</p>)
+    }
+  </div>
+);
+
 const TimeRowItem = ({ period }: Props) => {
   return (
     <StyledListItem className="text-light-text2 border-r-gray-100 dark:text-dark-text2 dark:border-r-dark-text3">
-      <StyledTime>{period.s}</StyledTime>
-      <StyledSpan>{period.p}</StyledSpan>
-      <StyledTime>{period.e}</StyledTime>
+      <time className="text-lg">{period.s}</time>
+      {
+        period.o ? (
+          <div className="group relative flex justify-center">
+              <span className="text-3xl font-semibold">{period.p}</span>
+              <span className="text-sm font-semibold"><FontAwesomeIcon icon={faInfoCircle} size="1x" /></span>
+              <span className="absolute left-10 bottom-0 scale-0 w-48 rounded bg-gray-500 p-2 text-2xs text-white group-hover:scale-100">
+                <OtherPeriod periods={period.o} />
+              </span>
+            </div>
+        ) : (
+          <span className="text-3xl font-semibold">
+            {period.p}
+          </span>
+        )
+      }
+      <time className="text-lg">{period.e}</time>
     </StyledListItem>
   );
 };
diff --git a/syllabus/src/components/timetable/TimeRowList.tsx b/syllabus/src/components/timetable/TimeRowList.tsx
index f655162c9..08a2eee0e 100644
--- a/syllabus/src/components/timetable/TimeRowList.tsx
+++ b/syllabus/src/components/timetable/TimeRowList.tsx
@@ -27,39 +27,47 @@ const TimeRowList = ({ largestPeriod }: Props) => {
 
   const periods = [
     {
-      s: "0900",
+      s: "0850",
       e: "1030",
       p: 1,
     },
     {
       s: "1040",
-      e: "1210",
+      e: "1220",
       p: 2,
     },
     {
-      s: "1300",
-      e: "1430",
+      s: "1310",
+      e: "1450",
       p: 3,
     },
     {
-      s: "1445",
-      e: "1615",
+      s: "1505",
+      e: "1645",
       p: 4,
     },
     {
-      s: "1630",
-      e: "1800",
+      s: "1700",
+      e: "1840",
       p: 5,
     },
     {
-      s: "1815",
-      e: "1945",
+      s: "1855",
+      e: "2035",
       p: 6,
+      o: [
+        { school: "G_WBS", s: "1830", e: "2010" },
+        { school: "ART", s: "1810", e: "1950" },
+      ]
     },
     {
-      s: "1955",
-      e: "2125",
+      s: "2045",
+      e: "2135",
       p: 7,
+      o: [
+        { school: "G_WBS", s: "2020", e: "2200" },
+        { school: "ART", s: "1955", e: "2135" },
+      ]
     },
   ];
   const timeRows = periods