[chore] styling

calblueprint · Dec 31, 2024 · 14a637c · 14a637c
1 parent a692492
commit 14a637c
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 11 deletions.
diff --git a/components/KeyDevelopmentMilestone/index.tsx b/components/KeyDevelopmentMilestone/index.tsx
@@ -68,13 +68,15 @@ export default function KeyDevelopmentMilestone({
       const fullText = abbreviationMap[abbreviation];
 
       return (
-        <KDMInfoHoverContainer>
-          <React.Fragment>
-            {abbreviation}
-            <KDMInfoText>{fullText}</KDMInfoText>
-          </React.Fragment>
+        <span>
+          <KDMInfoHoverContainer>
+            <React.Fragment>
+              {abbreviation}
+              <KDMInfoText>{fullText}</KDMInfoText>
+            </React.Fragment>
+          </KDMInfoHoverContainer>
           {parts[1]} {/* Text after the abbreviation */}
-        </KDMInfoHoverContainer>
+        </span>
       );
     }
 

diff --git a/components/KeyDevelopmentMilestone/styles.ts b/components/KeyDevelopmentMilestone/styles.ts
@@ -55,7 +55,7 @@ export const MilestoneTitle = styled.div`
 
 export const KDMInfoHoverContainer = styled.div`
   position: relative;
-  display: flex;
+  display: inline-flex;
   cursor: pointer;
   align-items: center;
   gap: 0.25rem;
@@ -67,8 +67,9 @@ export const KDMInfoHoverContainer = styled.div`
 `;
 
 export const KDMInfoText = styled.div`
+  color: ${COLORS.navy};
   visibility: hidden;
-  width: auto;
+  width: 8rem;
   background-color: white;
   text-align: center;
   border-radius: 0.25rem;
@@ -79,8 +80,7 @@ export const KDMInfoText = styled.div`
   box-shadow:
     0rem 1rem 1.25rem 0rem rgba(46, 58, 89, 0.1),
     0rem 0.0625rem 0.0625rem 0rem rgba(46, 58, 89, 0.15);
-  left: 50%;
-  transform: translateX(-70%);
+  transform: translateX(-5%);
 
   /* Tooltip arrow */
   &::after {

diff --git a/components/StatusTag/index.tsx b/components/StatusTag/index.tsx
@@ -52,7 +52,7 @@ export default function StatusTag({
           <CODTagStyles>
             <CODInfoHoverContainer>
               <CODInfoText>
-                <TagText1>
+                <TagText1 $color={COLORS.navy}>
                   <span style={{ color: COLORS.electricBlue }}>COD</span> stands
                   for{' '}
                   <span style={{ color: COLORS.electricBlue }}>