Feature/visual upgrades

docusaurus.config.js

@@ -14,6 +14,9 @@ module.exports = {
   organizationName: 'UTDNebula',
   projectName: 'project-nebula',
   themeConfig: {
+    colorMode: {
+      respectPrefersColorScheme: true,
+    },
     announcementBar: {
       id: 'join_us',
       content:

package.json

@@ -16,8 +16,8 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@docusaurus/core": "2.0.0-beta.1",
-    "@docusaurus/preset-classic": "2.0.0-beta.1",
+    "@docusaurus/core": "2.0.0-beta.17",
+    "@docusaurus/preset-classic": "2.0.0-beta.17",
     "@mdx-js/react": "^1.6.21",
     "@svgr/webpack": "^5.5.0",
     "clsx": "^1.1.1",

src/components/HomepageFeatures.module.css

@@ -11,3 +11,7 @@
   height: 200px;
   width: 200px;
 }
+
+.featureItem {
+  padding: 1rem !important;
+}

src/components/HomepageFeatures.tsx

@@ -5,7 +5,7 @@ import styles from './HomepageFeatures.module.css';
 const FeatureList = [
   {
     title: 'Nebula Planner',
-    Icon: require('../../static/img/undraw_docusaurus_mountain.svg').default,
+    Icon: require('../../static/img/illustrations/undraw_events.svg').default,
     description: (
       <>
         The Nebula Planner is a tool to help students craft their college
@@ -18,7 +18,7 @@ const FeatureList = [
   },
   {
     title: 'UTD Survival Guide',
-    Icon: require('../../static/img/undraw_docusaurus_tree.svg').default,
+    Icon: require('../../static/img/illustrations/undraw_books.svg').default,
     description: (
       <>
         The UTD Survival Guide is a student handbook and collection of resources
@@ -31,7 +31,7 @@ const FeatureList = [
   },
   {
     title: 'Nebula API',
-    Icon: require('../../static/img/undraw_docusaurus_tree.svg').default,
+    Icon: require('../../static/img/illustrations/undraw_stars.svg').default,
     description: (
       <>
         The Nebula API is a public API containing resources for UTD student
@@ -44,7 +44,8 @@ const FeatureList = [
   },
   {
     title: 'Course Heatmap',
-    Icon: require('../../static/img/undraw_docusaurus_react.svg').default,
+    Icon: require('../../static/img/illustrations/undraw_outer_space.svg')
+      .default,
     description: (
       <>
         The Course Heatmap lets you see the best times to host events or plan
@@ -57,7 +58,7 @@ const FeatureList = [
   },
   {
     title: 'UTD Grades Upgrade (Codename: Athena)',
-    Icon: require('../../static/img/undraw_docusaurus_react.svg').default,
+    Icon: require('../../static/img/illustrations/undraw_teacher.svg').default,
     description: (
       <>
         UTD Grades is a website that lets you visualize historical class grade
@@ -71,7 +72,7 @@ const FeatureList = [
 
 function Feature({ Icon, title, description, link, linkCta }) {
   return (
-    <div className={clsx('col col--4')}>
+    <div className={clsx(styles.featureItem, 'col col--4')}>
       <div className="text--center">
         <Icon className={styles.featureSvg} alt={title} />
       </div>

src/css/custom.css

@@ -7,14 +7,25 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #bcc9fd;
-  --ifm-color-primary-dark: #7486ce;
-  --ifm-color-primary-darker: #4659a7;
-  --ifm-color-primary-darkest: #4659a7;
-  --ifm-color-primary-light: #4ba6a0;
-  --ifm-color-primary-lighter: #69ccc6;
-  --ifm-color-primary-lightest: #a7ede9;
+  --ifm-color-primary: #394887;
+  --ifm-color-primary-dark: #33417a;
+  --ifm-color-primary-darker: #303d73;
+  --ifm-color-primary-darkest: #28325e;
+  --ifm-color-primary-light: #3f4f95;
+  --ifm-color-primary-lighter: #42539b;
+  --ifm-color-primary-lightest: #4a5eb0;
   --ifm-code-font-size: 95%;
+  --ifm-color-white: #fff;
+}
+
+[data-theme='dark'] {
+  --ifm-color-primary: #8794cc;
+  --ifm-color-primary-dark: #6f7fc2;
+  --ifm-color-primary-darker: #6374bd;
+  --ifm-color-primary-darkest: #4759a7;
+  --ifm-color-primary-light: #9fa9d6;
+  --ifm-color-primary-lighter: #abb4db;
+  --ifm-color-primary-lightest: #ced4ea;
 }
 
 .docusaurus-highlight-code-line {

src/pages/index.module.css

@@ -5,11 +5,18 @@
  * and scoped locally.
  */
 
+.heroLogo {
+  max-height: 200px;
+}
+
 .heroBanner {
   padding: 4rem 0;
   text-align: center;
   position: relative;
   overflow: hidden;
+  background-image: url('/img/graphics/hero.svg');
+  background-size: cover;
+  background-position: center center;
 }
 
 @media screen and (max-width: 966px) {
@@ -18,17 +25,7 @@
   }
 }
 
-.buttons {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
 .hero__subtitle {
-  color: var(--ifm-color-gray-900);
-}
-
-.button,
-.button:hover {
-  color: var(--ifm-color-gray-900);
+  color: var(--ifm-color-white);
+  text-shadow: 0px 0px 14px rgba(0, 0, 0, 1);
 }

src/pages/index.tsx

@@ -9,33 +9,34 @@ import HomepageFeatures from '../components/HomepageFeatures.tsx';
 import ProjectNebulaLogoWordmark from '../assets/nebula-logo-wordmark-dark.png';
 import Head from '@docusaurus/Head';
 
+import Button from '@theme/BackToTopButton';
+
 function HomepageHeader() {
   const { siteConfig } = useDocusaurusContext();
   return (
     <header className={clsx('hero hero--primary', styles.heroBanner)}>
       <div className="container">
         {/* <h1 className="hero__title">{siteConfig.title}</h1> */}
         <div>
-          <img src={ProjectNebulaLogoWordmark} alt="Project Nebula logo" />
+          <img
+            className={clsx(styles.heroLogo)}
+            src="/img/logos/nebula-logo-wordmark-white.svg"
+            alt="Project Nebula logo"
+          />
         </div>
         <p className={clsx('hero__subtitle', styles.hero__subtitle)}>
           {siteConfig.tagline}
         </p>
-        <div className={styles.buttons}>
-          <Link
-            className={clsx('button button--primary button--lg', styles.button)}
-            to="/docs/about/overview"
-          >
-            Learn about Project Nebula
-          </Link>
-        </div>
-        <div className="mt-4">
-          <Link
-            className="button button--secondary button--lg"
-            href="https://acmutd.typeform.com/to/tlZUaM4V"
-          >
-            Join the team
-          </Link>
+
+        <div className="row">
+          <div className="col">
+            <Link
+              className={clsx('button button--secondary')}
+              href="https://acmutd.typeform.com/to/tlZUaM4V"
+            >
+              Join the Team
+            </Link>
+          </div>
         </div>
       </div>
     </header>