From fe2a7fea673e1d6ca91325f09bc218111169506c Mon Sep 17 00:00:00 2001
From: Hugo ChunHo Lin <hugo970217@gmail.com>
Date: Fri, 20 Dec 2024 15:54:38 +0800
Subject: [PATCH] style(info-content): update title styling for improved
 readability and consistency

---
 .../src/components/side-bar/info-content.tsx   |  2 +-
 apps/web/src/styles/side-bar/info-content.css  | 18 ------------------
 apps/web/tailwind.config.js                    |  4 ++++
 3 files changed, 5 insertions(+), 19 deletions(-)

diff --git a/apps/web/src/components/side-bar/info-content.tsx b/apps/web/src/components/side-bar/info-content.tsx
index 90a49f10..21cec08d 100644
--- a/apps/web/src/components/side-bar/info-content.tsx
+++ b/apps/web/src/components/side-bar/info-content.tsx
@@ -20,7 +20,7 @@ function InfoContent() {
         title={`${firstName} (${preferredName}) ${lastName}`}
       >{firstName} ({preferredName}) {lastName}
       </h1>
-      <p className="title">
+      <p className="text-white-1 bg-onyx text-xs font-light max-w-max rounded-[8px] custom-lg:m-auto px-[12px] py-[3px] md:px-[18px] md:py-[5px]">
         <strong>{status}</strong>
       </p>
     </div>
diff --git a/apps/web/src/styles/side-bar/info-content.css b/apps/web/src/styles/side-bar/info-content.css
index 2dea19cb..e3ad770b 100644
--- a/apps/web/src/styles/side-bar/info-content.css
+++ b/apps/web/src/styles/side-bar/info-content.css
@@ -16,16 +16,6 @@
     background: var(--orange-yellow-crayola);
 }
 
-.info-content .title {
-    color: var(--white-1);
-    background: var(--onyx);
-    font-size: var(--fs-8);
-    font-weight: var(--fw-300);
-    width: max-content;
-    padding: 3px 12px;
-    border-radius: 8px;
-}
-
 @media (min-width: 580px) {
     .info-content .name {
         margin-bottom: 15px;
@@ -34,10 +24,6 @@
     .info-content .pronoun {
         padding: 10px 18px;
     }
-
-    .info-content .title {
-        padding: 5px 18px;
-    }
 }
 
 @media (min-width: 1250px) {
@@ -49,8 +35,4 @@
     .info-content .pronoun {
         margin: auto;
     }
-
-    .info-content .title {
-        margin: auto;
-    }
 }
\ No newline at end of file
diff --git a/apps/web/tailwind.config.js b/apps/web/tailwind.config.js
index 9e187def..7d449cb9 100644
--- a/apps/web/tailwind.config.js
+++ b/apps/web/tailwind.config.js
@@ -5,6 +5,10 @@ module.exports = {
   ],
   theme: {
     extend: {
+      screens: {
+        'custom-md': '580px',
+        'custom-lg': '1250px',
+      },
       colors: {
         'jet': 'hsl(0, 0%, 22%)',
         'onyx': 'hsl(240, 1%, 17%)',