From 8df9ea55a9f0bcb04c90314cb311bba9d1ebf2e3 Mon Sep 17 00:00:00 2001
From: doprz <52579214+doprz@users.noreply.github.com>
Date: Wed, 6 Mar 2024 15:05:35 -0600
Subject: [PATCH] feat: use React-icons

---
 package-lock.json                            |   9 ++
 package.json                                 |   1 +
 pnpm-lock.yaml                               |  11 ++
 src/assets/logo.png                          | Bin 0 -> 13866 bytes
 src/stories/components/PopupMain.stories.tsx |  23 +++
 src/views/components/PopupMain.tsx           | 150 ++++++++++++++++---
 6 files changed, 175 insertions(+), 19 deletions(-)
 create mode 100644 src/assets/logo.png
 create mode 100644 src/stories/components/PopupMain.stories.tsx

diff --git a/package-lock.json b/package-lock.json
index 1599b14b3..686431a81 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
                 "react": "^18.2.0",
                 "react-devtools-core": "^5.0.0",
                 "react-dom": "^18.2.0",
+                "react-icons": "^5.0.1",
                 "react-window": "^1.8.10",
                 "sass": "^1.70.0",
                 "sql.js": "1.10.2",
@@ -20112,6 +20113,14 @@
             "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==",
             "dev": true
         },
+        "node_modules/react-icons": {
+            "version": "5.0.1",
+            "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.0.1.tgz",
+            "integrity": "sha512-WqLZJ4bLzlhmsvme6iFdgO8gfZP17rfjYEJ2m9RsZjZ+cc4k1hTzknEz63YS1MeT50kVzoa1Nz36f4BEx+Wigw==",
+            "peerDependencies": {
+                "react": "*"
+            }
+        },
         "node_modules/react-is": {
             "version": "16.13.1",
             "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/package.json b/package.json
index f6ef23d4b..5b2cbe38b 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
         "react": "^18.2.0",
         "react-devtools-core": "^5.0.0",
         "react-dom": "^18.2.0",
+        "react-icons": "^5.0.1",
         "react-window": "^1.8.10",
         "sass": "^1.70.0",
         "sql.js": "1.10.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f2526826a..b766d396b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -49,6 +49,9 @@ dependencies:
   react-dom:
     specifier: ^18.2.0
     version: 18.2.0(react@18.2.0)
+  react-icons:
+    specifier: ^5.0.1
+    version: 5.0.1(react@18.2.0)
   react-window:
     specifier: ^1.8.10
     version: 1.8.10(react-dom@18.2.0)(react@18.2.0)
@@ -11207,6 +11210,14 @@ packages:
     resolution: {integrity: sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==}
     dev: true
 
+  /react-icons@5.0.1(react@18.2.0):
+    resolution: {integrity: sha512-WqLZJ4bLzlhmsvme6iFdgO8gfZP17rfjYEJ2m9RsZjZ+cc4k1hTzknEz63YS1MeT50kVzoa1Nz36f4BEx+Wigw==}
+    peerDependencies:
+      react: '*'
+    dependencies:
+      react: 18.2.0
+    dev: false
+
   /react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
diff --git a/src/assets/logo.png b/src/assets/logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..294a3dc83445945b466b9f52c9e484a9015ff109
GIT binary patch
literal 13866
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
aGxDD$M2S^o?4iG(#mT-^f>uiy2mc>6iIWZh

literal 0
HcmV?d00001

diff --git a/src/stories/components/PopupMain.stories.tsx b/src/stories/components/PopupMain.stories.tsx
new file mode 100644
index 000000000..dc4529099
--- /dev/null
+++ b/src/stories/components/PopupMain.stories.tsx
@@ -0,0 +1,23 @@
+import { Meta, StoryObj } from '@storybook/react';
+import PopupMain from 'src/views/components/PopupMain';
+
+const meta = {
+    title: 'Components/Common/PopupMain',
+    component: PopupMain,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        
+    },
+} satisfies Meta<typeof PopupMain>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        
+    },
+};
\ No newline at end of file
diff --git a/src/views/components/PopupMain.tsx b/src/views/components/PopupMain.tsx
index fa97323d5..bc437c96b 100644
--- a/src/views/components/PopupMain.tsx
+++ b/src/views/components/PopupMain.tsx
@@ -1,24 +1,136 @@
-import { background } from '@shared/messages';
 import React from 'react';
-import useSchedules from '../hooks/useSchedules';
-import { Button } from './common/Button/Button';
+import { FaCalendarAlt, FaCog, FaRedo } from 'react-icons/fa'; // Added FaRedo for the refresh icon
+import { StatusIcon } from '@shared/util/icons';
 import ExtensionRoot from './common/ExtensionRoot/ExtensionRoot';
