@sikka/hawa 0.1.82 → 0.1.83

package/.github/workflows/hawa-ci.yml

@@ -48,9 +48,8 @@ jobs:
         node-version: [16.x]
     steps:
       - uses: actions/checkout@v2
-
-      - name: Change working directory to ./landing
-        run: cd ./landing
+        with:
+          path: deploy-landing-path
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v2
         with:
@@ -77,6 +76,8 @@ jobs:
         node-version: [16.x]
     steps:
       - uses: actions/checkout@v2
+        with:
+          path: build-storybook-path
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v2
         with:
@@ -85,6 +86,5 @@ jobs:
         run: |
           cd /var/www/html/sikka-software/_work/Hawa/Hawa
           rm -fr package-lock.json || true
-          rm -fr node_modules  || true
           npm install
           npm run build-storybook

package/dist/index.d.mts

@@ -1130,6 +1130,7 @@ type SignInFormTypes = {
     currentLanguage?: any;
     handleColorMode?: () => void;
     currentColorMode?: any;
+    logosOnly?: boolean;
     direction?: "rtl" | "ltr";
     showError?: any;
     errorTitle?: string;
@@ -1186,6 +1187,7 @@ type SignUpFormTypes = {
     handleColorMode?: () => void;
     currentColorMode?: any;
     direction?: "rtl" | "ltr";
+    logosOnly?: boolean;
     texts: {
         fullNameLabel: string;
         fullNamePlaceholder: string;

package/dist/index.d.ts

@@ -1130,6 +1130,7 @@ type SignInFormTypes = {
     currentLanguage?: any;
     handleColorMode?: () => void;
     currentColorMode?: any;
+    logosOnly?: boolean;
     direction?: "rtl" | "ltr";
     showError?: any;
     errorTitle?: string;
@@ -1186,6 +1187,7 @@ type SignUpFormTypes = {
     handleColorMode?: () => void;
     currentColorMode?: any;
     direction?: "rtl" | "ltr";
+    logosOnly?: boolean;
     texts: {
         fullNameLabel: string;
         fullNamePlaceholder: string;

package/dist/index.js

@@ -8640,7 +8640,6 @@ var SignInPhone = function(props) {
 // src/blocks/AuthForms/SignInForm.tsx
 var import_react72 = __toESM(require("react"));
 var import_react_hook_form3 = require("react-hook-form");
-var import_clsx33 = __toESM(require("clsx"));
 // src/elements/Icons.tsx
 var Icons = {
     logo: function(props) {
@@ -8897,7 +8896,7 @@ var SignInForm = function(props) {
         onClick: props.handleForgotPassword,
         className: "mb-3 w-fit cursor-pointer text-xs dark:text-gray-300"
     }, props.texts.forgotPasswordText)), /* @__PURE__ */ import_react72.default.createElement(Button, {
-        className: "w-full mt-4",
+        className: "mt-4 w-full",
         isLoading: props.isLoading
     }, props.texts.signInText), !props.withoutSignUp && /* @__PURE__ */ import_react72.default.createElement("div", {
         className: "p-3 text-center text-sm font-semibold dark:text-gray-300"
@@ -8905,23 +8904,26 @@ var SignInForm = function(props) {
         onClick: props.handleRouteToSignUp,
         className: "clickable-link"
     }, props.texts.createAccount)))), props.viaGithub || props.viaGoogle || props.viaTwitter ? /* @__PURE__ */ import_react72.default.createElement(CardFooter, {
-        className: "grid grid-cols-1 gap-2 "
+        className: cn(props.logosOnly ? "flex flex-row gap-2 justify-center" : "grid grid-cols-1 gap-2")
     }, props.viaGoogle && /* @__PURE__ */ import_react72.default.createElement(Button, {
+        className: "flex flex-row items-center gap-2",
         variant: "outline",
         onClick: props.handleGoogleSignIn
     }, /* @__PURE__ */ import_react72.default.createElement(Icons.google, {
-        className: (0, import_clsx33.default)("h-4 w-4", props.direction === "rtl" ? "ml-2" : "mr-2")
-    }), props.texts.signInViaGoogleLabel), props.viaGithub && /* @__PURE__ */ import_react72.default.createElement(Button, {
+        className: "h-4 w-4"
+    }), !props.logosOnly && props.texts.signInViaGoogleLabel), props.viaGithub && /* @__PURE__ */ import_react72.default.createElement(Button, {
+        className: "flex flex-row items-center gap-2",
         variant: "outline",
         onClick: props.handleGithubSignIn
     }, /* @__PURE__ */ import_react72.default.createElement(Icons.gitHub, {
-        className: (0, import_clsx33.default)("h-4 w-4", props.direction === "rtl" ? "ml-2" : "mr-2")
-    }), props.texts.signInViaGithubLabel), props.viaTwitter && /* @__PURE__ */ import_react72.default.createElement(Button, {
+        className: "h-4 w-4"
+    }), !props.logosOnly && props.texts.signInViaGithubLabel), props.viaTwitter && /* @__PURE__ */ import_react72.default.createElement(Button, {
+        className: "flex flex-row items-center gap-2",
         variant: "outline",
         onClick: props.handleTwitterSignIn
     }, /* @__PURE__ */ import_react72.default.createElement(Icons.twitter, {
-        className: (0, import_clsx33.default)("h-4 w-4", props.direction === "rtl" ? "ml-2" : "mr-2")
-    }), props.texts.signInViaTwitterLabel)) : null), /* @__PURE__ */ import_react72.default.createElement(InterfaceSettings, {
+        className: "h-4 w-4"
+    }), !props.logosOnly && props.texts.signInViaTwitterLabel)) : null), /* @__PURE__ */ import_react72.default.createElement(InterfaceSettings, {
         currentColorMode: props.currentColorMode,
         currentLanguage: props.currentLanguage,
         handleColorMode: props.handleColorMode,
@@ -8978,7 +8980,6 @@ function SignInBlock() {
 // src/blocks/AuthForms/SignUpForm.tsx
 var import_react73 = __toESM(require("react"));
 var import_react_hook_form4 = require("react-hook-form");
-var import_clsx34 = __toESM(require("clsx"));
 var SignUpForm = function(props) {
     var methods = (0, import_react_hook_form4.useForm)();
     var errors = methods.formState.errors, handleSubmit = methods.handleSubmit, control = methods.control;
@@ -9203,23 +9204,26 @@ var SignUpForm = function(props) {
         onClick: props.handleRouteToSignIn,
         className: "clickable-link"
     }, props.texts.signInText)))), props.viaGithub || props.viaGoogle || props.viaTwitter ? /* @__PURE__ */ import_react73.default.createElement(CardFooter, {
-        className: "grid grid-cols-1 gap-2 "
+        className: cn(props.logosOnly ? "flex flex-row justify-center gap-2" : "grid grid-cols-1 gap-2")
     }, props.viaGoogle && /* @__PURE__ */ import_react73.default.createElement(Button, {
+        className: "flex flex-row items-center gap-2",
         variant: "outline",
         onClick: props.handleGoogleSignUp
     }, /* @__PURE__ */ import_react73.default.createElement(Icons.google, {
-        className: (0, import_clsx34.default)("h-4 w-4", props.direction === "rtl" ? "ml-2" : "mr-2")
-    }), props.texts.signUpViaGoogleLabel), props.viaGithub && /* @__PURE__ */ import_react73.default.createElement(Button, {
+        className: "h-4 w-4"
+    }), !props.logosOnly && props.texts.signUpViaGoogleLabel), props.viaGithub && /* @__PURE__ */ import_react73.default.createElement(Button, {
+        className: "flex flex-row items-center gap-2",
         variant: "outline",
         onClick: props.handleGithubSignUp
     }, /* @__PURE__ */ import_react73.default.createElement(Icons.gitHub, {
-        className: (0, import_clsx34.default)("h-4 w-4", props.direction === "rtl" ? "ml-2" : "mr-2")
-    }), props.texts.signUpViaGithubLabel), props.viaTwitter && /* @__PURE__ */ import_react73.default.createElement(Button, {
+        className: "h-4 w-4"
+    }), !props.logosOnly && props.texts.signUpViaGithubLabel), props.viaTwitter && /* @__PURE__ */ import_react73.default.createElement(Button, {
+        className: "flex flex-row items-center gap-2",
         variant: "outline",
         onClick: props.handleTwitterSignUp
     }, /* @__PURE__ */ import_react73.default.createElement(Icons.twitter, {
-        className: (0, import_clsx34.default)("h-4 w-4", props.direction === "rtl" ? "ml-2" : "mr-2")
-    }), props.texts.signUpViaTwitterLabel)) : null), /* @__PURE__ */ import_react73.default.createElement(InterfaceSettings, {
+        className: "h-4 w-4"
+    }), !props.logosOnly && props.texts.signUpViaTwitterLabel)) : null), /* @__PURE__ */ import_react73.default.createElement(InterfaceSettings, {
         currentColorMode: props.currentColorMode,
         currentLanguage: props.currentLanguage,
         handleColorMode: props.handleColorMode,
@@ -10024,7 +10028,7 @@ var ComparingPlans = function(props) {
 };
 // src/blocks/Pricing/HorizontalPricing.tsx
 var import_react85 = __toESM(require("react"));
-var import_clsx35 = __toESM(require("clsx"));
+var import_clsx33 = __toESM(require("clsx"));
 var HorizontalPricing = function(props) {
     var _ref = _sliced_to_array((0, import_react85.useState)(null), 2), selectedCard = _ref[0], setSelectedCard = _ref[1];
     var data = [
@@ -10071,7 +10075,7 @@ var HorizontalPricing = function(props) {
             id: d.title,
             className: "peer appearance-none"
         }), /* @__PURE__ */ import_react85.default.createElement("div", {
-            className: (0, import_clsx35.default)(selectedCard === d.title ? "peer-checked:border-blue-500" : "", "peer flex cursor-pointer items-center justify-between  rounded-xl border bg-background px-5   py-4 shadow dark:text-white  peer-checked:[&_.active]:block peer-checked:[&_.default]:hidden")
+            className: (0, import_clsx33.default)(selectedCard === d.title ? "peer-checked:border-blue-500" : "", "peer flex cursor-pointer items-center justify-between  rounded-xl border bg-background px-5   py-4 shadow dark:text-white  peer-checked:[&_.active]:block peer-checked:[&_.default]:hidden")
         }, /* @__PURE__ */ import_react85.default.createElement("div", {
             className: "peer flex items-center gap-4"
         }, /* @__PURE__ */ import_react85.default.createElement(CheckIcons, null), /* @__PURE__ */ import_react85.default.createElement(CardText, {

package/dist/index.mjs

@@ -8993,7 +8993,6 @@ var SignInPhone = (props) => {
 // src/blocks/AuthForms/SignInForm.tsx
 import React86 from "react";
 import { Controller as Controller3, useForm as useForm3 } from "react-hook-form";
-import clsx33 from "clsx";
 
 // src/elements/Icons.tsx
 var Icons = {
@@ -9228,38 +9227,51 @@ var SignInForm = (props) => {
       className: "mb-3 w-fit cursor-pointer text-xs dark:text-gray-300"
     },
     props.texts.forgotPasswordText
-  )), /* @__PURE__ */ React86.createElement(Button, { className: "w-full mt-4", isLoading: props.isLoading }, props.texts.signInText), !props.withoutSignUp && /* @__PURE__ */ React86.createElement("div", { className: "p-3 text-center text-sm font-semibold dark:text-gray-300" }, props.texts.newUserText, " ", /* @__PURE__ */ React86.createElement(
+  )), /* @__PURE__ */ React86.createElement(Button, { className: "mt-4 w-full", isLoading: props.isLoading }, props.texts.signInText), !props.withoutSignUp && /* @__PURE__ */ React86.createElement("div", { className: "p-3 text-center text-sm font-semibold dark:text-gray-300" }, props.texts.newUserText, " ", /* @__PURE__ */ React86.createElement(
     "span",
     {
       onClick: props.handleRouteToSignUp,
       className: "clickable-link"
     },
     props.texts.createAccount
-  )))), props.viaGithub || props.viaGoogle || props.viaTwitter ? /* @__PURE__ */ React86.createElement(CardFooter, { className: "grid grid-cols-1 gap-2 " }, props.viaGoogle && /* @__PURE__ */ React86.createElement(Button, { variant: "outline", onClick: props.handleGoogleSignIn }, /* @__PURE__ */ React86.createElement(
-    Icons.google,
-    {
-      className: clsx33(
-        "h-4 w-4",
-        props.direction === "rtl" ? "ml-2" : "mr-2"
-      )
-    }
-  ), props.texts.signInViaGoogleLabel), props.viaGithub && /* @__PURE__ */ React86.createElement(Button, { variant: "outline", onClick: props.handleGithubSignIn }, /* @__PURE__ */ React86.createElement(
-    Icons.gitHub,
+  )))), props.viaGithub || props.viaGoogle || props.viaTwitter ? /* @__PURE__ */ React86.createElement(
+    CardFooter,
     {
-      className: clsx33(
-        "h-4 w-4",
-        props.direction === "rtl" ? "ml-2" : "mr-2"
-      )
-    }
-  ), props.texts.signInViaGithubLabel), props.viaTwitter && /* @__PURE__ */ React86.createElement(Button, { variant: "outline", onClick: props.handleTwitterSignIn }, /* @__PURE__ */ React86.createElement(
-    Icons.twitter,
-    {
-      className: clsx33(
-        "h-4 w-4",
-        props.direction === "rtl" ? "ml-2" : "mr-2"
+      className: cn(
+        props.logosOnly ? "flex flex-row gap-2 justify-center" : "grid grid-cols-1 gap-2"
       )
-    }
-  ), props.texts.signInViaTwitterLabel)) : null), /* @__PURE__ */ React86.createElement(
+    },
+    props.viaGoogle && /* @__PURE__ */ React86.createElement(
+      Button,
+      {
+        className: "flex flex-row items-center gap-2",
+        variant: "outline",
+        onClick: props.handleGoogleSignIn
+      },
+      /* @__PURE__ */ React86.createElement(Icons.google, { className: "h-4 w-4" }),
+      !props.logosOnly && props.texts.signInViaGoogleLabel
+    ),
+    props.viaGithub && /* @__PURE__ */ React86.createElement(
+      Button,
+      {
+        className: "flex flex-row items-center gap-2",
+        variant: "outline",
+        onClick: props.handleGithubSignIn
+      },
+      /* @__PURE__ */ React86.createElement(Icons.gitHub, { className: "h-4 w-4" }),
+      !props.logosOnly && props.texts.signInViaGithubLabel
+    ),
+    props.viaTwitter && /* @__PURE__ */ React86.createElement(
+      Button,
+      {
+        className: "flex flex-row items-center gap-2",
+        variant: "outline",
+        onClick: props.handleTwitterSignIn
+      },
+      /* @__PURE__ */ React86.createElement(Icons.twitter, { className: "h-4 w-4" }),
+      !props.logosOnly && props.texts.signInViaTwitterLabel
+    )
+  ) : null), /* @__PURE__ */ React86.createElement(
     InterfaceSettings,
     {
       currentColorMode: props.currentColorMode,
@@ -9278,7 +9290,6 @@ function SignInBlock() {
 // src/blocks/AuthForms/SignUpForm.tsx
 import React87 from "react";
 import { Controller as Controller4, FormProvider as FormProvider2, useForm as useForm4 } from "react-hook-form";
-import clsx34 from "clsx";
 var SignUpForm = (props) => {
   const methods = useForm4();
   const {
@@ -9501,31 +9512,44 @@ var SignUpForm = (props) => {
       className: "clickable-link"
     },
     props.texts.signInText
-  )))), props.viaGithub || props.viaGoogle || props.viaTwitter ? /* @__PURE__ */ React87.createElement(CardFooter, { className: "grid grid-cols-1 gap-2 " }, props.viaGoogle && /* @__PURE__ */ React87.createElement(Button, { variant: "outline", onClick: props.handleGoogleSignUp }, /* @__PURE__ */ React87.createElement(
-    Icons.google,
+  )))), props.viaGithub || props.viaGoogle || props.viaTwitter ? /* @__PURE__ */ React87.createElement(
+    CardFooter,
     {
-      className: clsx34(
-        "h-4 w-4",
-        props.direction === "rtl" ? "ml-2" : "mr-2"
-      )
-    }
-  ), props.texts.signUpViaGoogleLabel), props.viaGithub && /* @__PURE__ */ React87.createElement(Button, { variant: "outline", onClick: props.handleGithubSignUp }, /* @__PURE__ */ React87.createElement(
-    Icons.gitHub,
-    {
-      className: clsx34(
-        "h-4 w-4",
-        props.direction === "rtl" ? "ml-2" : "mr-2"
-      )
-    }
-  ), props.texts.signUpViaGithubLabel), props.viaTwitter && /* @__PURE__ */ React87.createElement(Button, { variant: "outline", onClick: props.handleTwitterSignUp }, /* @__PURE__ */ React87.createElement(
-    Icons.twitter,
-    {
-      className: clsx34(
-        "h-4 w-4",
-        props.direction === "rtl" ? "ml-2" : "mr-2"
+      className: cn(
+        props.logosOnly ? "flex flex-row justify-center gap-2" : "grid grid-cols-1 gap-2"
       )
-    }
-  ), props.texts.signUpViaTwitterLabel)) : null), /* @__PURE__ */ React87.createElement(
+    },
+    props.viaGoogle && /* @__PURE__ */ React87.createElement(
+      Button,
+      {
+        className: "flex flex-row items-center gap-2",
+        variant: "outline",
+        onClick: props.handleGoogleSignUp
+      },
+      /* @__PURE__ */ React87.createElement(Icons.google, { className: "h-4 w-4" }),
+      !props.logosOnly && props.texts.signUpViaGoogleLabel
+    ),
+    props.viaGithub && /* @__PURE__ */ React87.createElement(
+      Button,
+      {
+        className: "flex flex-row items-center gap-2",
+        variant: "outline",
+        onClick: props.handleGithubSignUp
+      },
+      /* @__PURE__ */ React87.createElement(Icons.gitHub, { className: "h-4 w-4" }),
+      !props.logosOnly && props.texts.signUpViaGithubLabel
+    ),
+    props.viaTwitter && /* @__PURE__ */ React87.createElement(
+      Button,
+      {
+        className: "flex flex-row items-center gap-2",
+        variant: "outline",
+        onClick: props.handleTwitterSignUp
+      },
+      /* @__PURE__ */ React87.createElement(Icons.twitter, { className: "h-4 w-4" }),
+      !props.logosOnly && props.texts.signUpViaTwitterLabel
+    )
+  ) : null), /* @__PURE__ */ React87.createElement(
     InterfaceSettings,
     {
       currentColorMode: props.currentColorMode,
@@ -10287,7 +10311,7 @@ var ComparingPlans = (props) => {
 
 // src/blocks/Pricing/HorizontalPricing.tsx
 import React99, { useState as useState47 } from "react";
-import clsx35 from "clsx";
+import clsx33 from "clsx";
 var HorizontalPricing = (props) => {
   const [selectedCard, setSelectedCard] = useState47(null);
   let data = [
@@ -10328,7 +10352,7 @@ var HorizontalPricing = (props) => {
     /* @__PURE__ */ React99.createElement(
       "div",
       {
-        className: clsx35(
+        className: clsx33(
           selectedCard === d.title ? "peer-checked:border-blue-500" : "",
           "peer flex cursor-pointer items-center justify-between  rounded-xl border bg-background px-5   py-4 shadow dark:text-white  peer-checked:[&_.active]:block peer-checked:[&_.default]:hidden"
         )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.1.82",
+  "version": "0.1.83",
   "description": "Modern UI Kit made with Tailwind & Radix Primitives",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/blocks/AuthForms/SignInForm.tsx

@@ -1,7 +1,5 @@
 import React, { FC } from "react"
 import { Controller, useForm } from "react-hook-form"
-import clsx from "clsx"
-
 import {
   HawaTextField,
   HawaAlert,
@@ -11,6 +9,7 @@ import {
 import { Card, CardContent, CardFooter } from "../../elements/Card"
 import { Button } from "../../elements/Button"
 import { Icons } from "../../elements/Icons"
+import { cn } from "../../util"
 
 export const SignInForm: FC<SignInFormTypes> = (props) => {
   const {
@@ -132,7 +131,7 @@ export const SignInForm: FC<SignInFormTypes> = (props) => {
               </>
             )}
 
-            <Button className="w-full mt-4" isLoading={props.isLoading}>
+            <Button className="mt-4 w-full" isLoading={props.isLoading}>
               {props.texts.signInText}
             </Button>
             {!props.withoutSignUp && (
@@ -151,38 +150,39 @@ export const SignInForm: FC<SignInFormTypes> = (props) => {
 
         {/* 3rd Party Sign Auth Buttons */}
         {props.viaGithub || props.viaGoogle || props.viaTwitter ? (
-          <CardFooter className="grid grid-cols-1 gap-2 ">
+          <CardFooter
+            className={cn(
+              props.logosOnly ? "flex flex-row gap-2 justify-center" : "grid grid-cols-1 gap-2"
+            )}
+          >
             {props.viaGoogle && (
-              <Button variant="outline" onClick={props.handleGoogleSignIn}>
-                <Icons.google
-                  className={clsx(
-                    "h-4 w-4",
-                    props.direction === "rtl" ? "ml-2" : "mr-2"
-                  )}
-                />
-                {props.texts.signInViaGoogleLabel}
+              <Button
+                className="flex flex-row items-center gap-2"
+                variant="outline"
+                onClick={props.handleGoogleSignIn}
+              >
+                <Icons.google className="h-4 w-4" />
+                {!props.logosOnly && props.texts.signInViaGoogleLabel}
               </Button>
             )}
             {props.viaGithub && (
-              <Button variant="outline" onClick={props.handleGithubSignIn}>
-                <Icons.gitHub
-                  className={clsx(
-                    "h-4 w-4",
-                    props.direction === "rtl" ? "ml-2" : "mr-2"
-                  )}
-                />
-                {props.texts.signInViaGithubLabel}
+              <Button
+                className="flex flex-row items-center gap-2"
+                variant="outline"
+                onClick={props.handleGithubSignIn}
+              >
+                <Icons.gitHub className="h-4 w-4" />
+                {!props.logosOnly && props.texts.signInViaGithubLabel}
               </Button>
             )}
             {props.viaTwitter && (
-              <Button variant="outline" onClick={props.handleTwitterSignIn}>
-                <Icons.twitter
-                  className={clsx(
-                    "h-4 w-4",
-                    props.direction === "rtl" ? "ml-2" : "mr-2"
-                  )}
-                />
-                {props.texts.signInViaTwitterLabel}
+              <Button
+                className="flex flex-row items-center gap-2"
+                variant="outline"
+                onClick={props.handleTwitterSignIn}
+              >
+                <Icons.twitter className="h-4 w-4" />
+                {!props.logosOnly && props.texts.signInViaTwitterLabel}
               </Button>
             )}
           </CardFooter>
@@ -203,6 +203,7 @@ type SignInFormTypes = {
   currentLanguage?: any
   handleColorMode?: () => void
   currentColorMode?: any
+  logosOnly?: boolean
   direction?: "rtl" | "ltr"
   showError?: any
   errorTitle?: string

package/src/blocks/AuthForms/SignUpForm.tsx

@@ -10,7 +10,7 @@ import { Controller, FormProvider, useForm } from "react-hook-form"
 import { Card, CardContent, CardFooter } from "../../elements/Card"
 import { Button } from "../../elements/Button"
 import { Icons } from "../../elements/Icons"
-import clsx from "clsx"
+import { cn } from "../../util"
 
 type SignUpFormTypes = {
   handleLanguage?: () => void
@@ -18,6 +18,7 @@ type SignUpFormTypes = {
   handleColorMode?: () => void
   currentColorMode?: any
   direction?: "rtl" | "ltr"
+  logosOnly?: boolean
   texts: {
     fullNameLabel: string
     fullNamePlaceholder: string
@@ -307,38 +308,41 @@ export const SignUpForm: FC<SignUpFormTypes> = (props) => {
         </CardContent>
 
         {props.viaGithub || props.viaGoogle || props.viaTwitter ? (
-          <CardFooter className="grid grid-cols-1 gap-2 ">
+          <CardFooter
+            className={cn(
+              props.logosOnly
+                ? "flex flex-row justify-center gap-2"
+                : "grid grid-cols-1 gap-2"
+            )}
+          >
             {props.viaGoogle && (
-              <Button variant="outline" onClick={props.handleGoogleSignUp}>
-                <Icons.google
-                  className={clsx(
-                    "h-4 w-4",
-                    props.direction === "rtl" ? "ml-2" : "mr-2"
-                  )}
-                />
-                {props.texts.signUpViaGoogleLabel}
+              <Button
+                className="flex flex-row items-center gap-2"
+                variant="outline"
+                onClick={props.handleGoogleSignUp}
+              >
+                <Icons.google className="h-4 w-4" />
+                {!props.logosOnly && props.texts.signUpViaGoogleLabel}
               </Button>
             )}
             {props.viaGithub && (
-              <Button variant="outline" onClick={props.handleGithubSignUp}>
-                <Icons.gitHub
-                  className={clsx(
-                    "h-4 w-4",
-                    props.direction === "rtl" ? "ml-2" : "mr-2"
-                  )}
-                />
-                {props.texts.signUpViaGithubLabel}
+              <Button
+                className="flex flex-row items-center gap-2"
+                variant="outline"
+                onClick={props.handleGithubSignUp}
+              >
+                <Icons.gitHub className="h-4 w-4" />
+                {!props.logosOnly && props.texts.signUpViaGithubLabel}
               </Button>
             )}
             {props.viaTwitter && (
-              <Button variant="outline" onClick={props.handleTwitterSignUp}>
-                <Icons.twitter
-                  className={clsx(
-                    "h-4 w-4",
-                    props.direction === "rtl" ? "ml-2" : "mr-2"
-                  )}
-                />
-                {props.texts.signUpViaTwitterLabel}
+              <Button
+                className="flex flex-row items-center gap-2"
+                variant="outline"
+                onClick={props.handleTwitterSignUp}
+              >
+                <Icons.twitter className="h-4 w-4" />
+                {!props.logosOnly && props.texts.signUpViaTwitterLabel}
               </Button>
             )}
           </CardFooter>