@sikka/hawa 0.0.47 → 0.0.49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.47",
+  "version": "0.0.49",
   "description": "UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",

package/src/blocks/Account/UserProfileForm.js

@@ -1,8 +1,7 @@
 import React from "react";
-import { HawaTextField } from "../../elements";
+import { HawaButton, HawaTextField } from "../../elements";
 import { Controller, FormProvider, useForm } from "react-hook-form";
 import Container from "@mui/material/Container";
-import Button from "@mui/material/Button";
 
 export const UserProfileForm = (props) => {
   const methods = useForm();
@@ -141,9 +140,10 @@ export const UserProfileForm = (props) => {
                 />
               );
             })}
-          <Button type="submit" fullWidth variant="last">
+
+          <HawaButton fullWidth type="submit">
             {props.texts.updateProfile}
-          </Button>
+          </HawaButton>
         </form>
       </FormProvider>
     </Container>

package/src/blocks/Account/UserSettingsForm.js

@@ -1,18 +1,13 @@
-import Button from "@mui/material/Button";
 import Container from "@mui/material/Container";
+import { HawaButton } from "../../elements";
 
 export const UserSettingsForm = (props) => {
   return (
     <Container maxWidth="sm">
       {props.children}
-      <Button
-        type="submit"
-        fullWidth
-        variant="last"
-        onClick={props.handleSaveSettings}
-      >
+      <HawaButton type="submit" fullWidth onClick={props.handleSaveSettings}>
         {props.saveSettingsText}
-      </Button>
+      </HawaButton>
     </Container>
   );
 };

package/src/blocks/AuthForms/CodeConfirmation.js

@@ -1,14 +1,7 @@
 import React from "react";
-import { HawaTextField, HawaLogoButton, HawaAlert } from "../../elements";
+import { HawaTextField, HawaAlert, HawaButton } from "../../elements";
 import { Controller, useForm } from "react-hook-form";
-import InputAdornment from "@mui/material/InputAdornment";
-import EmailIcon from "@mui/icons-material/MailOutline";
-import PasswordIcon from "@mui/icons-material/HttpsOutlined";
-import Container from "@mui/material/Container";
-import Typography from "@mui/material/Typography";
-import Button from "@mui/material/Button";
 import PropTypes from "prop-types";
-import Divider from "@mui/material/Divider";
 
 export const CodeConfirmation = (props) => {
   const methods = useForm();
@@ -19,11 +12,7 @@ export const CodeConfirmation = (props) => {
   } = methods;
 
   return (
-    <Container
-      maxWidth="xs"
-      variant="auth"
-      style={{ direction: props.lang === "ar" ? "rtl" : "ltr" }}
-    >
+    <div className="flex flex-col divide-y divide-gray-300 bg-blue-300 rounded-xl p-4">
       {props.showError && (
         <HawaAlert
           title={props.errorTitle}
@@ -43,11 +32,6 @@ export const CodeConfirmation = (props) => {
               label={props.texts.codeLabel}
               helperText={errors.email?.message}
               placeholder={props.texts.codePlaceholder}
-              // startAdornment={
-              //   <InputAdornment position="start">
-              //     <EmailIcon />
-              //   </InputAdornment>
-              // }
               {...field}
             />
           )}
@@ -56,11 +40,11 @@ export const CodeConfirmation = (props) => {
           }}
         />
 
-        <Button type="submit" fullWidth variant="last">
+        <HawaButton type="submit" fullWidth>
           {props.texts.confirmText}
-        </Button>
+        </HawaButton>
       </form>
-    </Container>
+    </div>
   );
 };
 CodeConfirmation.propTypes = {

package/src/blocks/AuthForms/NewPasswordForm.js

@@ -1,10 +1,6 @@
 import React, { useState } from "react";
-import { HawaTextField, HawaAlert, HawaTypography } from "../../elements";
+import { HawaTextField, HawaAlert, HawaButton } from "../../elements";
 import { Controller, FormProvider, useForm } from "react-hook-form";
-import InputAdornment from "@mui/material/InputAdornment";
-import PasswordIcon from "@mui/icons-material/HttpsOutlined";
-import Container from "@mui/material/Container";
-import Button from "@mui/material/Button";
 import PropTypes from "prop-types";
 
 export const NewPasswordForm = (props) => {
@@ -26,14 +22,12 @@ export const NewPasswordForm = (props) => {
   };
 
   return (
-    <Container maxWidth="xs" variant="auth">
+    <div className="flex flex-col divide-y divide-gray-300 bg-blue-300 rounded-xl p-4">
       {matchError && (
         <HawaAlert text={props.texts.passwordMatchError} severity="error" />
       )}
       {props.passwordChanged ? (
-        <HawaTypography style={{ textAlign: "center", margin: 5 }}>
-          {props.texts.passwordChanged}
-        </HawaTypography>
+        <div className="text-center">{props.texts.passwordChanged}</div>
       ) : (
         <FormProvider {...methods}>
           <form onSubmit={handleSubmit(handleSubmission)}>
@@ -48,11 +42,6 @@ export const NewPasswordForm = (props) => {
                   label={props.texts.passwordLabel}
                   placeholder={props.texts.passwordPlaceholder}
                   helperText={errors.password?.message}
-                  startAdornment={
-                    <InputAdornment position="start">
-                      <PasswordIcon />
-                    </InputAdornment>
-                  }
                   {...field}
                 />
               )}
@@ -71,11 +60,6 @@ export const NewPasswordForm = (props) => {
                   label={props.texts.confirmPasswordLabel}
                   placeholder={props.texts.confirmPasswordPlaceholder}
                   helperText={errors.confirmPassword?.message}
-                  startAdornment={
-                    <InputAdornment position="start">
-                      <PasswordIcon />
-                    </InputAdornment>
-                  }
                   {...field}
                 />
               )}
@@ -84,13 +68,13 @@ export const NewPasswordForm = (props) => {
               }}
             />
 
-            <Button type="submit" fullWidth variant="last">
+            <HawaButton type="submit" fullWidth>
               {props.texts.updatePassword}
-            </Button>
+            </HawaButton>
           </form>
         </FormProvider>
       )}