+import PopupCourseBlock from './common/PopupCourseBlock/PopupCourseBlock';
+import Text from './common/Text/Text';
+import Divider from './common/Divider/Divider';
+import logoImage from '../../assets/logo.png'; // Adjust the path as necessary
+import List from './common/List/List'; // Ensure this path is correctly pointing to your List component
+
+
 
 export default function PopupMain() {
-    const [activeSchedule, schedules] = useSchedules();
-
-    // TODO: Add a button to to switch the active schedule
-
-    return (
-        <ExtensionRoot>
-            <Button
-                onClick={() => {
-                    if (!activeSchedule) return;
-                    background.clearCourses({ scheduleName: activeSchedule?.name });
-                }}
-            >
-                Clear Courses
-            </Button>
-        </ExtensionRoot>
-    );
+   const courses = [
+       {
+           uniqueId: '47280',
+           department: 'BIO',
+           number: '311C',
+           instructors: [{ lastName: 'Fritz' }],
+           status: 'OPEN',
+       },
+       {
+           uniqueId: '51180',
+           department: 'C S',
+           number: '374L',
+           instructors: [{ lastName: 'Baer' }],
+           status: 'CLOSED',
+       },
+       {
+           uniqueId: '60020',
+           department: 'S W',
+           number: '310',
+           instructors: [{ lastName: 'Whalley' }],
+           status: 'WAITLISTED',
+       },
+       {
+           uniqueId: '13190',
+           department: 'PED',
+           number: '106C',
+           instructors: [{ lastName: 'Rich' }],
+           status: 'CANCELLED',
+       },
+       {
+           uniqueId: '44435',
+           department: 'WGS',
+           number: '301',
+           instructors: [{ lastName: 'RODRIGUEZ' }],
+           status: 'TEMP',
+       },
+   ];
+
+
+   // Manually applying colors for the demonstration
+   const colors = {
+       OPEN: { primaryColor: '#34D399', secondaryColor: '#059669' },
+       CLOSED: { primaryColor: '#818cf8', secondaryColor: '#4f46e5' },
+       WAITLISTED: { primaryColor: '#F59E00', secondaryColor: '#B45309' },
+       CANCELLED: { primaryColor: '#EF4444', secondaryColor: '#b91c1c' },
+       TEMP: { primaryColor: '#fde047', secondaryColor: '#eab308' },
+   };
+
+   const draggableElements = courses.map((course) => (
+    <PopupCourseBlock
+        key={course.uniqueId}
+        course={course}
+        colors={colors[course.status]}
+    />
+));
+
+
+return (
+    <ExtensionRoot>
+        <div className="p-4 bg-white max-w-sm mx-auto rounded-lg shadow-md">
+            <div className="mb-2 flex items-center justify-between bg-white">
+                <div className="flex items-center">
+                    <img src={logoImage} alt="Logo" style={{ width: '40px', height: '40px', marginRight: '8px' }} />
+                    <div>
+                        <Text as="div" variant="h1-course" style={{ color: '#bf5700', fontSize: '1.3rem' }}>UT Registration</Text>
+                        <Text as="div" variant="h1-course" style={{ color: '#f8971f', fontSize: '1.3rem' }}>Plus</Text>
+                    </div>
+                </div>
+                <div className="flex items-center">
+                    <button style={{ backgroundColor: '#bf5700', borderRadius: '8px', padding: '8px' }}>
+                        <FaCalendarAlt color="white" />
+                    </button>
+                    <button style={{ backgroundColor: 'white', marginLeft: '10px', borderRadius: '8px', padding: '8px', boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)' }}>
+                        <FaCog color="#C05621" />
+                    </button>
+                </div>
+            </div>
+            <Divider color="#E2E8F0" type="solid" style={{ margin: '1rem 0' }} />
+            <div className="mb-4 p-2 bg-white text-left rounded-lg shadow-inner" style={{ backgroundColor: 'white', border: '1px solid #FBD38D', borderRadius: '0.5rem' }}>
+                <Text as="div" variant="h2-course" style={{ color: '#DD6B20', fontSize: '1.2rem' }}>MAIN SCHEDULE:</Text>
+                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'start', color: '#333f48' }}>
+                    <Text as="div" variant="h1" style={{ fontSize: '1.2rem', fontWeight: 'bold', marginRight: '0.5rem' }}>22 HOURS</Text>
+                    <Text as="div" variant="h2-course" style={{ fontSize: '1.2rem' }}>8 Courses</Text>
+                </div>
+            </div>
+            {/* Integrate the List component here */}
+            <List
+                draggableElements={draggableElements}
+                itemHeight={100} // Adjust based on your content size
+                listHeight={500} // Adjust based on total height you want for the list
+                listWidth={350} // Adjust based on your layout/design
+                gap={12} // Spacing between items
+            />
+            <div className="mt-4 p-4 border-t border-gray-200 flex justify-between text-xs">
+                <div className="flex items-center">
+                    <div style={{ backgroundColor: '#6B7280', padding: '1px', borderRadius: '4px', marginRight: '3px', marginLeft: '8px' }}>
+                        <StatusIcon status="WAITLISTED" className="text-white h-5 w-5" />
+                    </div>
+                    <Text as="span" variant="mini">WAITLISTED</Text>
+                </div>
+                <div className="flex items-center">
+                    <div style={{ backgroundColor: '#6B7280', padding: '1px', borderRadius: '4px', marginRight: '3px', marginLeft: '8px' }}>
+                        <StatusIcon status="CLOSED" className="text-white h-5 w-5" />
+                    </div>
+                    <Text as="span" variant="mini">CLOSED</Text>
+                </div>
+                <div className="flex items-center">
+                    <div style={{ backgroundColor: '#6B7280', padding: '1px', borderRadius: '4px', marginRight: '3px', marginLeft: '8px' }}>
+                        <StatusIcon status="CANCELLED" className="text-white h-5 w-5" />
+                    </div>
+                    <Text as="span" variant="mini">CANCELLED</Text>
+                </div>
+            </div>
+            <div className="mt-2 text-center text-xs">
+                <div className="inline-flex items-center justify-center">
+                    <Text as="div" variant="mini">DATA UPDATED ON: 12:00 AM 02/01/2024</Text>
+                    <FaRedo className="text-gray-600 h-4 w-4 ml-2" />
+                </div>
+            </div>
+        </div>
+    </ExtensionRoot>
+);
 }