@sikka/hawa 0.0.5 → 0.0.8

package/src/ui/GooglePayButton.js

@@ -1,94 +0,0 @@
-import React, { useContext } from "react";
-import { ThemeProvider } from "../themes/HawaProvider";
-import Button from "@mui/material/Button";
-import { styled, darken } from "@mui/material/styles";
-
-import GitHubIcon from "@mui/icons-material/GitHub";
-
-export const GooglePayButton = (props) => {
-  const theme = useContext(ThemeProvider);
-  let buttonStyle = {};
-
-  console.log(Object.keys(theme.actionButton));
-  let currentTheme = Object.keys(theme.actionButton).find(
-    (themeName) => themeName.toLowerCase() === props.themeType?.toLowerCase()
-  );
-  if (currentTheme) {
-    buttonStyle = {
-      cursor: "pointer",
-      display: "flex",
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: "center",
-      padding: 0,
-      marginTop: theme.actionButton[currentTheme].margin,
-      border: props.outlined ? "2px solid black" : "none",
-      borderRadius: theme.actionButton[currentTheme].borderRadius,
-      backgroundColor: "white",
-      "&:hover": {
-        backgroundColor: darken("#ffffff", 0.1)
-      }
-    };
-  } else {
-    buttonStyle = {
-      cursor: "pointer",
-      display: "flex",
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: "center",
-      marginTop: theme.margins,
-      border: props.outlined ? "2px solid black" : "none",
-      borderRadius: 0,
-      backgroundColor: "white",
-      "&:hover": {
-        backgroundColor: darken("#ffffff", 0.1)
-      }
-    };
-  }
-
-  const StyledButton = styled(Button)(({ theme }) => {
-    return {
-      // "label + &": {
-      //   marginTop: theme.spacing(3)
-      // },
-
-      borderRadius: 4,
-      position: "relative",
-      border: "1px solid #ced4da",
-      fontSize: 16,
-      // width: "auto",
-      height: 50,
-      // padding: "10px 12px",
-      ...buttonStyle,
-      "&:focus": {
-        // boxShadow: `${alpha(theme.palette.primary.main, 0.25)} 0 0 0 0.2rem`,
-        borderColor: theme.palette.primary.main
-      }
-    };
-  });
-
-  return (
-    <StyledButton
-      //  style={buttonStyle}
-      onClick={props.handleClick}
-    >
-      <img
-        src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/google-pay.png"
-        height={30}
-      />{" "}
-      <div style={{ width: 10 }} />
-      <p
-        style={{
-          color: "black",
-          fontSize: 14,
-          textAlign: "center",
-          letterSpacing: 0.4,
-          fontFamily: "Roboto",
-          fontWeight: 500
-        }}
-      >
-        {props.buttonText}
-      </p>
-    </StyledButton>
-  );
-};

package/src/ui/MadaButton.js

@@ -1,94 +0,0 @@
-import React, { useContext } from "react";
-import { ThemeProvider } from "../themes/HawaProvider";
-import Button from "@mui/material/Button";
-import { styled, darken } from "@mui/material/styles";
-
-import GitHubIcon from "@mui/icons-material/GitHub";
-
-export const MadaButton = (props) => {
-  const theme = useContext(ThemeProvider);
-  let buttonStyle = {};
-
-  console.log(Object.keys(theme.actionButton));
-  let currentTheme = Object.keys(theme.actionButton).find(
-    (themeName) => themeName.toLowerCase() === props.themeType?.toLowerCase()
-  );
-  if (currentTheme) {
-    buttonStyle = {
-      cursor: "pointer",
-      display: "flex",
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: "center",
-      padding: 0,
-      marginTop: theme.actionButton[currentTheme].margin,
-      border: props.outlined ? "2px solid black" : "none",
-      borderRadius: theme.actionButton[currentTheme].borderRadius,
-      backgroundColor: "white",
-      "&:hover": {
-        backgroundColor: darken("#ffffff", 0.1)
-      }
-    };
-  } else {
-    buttonStyle = {
-      cursor: "pointer",
-      display: "flex",
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: "center",
-      marginTop: theme.margins,
-      border: props.outlined ? "2px solid black" : "none",
-      borderRadius: 0,
-      backgroundColor: "white",
-      "&:hover": {
-        backgroundColor: darken("#ffffff", 0.1)
-      }
-    };
-  }
-
-  const StyledButton = styled(Button)(({ theme }) => {
-    return {
-      // "label + &": {
-      //   marginTop: theme.spacing(3)
-      // },
-
-      borderRadius: 4,
-      position: "relative",
-      border: "1px solid #ced4da",
-      fontSize: 16,
-      // width: "auto",
-      height: 50,
-      // padding: "10px 12px",
-      ...buttonStyle,
-      "&:focus": {
-        // boxShadow: `${alpha(theme.palette.primary.main, 0.25)} 0 0 0 0.2rem`,
-        borderColor: theme.palette.primary.main
-      }
-    };
-  });
-
-  return (
-    <StyledButton
-      //  style={buttonStyle}
-      onClick={props.handleClick}
-    >
-      <img
-        src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/mada.png"
-        height={30}
-      />{" "}
-      <div style={{ width: 10 }} />
-      <p
-        style={{
-          color: "black",
-          fontSize: 14,
-          textAlign: "center",
-          letterSpacing: 0.4,
-          fontFamily: "Roboto",
-          fontWeight: 500
-        }}
-      >
-        {props.buttonText}
-      </p>
-    </StyledButton>
-  );
-};