-    </Container>
+    </div>
   );
 };
 NewPasswordForm.propTypes = {

package/src/blocks/AuthForms/ResetPasswordForm.js

@@ -1,10 +1,6 @@
 import React from "react";
 import { Controller, useForm } from "react-hook-form";
-import { HawaTextField, HawaTypography } from "../../elements";
-import InputAdornment from "@mui/material/InputAdornment";
-import EmailIcon from "@mui/icons-material/MailOutline";
-import Container from "@mui/material/Container";
-import Button from "@mui/material/Button";
+import { HawaButton, HawaTextField } from "../../elements";
 import PropTypes from "prop-types";
 
 export const ResetPasswordForm = (props) => {
@@ -16,7 +12,7 @@ export const ResetPasswordForm = (props) => {
     control
   } = methods;
   return (
-    <Container maxWidth="xs" variant="auth">
+    <div className="flex flex-col divide-y divide-gray-300 bg-blue-300 rounded-xl p-4">
       {!props.sent ? (
         <form onSubmit={handleSubmit(props.handleResetPassword)}>
           <Controller
@@ -30,11 +26,6 @@ export const ResetPasswordForm = (props) => {
                 label={props.texts.emailLabel}
                 helperText={errors.email?.message}
                 placeholder={props.texts.emailPlaceholder}
-                startAdornment={
-                  <InputAdornment position="start">
-                    <EmailIcon />
-                  </InputAdornment>
-                }
                 {...field}
               />
             )}
@@ -47,16 +38,14 @@ export const ResetPasswordForm = (props) => {
               }
             }}
           />
-          <Button type="submit" fullWidth variant="last">
+          <HawaButton fullWidth type="submit">
             {props.texts.resetPassword}
-          </Button>
+          </HawaButton>
         </form>
       ) : (
-        <HawaTypography style={{ textAlign: "center", margin: 5 }}>
-          {props.texts.emailSentText}
-        </HawaTypography>
+        <div className="text-center">{props.texts.emailSentText}</div>
       )}
