only homepage & added link to about us section

components/OfficeStatus.module.css

@@ -1,7 +1,4 @@
 .status {
-  position: fixed;
-  bottom: 5%;
-  right: 5%;
   display: flex;
   align-items: center;
   flex-direction: column;
@@ -64,3 +61,13 @@
   text-align: center;
   color: var(--light--secondary-subtitle);
 }
+
+.status:hover {
+  cursor: pointer;
+}
+
+.fixed {
+  position: fixed;
+  bottom: 5%;
+  right: 5%;
+}

components/OfficeStatus.tsx

@@ -2,14 +2,23 @@ import React, { ReactNode, useEffect, useState } from "react";
 
 import styles from "./OfficeStatus.module.css";
 
-export const OfficeStatus: React.FC = () => {
+interface OfficeStatusProps {
+  href?: string
+  fixed: boolean
+}
+
+export const OfficeStatus: React.FC<OfficeStatusProps> = ({ href, fixed }) => {
   const [online, setOnline] = useState(false);
 
   useEffect(() => {
     // TODO(annie): Implement API fetch
   }, []);
+
+
   return (
-    <div className={styles.status}>
+    <div className={`${styles.status} ${fixed ? styles.fixed : ""}`} onClick={() => {
+      window.open(href)
+    }}>
       <div className={styles.bubble}>
         <div
           className={`${styles.dot} ${online ? styles.online : styles.offline}`}
@@ -17,7 +26,7 @@ export const OfficeStatus: React.FC = () => {
         <div className={styles.text}>
           {online
             ? "Come visit, the office is open!"
-            : "Sorry, the office is currently closed. Check back later!"}
+            : "Our office is closed right now"}
         </div>
       </div>
       <div className={styles.arrow} />

content/about/index.mdx

@@ -1,4 +1,5 @@
 import { Bubble } from "@/components/Bubble";
+import { OfficeStatus } from "@/components/OfficeStatus";
 
 <Bubble>
 
@@ -56,6 +57,7 @@ page to stay updated!
 
 </Bubble>
 
+<div id="our-office">
 <Bubble>
 
 ## Our <span>Office</span>
@@ -71,6 +73,9 @@ Building of the University of Waterloo.
 Come visit us on campus in our office! Meet new members and find out what's new
 in the club.
 
+<div style={{ display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center"}}>
 <address>
 
 Computer Science Club  
@@ -83,5 +88,8 @@ Canada
 Our office phone number is [(519) 888-4567 x33870](tel:+15198884567,33870).
 
 </address>
+<OfficeStatus/>
+</div>
 
 </Bubble>
+</div>

pages/_app.tsx

@@ -12,7 +12,6 @@ import { HorizontalLine } from "@/components/HorizontalLine";
 import { Image } from "@/components/Image";
 import { Link } from "@/components/Link";
 import { Navbar } from "@/components/Navbar";
-import { OfficeStatus } from "@/components/OfficeStatus";
 import { Pre } from "@/components/Pre";
 import {
   defaultGetShapesConfig,
@@ -57,7 +56,6 @@ export default function App({ Component, pageProps }: AppProps): JSX.Element {
               <Component {...pageProps} />
             </Layout>
           </div>
-          <OfficeStatus />
           <Footer />
         </div>
       </MDXProvider>

pages/index.tsx

@@ -16,6 +16,7 @@ import { Event, getUpcomingEvents } from "@/lib/events";
 import { News, getRecentNews } from "@/lib/news";
 
 import styles from "./index.module.css";
+import { OfficeStatus } from "@/components/OfficeStatus";
 
 interface Props {
   moreEvents: boolean; // true if there are more than 2 upcoming events
@@ -112,6 +113,7 @@ export default function Home(props: Props) {
         <ConnectWithUs />
         <EmailSignup />
       </DefaultLayout>
+      <OfficeStatus href="/about/#our-office" fixed />
     </>
   );
 }