package/src/ui/PayPalButton.js

@@ -1,94 +0,0 @@
-import React, { useContext } from "react";
-import { ThemeProvider } from "../themes/HawaProvider";
-import Button from "@mui/material/Button";
-import { styled, darken } from "@mui/material/styles";
-
-import GitHubIcon from "@mui/icons-material/GitHub";
-
-export const PayPalButton = (props) => {
-  const theme = useContext(ThemeProvider);
-  let buttonStyle = {};
-
-  console.log(Object.keys(theme.actionButton));
-  let currentTheme = Object.keys(theme.actionButton).find(
-    (themeName) => themeName.toLowerCase() === props.themeType?.toLowerCase()
-  );
-  if (currentTheme) {
-    buttonStyle = {
-      cursor: "pointer",
-      display: "flex",
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: "center",
-      padding: 0,
-      marginTop: theme.actionButton[currentTheme].margin,
-      border: props.outlined ? "2px solid black" : "none",
-      borderRadius: theme.actionButton[currentTheme].borderRadius,
-      backgroundColor: "white",
-      "&:hover": {
-        backgroundColor: darken("#ffffff", 0.1)
-      }
-    };
-  } else {
-    buttonStyle = {
-      cursor: "pointer",
-      display: "flex",
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: "center",
-      marginTop: theme.margins,
-      border: props.outlined ? "2px solid black" : "none",
-      borderRadius: 0,
-      backgroundColor: "white",
-      "&:hover": {
-        backgroundColor: darken("#ffffff", 0.1)
-      }
-    };
-  }
-
-  const StyledButton = styled(Button)(({ theme }) => {
-    return {
-      // "label + &": {
-      //   marginTop: theme.spacing(3)
-      // },
-
-      borderRadius: 4,
-      position: "relative",
-      border: "1px solid #ced4da",
-      fontSize: 16,
-      // width: "auto",
-      height: 50,
-      // padding: "10px 12px",
-      ...buttonStyle,
-      "&:focus": {
-        // boxShadow: `${alpha(theme.palette.primary.main, 0.25)} 0 0 0 0.2rem`,
-        borderColor: theme.palette.primary.main
-      }
-    };
-  });
-
-  return (
-    <StyledButton
-      //  style={buttonStyle}
-      onClick={props.handleClick}
-    >
-      <img
-        src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/paypal.png"
-        height={30}
-      />{" "}
-      <div style={{ width: 10 }} />
-      <p
-        style={{
-          color: "black",
-          fontSize: 14,
-          textAlign: "center",
-          letterSpacing: 0.4,
-          fontFamily: "Roboto",
-          fontWeight: 500
-        }}
-      >
-        {props.buttonText}
-      </p>
-    </StyledButton>
-  );
-};

package/src/ui/RadioSelector.js

@@ -1,51 +0,0 @@
-import React, { useState, useContext } from "react";
-import { ThemeProvider } from "../themes/HawaProvider";
-
-export const StyledRadioSelector = (props) => {
-  const [value, setValue] = useState(props.defaultValue);
-  const theme = useContext(ThemeProvider);
-
-  return (
-    <div
-      style={{
-        backgroundColor: "white",
-        display: "flex",
-        flexDirection: "row",
-        margin: theme.margins,
-        padding: theme.paddings,
-        marginBottom: 10
-      }}
-    >
-      {props.options.map((singleOption) => {
-        return (
-          <div
-            key={singleOption.label}
-            className="radio_option"
-            onClick={() => {
-              setValue(singleOption.label);
-              if (props.handleChange) {
-                props.handleChange();
-              }
-            }}
-            style={
-              value.toLowerCase() === singleOption.label.toLowerCase()
-                ? {
-                    borderRadius: theme.borderRadius,
-                    padding: theme.paddings,
-                    backgroundColor:
-                      theme.primaryColor || props.bgSelectedColor || "blue",
-                    color: props.textSelectedColor || "lightgray"
-                  }
-                : {
-                    borderRadius: theme.borderRadius,
-                    padding: theme.paddings
-                  }
-            }
-          >
-            {singleOption.text}
-          </div>
-        );
-      })}
-    </div>
-  );
-};

