Merge branch 'master' into update_modal

Author: xyzqm

src/components/Dashboard/ActiveItems.tsx

@@ -77,7 +77,7 @@ export default function ActiveItems({
   return (
     <DashboardCard>
       <div className="px-4 py-5 sm:p-6">
-        <h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-dark-high-emphasis">
+        <h3 className="text-lg leading-6 font-medium text-gray-800 dark:text-dark-high-emphasis">
           Active {type === 'problems' ? 'Problems' : 'Modules'}
         </h3>
         <div className="mt-4 text-gray-500">

src/components/Dashboard/Activity.tsx

@@ -39,7 +39,7 @@ export function ActivityHeatmap({
     (activeDate && moduleActivities[activeDate.getTime()]?.length) ?? 0;
   return (
     <div className="sm:px-6 lg:px-8 py-4">
-      <div className="bg-white dark:bg-gray-900 shadow transition sm:rounded-lg px-4 py-5 sm:p-6">
+      <div className="bg-white dark:bg-gray-800 shadow transition sm:rounded-lg px-4 py-5 sm:p-6">
         <div className="grid lg:grid-cols-3 lg:gap-x-6 gap-y-4 lg:gap-y-0">
           <div className="col-span-2">
             <CalendarHeatmap

src/components/Dashboard/Announcements.tsx

@@ -11,7 +11,7 @@ export default function Announcements({
     <div className="flex overflow-x-auto sm:px-6 lg:px-8 py-4 grid lg:grid-cols-2 gap-8">
       {announcements.map(announcement => (
         <div
-          className="bg-white dark:bg-gray-900 shadow transition sm:rounded-lg"
+          className="bg-white dark:bg-gray-800 shadow transition sm:rounded-lg"
           key={announcement.id}
         >
           {/* hover:shadow-lg */}
@@ -20,7 +20,7 @@ export default function Announcements({
             <p className="text-sm leading-5 text-gray-500 dark:text-dark-med-emphasis">
               {announcement.date}
             </p>
-            <h3 className="mt-2 text-xl leading-7 font-semibold text-gray-900 dark:text-dark-high-emphasis">
+            <h3 className="mt-2 text-xl leading-7 font-semibold text-gray-800 dark:text-dark-high-emphasis">
               {announcement.title}
             </h3>
             <div className="mt-3 text-base leading-6 text-gray-500 dark:text-dark-med-emphasis -mb-4">

src/components/Dashboard/DailyStreak.tsx

@@ -42,9 +42,9 @@ const PhotoCard = ({ img, day, tomorrowMilliseconds, hiddenOnDesktop }) => {
         'max-w-[592px] mx-auto mb-8' + (hiddenOnDesktop ? ' lg:hidden' : '')
       }
     >
-      <div className="bg-white dark:bg-gray-900 shadow sm:rounded-lg overflow-hidden flex flex-col">
+      <div className="bg-white dark:bg-gray-800 shadow sm:rounded-lg overflow-hidden flex flex-col">
         <div className="px-4 pt-5 sm:px-6 sm:pt-6 pb-4">
-          <h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-dark-high-emphasis">
+          <h3 className="text-lg leading-6 font-medium text-gray-800 dark:text-dark-high-emphasis">
             Day {day} Photo
           </h3>
         </div>
@@ -128,7 +128,7 @@ export default function DailyStreak({ streak }) {
     if (i == times.length) {
       return (
         <div className="mb-8" key={times.length}>
-          <div className="bg-white dark:bg-gray-900 shadow sm:rounded-lg overflow-hidden flex flex-col">
+          <div className="bg-white dark:bg-gray-800 shadow sm:rounded-lg overflow-hidden flex flex-col">
             <div className="px-4 py-5 sm:p-6">
               <div className="text-center">
                 <h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-dark-high-emphasis">
@@ -184,7 +184,7 @@ export default function DailyStreak({ streak }) {
   };
   return (
     <>
-      <div className="bg-white dark:bg-gray-900 shadow sm:rounded-lg overflow-hidden lg:col-span-2">
+      <div className="bg-white dark:bg-gray-800 shadow sm:rounded-lg overflow-hidden lg:col-span-2">
         <div className="px-4 py-5 sm:p-6">
           <div className="text-center">
             <h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-dark-high-emphasis">

src/components/Dashboard/DashboardCard.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 export default function DashboardCard(props) {
   return (
     <div
-      className="bg-white shadow sm:rounded-lg dark:bg-gray-900"
+      className="bg-white shadow sm:rounded-lg dark:bg-gray-800"
       {...props}
     />
   );

src/components/Dashboard/WelcomeBackBanner.tsx

@@ -6,18 +6,18 @@ export default function WelcomeBackBanner({
   lastViewedModuleLabel,
 }) {
   return (
-    <div className="bg-blue-700 dark:bg-blue-900 shadow hover:shadow-lg transition lg:rounded-lg w-full">
+    <div className="bg-white dark:bg-gray-800 shadow lg:rounded-lg w-full">
       <Link
         className="px-4 py-6 sm:p-8 block sm:flex sm:items-center sm:justify-between"
         to={lastViewedModuleURL || '/general/using-this-guide'}
       >
         <div>
-          <h3 className="text-xl sm:text-2xl leading-7 font-medium text-white dark:text-dark-high-emphasis">
+          <h3 className="text-xl sm:text-2xl leading-7 font-medium text-black dark:text-dark-high-emphasis">
             {lastViewedModuleURL
               ? 'Welcome Back!'
               : 'Welcome to the USACO Guide!'}
           </h3>
-          <div className="mt-2 text-teal-200 dark:text-teal-300">
+          <div className="mt-2 font-medium text-blue-600 dark:text-blue-300">
             <p>
               {lastViewedModuleURL
                 ? `Pick up where you left off. Your last viewed module was "${lastViewedModuleLabel}."`

src/components/TopNavigationBar/TopNavigationBar.tsx

@@ -40,6 +40,7 @@ export default function TopNavigationBar({
   linkLogoToIndex = false,
   currentSection = null,
   hidePromoBar = false,
+  redirectToDashboard = false,
 }) {
   const firebaseUser = useFirebaseUser();
   const signOut = useSignOutAction();
@@ -131,7 +132,6 @@ export default function TopNavigationBar({
       key: 'adv',
     },
   ];
-
   return (
     <>
       {!hidePromoBar && (
@@ -214,6 +214,7 @@ export default function TopNavigationBar({
             <div className="flex px-2 lg:px-0">
               <Link
                 to={linkLogoToIndex ? '/' : '/dashboard'}
+                state={{ redirect: redirectToDashboard }}
                 className="flex-shrink-0 flex items-center"
               >
                 <div className="block sm:hidden">

src/pages/dashboard.tsx

@@ -40,7 +40,7 @@ import {
 } from '../utils/getProgressInfo';
 
 export default function DashboardPage(props: PageProps) {
-  const { modules, announcements, problems } = props.data as any;
+  const { navigate, modules, announcements, problems } = props.data as any;
   const moduleIDToName = modules.edges.reduce((acc, cur) => {
     acc[cur.node.frontmatter.id] = cur.node.frontmatter.title;
     return acc;
@@ -168,7 +168,7 @@ export default function DashboardPage(props: PageProps) {
       <SEO title="Dashboard" />
 
       <div className="min-h-screen bg-gray-100 dark:bg-dark-surface">
-        <TopNavigationBar linkLogoToIndex={true} />
+        <TopNavigationBar linkLogoToIndex={true} redirectToDashboard={false} />
 
         <main className="pb-12">
           <div className="max-w-7xl mx-auto mb-4">
@@ -196,13 +196,21 @@ export default function DashboardPage(props: PageProps) {
                   )}
                 </div>
               </div>
-              <div className="flex overflow-x-auto">
-                <WelcomeBackBanner
-                  lastViewedModuleURL={lastViewedModuleURL}
-                  lastViewedModuleLabel={moduleIDToName[lastViewedModuleID]}
-                />
-              </div>
+              <WelcomeBackBanner
+                lastViewedModuleURL={lastViewedModuleURL}
+                lastViewedModuleLabel={moduleIDToName[lastViewedModuleID]}
+              />
+            </div>
+          </div>
+          <header id="announcements">
+            <div className="max-w-7xl mx-auto px-4 sm:px-8 lg:px-10">
+              <h1 className="text-3xl font-bold leading-tight text-gray-900 dark:text-dark-high-emphasis">
+                Announcements
+              </h1>
             </div>
+          </header>
+          <div className="max-w-7xl mx-auto mb-8">
+            <Announcements announcements={parsedAnnouncements} />
           </div>
           <div className="max-w-7xl mx-auto sm:px-6 lg:px-8 lg:grid lg:grid-cols-2 lg:gap-8">
             {activeProblems.length > 0 && (
@@ -216,16 +224,6 @@ export default function DashboardPage(props: PageProps) {
               </div>
             )}
           </div>
-          <header id="announcements">
-            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-              <h1 className="text-3xl font-bold leading-tight text-gray-900 dark:text-dark-high-emphasis">
-                Announcements
-              </h1>
-            </div>
-          </header>
-          <div className="max-w-7xl mx-auto mb-8">
-            <Announcements announcements={parsedAnnouncements} />
-          </div>
           <header>
             <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
               <h1 className="text-3xl font-bold leading-tight text-gray-900 dark:text-dark-high-emphasis">

src/pages/index.tsx

@@ -1,3 +1,4 @@
+import { useLocation } from '@gatsbyjs/reach-router';
 import {
   AcademicCapIcon,
   ChartBarIcon,
@@ -10,7 +11,7 @@ import {
   UserGroupIcon,
 } from '@heroicons/react/outline';
 import classNames from 'classnames';
-import { Link } from 'gatsby';
+import { Link, navigate } from 'gatsby';
 import { StaticImage } from 'gatsby-plugin-image';
 import * as React from 'react';
 import { CPIProjectCard } from '../components/Index/CPIProjectCard';
@@ -28,6 +29,10 @@ import { GradientText } from '../components/elements/landing/GradientText';
 import { HighlightedText } from '../components/elements/landing/HighlightedText';
 import Layout from '../components/layout';
 import SEO from '../components/seo';
+import {
+  useFirebaseUser,
+  useIsUserDataLoaded,
+} from '../context/UserDataContext/UserDataContext';
 
 const containerClasses = 'max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8';
 const headerClasses =
@@ -46,6 +51,24 @@ const linkTextStyles =
   'text-blue-600 dark:text-blue-300 transition hover:text-purple-600 dark:hover:text-purple-300';
 
 export default function IndexPage(): JSX.Element {
+  const firebaseUser = useFirebaseUser();
+  const loading = useIsUserDataLoaded();
+  const location = useLocation();
+  React.useEffect(() => {
+    // User will normally be redirected to the dashboard if the user is logged in, but if user clicks the icon in the top left corner while on the dashboard, they will not be redirected.
+    try {
+      if (firebaseUser && location.state.redirect) {
+        /* Whether or not the user should be redirected to the dashboard is stored in location.state.redirect, but if the user opens a link straight
+        to the landing page, location.state.redirect will be undefined, causing a typeerror, this try catch statements accounts for that */
+        navigate('/dashboard');
+      }
+    } catch (e) {
+      if (firebaseUser) {
+        navigate('/dashboard');
+      }
+    }
+  }, [firebaseUser, loading, location]);
+
   return (
     <Layout>
       <SEO title={null} />