@sikka/hawa 0.0.217 → 0.0.218

package/package.json

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

package/src/blocks/Account/UserSettingsForm.tsx

@@ -4,24 +4,29 @@ import { HawaContainer } from "../../layout"
 
 type UserSettingsFormTypes = {
   children: any
-  handleSaveSettings: any
-  saveSettingsText: string
+  handleSaveSettings?: any
+  saveSettingsText?: string
+  blockTitle?: string
 }
 
 export const UserSettingsForm: React.FunctionComponent<
   UserSettingsFormTypes
 > = (props) => {
   return (
-    <HawaContainer>
-      {props.children}
-      <HawaButton
+    <div>
+      <div className="mb-2 text-sm font-bold">{props.blockTitle}</div>
+      <div className="flex flex-col gap-4 rounded bg-white p-2">
+        {props.children}
+      </div>
+      {/* <HawaButton
         color="primary"
         // type="submit"
         width="full"
+        margins="none"
         onClick={props.handleSaveSettings}
       >
         {props.saveSettingsText}
-      </HawaButton>
-    </HawaContainer>
+      </HawaButton> */}
+    </div>
   )
 }

package/src/elements/HawaSettingsRow.tsx

@@ -22,6 +22,9 @@ type SettingsRowTypes = {
     min?: any
     max?: any
   }
+  switchProps: {
+    size: "small" | "normal" | "large"
+  }
 }
 
 export const HawaSettingsRow: React.FunctionComponent<SettingsRowTypes> = ({
@@ -31,17 +34,18 @@ export const HawaSettingsRow: React.FunctionComponent<SettingsRowTypes> = ({
   colorProps,
   rangeProps,
   radioProps,
+  switchProps,
 }) => {
   return (
-    <div className="my-0.5  flex h-20 max-h-fit flex-row items-center justify-between rounded bg-white p-6 align-middle">
+    <div className="flex max-h-fit flex-row items-center justify-between rounded  align-middle">
       <div>
-        <div>{settingsLabel}</div>
+        <div className="text-sm">{settingsLabel}</div>
         {settingsDescription && (
-          <div className="text-sm">{settingsDescription}</div>
+          <div className="text-xs">{settingsDescription}</div>
         )}{" "}
       </div>
       {settingsType === "text" && <HawaTextField margin="none" width="small" />}
-      {settingsType === "boolean" && <HawaSwitch size="large" />}
+      {settingsType === "boolean" && <HawaSwitch {...switchProps} />}
       {settingsType === "range" && <HawaRange {...rangeProps} />}
       {settingsType === "color" && <HawaColorPicker {...colorProps} />}
       {settingsType === "radio" && <HawaRadio {...radioProps} />}

package/src/elements/HawaTextField.tsx

@@ -35,16 +35,17 @@ export const HawaTextField: React.FunctionComponent<TextFieldTypes> = ({
     large: "mb-5",
   }
   let widthStyles = {
-    small: "w-full max-w-xs",
+
+    small: "w-full max-w-2xs",
     normal: "w-1/2",
     full: "w-full",
   }
 
   let defaultStyle = "flex h-fit max-h-fit flex-col justify-center"
   let defaultInputStyle =
-    "block w-full rounded border border-gray-300 bg-gray-50 p-2 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+    "block w-full rounded border border-gray-300 bg-white p-2 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
   let previewInputStyle =
-    "block w-full rounded border border-gray-300  p-2 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+    "block w-full rounded bg-gray-50  p-2 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
   // "mb-0 block w-full rounded border border-gray-300 bg-gray-50 p-2  text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500",
 
   return (

package/src/styles.css

@@ -672,10 +672,6 @@ video {
   margin-top: 0px;
   margin-bottom: 0px;
 }
-.my-0\.5 {
-  margin-top: 0.125rem;
-  margin-bottom: 0.125rem;
-}
 .my-1 {
   margin-top: 0.25rem;
   margin-bottom: 0.25rem;
@@ -684,10 +680,6 @@ video {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }
-.my-3 {
-  margin-top: 0.75rem;
-  margin-bottom: 0.75rem;
-}
 .my-4 {
   margin-top: 1rem;
   margin-bottom: 1rem;
@@ -830,9 +822,6 @@ video {
 .h-2\.5 {
   height: 0.625rem;
 }
-.h-20 {
-  height: 5rem;
-}
 .h-24 {
   height: 6rem;
 }
@@ -1579,9 +1568,6 @@ video {
 .p-5 {
   padding: 1.25rem;
 }
-.p-6 {
-  padding: 1.5rem;
-}
 .px-1 {
   padding-left: 0.25rem;
   padding-right: 0.25rem;