-    </Container>
+    </div>
   );
 };
 ResetPasswordForm.propTypes = {

package/src/blocks/AuthForms/SignInForm.js

@@ -1,14 +1,12 @@
 import React from "react";
-import { HawaTextField, HawaLogoButton, HawaAlert } from "../../elements";
+import {
+  HawaTextField,
+  HawaLogoButton,
+  HawaAlert,
+  HawaButton
+} from "../../elements";
 import { Controller, useForm } from "react-hook-form";
-import InputAdornment from "@mui/material/InputAdornment";
-import EmailIcon from "@mui/icons-material/MailOutline";
-import PasswordIcon from "@mui/icons-material/HttpsOutlined";
-import Container from "@mui/material/Container";
-import Typography from "@mui/material/Typography";
-import Button from "@mui/material/Button";
 import PropTypes from "prop-types";
-import Divider from "@mui/material/Divider";
 
 export const SignInForm = (props) => {
   const methods = useForm();
@@ -19,19 +17,15 @@ export const SignInForm = (props) => {
   } = methods;
 
   return (
-    <Container
-      variant="auth"
-      maxWidth="sm"
-      style={{ direction: props.lang === "ar" ? "rtl" : "ltr" }}
-    >
-      {props.showError && (
-        <HawaAlert
-          title={props.errorTitle}
-          text={props.errorText}
-          severity="error"
-        />
-      )}
+    <div className="flex flex-col divide-y divide-gray-300 bg-blue-300 rounded-xl p-4">
       <form onSubmit={handleSubmit(props.handleSignIn)}>
+        {props.showError && (
+          <HawaAlert
+            title={props.errorTitle}
+            text={props.errorText}
+            severity="error"
+          />
+        )}
         <Controller
           control={control}
           name="email"
@@ -43,11 +37,6 @@ export const SignInForm = (props) => {
               label={props.texts.emailLabel}
               helperText={errors.email?.message}
               placeholder={props.texts.emailPlaceholder}
-              startAdornment={
-                <InputAdornment position="start">
-                  <EmailIcon />
-                </InputAdornment>
-              }
               {...field}
             />
           )}
@@ -73,73 +62,61 @@ export const SignInForm = (props) => {
               label={props.texts.passwordLabel}
               placeholder={props.texts.passwordPlaceholder}
               helperText={errors.password?.message}
-              startAdornment={
-                <InputAdornment position="start">
-                  <PasswordIcon />
-                </InputAdornment>
-              }
               {...field}
             />
           )}
           rules={{ required: props.texts.passwordRequiredText }}
         />
-        <Typography
-          style={{
-            cursor: "pointer",
-            marginTop: 5,
-            width: "max-content",
-            fontSize: 15,
-            padding: 5
-          }}
+
+        <div
+          className="text-xs cursor-pointer w-fit"
           onClick={props.handleForgotPassword}
         >
           {props.texts.forgotPasswordText}
-        </Typography>
-        <Button type="submit" fullWidth variant="last">
+        </div>
+
+        <HawaButton fullWidth type="submit">
           {props.texts.signInText}
-        </Button>
+        </HawaButton>
+        <div className="font-semibold p-3 text-center text-sm">
+          {props.texts.newUserText}{" "}
+          <span
+            onClick={props.handleRouteToSignUp}
+            className="text-blue-600 cursor-pointer"
+          >
+            {props.texts.signUpText}
+          </span>
+        </div>
       </form>
-      <Typography
-        variant="subtitle2"
-        style={{ marginTop: 5, textAlign: "center", padding: 5 }}
-      >
-        {props.texts.newUserText}{" "}
-        <span
-          onClick={props.handleRouteToSignUp}
-          style={{
-            cursor: "pointer",
-            color: "blue",
-            textAlign: "center"
-          }}
-        >
-          {props.texts.signUpText}
-        </span>
-      </Typography>
-      <Divider />
-      <div style={{ display: "flex", flexDirection: "column" }}>
-        {props.viaGoogle && (
-          <HawaLogoButton
-            logo="google"
-            buttonText={props.texts.googleButtonLabel}
-            onClick={props.handleGoogleSignIn}
-          />
-        )}
-        {props.viaGithub && (
-          <HawaLogoButton
-            logo="github"
-            buttonText={props.texts.githubButtonLabel}
-            onClick={props.handleGithubSignIn}
-          />
-        )}
-        {props.viaTwitter && (
-          <HawaLogoButton
-            logo="twitter"
-            buttonText={props.texts.twitterButtonLabel}
-            onClick={props.handleTwitterSignIn}
-          />
-        )}
-      </div>
-    </Container>
+      {/* <Divider /> */}
+
+      {/* <div className="divide-y divide-gray-900"></div> */}
+      {props.viaGithub || props.viaGoogle || props.viaTwitter ? (
+        <div className="flex flex-col ">
+          {props.viaGoogle && (
+            <HawaLogoButton
+              logo="google"
+              buttonText={props.texts.googleButtonLabel}
+              onClick={props.handleGoogleSignIn}
+            />
+          )}
+          {props.viaGithub && (
+            <HawaLogoButton
+              logo="github"
+              buttonText={props.texts.githubButtonLabel}
+              onClick={props.handleGithubSignIn}
+            />
+          )}
+          {props.viaTwitter && (
+            <HawaLogoButton
+              logo="twitter"
+              buttonText={props.texts.twitterButtonLabel}
+              onClick={props.handleTwitterSignIn}
+            />
+          )}
+        </div>
+      ) : null}
+    </div>
   );
 };
 SignInForm.propTypes = {

package/src/blocks/AuthForms/SignInPhone.js

@@ -1,6 +1,6 @@
-import { Button, Container } from "@mui/material";
 import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
+import { HawaButton } from "../../elements";
 import HawaPhoneInput from "../../elements/HawaPhoneInput";
 
 export const SignInPhone = (props) => {
@@ -12,11 +12,7 @@ export const SignInPhone = (props) => {
     control
   } = methods;
   return (
-    <Container
-      maxWidth="xs"
-      variant="auth"
-      style={{ direction: props.lang === "ar" ? "rtl" : "ltr" }}
-    >
+    <div className="flex flex-col divide-y divide-gray-300 bg-blue-300 rounded-xl p-4">
       <form onSubmit={handleSubmit(props.onSubmit)}>
         <Controller
           control={control}
@@ -34,10 +30,10 @@ export const SignInPhone = (props) => {
             />
           )}
         />
-        <Button fullWidth type="submit" variant="last">
+        <HawaButton fullWidth type="submit">
           {props.SignInButtonText}
-        </Button>
+        </HawaButton>
       </form>
-    </Container>
+    </div>
   );
 };

