feat(#2030): ux touches for collection settings descriptions

This commit is contained in:
Anoop M D 2024-04-09 15:47:12 +05:30
parent 84128052c0
commit aa5fee01c3
10 changed files with 16 additions and 11 deletions

View File

@ -38,9 +38,9 @@ const Auth = ({ collection }) => {
return ( return (
<StyledWrapper className="w-full h-full"> <StyledWrapper className="w-full h-full">
<div className="text-sm mb-6"> <div className="text-xs mb-4 text-muted">
Configures authentication for the entire collection. This applies to all requests using the 'Inherit' option in Configures authentication for the entire collection. This applies to all requests using the{' '}
the 'Auth' tab, as well as any new requests added to this collection. <span className="font-medium">Inherit</span> option in the <span className="font-medium">Auth</span> tab.
</div> </div>
<div className="flex flex-grow justify-start items-center"> <div className="flex flex-grow justify-start items-center">
<AuthMode collection={collection} /> <AuthMode collection={collection} />

View File

@ -31,7 +31,7 @@ const ClientCertSettings = ({ clientCertConfig, onUpdate, onRemove }) => {
return ( return (
<StyledWrapper className="w-full h-full"> <StyledWrapper className="w-full h-full">
<div className="text-sm mb-6">Add client certificates to be used for specific domains.</div> <div className="text-xs mb-4 text-muted">Add client certificates to be used for specific domains.</div>
<h1 className="font-semibold">Client Certificates</h1> <h1 className="font-semibold">Client Certificates</h1>
<ul className="mt-4"> <ul className="mt-4">

View File

@ -64,7 +64,9 @@ const Headers = ({ collection }) => {
return ( return (
<StyledWrapper className="h-full w-full"> <StyledWrapper className="h-full w-full">
<div className="text-sm mb-6">Add request headers that will be sent with every request in this collection.</div> <div className="text-xs mb-4 text-muted">
Add request headers that will be sent with every request in this collection.
</div>
<table> <table>
<thead> <thead>
<tr> <tr>

View File

@ -23,7 +23,7 @@ function countRequests(items) {
const Info = ({ collection }) => { const Info = ({ collection }) => {
return ( return (
<StyledWrapper className="w-full flex flex-col h-full"> <StyledWrapper className="w-full flex flex-col h-full">
<div className="text-sm mb-6">General information about the collection.</div> <div className="text-xs mb-4 text-muted">General information about the collection.</div>
<table className="w-full border-collapse"> <table className="w-full border-collapse">
<tbody> <tbody>
<tr className=""> <tr className="">

View File

@ -28,7 +28,7 @@ const PresetsSettings = ({ collection }) => {
return ( return (
<StyledWrapper className="h-full w-full"> <StyledWrapper className="h-full w-full">
<div className="text-sm mb-6"> <div className="text-xs mb-4 text-muted">
These presets will be used as the default values for new requests in this collection. These presets will be used as the default values for new requests in this collection.
</div> </div>
<form className="bruno-form" onSubmit={formik.handleSubmit}> <form className="bruno-form" onSubmit={formik.handleSubmit}>

View File

@ -96,7 +96,7 @@ const ProxySettings = ({ proxyConfig, onUpdate }) => {
return ( return (
<StyledWrapper className="h-full w-full"> <StyledWrapper className="h-full w-full">
<div className="text-sm mb-6">Configure proxy settings for this collection.</div> <div className="text-xs mb-4 text-muted">Configure proxy settings for this collection.</div>
<form className="bruno-form" onSubmit={formik.handleSubmit}> <form className="bruno-form" onSubmit={formik.handleSubmit}>
<div className="mb-3 flex items-center"> <div className="mb-3 flex items-center">
<label className="settings-label flex items-center" htmlFor="enabled"> <label className="settings-label flex items-center" htmlFor="enabled">

View File

@ -39,7 +39,7 @@ const Script = ({ collection }) => {
return ( return (
<StyledWrapper className="w-full flex flex-col h-full"> <StyledWrapper className="w-full flex flex-col h-full">
<div className="text-sm mb-6"> <div className="text-xs mb-4 text-muted">
Write pre and post-request scripts that will run before and after any request in this collection is sent. Write pre and post-request scripts that will run before and after any request in this collection is sent.
</div> </div>
<div className="flex-1 mt-2"> <div className="flex-1 mt-2">

View File

@ -27,7 +27,7 @@ const Tests = ({ collection }) => {
return ( return (
<StyledWrapper className="w-full flex flex-col h-full"> <StyledWrapper className="w-full flex flex-col h-full">
<div className="text-sm mb-6">These tests will run any time a request in this collection is sent.</div> <div className="text-xs mb-4 text-muted">These tests will run any time a request in this collection is sent.</div>
<CodeEditor <CodeEditor
collection={collection} collection={collection}
value={tests || ''} value={tests || ''}

View File

@ -9,6 +9,9 @@ const GlobalStyle = createGlobalStyle`
.text-link { .text-link {
color: ${(props) => props.theme.textLink}; color: ${(props) => props.theme.textLink};
} }
.text-muted {
color: ${(props) => props.theme.colors.text.muted};
}
.btn { .btn {
text-align: center; text-align: center;

View File

@ -8,7 +8,7 @@ const lightTheme = {
text: { text: {
green: '#047857', green: '#047857',
danger: 'rgb(185, 28, 28)', danger: 'rgb(185, 28, 28)',
muted: '#4b5563', muted: '#838383',
purple: '#8e44ad', purple: '#8e44ad',
yellow: '#d97706' yellow: '#d97706'
}, },