mirror of
https://github.com/usebruno/bruno.git
synced 2026-06-25 13:45:52 +00:00
fix oauth checkbox, button styles (#6572)
* fix: checkboxes * use secondary button
This commit is contained in:
@@ -10,12 +10,14 @@ const StyledWrapper = styled.div`
|
||||
color: ${(props) => props.theme.primary.solid};
|
||||
}
|
||||
|
||||
.tabs {
|
||||
.tab {
|
||||
div.tabs {
|
||||
div.tab {
|
||||
cursor: pointer;
|
||||
padding: 4px 8px !important;
|
||||
font-size: ${(props) => props.theme.font.size.sm};
|
||||
border-radius: 4px;
|
||||
border: none !important;
|
||||
border-bottom: none !important;
|
||||
|
||||
&:hover {
|
||||
background-color: ${(props) => rgba(props.theme.primary.solid, 0.1)};
|
||||
@@ -27,7 +29,9 @@ const StyledWrapper = styled.div`
|
||||
? rgba(props.theme.primary.solid, 0.2)
|
||||
: rgba(props.theme.primary.solid, 0.1);
|
||||
}};
|
||||
color: ${(props) => props.theme.primary.solid};
|
||||
color: ${(props) => props.theme.primary.solid} !important;
|
||||
border-bottom: none !important;
|
||||
font-weight: normal !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -73,6 +77,11 @@ const StyledWrapper = styled.div`
|
||||
color: ${(props) => props.theme.primary.solid};
|
||||
}
|
||||
}
|
||||
|
||||
input[type='checkbox'] {
|
||||
cursor: pointer;
|
||||
accent-color: ${(props) => props.theme.primary.solid};
|
||||
}
|
||||
`;
|
||||
|
||||
export default StyledWrapper;
|
||||
|
||||
@@ -62,6 +62,11 @@ const Wrapper = styled.div`
|
||||
padding: 0.2rem 0.6rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
input[type='checkbox'] {
|
||||
cursor: pointer;
|
||||
accent-color: ${(props) => props.theme.primary.solid};
|
||||
}
|
||||
`;
|
||||
|
||||
export default Wrapper;
|
||||
|
||||
@@ -62,6 +62,11 @@ const Wrapper = styled.div`
|
||||
padding: 0.2rem 0.6rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
input[type='checkbox'] {
|
||||
cursor: pointer;
|
||||
accent-color: ${(props) => props.theme.primary.solid};
|
||||
}
|
||||
`;
|
||||
|
||||
export default Wrapper;
|
||||
|
||||
@@ -66,6 +66,11 @@ const Wrapper = styled.div`
|
||||
color: ${(props) => props.theme.colors.text.primary};
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
input[type='checkbox'] {
|
||||
cursor: pointer;
|
||||
accent-color: ${(props) => props.theme.primary.solid};
|
||||
}
|
||||
`;
|
||||
|
||||
export default Wrapper;
|
||||
|
||||
@@ -6,6 +6,7 @@ import { IconLoader2, IconX } from '@tabler/icons';
|
||||
import { interpolate } from '@usebruno/common';
|
||||
import { fetchOauth2Credentials, clearOauth2Cache, refreshOauth2Credentials, cancelOauth2AuthorizationRequest, isOauth2AuthorizationRequestInProgress } from 'providers/ReduxStore/slices/collections/actions';
|
||||
import { getAllVariables } from 'utils/collections/index';
|
||||
import Button from 'ui/Button';
|
||||
|
||||
const Oauth2ActionButtons = ({ item, request, collection, url: accessTokenUrl, credentialsId }) => {
|
||||
const { uid: collectionUid } = collection;
|
||||
@@ -133,37 +134,47 @@ const Oauth2ActionButtons = ({ item, request, collection, url: accessTokenUrl, c
|
||||
|
||||
return (
|
||||
<div className="flex flex-row gap-4 mt-4">
|
||||
<button
|
||||
<Button
|
||||
size="sm"
|
||||
color="secondary"
|
||||
onClick={handleFetchOauth2Credentials}
|
||||
className="submit btn btn-sm btn-secondary w-fit flex flex-row"
|
||||
disabled={fetchingToken || refreshingToken}
|
||||
loading={fetchingToken}
|
||||
>
|
||||
Get Access Token{fetchingToken ? <IconLoader2 className="animate-spin ml-2" size={18} strokeWidth={1.5} /> : ''}
|
||||
</button>
|
||||
Get Access Token
|
||||
</Button>
|
||||
{creds?.refresh_token
|
||||
? (
|
||||
<button
|
||||
<Button
|
||||
size="sm"
|
||||
color="secondary"
|
||||
onClick={handleRefreshAccessToken}
|
||||
className="submit btn btn-sm btn-secondary w-fit flex flex-row"
|
||||
disabled={fetchingToken || refreshingToken}
|
||||
loading={refreshingToken}
|
||||
>
|
||||
Refresh Token{refreshingToken ? <IconLoader2 className="animate-spin ml-2" size={18} strokeWidth={1.5} /> : ''}
|
||||
</button>
|
||||
Refresh Token
|
||||
</Button>
|
||||
)
|
||||
: null}
|
||||
{useSystemBrowser && fetchingAuthorizationCode
|
||||
? (
|
||||
<button
|
||||
<Button
|
||||
size="sm"
|
||||
color="secondary"
|
||||
onClick={handleCancelAuthorization}
|
||||
className="submit btn btn-sm btn-secondary w-fit flex flex-row items-center"
|
||||
icon={<IconX size={16} />}
|
||||
iconPosition="left"
|
||||
>
|
||||
<IconX size={16} className="mr-1" />
|
||||
Cancel Authorization
|
||||
</button>
|
||||
</Button>
|
||||
) : null}
|
||||
<button onClick={handleClearCache} className="submit btn btn-sm btn-secondary w-fit">
|
||||
<Button
|
||||
size="sm"
|
||||
color="secondary"
|
||||
onClick={handleClearCache}
|
||||
>
|
||||
Clear Cache
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -62,6 +62,11 @@ const Wrapper = styled.div`
|
||||
padding: 0.2rem 0.6rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
input[type='checkbox'] {
|
||||
cursor: pointer;
|
||||
accent-color: ${(props) => props.theme.primary.solid};
|
||||
}
|
||||
`;
|
||||
|
||||
export default Wrapper;
|
||||
|
||||
@@ -11,6 +11,11 @@ const Wrapper = styled.div`
|
||||
border: solid 1px ${(props) => props.theme.input.border};
|
||||
background-color: ${(props) => props.theme.input.bg};
|
||||
}
|
||||
|
||||
input[type='checkbox'] {
|
||||
cursor: pointer;
|
||||
accent-color: ${(props) => props.theme.primary.solid};
|
||||
}
|
||||
`;
|
||||
|
||||
export default Wrapper;
|
||||
|
||||
Reference in New Issue
Block a user