feat: recruitment notification on page load

frontend/src/App.tsx

@@ -1,7 +1,9 @@
-import React, { Suspense } from 'react';
+import React, { Suspense, useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import { BrowserRouter as Router, Navigate, Route, Routes } from 'react-router-dom';
+import { SmileOutlined } from '@ant-design/icons';
 import { ThemeProvider } from 'styled-components';
+import openNotification from 'utils/openNotification';
 import ErrorBoundary from 'components/ErrorBoundary';
 import PageLoading from 'components/PageLoading';
 import { inDev } from 'config/constants';
@@ -25,6 +27,29 @@ const App = () => {
 
   const degree = useSelector((state: RootState) => state.degree);
 
+  // temporary subcommittee recruitment drive notification
+  // TODO: either remove or productionise this later
+  useEffect(() => {
+    openNotification({
+      type: 'info',
+      message: 'Subcommittee Recruitment!',
+      description: (
+        <>
+          Interested in working on Circles or one of our other student-led projects? DevSoc is
+          currently recruiting members for our 2024 subcommittee!
+          <br />
+          <br />
+          Find out more at{' '}
+          <a href="https://devsoc.app/get-involved" target="_blank" rel="noopener noreferrer">
+            devsoc.app/get-involved
+          </a>
+        </>
+      ),
+      duration: 0,
+      icon: <SmileOutlined style={{ color: lightTheme.purplePrimary }} />
+    });
+  }, []);
+
   return (
     <ThemeProvider theme={theme === 'light' ? lightTheme : darkTheme}>
       <GlobalStyles />

frontend/src/utils/openNotification.ts

@@ -1,20 +1,23 @@
+import React from 'react';
 import { notification } from 'antd';
 import type { IconType } from 'antd/lib/notification';
 
 type Props = {
   type: IconType;
   message?: string;
-  description?: string;
+  description?: React.ReactNode;
   duration?: number;
+  icon?: React.ReactNode;
 };
 
-const openNotification = ({ type = 'info', message, description, duration = 5 }: Props) => {
+const openNotification = ({ type = 'info', message, description, duration = 5, icon }: Props) => {
   notification.open({
     type,
     message,
     description,
     duration,
-    placement: 'bottomRight'
+    placement: 'bottomRight',
+    icon
   });
 };