-
Notifications
You must be signed in to change notification settings - Fork 975
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
add lifecycle badge component #4528
Changes from 8 commits
c15b27e
b5153af
e5bff71
e9b6d95
523dede
4217431
10bbcbb
5106f4e
dd956f9
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
import React from 'react' | ||
import styles from './styles.module.css'; | ||
|
||
// function Item ({ status }) { | ||
// if (status) { | ||
// return null; | ||
// } | ||
|
||
// return <span className={styles.lifecycle}>{status}</span>; | ||
// } | ||
|
||
export default function Lifecycle(props) { | ||
if (!props.status) { | ||
return null; | ||
} | ||
return ( | ||
<span className={styles.lifecycle}>{props.status}</span> | ||
); | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
.lifecycle { | ||
background-color: #047377; /* Teal background to align with dbt Labs' color */ | ||
color: #fff; /* Light text color for contrast */ | ||
font-size: 0.4em; /* Slightly smaller text */ | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Regarding the In this case, One adjustment you can make here is switch from Using As long as the component is always used with headers, this won't be an issue. But if this is ever used outside of the headers, the font size will likely need to be adjusted. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. thank you @JKarlavige ! ok i've changed it to |
||
padding: 1px 8px; /* Adjust padding for a more pill-like shape */ | ||
border-radius: 16px; /* Larger border-radius for rounded edges */ | ||
margin-left: 8px; /* Margin to separate from the header text */ | ||
vertical-align: middle; /* Align with the title */ | ||
display: inline-block; /* Use inline-block for better control */ | ||
font-weight: bold; /* Bold text */ | ||
text-transform: capitalize; /* Uppercase text */ | ||
line-height: 1.6; /* Adjust line height for vertical alignment */ | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just a note to remove this unused code!