rayan/bruno
1
0
Fork 0
mirror of https://github.com/usebruno/bruno.git synced 2026-07-09 06:55:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: design system doc + cleanup codemirror info + collection overview icons (#6551)

Browse Source
This commit is contained in:
Anoop M D
2025-12-30 06:58:52 +05:30
committed by GitHub
parent c0ac24d090
commit 6afbaa0d91
31 changed files with 2367 additions and 718 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/bruno-app/src/components/CodeEditor/StyledWrapper.js
View File

@@ -128,6 +128,12 @@ const StyledWrapper = styled.div`
span.cm-operator {
color: ${(props) => props.theme.codemirror.tokens.operator} !important;
}
span.cm-tag {
color: ${(props) => props.theme.codemirror.tokens.tag} !important;
}
span.cm-tag.cm-bracket {
color: ${(props) => props.theme.codemirror.tokens.tagBracket} !important;
}
}
/* Variable validation colors */

44
packages/bruno-app/src/components/CollectionSettings/Overview/Info/StyledWrapper.js Normal file
View File

@@ -0,0 +1,44 @@
import styled from 'styled-components';
import { rgba } from 'polished';
const StyledWrapper = styled.div`
.icon-box {
&.location {
background-color: ${(props) => rgba(props.theme.textLink, 0.08)};
border: 1px solid ${(props) => rgba(props.theme.textLink, 0.09)};
svg {
color: ${(props) => props.theme.textLink};
}
}
&.environments {
background-color: ${(props) => rgba(props.theme.colors.text.green, 0.08)};
border: 1px solid ${(props) => rgba(props.theme.colors.text.green, 0.09)};
svg {
color: ${(props) => props.theme.colors.text.green};
}
}
&.requests {
background-color: ${(props) => rgba(props.theme.colors.text.purple, 0.08)};
border: 1px solid ${(props) => rgba(props.theme.colors.text.purple, 0.09)};
svg {
color: ${(props) => props.theme.colors.text.purple};
}
}
&.share {
background-color: ${(props) => rgba(props.theme.textLink, 0.08)};
border: 1px solid ${(props) => rgba(props.theme.textLink, 0.09)};
svg {
color: ${(props) => props.theme.textLink};
}
}
}
`;
export default StyledWrapper;

31
packages/bruno-app/src/components/CollectionSettings/Overview/Info/index.js
View File

@@ -6,6 +6,7 @@ import { useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import ShareCollection from 'components/ShareCollection/index';
import { addTab } from 'providers/ReduxStore/slices/tabs';
import StyledWrapper from './StyledWrapper';
const Info = ({ collection }) => {
const dispatch = useDispatch();
@@ -25,17 +26,17 @@ const Info = ({ collection }) => {
};
return (
<div className="w-full flex flex-col h-fit">
<StyledWrapper className="w-full flex flex-col h-fit">
<div className="rounded-lg py-6">
<div className="grid gap-5">
{/* Location Row */}
<div className="flex items-start">
<div className="flex-shrink-0 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
<IconFolder className="w-5 h-5 text-blue-500" stroke={1.5} />
<div className="icon-box location flex-shrink-0 p-3 rounded-lg">
<IconFolder className="w-5 h-5" stroke={1.5} />
</div>
<div className="ml-4">
<div className="font-medium">Location</div>
<div className="mt-1 text-muted break-all text-xs">
<div className="mt-1 text-muted break-all">
{collection.pathname}
</div>
</div>
@@ -43,15 +44,15 @@ const Info = ({ collection }) => {
{/* Environments Row */}
<div className="flex items-start">
<div className="flex-shrink-0 p-3 bg-green-50 dark:bg-green-900/20 rounded-lg">
<IconWorld className="w-5 h-5 text-green-500" stroke={1.5} />
<div className="icon-box environments flex-shrink-0 p-3 rounded-lg">
<IconWorld className="w-5 h-5" stroke={1.5} />
</div>
<div className="ml-4">
<div className="font-medium text-sm">Environments</div>
<div className="font-medium">Environments</div>
<div className="mt-1 flex flex-col gap-1">
<button
type="button"
className="text-sm text-link cursor-pointer hover:underline text-left bg-transparent"
className="text-link cursor-pointer hover:underline text-left bg-transparent"
onClick={() => {
dispatch(
addTab({
@@ -85,12 +86,12 @@ const Info = ({ collection }) => {
{/* Requests Row */}
<div className="flex items-start">
<div className="flex-shrink-0 p-3 bg-purple-50 dark:bg-purple-900/20 rounded-lg">
<IconApi className="w-5 h-5 text-purple-500" stroke={1.5} />
<div className="icon-box requests flex-shrink-0 p-3 rounded-lg">
<IconApi className="w-5 h-5" stroke={1.5} />
</div>
<div className="ml-4">
<div className="font-medium">Requests</div>
<div className="mt-1 text-muted text-xs">
<div className="mt-1 text-muted">
{
isCollectionLoading ? `${totalItems - itemsLoadingCount} out of ${totalItems} requests in the collection loaded` : `${totalRequestsInCollection} request${totalRequestsInCollection !== 1 ? 's' : ''} in collection`
}
@@ -99,12 +100,12 @@ const Info = ({ collection }) => {
</div>
<div className="flex items-start group cursor-pointer" onClick={handleToggleShowShareCollectionModal(true)}>
<div className="flex-shrink-0 p-3 bg-indigo-50 dark:bg-indigo-900/20 rounded-lg">
<IconShare className="w-5 h-5 text-indigo-500" stroke={1.5} />
<div className="icon-box share flex-shrink-0 p-3 rounded-lg">
<IconShare className="w-5 h-5" stroke={1.5} />
</div>
<div className="ml-4 h-full flex flex-col justify-start">
<div className="font-medium h-fit my-auto">Share</div>
<div className="group-hover:underline text-link text-xs">
<div className="group-hover:underline text-link">
Share Collection
</div>
</div>
@@ -112,7 +113,7 @@ const Info = ({ collection }) => {
{showShareCollectionModal && <ShareCollection collectionUid={collection.uid} onClose={handleToggleShowShareCollectionModal(false)} />}
</div>
</div>
</div>
</StyledWrapper>
);
};

6
packages/bruno-app/src/components/RequestTabs/StyledWrapper.js
View File

@@ -154,7 +154,7 @@ const Wrapper = styled.div`
display: inline-flex;
justify-content: center;
align-items: center;
color: ${(props) => props.theme.requestTabs.shortTab.color};
color: ${(props) => props.theme.text};
background-color: transparent;
border: 1px solid transparent;
border-radius: ${(props) => props.theme.border.radius.base};
@@ -186,8 +186,8 @@ const Wrapper = styled.div`
&:hover {
> div {
background-color: ${(props) => props.theme.requestTabs.shortTab.hoverBg};
color: ${(props) => props.theme.requestTabs.shortTab.hoverColor};
background-color: ${(props) => props.theme.background.surface0};
color: ${(props) => props.theme.text};
}
}
}

2
packages/bruno-app/src/components/ResponsePane/ResponseBookmark/StyledWrapper.js
View File

@@ -3,7 +3,7 @@ import styled from 'styled-components';
const StyledWrapper = styled.div`
display: flex;
align-items: center;
color: ${(props) => props.theme.codemirror.variable.info.iconColor};
color: ${(props) => props.theme.dropdown.iconColor};
border-radius: 4px;
&:hover {

2
packages/bruno-app/src/components/ResponsePane/ResponseClear/StyledWrapper.js
View File

@@ -2,7 +2,7 @@ import styled from 'styled-components';
const StyledWrapper = styled.div`
font-size: ${(props) => props.theme.font.size.base};
color: ${(props) => props.theme.codemirror.variable.info.iconColor};
color: ${(props) => props.theme.dropdown.iconColor};
border-radius: 4px;
&:hover {

2
packages/bruno-app/src/components/ResponsePane/ResponseCopy/StyledWrapper.js
View File

@@ -2,7 +2,7 @@ import styled from 'styled-components';
const StyledWrapper = styled.div`
font-size: 0.8125rem;
color: ${(props) => props.theme.codemirror.variable.info.iconColor};
color: ${(props) => props.theme.dropdown.iconColor};
border-radius: 4px;
&:hover {

2
packages/bruno-app/src/components/ResponsePane/ResponseDownload/StyledWrapper.js
View File

@@ -2,7 +2,7 @@ import styled from 'styled-components';
const StyledWrapper = styled.div`
font-size: ${(props) => props.theme.font.size.base};
color: ${(props) => props.theme.codemirror.variable.info.iconColor};
color: ${(props) => props.theme.dropdown.iconColor};
border-radius: 4px;
&:hover {

2
packages/bruno-app/src/components/ResponsePane/ResponseLayoutToggle/StyledWrapper.js
View File

@@ -8,7 +8,7 @@ const Wrapper = styled.div`
background: transparent;
border: none;
cursor: pointer;
color: ${(props) => props.theme.codemirror.variable.info.iconColor};
color: ${(props) => props.theme.dropdown.iconColor};
border-radius: 4px;
&:hover {

2
packages/bruno-app/src/components/ResponsePane/ResponsePaneActions/index.js
View File

@@ -16,7 +16,7 @@ const StyledMenuIcon = styled.button`
height: 1.25rem;
width: 1.5rem;
border: 1px solid ${(props) => props.theme.workspace.border};
color: ${(props) => props.theme.codemirror.variable.info.iconColor};
color: ${(props) => props.theme.dropdown.iconColor};
border-radius: 4px;
&:hover {

6
packages/bruno-app/src/components/WorkspaceTabs/StyledWrapper.js
View File

@@ -159,7 +159,7 @@ const Wrapper = styled.div`
display: inline-flex;
justify-content: center;
align-items: center;
color: ${(props) => props.theme.requestTabs.shortTab.color};
color: ${(props) => props.theme.text};
background-color: transparent;
border: 1px solid transparent;
border-radius: ${(props) => props.theme.border.radius.base};
@@ -181,8 +181,8 @@ const Wrapper = styled.div`
&:hover {
> div {
background-color: ${(props) => props.theme.requestTabs.shortTab.hoverBg};
color: ${(props) => props.theme.requestTabs.shortTab.hoverColor};
background-color: ${(props) => props.theme.background.surface0};
color: ${(props) => props.theme.text};
}
}
}