package/src/blocks/AuthForms/SignUpForm.js

@@ -1,15 +1,12 @@
 import React from "react";
-import { HawaTextField, HawaLogoButton, HawaAlert } from "../../elements";
+import {
+  HawaTextField,
+  HawaLogoButton,
+  HawaAlert,
+  HawaButton
+} from "../../elements";
 import PropTypes from "prop-types";
 import { Controller, FormProvider, useForm } from "react-hook-form";
-import PersonIcon from "@mui/icons-material/PermIdentityOutlined";
-import InputAdornment from "@mui/material/InputAdornment";
-import EmailIcon from "@mui/icons-material/MailOutline";
-import PasswordIcon from "@mui/icons-material/HttpsOutlined";
-import Container from "@mui/material/Container";
-import Divider from "@mui/material/Divider";
-import Typography from "@mui/material/Typography";
-import Button from "@mui/material/Button";
 
 export const SignUpForm = (props) => {
   const methods = useForm();
@@ -20,11 +17,7 @@ export const SignUpForm = (props) => {
   } = methods;
 
   return (
-    <Container
-      maxWidth="xs"
-      variant="auth"
-      style={{ direction: props.lang === "ar" ? "rtl" : "ltr" }}
-    >
+    <div className="flex flex-col divide-y divide-gray-300 bg-blue-300 rounded-xl p-4">
       {props.showError && (
         <HawaAlert
           title={props.errorTitle}
@@ -46,11 +39,6 @@ export const SignUpForm = (props) => {
                 label={props.texts.fullNameLabel}
                 placeholder={props.texts.fullNamePlaceholder}
                 helperText={errors.fullName?.message}
-                startAdornment={
-                  <InputAdornment position="start">
-                    <PersonIcon />
-                  </InputAdornment>
-                }
                 {...field}
               />
             )}
@@ -70,11 +58,6 @@ export const SignUpForm = (props) => {
                 label={props.texts.emailLabel}
                 helperText={errors.email?.message}
                 placeholder={props.texts.emailPlaceholder}
-                startAdornment={
-                  <InputAdornment position="start">
-                    <EmailIcon />
-                  </InputAdornment>
-                }
                 {...field}
               />
             )}
@@ -99,68 +82,54 @@ export const SignUpForm = (props) => {
                 label={props.texts.passwordLabel}
                 placeholder={props.texts.passwordPlaceholder}
                 helperText={errors.password?.message}
-                startAdornment={
-                  <InputAdornment position="start">
-                    <PasswordIcon />
-                  </InputAdornment>
-                }
                 {...field}
               />
             )}
             rules={{ required: props.texts.passwordRequiredText }}
           />
 
-          <Button fullWidth variant="last" type="submit">
+          <HawaButton fullWidth type="submit">
             {props.texts.signUpText}
-          </Button>
+          </HawaButton>
         </form>
       </FormProvider>
 
-      <Typography
-        variant="subtitle2"
-        style={{
-          marginTop: 5,
-          textAlign: "center",
-          padding: 5
-        }}
-      >
+      <div className="font-semibold p-3 text-center text-sm">
         {props.texts.existingUserText}{" "}
         <span
           onClick={props.handleRouteToSignIn}
-          style={{
-            cursor: "pointer",
-            color: "blue",
-            textAlign: "center"
-          }}
+          className="text-blue-600 cursor-pointer"
         >
           {props.texts.signInText}
         </span>
-      </Typography>
-      <Divider />
-      <div style={{ display: "flex", flexDirection: "column" }}>
-        {props.viaGoogle && (
-          <HawaLogoButton
-            logo="google"
-            buttonText={props.texts.googleButtonLabel}
-            onClick={props.handleGoogleSignUp}
-          />
-        )}
-        {props.viaGithub && (
-          <HawaLogoButton
-            logo="github"
-            buttonText={props.texts.githubButtonLabel}
-            onClick={props.handleGithubSignUp}
-          />
-        )}
-        {props.viaTwitter && (
-          <HawaLogoButton
-            logo="twitter"
-            buttonText={props.texts.twitterButtonLabel}
-            onClick={props.handleTwitterSignUp}
-          />
-        )}
       </div>
-    </Container>
+
+      {props.viaGithub || props.viaGoogle || props.viaTwitter ? (
+        <div style={{ display: "flex", flexDirection: "column" }}>
+          {props.viaGoogle && (
+            <HawaLogoButton
+              logo="google"
+              buttonText={props.texts.googleButtonLabel}
+              onClick={props.handleGoogleSignUp}
+            />
+          )}
+          {props.viaGithub && (
+            <HawaLogoButton
+              logo="github"
+              buttonText={props.texts.githubButtonLabel}
+              onClick={props.handleGithubSignUp}
+            />
+          )}
+          {props.viaTwitter && (
+            <HawaLogoButton
+              logo="twitter"
+              buttonText={props.texts.twitterButtonLabel}
+              onClick={props.handleTwitterSignUp}
+            />
+          )}
+        </div>
+      ) : null}
+    </div>
   );
 };
 

