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

@@ -1,4 +1,5 @@
import styled from 'styled-components';
import { rgba } from 'polished';
const StyledWrapper = styled.div`
.tabs {
@@ -7,7 +8,7 @@ const StyledWrapper = styled.div`
border: none;
border-bottom: solid 2px transparent;
margin-right: ${(props) => props.theme.tabs.marginRight};
color: var(--color-tab-inactive);
color: ${(props) => props.theme.colors.text.subtext0};
cursor: pointer;
&:focus,
@@ -31,14 +32,24 @@ const StyledWrapper = styled.div`
display: flex;
border-radius: ${(props) => props.theme.border.radius.base};
padding: 10px;
border: 1px solid ${(props) => props.theme.sidebar.collection.item.indentBorder};
background-color: ${(props) => props.theme.sidebar.bg};
border: 1px solid ${(props) => props.theme.border.border0};
background-color: ${(props) => props.theme.background.base};
color: ${(props) => props.theme.text};
cursor: pointer;
transition: all 0.1s ease;
&.no-padding {
padding: 0px;
}
.note-warning {
color: ${(props) => props.theme.colors.text.warning};
background-color: ${(props) => rgba(props.theme.colors.text.warning, 0.06)};
}
&:hover {
background-color: ${(props) => props.theme.listItem.hoverBg};
background-color: ${(props) => props.theme.background.mantle};
border-color: ${(props) => props.theme.border.border2};
}
}
`;

View File

@@ -105,7 +105,7 @@ const ShareCollection = ({ onClose, collectionUid }) => {
</div>
<div
className={`flex !flex-col share-button ${
className={`flex !flex-col share-button no-padding ${
isCollectionLoading
? 'opacity-50 cursor-not-allowed'
: 'cursor-pointer'
@@ -113,7 +113,7 @@ const ShareCollection = ({ onClose, collectionUid }) => {
onClick={isCollectionLoading ? undefined : handleExportPostmanCollection}
>
{hasNonExportableRequestTypes.has && (
<div className="px-3 py-2 bg-yellow-50 w-full dark:bg-yellow-900/20 text-yellow-700 dark:text-yellow-400 text-xs border-b border-yellow-100 dark:border-yellow-800/20 flex items-center">
<div className="px-3 py-2 w-full flex items-center note-warning">
<IconAlertTriangle size={16} className="mr-2 flex-shrink-0" />
<span>
Note: