tell users to send feedback if they have no feedback

acmucsd · Mar 31, 2024 · d4d05eb · d4d05eb
1 parent 14df1fb
commit d4d05eb
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 22 deletions.
diff --git a/src/components/events/Feedback/style.module.scss b/src/components/events/Feedback/style.module.scss
@@ -7,42 +7,29 @@
   flex-direction: column;
 
   .header {
+    align-items: center;
     background-color: var(--theme-elevated-background);
     border-bottom: 1px solid var(--theme-elevated-stroke);
     border-radius: 0.5rem 0.5rem 0 0;
     display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    padding: 0.5rem;
+    position: relative;
 
     .user,
     .event {
       align-items: center;
       display: flex;
       gap: 0.5rem;
-      padding: 0.5rem;
-      position: relative;
 
       &:hover span {
         text-decoration: underline;
       }
     }
 
-    .user {
-      img {
-        border-radius: 50%;
-      }
-
-      &::after {
-        background-color: var(--theme-background);
-        border-right: 1px solid var(--theme-elevated-stroke);
-        border-top: 1px solid var(--theme-elevated-stroke);
-        content: '';
-        height: 0.5rem;
-        left: 1.25rem;
-        margin: -0.25rem;
-        position: absolute;
-        top: 100%;
-        transform: rotate(-45deg);
-        width: 0.5rem;
-      }
+    .user img {
+      border-radius: 50%;
     }
 
     .event img {
@@ -52,6 +39,20 @@
     > span {
       margin: auto 0;
     }
+
+    &::after {
+      background-color: var(--theme-background);
+      border-right: 1px solid var(--theme-elevated-stroke);
+      border-top: 1px solid var(--theme-elevated-stroke);
+      content: '';
+      height: 0.5rem;
+      left: 1.25rem;
+      margin: -0.25rem;
+      position: absolute;
+      top: 100%;
+      transform: rotate(-45deg);
+      width: 0.5rem;
+    }
   }
 
   .body {
@@ -82,6 +83,10 @@
       gap: 0.5rem;
       justify-content: space-between;
 
+      @media (max-width: vars.$breakpoint-sm) {
+        flex-direction: row;
+      }
+
       .button {
         border-radius: 2rem;
         color: var(--theme-background);
@@ -90,6 +95,10 @@
         height: 2rem;
         padding: 0 1rem;
 
+        @media (max-width: vars.$breakpoint-sm) {
+          flex: auto;
+        }
+
         &.acknowledge {
           background-color: var(--theme-primary-2);
         }

diff --git a/src/pages/feedback.tsx b/src/pages/feedback.tsx
@@ -10,6 +10,7 @@ import { CookieType, FeedbackStatus, FeedbackType, UserAccessType } from '@/lib/
 import { isEnum } from '@/lib/utils';
 import styles from '@/styles/pages/feedback.module.scss';
 import type { GetServerSideProps } from 'next';
+import Link from 'next/link';
 import { useMemo, useState } from 'react';
 
 type FilterOptions = {
@@ -130,7 +131,18 @@ const FeedbackPage = ({ user, feedback, token, initialFilters }: FeedbackPagePro
           pages={Math.ceil(filteredFeedback.length / ROWS_PER_PAGE)}
         />
       ) : (
-        <Typography variant="body/medium">No feedback matches these criteria.</Typography>
+        <Typography variant="body/medium">
+          {typeFilter !== 'any' || statusFilter !== 'any' ? (
+            'No feedback matches these criteria.'
+          ) : (
+            <>
+              You haven&lsquo;t submitted any feedback yet!{' '}
+              <Link href={`${config.eventsRoute}?attendance=attended`} className={styles.link}>
+                Review your recent events.
+              </Link>
+            </>
+          )}
+        </Typography>
       )}
     </div>
   );

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -59,7 +59,7 @@ const PortalHomePage = ({
       const newAttendance: PublicAttendance = {
         user: user,
         event,
-        timestamp: new Date(),
+        timestamp: new Date().toString(),
         asStaff: false,
         feedback: [],
       };

diff --git a/src/styles/pages/feedback.module.scss b/src/styles/pages/feedback.module.scss
@@ -28,4 +28,12 @@
       }
     }
   }
+
+  .link {
+    color: var(--theme-blue-text-button);
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
 }
diff --git a/src/styles/pages/feedback.module.scss.d.ts b/src/styles/pages/feedback.module.scss.d.ts
@@ -1,6 +1,7 @@
 export type Styles = {
   controls: string;
   filterOption: string;
+  link: string;
   page: string;
 };