feat: theme + ux overhaul (#6520)

* feat: theme + ux overhaul

* chore: moved @opencollection/types at root of monorepo

* chore: fixed review comments

* chore: addressed review comments

* chore: fix playwright tests

---------

Co-authored-by: Bijin A B <bijin@usebruno.com>
This commit is contained in:
Anoop M D
2025-12-27 13:52:20 +05:30
committed by GitHub
parent 84f572fa88
commit f40e4d2d79
127 changed files with 10380 additions and 1437 deletions

View File

@@ -65,35 +65,6 @@ const Wrapper = styled.div`
overflow: hidden;
}
.tippy-box .tippy-content {
padding: 0;
display: flex;
flex-direction: column;
height: 100%;
.dropdown-item {
display: flex;
align-items: center;
padding: 0.35rem 0.6rem;
cursor: pointer;
font-size: ${(props) => props.theme.font.size.base};
color: ${(props) => props.theme.dropdown.primaryText};
&:hover:not(:disabled) {
background-color: ${(props) => props.theme.dropdown.hoverBg};
}
&.active {
background-color: ${(props) => props.theme.dropdown.selectedBg};
color: ${(props) => props.theme.dropdown.selectedColor};
}
&.no-environment {
color: ${(props) => props.theme.dropdown.mutedText};
}
}
}
.configure-button {
position: absolute;
bottom: 0;
@@ -109,7 +80,7 @@ const Wrapper = styled.div`
}
button {
color: ${(props) => props.theme.dropdown.primaryText};
color: ${(props) => props.theme.text};
display: flex;
align-items: center;
justify-content: center;
@@ -119,7 +90,7 @@ const Wrapper = styled.div`
}
.tab-button {
color: var(--color-tab-inactive);
color: ${(props) => props.theme.colors.text.subtext0};
font-size: ${(props) => props.theme.font.size.base};
.tab-content-wrapper {
@@ -170,7 +141,7 @@ const Wrapper = styled.div`
min-height: 12.5rem;
h3 {
color: ${(props) => props.theme.dropdown.primaryText};
color: ${(props) => props.theme.text};
font-size: 1rem;
font-weight: 500;
margin-bottom: 0.5rem;
@@ -178,7 +149,7 @@ const Wrapper = styled.div`
}
p {
color: ${(props) => props.theme.dropdown.primaryText};
color: ${(props) => props.theme.text};
opacity: 0.75;
font-size: ${(props) => props.theme.font.size.xs};
line-height: 1.5;
@@ -194,9 +165,9 @@ const Wrapper = styled.div`
}
.space-y-2 > button {
border: 0.0625rem solid ${(props) => props.theme.dropdown.primaryText};
border: 0.0625rem solid ${(props) => props.theme.text};
background: transparent;
color: ${(props) => props.theme.dropdown.primaryText};
color: ${(props) => props.theme.text};
padding: 0.5rem 1rem;
border-radius: 0.375rem;
width: 100%;
@@ -224,7 +195,7 @@ const Wrapper = styled.div`
align-items: center;
justify-content: center;
padding: 2rem 1rem;
color: ${(props) => props.theme.dropdown.primaryText};
color: ${(props) => props.theme.text};
font-size: ${(props) => props.theme.font.size.base};
line-height: 1.5;
text-align: center;
@@ -232,7 +203,7 @@ const Wrapper = styled.div`
svg {
margin: 0 auto 1rem auto;
color: ${(props) => props.theme.dropdown.primaryText};
color: ${(props) => props.theme.text};
opacity: 0.5;
}
}