package/src/ui/STCPayButton.js

@@ -1,94 +0,0 @@
-import React, { useContext } from "react";
-import { ThemeProvider } from "../themes/HawaProvider";
-import Button from "@mui/material/Button";
-import { styled, darken } from "@mui/material/styles";
-
-import GitHubIcon from "@mui/icons-material/GitHub";
-
-export const STCPayButton = (props) => {
-  const theme = useContext(ThemeProvider);
-  let buttonStyle = {};
-
-  console.log(Object.keys(theme.actionButton));
-  let currentTheme = Object.keys(theme.actionButton).find(
-    (themeName) => themeName.toLowerCase() === props.themeType?.toLowerCase()
-  );
-  if (currentTheme) {
-    buttonStyle = {
-      cursor: "pointer",
-      display: "flex",
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: "center",
-      padding: 0,
-      marginTop: theme.actionButton[currentTheme].margin,
-      border: props.outlined ? "2px solid black" : "none",
-      borderRadius: theme.actionButton[currentTheme].borderRadius,
-      backgroundColor: "white",
-      "&:hover": {
-        backgroundColor: darken("#ffffff", 0.1)
-      }
-    };
-  } else {
-    buttonStyle = {
-      cursor: "pointer",
-      display: "flex",
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: "center",
-      marginTop: theme.margins,
-      border: props.outlined ? "2px solid black" : "none",
-      borderRadius: 0,
-      backgroundColor: "white",
-      "&:hover": {
-        backgroundColor: darken("#ffffff", 0.1)
-      }
-    };
-  }
-
-  const StyledButton = styled(Button)(({ theme }) => {
-    return {
-      // "label + &": {
-      //   marginTop: theme.spacing(3)
-      // },
-
-      borderRadius: 4,
-      position: "relative",
-      border: "1px solid #ced4da",
-      fontSize: 16,
-      // width: "auto",
-      height: 50,
-      // padding: "10px 12px",
-      ...buttonStyle,
-      "&:focus": {
-        // boxShadow: `${alpha(theme.palette.primary.main, 0.25)} 0 0 0 0.2rem`,
-        borderColor: theme.palette.primary.main
-      }
-    };
-  });
-
-  return (
-    <StyledButton
-      //  style={buttonStyle}
-      onClick={props.handleClick}
-    >
-      <img
-        src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/stc-pay.png"
-        height={30}
-      />{" "}
-      <div style={{ width: 10 }} />
-      <p
-        style={{
-          color: "black",
-          fontSize: 14,
-          textAlign: "center",
-          letterSpacing: 0.4,
-          fontFamily: "Roboto",
-          fontWeight: 500
-        }}
-      >
-        {props.buttonText}
-      </p>
-    </StyledButton>
-  );
-};

package/src/ui/StyledAlert.js

@@ -1,30 +0,0 @@
-import React, { useContext } from "react";
-import { ThemeProvider } from "../themes/HawaProvider";
-
-export const StyledAlert = (props) => {
-  const theme = useContext(ThemeProvider);
-
-  let alertStyle = {
-    backgroundColor: "green",
-    padding: 10,
-    marginTop: 10,
-    marginBottom: 10,
-    borderRadius: theme.borderRadius
-  };
-  switch (props.type) {
-    case "warning":
-      alertStyle.backgroundColor = "yellow";
-      return <div style={alertStyle}>{props.text}</div>;
-      break;
-    case "danger":
-      alertStyle.backgroundColor = "red";
-      return <div style={alertStyle}>{props.text}</div>;
-      break;
-    case "notification":
-      alertStyle.backgroundColor = "blue";
-      return <div style={alertStyle}>{props.text}</div>;
-      break;
-    default:
-      return <div style={alertStyle}>{props.text}</div>;
-  }
-};

package/src/ui/TwitterButton.js

