From 7856ab5deafb76b66d1e6b14eb666f40bdff1dd2 Mon Sep 17 00:00:00 2001
From: Portia Li <portialii89@gmail.com>
Date: Sat, 24 May 2025 15:22:53 -0500
Subject: [PATCH 1/2] fixed button for varying course card sizes

---
 src/pages/courses/CourseCard.jsx |   2 +
 src/pages/courses/CourseTest.jsx | 190 +++++++++++++++++++++++++++++++
 2 files changed, 192 insertions(+)
 create mode 100644 src/pages/courses/CourseTest.jsx

diff --git a/src/pages/courses/CourseCard.jsx b/src/pages/courses/CourseCard.jsx
index 6f2d1831..4b5fd82b 100644
--- a/src/pages/courses/CourseCard.jsx
+++ b/src/pages/courses/CourseCard.jsx
@@ -37,6 +37,8 @@ const StyledComponent = styled.div`
     padding: 24px; /* Increased from 20px */
     display: flex;
     flex-direction: column;
+    flex: 1;
+    height: 100%;
   }
 
   .card-title {
diff --git a/src/pages/courses/CourseTest.jsx b/src/pages/courses/CourseTest.jsx
new file mode 100644
index 00000000..4eae17a8
--- /dev/null
+++ b/src/pages/courses/CourseTest.jsx
@@ -0,0 +1,190 @@
+import React, { useEffect, useState } from 'react';
+
+import styled from 'styled-components';
+
+import Footer from 'common/components/footer/Footer';
+
+import CourseCard from './CourseCard';
+
+const CoursesStyling = styled.div`
+  /* (same styling from CoursesStyling) */
+  html,
+  body {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    background-color: #fbe9fd;
+  }
+
+  h1 {
+    text-align: center;
+    color: #007575;
+    margin-bottom: 20px;
+  }
+
+  h3 {
+    font-size: 20px;
+    margin: 0;
+  }
+
+  .header-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 40px;
+  }
+
+  .courses-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 30px;
+    justify-content: center;
+  }
+
+  .language-button-green {
+    padding: 12px 40px;
+    border: 2px solid #007f80;
+    background: #007f80;
+    color: #ffffff;
+    font-size: 16px;
+  }
+
+  .language-button-white {
+    padding: 12px 40px;
+    border: 2px solid #007f80;
+    background: #ffffff;
+    color: #007f80;
+    font-size: 16px;
+  }
+
+  .language-button-container {
+    display: flex;
+    gap: 8px;
+  }
+
+  .filters-row {
+    display: flex;
+    justify-content: space-between;
+    padding: 48px 120px;
+    align-items: flex-start;
+  }
+
+  .filter-container {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  padding: 50px 100px 256px 100px;
+  min-height: 100vh;
+  background-color: #fbe9fd;
+
+  @media (max-width: 768px) {
+    padding: 30px 20px;
+    .filters-row {
+      flex-direction: column;
+      gap: 24px;
+    }
+  }
+`;
+
+const CoursesDevPreview = () => {
+  const [language, setLanguage] = useState('English');
+  const [courseType, setCourseType] = useState('All');
+
+  const mockCourses = [
+    {
+      id: '1',
+      title: 'Intro to React',
+      language: 'English',
+      course_type: 'Online',
+      price: 49,
+      description:
+        'Learn the basics of React.Learn the basics of React.Learn the basics of React.Learn the basics of React.Learn the basics of React.Learn the basics of React.Learn the basics of React.Learn the basics of React.Learn the basics of React.Learn the basics of React.Learn the basics of React.Learn the basics of React.Learn the basics of React.Learn the basics of React.Learn the basics of React.Learn the basics of React.Learn the basics of React.Learn the basics of React.Learn the basics of React.Learn the basics of React.Learn the basics of React.Learn the basics of React.Learn the basics of React.Learn the basics of React.Learn the basics of React.Learn the basics of React.Learn the basics of React.Learn the basics of React.Learn the basics of React.Learn the basics of React.Learn the basics of React.Learn the basics of React.',
+      cover_image_link: 'https://via.placeholder.com/150',
+    },
+    {
+      id: '2',
+      title: 'Advanced Spanish Conversation',
+      language: 'English',
+      course_type: 'In-Person',
+      price: 99,
+      description: 'Practice your Spanish in real-time settings.',
+      cover_image_link: 'https://via.placeholder.com/150',
+    },
+  ];
+
+  const filteredCourses = mockCourses.filter(
+    (course) =>
+      course.language === language &&
+      (courseType === 'All' || course.course_type === courseType)
+  );
+
+  return (
+    <div>
+      <CoursesStyling>
+        <div className='header-container'>
+          <h1>Courses (Dev Preview)</h1>
+        </div>
+
+        <div className='filters-row'>
+          <div className='filter-container'>
+            <h3>SELECT COURSE TYPE</h3>
+            <div className='language-button-container'>
+              {['All', 'Online', 'In-Person', 'Virtual'].map((type) => (
+                <button
+                  key={type}
+                  className={
+                    courseType === type
+                      ? 'language-button-green'
+                      : 'language-button-white'
+                  }
+                  onClick={() => setCourseType(type)}
+                >
+                  {type}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          <div className='filter-container'>
+            <h3>SELECT LANGUAGE</h3>
+            <div className='language-button-container'>
+              {['English', 'Spanish'].map((lang) => (
+                <button
+                  key={lang}
+                  className={
+                    language === lang
+                      ? 'language-button-green'
+                      : 'language-button-white'
+                  }
+                  onClick={() => setLanguage(lang)}
+                >
+                  {lang}
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        <div className='courses-container'>
+          {filteredCourses.map((course) => (
+            <CourseCard
+              key={course.id}
+              course_id={course.id}
+              course_title={course.title}
+              course_type={course.course_type}
+              course_price={course.price}
+              course_description={course.description}
+              course_image={course.cover_image_link}
+              courseOwner={false}
+            />
+          ))}
+        </div>
+      </CoursesStyling>
+      <Footer />
+    </div>
+  );
+};
+
+export default CoursesDevPreview;

From a30afa14aa63abb81b199ad46342bfbb294d7a25 Mon Sep 17 00:00:00 2001
From: Portia Li <portialii89@gmail.com>
Date: Sat, 24 May 2025 15:29:16 -0500
Subject: [PATCH 2/2] remove coursetest from repo lol

---
 src/pages/courses/CourseTest.jsx | 190 -------------------------------
 1 file changed, 190 deletions(-)
 delete mode 100644 src/pages/courses/CourseTest.jsx

diff --git a/src/pages/courses/CourseTest.jsx b/src/pages/courses/CourseTest.jsx
deleted file mode 100644
index 4eae17a8..00000000
--- a/src/pages/courses/CourseTest.jsx
+++ /dev/null
@@ -1,190 +0,0 @@
-import React, { useEffect, useState } from 'react';
-
-import styled from 'styled-components';
-
-import Footer from 'common/components/footer/Footer';
-
-import CourseCard from './CourseCard';
-
-const CoursesStyling = styled.div`
-  /* (same styling from CoursesStyling) */
-  html,
-  body {
-    height: 100%;
-    margin: 0;
-    padding: 0;
-    background-color: #fbe9fd;
-  }
-
-  h1 {
-    text-align: center;
-    color: #007575;
-    margin-bottom: 20px;
-  }
-
-  h3 {
-    font-size: 20px;
-    margin: 0;
-  }
-
-  .header-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    margin-bottom: 40px;
-  }
-
-  .courses-container {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 30px;
-    justify-content: center;
-  }
-
-  .language-button-green {
-    padding: 12px 40px;
-    border: 2px solid #007f80;
-    background: #007f80;
-    color: #ffffff;
-    font-size: 16px;
-  }
-
-  .language-button-white {
-    padding: 12px 40px;
-    border: 2px solid #007f80;
-    background: #ffffff;
-    color: #007f80;
-    font-size: 16px;
-  }
-
-  .language-button-container {
-    display: flex;
-    gap: 8px;
-  }
-
-  .filters-row {
-    display: flex;
-    justify-content: space-between;
-    padding: 48px 120px;
-    align-items: flex-start;
-  }
-
-  .filter-container {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-  }
-
-  padding: 50px 100px 256px 100px;
-  min-height: 100vh;
-  background-color: #fbe9fd;
-
-  @media (max-width: 768px) {
-    padding: 30px 20px;
-    .filters-row {
-      flex-direction: column;
-      gap: 24px;
-    }
-  }
-`;
-
-const CoursesDevPreview = () => {
-  const [language, setLanguage] = useState('English');
-  const [courseType, setCourseType] = useState('All');
-
-  const mockCourses = [
-    {
-      id: '1',
-      title: 'Intro to React',
-      language: 'English',
-      course_type: 'Online',
-      price: 49,
-      description:
-        'Learn the basics of React.Learn the basics of React.Learn the basics of React.Learn the basics of React.Learn the basics of React.Learn the basics of React.Learn the basics of React.Learn the basics of React.Learn the basics of React.Learn the basics of React.Learn the basics of React.Learn the basics of React.Learn the basics of React.Learn the basics of React.Learn the basics of React.Learn the basics of React.Learn the basics of React.Learn the basics of React.Learn the basics of React.Learn the basics of React.Learn the basics of React.Learn the basics of React.Learn the basics of React.Learn the basics of React.Learn the basics of React.Learn the basics of React.Learn the basics of React.Learn the basics of React.Learn the basics of React.Learn the basics of React.Learn the basics of React.Learn the basics of React.',
-      cover_image_link: 'https://via.placeholder.com/150',
-    },
-    {
-      id: '2',
-      title: 'Advanced Spanish Conversation',
-      language: 'English',
-      course_type: 'In-Person',
-      price: 99,
-      description: 'Practice your Spanish in real-time settings.',
-      cover_image_link: 'https://via.placeholder.com/150',
-    },
-  ];
-
-  const filteredCourses = mockCourses.filter(
-    (course) =>
-      course.language === language &&
-      (courseType === 'All' || course.course_type === courseType)
-  );
-
-  return (
-    <div>
-      <CoursesStyling>
-        <div className='header-container'>
-          <h1>Courses (Dev Preview)</h1>
-        </div>
-
-        <div className='filters-row'>
-          <div className='filter-container'>
-            <h3>SELECT COURSE TYPE</h3>
-            <div className='language-button-container'>
-              {['All', 'Online', 'In-Person', 'Virtual'].map((type) => (
-                <button
-                  key={type}
-                  className={
-                    courseType === type
-                      ? 'language-button-green'
-                      : 'language-button-white'
-                  }
-                  onClick={() => setCourseType(type)}
-                >
-                  {type}
-                </button>
-              ))}
-            </div>
-          </div>
-
-          <div className='filter-container'>
-            <h3>SELECT LANGUAGE</h3>
-            <div className='language-button-container'>
-              {['English', 'Spanish'].map((lang) => (
-                <button
-                  key={lang}
-                  className={
-                    language === lang
-                      ? 'language-button-green'
-                      : 'language-button-white'
-                  }
-                  onClick={() => setLanguage(lang)}
-                >
-                  {lang}
-                </button>
-              ))}
-            </div>
-          </div>
-        </div>
-
-        <div className='courses-container'>
-          {filteredCourses.map((course) => (
-            <CourseCard
-              key={course.id}
-              course_id={course.id}
-              course_title={course.title}
-              course_type={course.course_type}
-              course_price={course.price}
-              course_description={course.description}
-              course_image={course.cover_image_link}
-              courseOwner={false}
-            />
-          ))}
-        </div>
-      </CoursesStyling>
-      <Footer />
-    </div>
-  );
-};
-
-export default CoursesDevPreview;