fix oauth checkbox, button styles (#6572)

* fix: checkboxes

* use secondary button
This commit is contained in:
sanish chirayath
2025-12-31 00:00:58 +05:30
committed by GitHub
parent b75c9fdd6d
commit 1c9db0886d
7 changed files with 62 additions and 17 deletions

View File

@@ -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;

View File

@@ -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;

View File

@@ -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;

View File

@@ -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;

View File

@@ -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>
);
};

View File

@@ -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;

View File

@@ -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;