about page with discord embed created; works with light dark toggle a…

…nd mobile (#48)

* combining discord embed and about page

* comment added

* prettier css fix

* minor css fix - alphabetical order rule

* edits made; corner color of discord embed fixed

* stylelint fixes

* Update config.ts

* nitpick code cleanliness edits

* yarn.lock conflict merge

---------

Co-authored-by: Alex Zhang <[email protected]>
Co-authored-by: Raymond Sun <[email protected]>

src/pages/about.tsx

@@ -1,9 +1,66 @@
 import withAccessType from '@/lib/hoc/withAccessType';
 import { PermissionService } from '@/lib/services';
+
+import ACMLogo from '@/public/assets/acm-logos/general/light-mode.png';
+import DiscordIcon from '@/public/assets/icons/discord-icon.svg';
+import FacebookIcon from '@/public/assets/icons/facebook-icon.svg';
+import WebIcon from '@/public/assets/icons/globe-icon.svg';
+import IgIcon from '@/public/assets/icons/instagram.svg';
+
+import styles from '@/styles/pages/about.module.scss';
 import { GetServerSideProps } from 'next';
+import { useTheme } from 'next-themes';
+import Image from 'next/image';
 
 const AboutPage = () => {
-  return <h1>About ACM Page</h1>;
+  const { theme } = useTheme();
+  const about = `With 100,000 members and 500+ chapters, the Association for Computing
+  Machinery is the world's largest society for computing. Here at UC
+  San Diego, our chapter has been established with the mission of
+  creating a member-first community devoted to the field of computing.
+  We welcome students of all backgrounds and skill levels to come
+  develop their skills at our many workshops and form new friendships at
+  our many socials. Get involved today by signing up for an event on
+  this portal or following us on social media!`;
+  return (
+    <div className={styles.container}>
+      <div className={styles.header}>
+        <Image className={styles.logo} src={ACMLogo} alt="logo" width={115} height={115} />
+        <h1>
+          About <b>ACM@UCSD</b>
+        </h1>
+      </div>
+      <div className={styles.body}>
+        <div className={styles.socials}>
+          <p className={styles.description}>{about}</p>
+          <a href="https://acmucsd.com">
+            <WebIcon className={styles.theme} />
+            acmucsd.com
+          </a>
+          <a href="https://facebook.com/acm.ucsd">
+            <FacebookIcon className={styles.theme} />
+            acmurl.com/facebook
+          </a>
+          <a href="https://instagram.com/acm.ucsd">
+            <IgIcon className={styles.theme} />
+            acmurl.com/instagram
+          </a>
+          <a href="https://acmurl.com/discord">
+            <DiscordIcon className={styles.theme} />
+            acmurl.com/discord
+          </a>
+        </div>
+        <div className={styles.discordPreview}>
+          <iframe
+            title="discord embed"
+            src={`https://discordapp.com/widget?id=573028991527550986&theme=${theme}`}
+            width="350px"
+            height="500px"
+          />
+        </div>
+      </div>
+    </div>
+  );
 };
 
 export default AboutPage;

src/styles/pages/about.module.scss

@@ -0,0 +1,63 @@
+@use 'src/styles/vars.scss' as vars;
+
+.logo {
+  height: 115px;
+}
+
+.container {
+  font-size: vars.$general-body;
+  margin: 0 auto;
+  max-width: 60rem;
+}
+
+.header {
+  align-items: center;
+  display: flex;
+  padding: 0 2rem;
+
+  h1 {
+    font-size: vars.$general-heading-2;
+    margin-left: 1.25rem;
+  }
+}
+
+.body {
+  margin: auto;
+  max-width: auto;
+
+  @media only screen and (min-width: vars.$breakpoint-md) {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .socials {
+    padding: 2rem;
+
+    .description {
+      margin-bottom: 2rem;
+      margin-top: 0;
+    }
+
+    a {
+      align-items: center;
+      display: flex;
+      flex-direction: row;
+      gap: 0.5rem;
+      margin-bottom: 0.7rem;
+
+      .theme {
+        fill: currentColor;
+      }
+    }
+  }
+
+  .discordPreview {
+    border-radius: 10px;
+    overflow: hidden;
+    width: 350px;
+
+    @media only screen and (max-width: vars.$breakpoint-md) {
+      display: none;
+    }
+  }
+}

src/styles/pages/about.module.scss.d.ts

@@ -0,0 +1,16 @@
+export type Styles = {
+  body: string;
+  container: string;
+  description: string;
+  discordPreview: string;
+  header: string;
+  logo: string;
+  socials: string;
+  theme: string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;