feat: use React-icons

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",

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",

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==}
 

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: {
+        
+    },
+};

src/views/components/PopupMain.tsx

@@ -1,24 +1,136 @@
-import { background } from '@shared/messages';
 import React from 'react';
-import useSchedules from '../hooks/useSchedules';
+import { FaCalendarAlt, FaCog, FaRedo } from 'react-icons/fa'; // Added FaRedo for the refresh icon
-import { Button } from './common/Button/Button';
+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();
+   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]}
+    />
+));
 
-    // TODO: Add a button to to switch the active schedule
 
 return (
     <ExtensionRoot>
-            <Button
+        <div className="p-4 bg-white max-w-sm mx-auto rounded-lg shadow-md">
-                onClick={() => {
+            <div className="mb-2 flex items-center justify-between bg-white">
-                    if (!activeSchedule) return;
+                <div className="flex items-center">
-                    background.clearCourses({ scheduleName: activeSchedule?.name });
+                    <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>
-                Clear Courses
+                        <Text as="div" variant="h1-course" style={{ color: '#f8971f', fontSize: '1.3rem' }}>Plus</Text>
-            </Button>
+                    </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>
 );
 }