make class page enabled on mobile and add back to search button

sandboxnu · Feb 9, 2025 · cc26bfa · cc26bfa
1 parent 15654dc
commit cc26bfa
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 19 deletions.
diff --git a/components/ClassPage/PageContent.tsx b/components/ClassPage/PageContent.tsx
@@ -5,6 +5,8 @@ import ClassPageInfoBody from './ClassPageInfoBody';
 import ClassPageInfoHeader from './ClassPageInfoHeader';
 import ClassPageReqsBody from './ClassPageReqsBody';
 import ClassPageSections from './ClassPageSections';
+import macros from '../macros';
+import IconArrowFlipped from '../icons/IconArrowFlipped';
 
 type PageContentProps = {
   termId: string;
@@ -39,6 +41,11 @@ export default function PageContent({
           COREQUISITES for
           <span className="coreqHeaderCourse">{` ${subject}${classId}`}</span>
         </h2>
+      ) : macros.isMobile ? (
+        <div className="mobileBackToResults" onClick={() => router.back()}>
+          <IconArrowFlipped fill="#858585" />
+          Back to search
+        </div>
       ) : (
         <div className="backToResults" onClick={() => router.back()}>
           Back to Search Results

diff --git a/components/icons/IconArrowFlipped.tsx b/components/icons/IconArrowFlipped.tsx
@@ -0,0 +1,31 @@
+import React, { ReactElement } from 'react';
+import Colors from '../../styles/_exports.module.scss';
+
+const IconArrowFlipped = ({
+  width = '11',
+  height = '10',
+  fill = Colors.dark_grey,
+  className,
+}: {
+  width?: string;
+  height?: string;
+  fill?: string;
+  className?: string;
+}): ReactElement => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 11 10"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style={{ transform: 'rotate(180deg)' }}
+  >
+    <path
+      d="M10.4419 5.44194C10.686 5.19786 10.686 4.80214 10.4419 4.55806L6.46447 0.580583C6.22039 0.336505 5.82466 0.336505 5.58058 0.580583C5.3365 0.82466 5.3365 1.22039 5.58058 1.46447L9.11612 5L5.58058 8.53553C5.3365 8.77961 5.3365 9.17534 5.58058 9.41942C5.82466 9.6635 6.22039 9.6635 6.46447 9.41942L10.4419 5.44194ZM0 5.625L10 5.625V4.375L0 4.375L0 5.625Z"
+      fill={fill}
+    />
+  </svg>
+);
+
+export default IconArrowFlipped;
diff --git a/pages/[campus]/[termId]/classPage/[subject]/[classId].tsx b/pages/[campus]/[termId]/classPage/[subject]/[classId].tsx
@@ -66,31 +66,27 @@ export default function Page(): ReactElement {
         onSignIn={onSignIn}
         onSignOut={onSignOut}
       />
-      {macros.isMobile ? (
-        <h3 style={{ margin: '20px' }}>Class pages coming to mobile soon!</h3>
-      ) : (
-        <>
+      <>
+        <PageContent
+          termId={termId}
+          campus={campus}
+          subject={subject}
+          classId={classId}
+          classPageInfo={classPageInfo}
+          isCoreq={false}
+        />
+        {coreqInfo.map((info, index) => (
           <PageContent
+            key={index}
             termId={termId}
             campus={campus}
             subject={subject}
             classId={classId}
-            classPageInfo={classPageInfo}
-            isCoreq={false}
+            classPageInfo={info}
+            isCoreq={true}
           />
-          {coreqInfo.map((info, index) => (
-            <PageContent
-              key={index}
-              termId={termId}
-              campus={campus}
-              subject={subject}
-              classId={classId}
-              classPageInfo={info}
-              isCoreq={true}
-            />
-          ))}
-        </>
-      )}
+        ))}
+      </>
     </div>
   );
 }
diff --git a/styles/pages/_ClassPage.scss b/styles/pages/_ClassPage.scss
@@ -21,6 +21,24 @@
     }
   }
 
+  .mobileBackToResults {
+    display: inline-flex;
+    align-items: center;
+    padding: 8px 16px;
+    border: 1px solid var(--Expanded-System-NEU4, #c2c2c2);
+    border-radius: 36px;
+    background: #fff;
+    font-size: 16px;
+    color: #858585;
+    font-family: Lato;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    text-decoration: none;
+    gap: 8px;
+  }
+
   .title {
     height: 155px;
     margin-top: 17px;