@sikka/hawa 0.0.156 → 0.0.158

package/package.json

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

package/src/blocks/AuthForms/SignUpForm.tsx

@@ -58,6 +58,7 @@ type SignUpFormTypes = {
   errorTitle: any
   errorText: any
   signUpFields: any[]
+  isLoading?: boolean
 }
 
 export const SignUpForm: React.FunctionComponent<SignUpFormTypes> = (props) => {
@@ -233,7 +234,7 @@ export const SignUpForm: React.FunctionComponent<SignUpFormTypes> = (props) => {
               </div>
             )}
             {props.showTermsOption && (
-              <div className="py-2">
+              <div>
                 <Controller
                   control={control}
                   name="terms_accepted"
@@ -241,7 +242,10 @@ export const SignUpForm: React.FunctionComponent<SignUpFormTypes> = (props) => {
                     <HawaCheckbox
                       id="terms_accepted"
                       helperText={errors.terms_accepted?.message}
-                      onChange={field.onChange}
+                      onChange={(e) => {
+                        console.log("changing ", e)
+                        field.onChange(e)
+                      }}
                       label={
                         <span>
                           {props.texts.iAcceptText}{" "}
@@ -274,7 +278,12 @@ export const SignUpForm: React.FunctionComponent<SignUpFormTypes> = (props) => {
                 />
               </div>
             )}
-            <HawaButton color="primary" width="full" type="submit">
+            <HawaButton
+              isLoading={props.isLoading}
+              color="primary"
+              width="full"
+              type="submit"
+            >
               {props.texts.signUpText}
             </HawaButton>
           </form>

package/src/blocks/Misc/EmptyState.tsx

@@ -12,7 +12,7 @@ export const EmptyState: React.FunctionComponent<TEmptyState> = ({
   return (
     <HawaContainer variant={variant} centered={true}>
       <div className="flex flex-col items-center justify-center text-center dark:text-white">
-        <div className="flex h-10 w-10 flex-col items-center justify-center rounded-3xl bg-primary-400 text-6xl font-bold">
+        <div className="flex h-10 w-10 flex-col items-center justify-center rounded-3xl bg-buttonPrimary-lighter text-6xl font-bold">
           <FaCheck size={20} />
         </div>
         <div className="m-2 text-xl font-bold">You're all caught up</div>

package/src/elements/HawaButton.tsx

@@ -12,7 +12,7 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   isLoading?: boolean
 }
 
-const baseStyles = "font-medium rounded-lg"
+const baseStyles = "font-medium rounded-lg transition-all"
 
 const sizeStyles = {
   small: "text-xs px-2.5 py-1.5",
@@ -34,16 +34,18 @@ const variantStyles = {
 
 const colorStyles = {
   contained: {
-    default: "text-neutral-900 hover:bg-gray-300 bg-buttonPrimary-default text-white",
+    default:
+      "text-neutral-900 hover:bg-buttonPrimary-darker bg-buttonPrimary-default text-white",
     primary:
       "text-white bg-buttonPrimary-default hover:bg-buttonPrimary-darker transition-all",
     secondary:
-      "text-neutral-900 bg-buttonPrimary-default hover:text-white hover:bg-secondary-700",
+      "text-neutral-900 bg-buttonSecondary-default hover:text-white hover:bg-buttonSecondary-darker",
   },
   outlined: {
     default: "text-gray-600 border-gray-600 hover:bg-gray-200",
     primary: "text-black hover:bg-gray-50",
-    secondary: "text-secondary-800 border-secondary-800 hover:bg-secondary-100",
+    secondary:
+      "text-secondary-800 border-secondary-800 hover:bg-buttonSecondary-darker hover:text-white",
   },
 }
 

package/src/elements/HawaCheckbox.tsx

@@ -1,40 +1,45 @@
-import React from "react"
+import React, { useEffect, useState } from "react"
 
 type TCheckBoxTypes = {
   centered?: boolean
   label?: any
   helperText?: any
   id: string
-  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
+  // onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
+  onChange?: (e) => void
 }
 
 export const HawaCheckbox: React.FunctionComponent<TCheckBoxTypes> = (
   props
 ) => {
+  const [val, setVal] = useState(false)
+
+  useEffect(() => {
+    props.onChange(val)
+  }, [val])
   return (
     <div
       className={
         props.centered
           ? "flex h-full items-center justify-center"
-          : "flex h-full items-start"
+          : "flex h-full items-start "
       }
-      // onClick={(e: any) => props.onChange(e)}
     >
       <input
         type="checkbox"
-        value=""
-        onChange={(e) => props.onChange(e)}
-        className="mt-0.5 rounded border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-blue-600"
+        checked={val}
+        onChange={(e) => setVal(e.target.checked)}
         id={props.id}
         aria-label={props.label}
+        className="mt-3 rounded border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-blue-600"
       />
       {(props.label || props.helperText) && (
-        <div className=" flex flex-col">
+        <div
+          className=" flex cursor-pointer flex-col py-2"
+          onClick={(e) => setVal(!val)}
+        >
           {props.label && (
-            <label
-              htmlFor={props.id}
-              className="mx-2 text-sm font-medium text-gray-900 dark:text-gray-300"
-            >
+            <label className="mx-2 text-sm font-medium text-gray-900 dark:text-gray-300">
               {props.label}
             </label>
           )}

package/src/elements/HawaLogoButton.tsx

@@ -150,7 +150,7 @@ export const HawaLogoButton: React.FunctionComponent<LogoButtonTypes> = (
     <button
       style={{ direction: isArabic ? "rtl" : "ltr" }}
       onClick={props.onClick}
-      className="my-2 flex h-11 w-full flex-row justify-center rounded-xl bg-white hover:ring-1 hover:ring-buttonPrimary-default hover:brightness-90 align-middle"
+      className="transition-all my-2 flex h-11 w-full flex-row justify-center rounded-xl bg-white hover:ring-1 hover:ring-buttonPrimary-default hover:brightness-90 align-middle"
     >
       <div className="flex h-full flex-row items-center justify-end">
         {logoElement}

package/src/elements/HawaMenu.tsx

@@ -93,7 +93,7 @@ export const HawaMenu: React.FunctionComponent<TMenuTypes> = ({
           return (
             <ul
               key={o}
-              className="py-1 bg-layout-1200  text-sm text-gray-700 dark:text-gray-200"
+              className="bg-layout-1200 py-1  text-sm text-gray-700 dark:text-gray-200"
             >
               {group?.map((item) => {
                 return (
@@ -101,7 +101,7 @@ export const HawaMenu: React.FunctionComponent<TMenuTypes> = ({
                     onClick={(e) => item.action(e, item.label)}
                     className={
                       item.isButton
-                        ? "mx-1 my-1 flex cursor-pointer flex-row items-center rounded-lg bg-primary-500 py-2 px-4 text-white hover:bg-primary-600 rtl:flex-row-reverse dark:hover:bg-primary-600 dark:hover:text-white"
+                        ? "mx-1 my-1 flex cursor-pointer flex-row items-center rounded-lg bg-buttonPrimary-default py-2 px-4 text-white hover:bg-buttonPrimary-darker rtl:flex-row-reverse dark:hover:bg-buttonPrimary-darker dark:hover:text-white"
                         : "mx-1 flex cursor-pointer flex-row items-center rounded-lg py-2 px-4 hover:bg-gray-200 rtl:flex-row-reverse dark:hover:bg-gray-600 dark:hover:text-white"
                     }
                   >

package/src/elements/HawaStats.tsx

@@ -15,7 +15,7 @@ export const HawaStats: React.FunctionComponent<StatTypes> = (props) => {
     "flex flex-col gap-1 rounded-lg p-4 text-sm h-fit max-h-fit"
   let statStyles = {
     plain: "",
-    contained: "bg-primary-200 w-fit",
+    contained: "bg-layoutPrimary-default w-fit",
     outlined: "ring-2 w-fit",
   }
   return (

package/src/elements/HawaTabs.tsx

@@ -9,7 +9,7 @@ type TabsTypes = {
 export const HawaTabs: React.FunctionComponent<TabsTypes> = (props) => {
   const [selectedOption, setSelectedOption] = useState(props.defaultValue)
   let activeTabStyle =
-    "inline-block py-2 px-4 text-white bg-primary-500 rounded-lg rounded-br-none rounded-bl-none active"
+    "inline-block py-2 px-4 text-white bg-buttonPrimary-default rounded-lg rounded-br-none rounded-bl-none active"
   let inactiveTabStyle =
     "inline-block py-2 px-4 rounded-lg rounded-br-none rounded-bl-none hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white"
 

package/src/elements/HawaTimeline.tsx

@@ -17,12 +17,12 @@ export const HawaTimeline: React.FunctionComponent<THawaTimeline> = ({
   }
   let lineStyles = {
     vertical: {
-      default: "w-1 h-32 rounded-lg bg-primary-200 ml-6 my-2",
-      selected: "w-1  h-32 rounded-lg bg-primary-400 ml-6 my-2",
+      default: "w-1 h-32 rounded-lg bg-buttonPrimary-default ml-6 my-2",
+      selected: "w-1  h-32 rounded-lg bg-buttonPrimary-default ml-6 my-2",
     },
     horizontal: {
-      default: "h-0.5 w-full rounded-lg bg-primary-200",
-      selected: "h-0.5 w-full rounded-lg bg-primary-400",
+      default: "h-0.5 w-full rounded-lg bg-buttonPrimary-default",
+      selected: "h-0.5 w-full rounded-lg bg-buttonPrimary-default",
     },
   }
   return (
@@ -72,7 +72,7 @@ const TimelineStep = (props) => (
     <div
       className={clsx(
         "m-2 mr-4 flex h-10 w-10 items-center justify-center rounded-xl ring-2 ring-primary-200 ring-offset-2",
-        props.current ? "bg-primary-500 text-white" : "bg-primary-200"
+        props.current ? "bg-buttonPrimary-default text-white" : "bg-primary-200"
       )}
     >
       {props.stepNumber}

package/src/layout/HawaBottomAppBar.tsx

@@ -26,7 +26,7 @@ export const HawaBottomAppBar: React.FunctionComponent<BottomAppBarTypes> = (
       >
         {props.appBarContent.map((singleContent: any) => (
           <div
-            className="m-1 flex h-full w-full flex-col items-center justify-center rounded-lg p-2 transition-all hover:cursor-pointer hover:bg-primary-600 hover:text-white"
+            className="m-1 flex h-full w-full flex-col items-center justify-center rounded-lg p-2 transition-all hover:cursor-pointer hover:bg-buttonPrimary-darker hover:text-white"
             onClick={singleContent.action}
           >
             <div

package/src/styles.css

@@ -377,9 +377,12 @@ video {
   :root {
     --layout-primary: #d2cdfa;
     --layout-secondary: #d2cdfa;
+
     --button-primary: #4c37eb;
-    --button-primary-darker: #cf1736;
-    --button-secondary: #d2cdfa;
+    --button-primary-darker: #2e1dac;
+
+    --button-secondary: #ffc011;
+    --button-secondary-darker: #b48d24;
   }
   input[type="number"]::-webkit-inner-spin-button,
   input[type="number"]::-webkit-outer-spin-button {
@@ -654,11 +657,8 @@ video {
 .mb-0 {
   margin-bottom: 0px;
 }
-.mt-0\.5 {
-  margin-top: 0.125rem;
-}
-.mt-0 {
-  margin-top: 0px;
+.mt-3 {
+  margin-top: 0.75rem;
 }
 .mt-1 {
   margin-top: 0.25rem;
@@ -702,6 +702,9 @@ video {
 .mt-5 {
   margin-top: 1.25rem;
 }
+.mt-0 {
+  margin-top: 0px;
+}
 .ml-3 {
   margin-left: 0.75rem;
 }
@@ -711,9 +714,6 @@ video {
 .mr-1 {
   margin-right: 0.25rem;
 }
-.mt-3 {
-  margin-top: 0.75rem;
-}
 .mt-6 {
   margin-top: 1.5rem;
 }
@@ -1276,8 +1276,7 @@ video {
   background-color: rgb(17 24 39 / var(--tw-bg-opacity));
 }
 .bg-layoutPrimary-default {
-  --tw-bg-opacity: 1;
-  background-color: rgb(210 205 250 / var(--tw-bg-opacity));
+  background-color: var(--layout-primary);
 }
 .bg-white {
   --tw-bg-opacity: 1;
@@ -1307,8 +1306,10 @@ video {
   background-color: transparent;
 }
 .bg-buttonPrimary-default {
-  --tw-bg-opacity: 1;
-  background-color: rgb(76 55 235 / var(--tw-bg-opacity));
+  background-color: var(--button-primary);
+}
+.bg-buttonSecondary-default {
+  background-color: var(--button-secondary);
 }
 .bg-red-200 {
   --tw-bg-opacity: 1;
@@ -1342,10 +1343,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(238 247 252 / var(--tw-bg-opacity));
 }
-.bg-primary-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(61 147 249 / var(--tw-bg-opacity));
-}
 .bg-gray-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(107 114 128 / var(--tw-bg-opacity));
@@ -1362,10 +1359,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(196 222 253 / var(--tw-bg-opacity));
 }
-.bg-primary-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(116 177 251 / var(--tw-bg-opacity));
-}
 .bg-gray-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(75 85 99 / var(--tw-bg-opacity));
@@ -1382,6 +1375,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(209 213 219 / var(--tw-bg-opacity));
 }
+.bg-buttonPrimary-lighter {
+  --tw-bg-opacity: 1;
+  background-color: rgb(237 235 253 / var(--tw-bg-opacity));
+}
 .bg-opacity-75 {
   --tw-bg-opacity: 0.75;
 }
@@ -1845,19 +1842,12 @@ body {
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-gray-300:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-buttonPrimary-darker:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(57 41 176 / var(--tw-bg-opacity));
+  background-color: var(--button-primary-darker);
 }
 
-.hover\:bg-secondary-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(102 132 31 / var(--tw-bg-opacity));
+.hover\:bg-buttonSecondary-darker:hover {
+  background-color: var(--button-secondary-darker);
 }
 
 .hover\:bg-gray-50:hover {
@@ -1865,11 +1855,6 @@ body {
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-primary-600:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(6 92 198 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-blue-200:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(191 219 254 / var(--tw-bg-opacity));
@@ -1932,8 +1917,7 @@ body {
 }
 
 .hover\:ring-buttonPrimary-default:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(76 55 235 / var(--tw-ring-opacity));
+  --tw-ring-color: var(--button-primary);
 }
 
 .hover\:brightness-90:hover {
@@ -2188,9 +2172,8 @@ body {
   background-color: rgb(31 41 55 / var(--tw-bg-opacity));
 }
 
-.dark .dark\:hover\:bg-primary-600:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(6 92 198 / var(--tw-bg-opacity));
+.dark .dark\:hover\:bg-buttonPrimary-darker:hover {
+  background-color: var(--button-primary-darker);
 }
 
 .dark .dark\:hover\:text-white:hover {

package/src/tailwind.css

@@ -6,9 +6,12 @@
   :root {
     --layout-primary: #d2cdfa;
     --layout-secondary: #d2cdfa;
+
     --button-primary: #4c37eb;
-    --button-primary-darker: #cf1736;
-    --button-secondary: #d2cdfa;
+    --button-primary-darker: #2e1dac;
+
+    --button-secondary: #ffc011;
+    --button-secondary-darker: #b48d24;
   }
   input[type="number"]::-webkit-inner-spin-button,
   input[type="number"]::-webkit-outer-spin-button {