@@ -1,84 +0,0 @@
-import React, { useContext } from "react";
-import { ThemeProvider } from "../themes/HawaProvider";
-import TwitterIcon from "@mui/icons-material/Twitter";
-import Button from "@mui/material/Button";
-import { styled, alpha, darken } from "@mui/material/styles";
-
-export const TwitterButton = (props) => {
-  const theme = useContext(ThemeProvider);
-  let buttonStyle = {};
-
-  console.log(Object.keys(theme.actionButton));
-  let currentTheme = Object.keys(theme.actionButton).find(
-    (themeName) => themeName.toLowerCase() === props.themeType?.toLowerCase()
-  );
-  if (currentTheme) {
-    buttonStyle = {
-      cursor: "pointer",
-      display: "flex",
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: "center",
-      marginTop: theme.layout[currentTheme].margin,
-      border: props.outlined ? "2px solid black" : "none",
-      borderRadius: theme.layout[currentTheme].borderRadius,
-      backgroundColor: "white",
-      "&:hover": {
-        backgroundColor: darken("#ffffff", 0.1)
-      }
-    };
-  } else {
-    buttonStyle = {
-      cursor: "pointer",
-      display: "flex",
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: "center",
-      marginTop: theme.margins,
-      border: props.outlined ? "2px solid black" : "none",
-      borderRadius: 0,
-      backgroundColor: "white",
-      "&:hover": {
-        backgroundColor: darken("#ffffff", 0.1)
-      }
-    };
-  }
-  const StyledButton = styled(Button)(({ theme }) => {
-    return {
-      // "label + &": {
-      //   marginTop: theme.spacing(3)
-      // },
-
-      borderRadius: 4,
-      position: "relative",
-      border: "1px solid #ced4da",
-      fontSize: 16,
-      // width: "auto",
-      height: 50,
-      // padding: "10px 12px",
-      ...buttonStyle,
-      "&:focus": {
-        // boxShadow: `${alpha(theme.palette.primary.main, 0.25)} 0 0 0 0.2rem`,
-        borderColor: theme.palette.primary.main
-      }
-    };
-  });
-  return (
-    <StyledButton onClick={props.handleClick}>
-      <TwitterIcon />
-      <div style={{ width: 10 }} />
-      <p
-        style={{
-          color: "black",
-          fontSize: 14,
-          textAlign: "center",
-          letterSpacing: 0.4,
-          fontFamily: "Roboto",
-          fontWeight: 500
-        }}
-      >
-        {props.buttonText}
-      </p>
-    </StyledButton>
-  );
-};

package/src/ui/VisaMasterButton.js

@@ -1,94 +0,0 @@
-import React, { useContext } from "react";
-import { ThemeProvider } from "../themes/HawaProvider";
-import Button from "@mui/material/Button";
-import { styled, darken } from "@mui/material/styles";
-
-import GitHubIcon from "@mui/icons-material/GitHub";
-
-export const VisaMasterButton = (props) => {
-  const theme = useContext(ThemeProvider);
-  let buttonStyle = {};
-
-  console.log(Object.keys(theme.actionButton));
-  let currentTheme = Object.keys(theme.actionButton).find(
-    (themeName) => themeName.toLowerCase() === props.themeType?.toLowerCase()
-  );
-  if (currentTheme) {
-    buttonStyle = {
-      cursor: "pointer",
-      display: "flex",
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: "center",
-      padding: 0,
-      marginTop: theme.actionButton[currentTheme].margin,
-      border: props.outlined ? "2px solid black" : "none",
-      borderRadius: theme.actionButton[currentTheme].borderRadius,
-      backgroundColor: "white",
-      "&:hover": {
-        backgroundColor: darken("#ffffff", 0.1)
-      }
-    };
-  } else {
-    buttonStyle = {
-      cursor: "pointer",
-      display: "flex",
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: "center",
-      marginTop: theme.margins,
-      border: props.outlined ? "2px solid black" : "none",
-      borderRadius: 0,
-      backgroundColor: "white",
-      "&:hover": {
-        backgroundColor: darken("#ffffff", 0.1)
-      }
-    };
-  }
-
-  const StyledButton = styled(Button)(({ theme }) => {
-    return {
-      // "label + &": {
-      //   marginTop: theme.spacing(3)
-      // },
-
-      borderRadius: 4,
-      position: "relative",
-      border: "1px solid #ced4da",
-      fontSize: 16,
-      // width: "auto",
-      height: 50,
-      // padding: "10px 12px",
-      ...buttonStyle,
-      "&:focus": {
-        // boxShadow: `${alpha(theme.palette.primary.main, 0.25)} 0 0 0 0.2rem`,
-        borderColor: theme.palette.primary.main
-      }
-    };
-  });
-
-  return (
-    <StyledButton
-      //  style={buttonStyle}
-      onClick={props.handleClick}
-    >
-      <img
-        src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/visa-master.png"
-        height={30}
-      />{" "}
-      <div style={{ width: 10 }} />
-      <p
-        style={{
-          color: "black",
-          fontSize: 14,
-          textAlign: "center",
-          letterSpacing: 0.4,
-          fontFamily: "Roboto",
-          fontWeight: 500
-        }}
-      >
-        {props.buttonText}
-      </p>
-    </StyledButton>
-  );
-};