added responsive design to pills

fix: catalogCourseCard
UnlockedLabs · Sep 3, 2024 · 0ba8dac · 0ba8dac
1 parent 3f00585
commit 0ba8dac
Show file tree

Hide file tree

Showing 8 changed files with 11 additions and 8 deletions.
diff --git a/frontend/src/Components/CatalogCourseCard.tsx b/frontend/src/Components/CatalogCourseCard.tsx
@@ -148,7 +148,10 @@ export default function CatalogCourseCard({
                         <p className="body-small line-clamp-2">
                             {course.description}
                         </p>
-                        <div className="flex flex-wrap py-1 mt-2 space-y-2">
+                        {/*<div className="flex flex-col sm:flex-row flex-wrap py-1 mt-2 gap-2">*/}
+                        {/*    {programPill}  {outcomePills}*/}
+                        {/*</div>*/}
+                        <div className="flex flex-col sm:flex-row flex-wrap py-1 mt-2 space-y-2 sm:space-y-0 sm:gap-2">
                             {programPill} {outcomePills}
                         </div>
                     </div>

diff --git a/frontend/src/Components/pill-labels/DarkGreenPill.tsx b/frontend/src/Components/pill-labels/DarkGreenPill.tsx
@@ -1,5 +1,5 @@
 export default function DarkGreenPill(props) {
     return (
-        <p className="catalog-pill bg-[#006059] text-white">{props.children}</p>
+        <p className="catalog-pill bg-[#006059] text-white inline-flex items-center">{props.children}</p>
     );
 }
diff --git a/frontend/src/Components/pill-labels/GreyPill.tsx b/frontend/src/Components/pill-labels/GreyPill.tsx
@@ -1,6 +1,6 @@
 export default function GreyPill(props) {
     return (
-        <p className="catalog-pill bg-grey-1 text-body-text">
+        <p className="catalog-pill bg-grey-1 text-body-text inline-flex items-center">
             {props.children}
         </p>
     );

diff --git a/frontend/src/Components/pill-labels/LightGreenPill.tsx b/frontend/src/Components/pill-labels/LightGreenPill.tsx
@@ -1,6 +1,6 @@
 export default function LightGreenPill(props) {
     return (
-        <p className="catalog-pill bg-[#DDFFCD] text-[#408D1C]">
+        <p className="catalog-pill bg-[#DDFFCD] text-[#408D1C] inline-flex items-center">
             {props.children}
         </p>
     );

diff --git a/frontend/src/Components/pill-labels/RedPill.tsx b/frontend/src/Components/pill-labels/RedPill.tsx
@@ -1,6 +1,6 @@
 export default function RedPill(props) {
     return (
-        <p className="catalog-pill bg-[#FFDFDF] text-[#CA0000]">
+        <p className="catalog-pill bg-[#FFDFDF] text-[#CA0000] inline-flex items-center">
             {props.children}
         </p>
     );

diff --git a/frontend/src/Components/pill-labels/TealPill.tsx b/frontend/src/Components/pill-labels/TealPill.tsx
@@ -1,6 +1,6 @@
 export default function TealPill(props) {
     return (
-        <p className="catalog-pill bg-[#B0DFDA] text-[#006059]">
+        <p className="catalog-pill bg-[#B0DFDA] text-[#006059] inline-flex items-center">
             {props.children}
         </p>
     );

diff --git a/frontend/src/Components/pill-labels/YellowPill.tsx b/frontend/src/Components/pill-labels/YellowPill.tsx
@@ -1,6 +1,6 @@
 export default function YellowPill(props) {
     return (
-        <p className="catalog-pill bg-[#FFF3D4] text-[#ECAA00]">
+        <p className="catalog-pill bg-[#FFF3D4] text-[#ECAA00] inline-flex items-center">
             {props.children}
         </p>
     );

diff --git a/frontend/src/css/app.css b/frontend/src/css/app.css
@@ -34,7 +34,7 @@
         @apply mt-4 ml-4;
     }
     .catalog-pill {
-        @apply text-xs px-3 py-1 rounded-2xl flex-grow-0 mx-2;
+        @apply text-xs px-3 py-1 rounded-2xl inline-flex items-center justify-center min-w-[100px] h-[28px];
     }
     .table-2 {
         @apply w-full;