package/src/blocks/Payment/ChargeWalletForm.js

@@ -1,8 +1,7 @@
 import React, { useState } from "react";
-import { HawaTextField } from "../../elements";
+import { HawaButton, HawaTextField } from "../../elements";
 import { Controller, FormProvider, useForm } from "react-hook-form";
 import Container from "@mui/material/Container";
-import Button from "@mui/material/Button";
 import Typography from "@mui/material/Typography";
 import PropTypes from "prop-types";
 
@@ -56,9 +55,9 @@ export const ChargeWalletForm = (props) => {
             }}
           />
 
-          <Button type="submit" fullWidth variant="last">
+          <HawaButton type="submit" fullWidth>
             {props.texts.chargeWallet}
-          </Button>
+          </HawaButton>
         </form>
       </FormProvider>
     </Container>

package/src/blocks/Payment/CheckoutForm.js

@@ -1,7 +1,11 @@
 import React from "react";
-import { HawaTextField, HawaTable, HawaSelect } from "../../elements";
+import {
+  HawaTextField,
+  HawaTable,
+  HawaSelect,
+  HawaButton
+} from "../../elements";
 import { Controller, FormProvider, useForm } from "react-hook-form";
-import Button from "@mui/material/Button";
 import Container from "@mui/material/Container";
 import Typography from "@mui/material/Typography";
 import Divider from "@mui/material/Divider";
@@ -236,9 +240,9 @@ export const CheckoutForm = (props) => {
               )}
             />
           </Container>
-          <Button type="submit" fullWidth variant="last">
+          <HawaButton type="submit" fullWidth>
             {props.texts.payNow}
-          </Button>
+          </HawaButton>
         </form>
       </FormProvider>
     </Container>