@sikka/hawa 0.0.9 → 0.0.12

package/src/ui/HawaAlert.js

@@ -1,37 +1,35 @@
-import React, { useContext } from "react";
-import { ThemeProvider } from "../themes/HawaProvider";
-import { styled } from "@mui/material/styles";
+import React from "react";
+// import { styled } from "@mui/material/styles";
 
 import Alert from "@mui/material/Alert";
 import AlertTitle from "@mui/material/AlertTitle";
 
 export const HawaAlert = (props) => {
-  const { hawaTheme, themeName } = useContext(ThemeProvider);
-  const currentTheme = Object.keys(hawaTheme.alerts).find(
-    (tName) => tName.toLowerCase() === themeName?.toLowerCase()
-  );
-  let alertStyle = {};
+  // const currentTheme = Object.keys(hawaTheme.alerts).find(
+  //   (tName) => tName.toLowerCase() === themeName?.toLowerCase()
+  // );
+  // let alertStyle = {};
 
-  if (currentTheme) {
-    alertStyle = {
-      ...hawaTheme.alerts[currentTheme]
-    };
-  } else {
-    alertStyle = {
-      marginBottom: 10
-    };
-  }
+  // if (currentTheme) {
+  //   alertStyle = {
+  //     ...hawaTheme.alerts[currentTheme]
+  //   };
+  // } else {
+  //   alertStyle = {
+  //     marginBottom: 10
+  //   };
+  // }
 
-  const StyledAlert = styled(Alert)(({ theme }) => {
-    return {
-      ...alertStyle
-    };
-  });
+  // const StyledAlert = styled(Alert)(({ theme }) => {
+  //   return {
+  //     ...alertStyle
+  //   };
+  // });
 
   return (
-    <StyledAlert {...props}>
+    <Alert>
       {props.title && <AlertTitle>{props.title}</AlertTitle>}
       {props.text}
-    </StyledAlert>
+    </Alert>
   );
 };

package/src/ui/HawaButton.js

@@ -1,48 +1,47 @@
-import React, { useContext } from "react";
-import { ThemeProvider } from "../themes/HawaProvider";
-import { styled, darken } from "@mui/material/styles";
+import React from "react";
+// import { ThemeProvider } from "../themes/HawaProvider";
+// import { styled, darken } from "@mui/material/styles";
 import Button from "@mui/material/Button";
 
 export const HawaButton = (props) => {
-  const { hawaTheme, themeName } = useContext(ThemeProvider);
-  let buttonStyle = {};
-  let currentTheme = Object.keys(hawaTheme.actionButton).find(
-    (tName) => tName.toLowerCase() === themeName?.toLowerCase()
-  );
-  if (currentTheme) {
-    buttonStyle = {
-      ...hawaTheme.actionButton[currentTheme],
-      //   marginTop: theme.actionButton[currentTheme].margin,
-      border: props.outlined ? "2px solid black" : "none",
-      //   borderRadius: theme.actionButton[currentTheme].borderRadius,
-      backgroundColor: "white",
-      //   height: 50,
-      "&:hover": {
-        backgroundColor: darken("#ffffff", 0.1)
-      }
-    };
-  } else {
-    // Default theme
-    buttonStyle = {
-      cursor: "pointer",
-      display: "flex",
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: "center",
-      marginTop: hawaTheme.actionButton[currentTheme]?.margin,
-      border: props.outlined ? "2px solid black" : "none",
-      borderRadius: 0,
-      //backgroundColor: "white",
-      backgroundColor: "red",
-      "&:hover": {
-        backgroundColor: darken("#ffffff", 0.1)
-      }
-    };
-  }
-  const StyledButton = styled(Button)(({ theme }) => {
-    return {
-      ...buttonStyle
-    };
-  });
-  return <StyledButton {...props}>{props.children}</StyledButton>;
+  // let buttonStyle = {};
+  // let currentTheme = Object.keys(hawaTheme.actionButton).find(
+  //   (tName) => tName.toLowerCase() === themeName?.toLowerCase()
+  // );
+  // if (currentTheme) {
+  //   buttonStyle = {
+  //     ...hawaTheme.actionButton[currentTheme],
+  //     //   marginTop: theme.actionButton[currentTheme].margin,
+  //     border: props.outlined ? "2px solid black" : "none",
+  //     //   borderRadius: theme.actionButton[currentTheme].borderRadius,
+  //     backgroundColor: "white",
+  //     //   height: 50,
+  //     "&:hover": {
+  //       backgroundColor: darken("#ffffff", 0.1)
+  //     }
+  //   };
+  // } else {
+  //   // Default theme
+  //   buttonStyle = {
+  //     cursor: "pointer",
+  //     display: "flex",
+  //     flexDirection: "row",
+  //     alignItems: "center",
+  //     justifyContent: "center",
+  //     marginTop: hawaTheme.actionButton[currentTheme]?.margin,
+  //     border: props.outlined ? "2px solid black" : "none",
+  //     borderRadius: 0,
+  //     //backgroundColor: "white",
+  //     backgroundColor: "red",
+  //     "&:hover": {
+  //       backgroundColor: darken("#ffffff", 0.1)
+  //     }
+  //   };
+  // }
+  // const StyledButton = styled(Button)(({ theme }) => {
+  //   return {
+  //     ...buttonStyle
+  //   };
+  // });
+  return <Button {...props}>{props.children}</Button>;
 };

