feat: add Tailwind CSS support and create ConsolidatedCirculationCard styles

- Added Tailwind CSS and its Vite plugin to the project dependencies.
- Updated Vite configuration to include Tailwind CSS plugin.
- Created a new CSS file for the Consolidated Circulation Card component with styles for various states and responsive design.

1 files changed, 10 insertions, 6 deletions

diff --git a/src/frontend/app/components/LineIcon.tsx b/src/frontend/app/components/LineIcon.tsx
index 8c3dbeb..5ccf80a 100644
--- a/src/frontend/app/components/LineIcon.tsx
+++ b/src/frontend/app/components/LineIcon.tsx
@@ -4,24 +4,28 @@ import "./LineIcon.css";
 
 interface LineIconProps {
   line: string;
+
+  /**
+   * @deprecated Unused since region is only Vigo
+   */
   region?: RegionId;
-  rounded?: boolean;
+
+  mode?: "rounded"|"pill"|"default";
 }
 
 const LineIcon: React.FC<LineIconProps> = ({
   line,
-  region = "vigo",
-  rounded = false,
+  mode = "default",
 }) => {
   const formattedLine = useMemo(() => {
     return /^[a-zA-Z]/.test(line) ? line : `L${line}`;
   }, [line]);
-  const cssVarName = `--line-${region}-${formattedLine.toLowerCase()}`;
-  const cssTextVarName = `--line-${region}-${formattedLine.toLowerCase()}-text`;
+  const cssVarName = `--line-${formattedLine.toLowerCase()}`;
+  const cssTextVarName = `--line-${formattedLine.toLowerCase()}-text`;
 
   return (
     <span
-      className={rounded ? "line-icon-rounded" : "line-icon"}
+      className={`line-icon-${mode}`}
       style={
         {
           "--line-colour": `var(${cssVarName})`,