🔧 chore: replace bgClass with className

packages/frontend/src/components/projects/create/ConnectAccount.tsx

@@ -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">
           <IconWithFrame icon={<GitIcon />} />
           <EllipsesIcon className="items-center gap-1.5 flex" />
-          <IconWithFrame bgClass="bg-blue-400" icon={<SnowballIcon />} />
+          <IconWithFrame className="bg-blue-400" icon={<SnowballIcon />} />
         </div>
         {/** Text */}
         <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
           </Heading>
           <p className="text-center text-elements-mid-em">
@@ -65,7 +65,7 @@ const ConnectAccount: React.FC<ConnectAccountInterface> = ({
           </p>
         </div>
         {/** 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
             url={GITHUB_OAUTH_URL}
             onCode={handleCode}

packages/frontend/src/components/shared/IconWithFrame/IconWithFrame.tsx

@@ -3,13 +3,13 @@ import { cn } from 'utils/classnames';
 
 interface IconWithFrameProps {
   icon: ReactNode;
-  bgClass?: string;
+  className?: string;
   hasHighlight?: boolean;
 }
 
 export const IconWithFrame = ({
   icon,
-  bgClass = 'bg-controls-secondary ',
+  className,
   hasHighlight = true,
 }: IconWithFrameProps) => {
   return (
@@ -18,9 +18,8 @@ export const IconWithFrame = ({
         'relative justify-center items-center gap-2.5 inline-flex',
         'w-16 h-16 rounded-2xl shadow-inner',
         'border border-b-[3px] border-border-interactive border-opacity-10',
-        {
-          [bgClass]: true,
-        },
+        'bg-controls-secondary',
+        className,
       )}
     >
       {hasHighlight && (