package/src/ui/HawaInputLabel.js

@@ -1,31 +1,30 @@
 import InputLabel from "@mui/material/InputLabel";
-import { useContext } from "react";
-import { ThemeProvider } from "../themes/HawaProvider";
 
 export const HawaInputLabel = (props) => {
-  const { hawaTheme, themeName } = useContext(ThemeProvider);
-  let labelStyle = {};
+  // let labelStyle = {};
 
-  let currentTheme = Object.keys(hawaTheme.actionButton).find(
-    (tName) => tName.toLowerCase() === themeName?.toLowerCase()
-  );
-  if (currentTheme) {
-    labelStyle = {
-      margin: 15,
-      marginRight: 5,
-      marginLeft: 5,
-      color: hawaTheme?.layout[currentTheme].color
-    };
-  } else {
-    labelStyle = {
-      margin: 15,
-      marginRight: 0,
-      marginLeft: 0,
-      color: "black"
-    };
-  }
+  // let currentTheme = Object.keys(hawaTheme.actionButton).find(
+  //   (tName) => tName.toLowerCase() === themeName?.toLowerCase()
+  // );
+  // if (currentTheme) {
+  //   labelStyle = {
+  //     margin: 15,
+  //     marginRight: 5,
+  //     marginLeft: 5,
+  //     color: hawaTheme?.layout[currentTheme].color
+  //   };
+  // } else {
+  //   labelStyle = {
+  //     margin: 15,
+  //     marginRight: 0,
+  //     marginLeft: 0,
+  //     color: "black"
+  //   };
+  // }
   return (
-    <InputLabel style={labelStyle}>
+    <InputLabel
+    //  style={labelStyle}
+    >
       <div style={{ fontSize: 15 }}>{props.label}</div>
     </InputLabel>
   );

package/src/ui/HawaLogoButton.js

@@ -1,50 +1,12 @@
-import React, { useContext } from "react";
-import { ThemeProvider } from "../themes/HawaProvider";
-import { styled, darken } from "@mui/material/styles";
+import React from "react";
+// import { styled, darken } from "@mui/material/styles";
 import Button from "@mui/material/Button";
 import GitHubIcon from "@mui/icons-material/GitHub";
 import TwitterIcon from "@mui/icons-material/Twitter";
 import WalletIcon from "@mui/icons-material/AccountBalanceWallet";
+import { Typography } from "@mui/material";
 
 export const HawaLogoButton = (props) => {
-  const { hawaTheme, themeName } = useContext(ThemeProvider);
-  let buttonStyle = {};
-  let currentTheme = Object.keys(hawaTheme.logoButton).find(
-    (tName) => tName.toLowerCase() === themeName?.toLowerCase()
-  );
-  if (currentTheme) {
-    buttonStyle = {
-      ...hawaTheme.logoButton[currentTheme],
-      backgroundColor: "white",
-      "&:hover": {
-        backgroundColor: darken("#ffffff", 0.1)
-      }
-    };
-  } else {
-    // Default theme
-    buttonStyle = {
-      cursor: "pointer",
-      display: "flex",
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: "center",
-      marginTop: 10,
-      height: 50,
-      padding: 30,
-      paddingTop: 0,
-      paddingBottom: 0,
-      border: "1px solid #ced4da",
-      backgroundColor: "white",
-      "&:hover": {
-        backgroundColor: darken("#ffffff", 0.1)
-      }
-    };
-  }
-  const StyledButton = styled(Button)(({ theme }) => {
-    return {
-      ...buttonStyle
-    };
-  });
   let logoElement = "";
   switch (props.logo?.toLowerCase()) {
     case "google":
@@ -118,10 +80,10 @@ export const HawaLogoButton = (props) => {
       break;
   }
   return (
-    <StyledButton {...props}>
+    <Button {...props} variant="withLogo">
       {logoElement}
       <div style={{ width: 10 }} />
-      <p
+      <Typography
         style={{
           color: "black",
           fontSize: 14,
@@ -132,7 +94,7 @@ export const HawaLogoButton = (props) => {
         }}
       >
         {props.buttonText}
-      </p>
-    </StyledButton>
+      </Typography>
+    </Button>
   );
 };

package/src/ui/HawaRadio.js

@@ -1,73 +1,30 @@
-import { Typography } from "@mui/material";
-import React, { useState, useContext } from "react";
-import { Box } from "../layout";
-import { ThemeProvider } from "../themes/HawaProvider";
+import React, { useState } from "react";
+import Button from "@mui/material/Button";
+import Container from "@mui/material/Container";
 
 export const HawaRadio = (props) => {
   const [value, setValue] = useState(props.defaultValue);
-
-  const { hawaTheme, themeName } = useContext(ThemeProvider);
-  const currentTheme = Object.keys(hawaTheme.radioSelector).find(
-    (tName) => tName.toLowerCase() === themeName?.toLowerCase()
-  );
-  let radioSelectorStyle = {};
-
-  if (currentTheme) {
-    radioSelectorStyle = {
-      ...hawaTheme.radioSelector[currentTheme],
-      "-moz-user-select": "-moz-none",
-      "-khtml-user-select": "none",
-      "-webkit-user-select": "none",
-      "-ms-user-select": "none",
-      "user-select": "none"
-    };
-  } else {
-    radioSelectorStyle = {
-      display: "flex",
-      flexDirection: "row",
-      justifyContent: "space-between",
-      alignItems: "center",
-      backgroundColor: "#F5F5F5",
-      margin: 0,
-
-      backgroundColor: "lightGrey",
-      color: "black",
-      padding: 10
-    };
-  }
-
   return (
-    <Box horizontal maxWidth={"fit-content"}>
-      {props.options.map((singleOption) => {
+    <Container variant="selection">
+      {props.options.map((singleOption, i) => {
         return (
-          <div
-            key={singleOption.label}
+          <Button
+            key={i}
             onClick={() => {
-              setValue(singleOption.label);
-              if (props.handleChange) {
-                props.handleChange();
-              }
-            }}
-            style={{
-              ...radioSelectorStyle,
-              backgroundColor:
-                value.toLowerCase() === singleOption.label.toLowerCase()
-                  ? currentTheme
-                    ? hawaTheme.actionButton[currentTheme]?.backgroundColor
-                    : "black"
-                  : hawaTheme?.layout[currentTheme]?.backgroundColor,
-              color:
-                value.toLowerCase() === singleOption.label.toLowerCase()
-                  ? hawaTheme.actionButton[currentTheme]?.color
-                  : currentTheme
-                  ? hawaTheme?.layout[currentTheme]?.color
-                  : "black"
+              props.handleChange(singleOption.value);
+              setValue(singleOption.value);
             }}
+            fullWidth
+            variant={
+              value?.toLowerCase() === singleOption.value?.toLowerCase()
+                ? "selected"
+                : "unselected"
+            }
           >
-            <Typography>{singleOption.text}</Typography>
-          </div>
+            {singleOption.label}
+          </Button>
         );
       })}
-    </Box>
+    </Container>
   );
 };

package/src/ui/HawaSettingsRow.js

@@ -1,38 +1,12 @@
-import React, { useContext } from "react";
+import React from "react";
 
 import PropTypes from "prop-types";
-import { ThemeProvider } from "../themes/HawaProvider";
 import { Box } from "../layout";
 import Checkbox from "@mui/material/Checkbox";
 import TextField from "@mui/material/TextField";
 import { HawaTypography } from "./HawaTypography";
 export const HawaSettingsRow = (props) => {
-  const { hawaTheme, themeName } = useContext(ThemeProvider);
-  const currentTheme = Object.keys(hawaTheme.settingsRow).find(
-    (tName) => tName.toLowerCase() === themeName?.toLowerCase()
-  );
-  let settingsRowStyle = {};
-
-  if (currentTheme) {
-    settingsRowStyle = {
-      ...hawaTheme.settingsRow[currentTheme],
-      margin: props.last ? 0 : hawaTheme.settingsRow[currentTheme].margin,
-      marginTop: props.last ? hawaTheme.settingsRow[currentTheme].margin * 2 : 0
-    };
-  } else {
-    settingsRowStyle = {
-      display: "flex",
-      flexDirection: "row",
-      justifyContent: "space-between",
-      alignItems: "center",
-      backgroundColor: "#F5F5F5",
-      margin: 0,
 
-      backgroundColor: "lightGrey",
-      color: "black",
-      padding: 10
-    };
-  }
 
   return (
     <Box noColor>

package/src/ui/HawaTextArea.js

@@ -15,7 +15,7 @@ export const HawaTextArea = (props) => {
             style={{
               color: "black",
               backgroundColor: props.bgColor || "white",
-              borderRadius: props.bdRadius || 10,
+              // borderRadius: props.bdRadius || 10,
               borderBottom: "none",
               border: "none",
               width: "100%",