forked from cerc-io/snowballtools-base
🔧 chore: replace bgClass with className
This commit is contained in:
parent
a324d32ebf
commit
3493d735b9
@ -52,11 +52,11 @@ const ConnectAccount: React.FC<ConnectAccountInterface> = ({
|
|||||||
<div className="w-52 h-16 justify-center items-center gap-4 inline-flex mb-7">
|
<div className="w-52 h-16 justify-center items-center gap-4 inline-flex mb-7">
|
||||||
<IconWithFrame icon={<GitIcon />} />
|
<IconWithFrame icon={<GitIcon />} />
|
||||||
<EllipsesIcon className="items-center gap-1.5 flex" />
|
<EllipsesIcon className="items-center gap-1.5 flex" />
|
||||||
<IconWithFrame bgClass="bg-blue-400" icon={<SnowballIcon />} />
|
<IconWithFrame className="bg-blue-400" icon={<SnowballIcon />} />
|
||||||
</div>
|
</div>
|
||||||
{/** Text */}
|
{/** Text */}
|
||||||
<div className="flex flex-col gap-1.5 mb-6">
|
<div className="flex flex-col gap-1.5 mb-6">
|
||||||
<Heading className="text-[20px] font-medium">
|
<Heading className="text-xl font-medium">
|
||||||
Connect to your Git account
|
Connect to your Git account
|
||||||
</Heading>
|
</Heading>
|
||||||
<p className="text-center text-elements-mid-em">
|
<p className="text-center text-elements-mid-em">
|
||||||
@ -65,7 +65,7 @@ const ConnectAccount: React.FC<ConnectAccountInterface> = ({
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
{/** CTA Buttons */}
|
{/** CTA Buttons */}
|
||||||
<div className="mt-2 flex flex-col w-full sm:w-auto sm:flex-row gap-3">
|
<div className="flex flex-col w-full sm:w-auto sm:flex-row gap-2 sm:gap-3">
|
||||||
<OauthPopup
|
<OauthPopup
|
||||||
url={GITHUB_OAUTH_URL}
|
url={GITHUB_OAUTH_URL}
|
||||||
onCode={handleCode}
|
onCode={handleCode}
|
||||||
|
@ -3,13 +3,13 @@ import { cn } from 'utils/classnames';
|
|||||||
|
|
||||||
interface IconWithFrameProps {
|
interface IconWithFrameProps {
|
||||||
icon: ReactNode;
|
icon: ReactNode;
|
||||||
bgClass?: string;
|
className?: string;
|
||||||
hasHighlight?: boolean;
|
hasHighlight?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const IconWithFrame = ({
|
export const IconWithFrame = ({
|
||||||
icon,
|
icon,
|
||||||
bgClass = 'bg-controls-secondary ',
|
className,
|
||||||
hasHighlight = true,
|
hasHighlight = true,
|
||||||
}: IconWithFrameProps) => {
|
}: IconWithFrameProps) => {
|
||||||
return (
|
return (
|
||||||
@ -18,9 +18,8 @@ export const IconWithFrame = ({
|
|||||||
'relative justify-center items-center gap-2.5 inline-flex',
|
'relative justify-center items-center gap-2.5 inline-flex',
|
||||||
'w-16 h-16 rounded-2xl shadow-inner',
|
'w-16 h-16 rounded-2xl shadow-inner',
|
||||||
'border border-b-[3px] border-border-interactive border-opacity-10',
|
'border border-b-[3px] border-border-interactive border-opacity-10',
|
||||||
{
|
'bg-controls-secondary',
|
||||||
[bgClass]: true,
|
className,
|
||||||
},
|
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
{hasHighlight && (
|
{hasHighlight && (
|
||||||
|
Loading…
Reference in New Issue
Block a user