style(info-content): update title styling for improved readability an…

…d consistency
1chooo · Dec 20, 2024 · fe2a7fe · fe2a7fe
1 parent 2974acd
commit fe2a7fe
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 19 deletions.
diff --git 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
@@ -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;
-    }
 }
diff --git 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%)',