@sikka/hawa 0.0.2 → 0.0.5

package/src/themes/HawaProvider.js

@@ -0,0 +1,87 @@
+import { createContext } from "react";
+
+//make the text color of the action buttons different from the text color of the layout
+export const defaultTheme = {
+  borderRadius: 10,
+  primaryColor: "blue",
+  secondaryColor: "grey",
+  // primaryActionColor: '#f72585', //Colors of the buttons
+  primaryActionColor: "grey", //Colors of the buttons
+  secondaryActionColor: "#4cc9f0", //Colors of the buttons
+  layoutColor: "#d3d4d9", //Colors of boxes and cards
+  textColor: "black", //Colors of text everywhere
+  inputColor: "white", //Color of input fields
+  lightBackground: "#FBF5F3", //
+  darkBackground: "#0F0E0E",
+  margins: 10,
+  paddings: 10,
+  allBorderRadius: 10,
+  actionButton: {
+    primary: {
+      borderRadius: 10,
+      backgroundColor: "#f90900",
+      color: "white",
+      margin: 10,
+      padding: 10
+    },
+    secondary: {
+      borderRadius: 10,
+      margin: 10,
+      padding: 10,
+      backgroundColor: "#FF8811",
+      color: "black"
+    }
+  },
+  layout: {
+    primary: {
+      backgroundColor: "#d3d4d9",
+      color: "black",
+      margin: 10,
+      padding: 10,
+      borderRadius: 10
+    },
+    secondary: {
+      backgroundColor: "#001E3C",
+      // backgroundColor: "red",
+      color: "white",
+      margin: 10,
+      padding: 10,
+      borderRadius: 10
+    }
+  },
+  inputFields: {
+    primary: {
+      backgroundColor: "white",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "flex-start",
+      justifyContent: "flex-start",
+      borderRadius: 10
+    },
+    secondary: {
+      backgroundColor: "white",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "flex-start",
+      justifyContent: "flex-start",
+      borderRadius: 10
+    }
+  }
+};
+
+export const ThemeProvider = createContext(defaultTheme);
+
+export const HawaProvider = ({ theme, ...props }) => {
+  if (props.size === "large") {
+    theme = {
+      ...theme,
+      paddings: 20,
+      margins: 20
+    };
+  }
+  return (
+    <ThemeProvider.Provider value={theme || defaultTheme}>
+      {props.children}
+    </ThemeProvider.Provider>
+  );
+};

package/src/ui/ActionButton.js

@@ -0,0 +1,40 @@
+import Button from "@mui/material/Button";
+import { useContext } from "react";
+import { ThemeProvider } from "../themes/HawaProvider";
+import { styled, darken } from "@mui/material/styles";
+
+export const ActionButton = (props) => {
+  const theme = useContext(ThemeProvider);
+  const currentTheme = Object.keys(theme.actionButton).find(
+    (themeName) => themeName.toLowerCase() === props.themeType?.toLowerCase()
+  );
+  let actionButtonStyle = {};
+
+  if (currentTheme) {
+    actionButtonStyle = {
+      ...theme.actionButton[currentTheme],
+      margin: props.last ? 0 : theme.actionButton[currentTheme].margin,
+      marginTop: props.last ? theme.actionButton[currentTheme].margin * 2 : 0,
+      "&:hover": {
+        backgroundColor: darken(
+          theme.actionButton[currentTheme]?.backgroundColor,
+          0.1
+        )
+      }
+    };
+  } else {
+    actionButtonStyle = {
+      backgroundColor: "black",
+      color: "white",
+      padding: 10,
+      marginTop: props.last ? 10 * 2 : 0
+    };
+  }
+
+  const StyledButton = styled(Button)(({ theme }) => {
+    return {
+      ...actionButtonStyle
+    };
+  });
+  return <StyledButton {...props}>{props.text}</StyledButton>;
+};

package/src/{components/Hawa/AdaptiveButton → ui}/AdaptiveButton.js

@@ -1,254 +1,252 @@
-import React, { useState, useContext } from "react";
-import Button from "@material-ui/core/Button";
-import Tooltip from "@material-ui/core/Tooltip";
-import { motion } from "framer-motion";
-import { ThemeProvider } from "../HawaProvider";
-import { StyledTooltip } from "../StyledTooltip";
-import PropTypes from "prop-types";
-import { getTextColor } from "../../../util";
-
-const AdaptiveButton = (props) => {
-  const { showText } = props;
-  const theme = useContext(ThemeProvider);
-  const screenSize = {
-    width: 1500,
-    height: 200
-  };
-  const [tooltip, setTooltip] = useState(false);
-  const [hovered, setHovered] = useState(false);
-  //full button
-  if (showText) {
-    return (
-      <motion.div
-        transition={{ duration: 0.2 }}
-        whileTap={{ scale: 1.2 }}
-        whileHover={{
-          // backgroundColor: props.hoverColor,
-          borderRadius: theme.borderRadius,
-          color: "red"
-        }}
-        onMouseEnter={() => setHovered(true)}
-        onMouseLeave={() => setHovered(false)}
-        onMouseDown={() => setHovered(true)}
-        onMouseUp={() => setHovered(false)}
-        onMouseOver={() => setHovered(true)}
-        onMouseOut={() => setHovered(false)}
-      >
-        <Button
-          disableRipple
-          disabled={props.disabled}
-          aria-label={props.buttonLabel}
-          color={props.danger ? "secondary" : "primary"}
-          onClick={props.handleClick}
-          style={{
-            backgroundColor: theme.primaryColor,
-            borderRadius: theme.borderRadius,
-            padding: theme.paddings,
-            color: getTextColor(theme.primaryColor)
-            // color: hovered
-            //   ? "#ffffff"
-            //   : props.danger
-            //   ? "#f50057"
-            //   : "var(--blue)"
-          }}
-        >
-          {props.icon}
-          {props.showText ? (
-            <span style={{ marginLeft: props.icon ? 5 : 0 }}>
-              {props.buttonLabel}
-            </span>
-          ) : null}
-        </Button>
-      </motion.div>
-    );
-  } else if (props.buttonLabelOnly) {
-    return (
-      <motion.div
-        transition={{ duration: 0.2 }}
-        initial={{
-          width: "fit-content",
-          backgroundColor: props.buttonColor,
-          borderRadius: theme.borderRadius
-        }}
-        whileTap={{ scale: 1.2 }}
-        whileHover={{
-          backgroundColor: props.hoverColor,
-          borderRadius: theme.borderRadius
-        }}
-        onMouseEnter={() => setHovered(true)}
-        onMouseLeave={() => setHovered(false)}
-        onMouseDown={() => {
-          setHovered(true);
-          setTooltip(true);
-        }}
-        onMouseUp={() => {
-          setHovered(false);
-          setTooltip(true);
-        }}
-        onMouseOver={() => {
-          setHovered(true);
-          setTooltip(true);
-        }}
-        onMouseOut={() => {
-          setHovered(false);
-          // setTooltip(true);
-        }}
-      >
-        <Tooltip
-          placement={screenSize.width > 400 ? "bottom-center" : "top-center"}
-          enterTouchDelay={100}
-          title={
-            props.hint ? (
-              props.hint
-            ) : (
-              <div>
-                <div
-                  style={{
-                    fontSize: 20,
-                    fontWeight: 800,
-                    padding: 10,
-                    paddingBottom: 5,
-                    textAlign: "center"
-                  }}
-                >
-                  {props.hintTitle}
-                </div>
-                <div
-                  style={{
-                    fontSize: 13,
-                    fontWeight: 100,
-                    padding: 10,
-                    textAlign: "center"
-                  }}
-                >
-                  {props.hintContent}
-                </div>
-              </div>
-            )
-          }
-        >
-          <Button
-            disabled={props.disabled}
-            size="small"
-            disableRipple
-            aria-label={props.buttonLabel}
-            onClick={props.handleClick}
-            color={props.danger ? "secondary" : "primary"}
-            style={{
-              padding: 10,
-              color: hovered
-                ? "#ffffff"
-                : props.danger
-                ? "#f50057"
-                : "var(--blue)"
-            }}
-          >
-            {props.buttonLabel}
-          </Button>
-        </Tooltip>
-      </motion.div>
-    );
-  } else {
-    //icon only
-    return (
-      <motion.div
-        transition={{ duration: 0.2 }}
-        initial={{
-          width: "fit-content",
-          backgroundColor: props.buttonColor,
-          borderRadius: theme.borderRadius,
-          // padding: 5,
-          margin: 5
-        }}
-        whileTap={{ scale: 1.2 }}
-        whileHover={{
-          backgroundColor: props.hoverColor,
-          borderRadius: theme.borderRadius
-        }}
-        onMouseEnter={() => setHovered(true)}
-        onMouseLeave={() => setHovered(false)}
-        onMouseDown={() => {
-          setHovered(true);
-          setTooltip(true);
-        }}
-        onMouseUp={() => {
-          setHovered(false);
-          setTooltip(true);
-        }}
-        onMouseOver={() => {
-          setHovered(true);
-          setTooltip(true);
-        }}
-        onMouseOut={() => {
-          setHovered(false);
-          // setTooltip(true);
-        }}
-      >
-        <StyledTooltip hintTitle="Example" hintContent="More explaination here">
-          <Button
-            disabled={props.disabled}
-            size="small"
-            disableRipple
-            aria-label={props.buttonLabel}
-            onClick={props.handleClick}
-            color={props.danger ? "secondary" : "primary"}
-            style={{
-              padding: 10,
-              color: hovered
-                ? "#ffffff"
-                : props.danger
-                ? "#f50057"
-                : "var(--blue)"
-            }}
-          >
-            {props.icon}
-          </Button>
-        </StyledTooltip>
-        {/* <Tooltip
-          placement={screenSize.width > 400 ? "bottom-center" : "top-center"}
-          enterTouchDelay={100}
-          title={
-            props.hint ? (
-              props.hint
-            ) : (
-              <div>
-                <div
-                  style={{
-                    fontSize: 20,
-                    fontWeight: 800,
-                    padding: 10,
-                    paddingBottom: 5,
-                    textAlign: "center"
-                  }}
-                >
-                  {props.hintTitle}
-                </div>
-                <div
-                  style={{
-                    fontSize: 13,
-                    fontWeight: 100,
-                    padding: 10,
-                    textAlign: "center"
-                  }}
-                >
-                  {props.hintContent}
-                </div>
-              </div>
-            )
-          }
-        >
-
-        </Tooltip> */}
-      </motion.div>
-    );
-  }
-};
-
-AdaptiveButton.propTypes = {
-  buttonLabel: PropTypes.string,
-  danger: PropTypes.bool,
-  disabled: PropTypes.bool,
-  showText: PropTypes.bool
-};
-
-export default AdaptiveButton;
+import React, { useState, useContext } from "react";
+import Button from "@mui/material/Button";
+import Tooltip from "@mui/material/Tooltip";
+import { motion } from "framer-motion";
+import PropTypes from "prop-types";
+import { ThemeProvider } from "../themes/HawaProvider";
+import { StyledTooltip } from "./StyledTooltip";
+import { getTextColor } from "../util";
+
+export const AdaptiveButton = (props) => {
+  const { showText } = props;
+  const theme = useContext(ThemeProvider);
+  const screenSize = {
+    width: 1500,
+    height: 200
+  };
+  const [tooltip, setTooltip] = useState(false);
+  const [hovered, setHovered] = useState(false);
+  //full button
+  if (showText) {
+    return (
+      <motion.div
+        transition={{ duration: 0.2 }}
+        whileTap={{ scale: 1.2 }}
+        whileHover={{
+          // backgroundColor: props.hoverColor,
+          borderRadius: theme.borderRadius,
+          color: "red"
+        }}
+        onMouseEnter={() => setHovered(true)}
+        onMouseLeave={() => setHovered(false)}
+        onMouseDown={() => setHovered(true)}
+        onMouseUp={() => setHovered(false)}
+        onMouseOver={() => setHovered(true)}
+        onMouseOut={() => setHovered(false)}
+      >
+        <Button
+          disableRipple
+          disabled={props.disabled}
+          aria-label={props.buttonLabel}
+          color={props.danger ? "secondary" : "primary"}
+          onClick={props.handleClick}
+          style={{
+            backgroundColor: theme.primaryColor,
+            borderRadius: theme.borderRadius,
+            padding: theme.paddings,
+            color: getTextColor(theme.primaryColor)
+            // color: hovered
+            //   ? "#ffffff"
+            //   : props.danger
+            //   ? "#f50057"
+            //   : "var(--blue)"
+          }}
+        >
+          {props.icon}
+          {props.showText ? (
+            <span style={{ marginLeft: props.icon ? 5 : 0 }}>
+              {props.buttonLabel}
+            </span>
+          ) : null}
+        </Button>
+      </motion.div>
+    );
+  } else if (props.buttonLabelOnly) {
+    return (
+      <motion.div
+        transition={{ duration: 0.2 }}
+        initial={{
+          width: "fit-content",
+          backgroundColor: props.buttonColor,
+          borderRadius: theme.borderRadius
+        }}
+        whileTap={{ scale: 1.2 }}
+        whileHover={{
+          backgroundColor: props.hoverColor,
+          borderRadius: theme.borderRadius
+        }}
+        onMouseEnter={() => setHovered(true)}
+        onMouseLeave={() => setHovered(false)}
+        onMouseDown={() => {
+          setHovered(true);
+          setTooltip(true);
+        }}
+        onMouseUp={() => {
+          setHovered(false);
+          setTooltip(true);
+        }}
+        onMouseOver={() => {
+          setHovered(true);
+          setTooltip(true);
+        }}
+        onMouseOut={() => {
+          setHovered(false);
+          // setTooltip(true);
+        }}
+      >
+        <Tooltip
+          placement={screenSize.width > 400 ? "bottom-center" : "top-center"}
+          enterTouchDelay={100}
+          title={
+            props.hint ? (
+              props.hint
+            ) : (
+              <div>
+                <div
+                  style={{
+                    fontSize: 20,
+                    fontWeight: 800,
+                    padding: 10,
+                    paddingBottom: 5,
+                    textAlign: "center"
+                  }}
+                >
+                  {props.hintTitle}
+                </div>
+                <div
+                  style={{
+                    fontSize: 13,
+                    fontWeight: 100,
+                    padding: 10,
+                    textAlign: "center"
+                  }}
+                >
+                  {props.hintContent}
+                </div>
+              </div>
+            )
+          }
+        >
+          <Button
+            disabled={props.disabled}
+            size="small"
+            disableRipple
+            aria-label={props.buttonLabel}
+            onClick={props.handleClick}
+            color={props.danger ? "secondary" : "primary"}
+            style={{
+              padding: 10,
+              color: hovered
+                ? "#ffffff"
+                : props.danger
+                ? "#f50057"
+                : "var(--blue)"
+            }}
+          >
+            {props.buttonLabel}
+          </Button>
+        </Tooltip>
+      </motion.div>
+    );
+  } else {
+    //icon only
+    return (
+      <motion.div
+        transition={{ duration: 0.2 }}
+        initial={{
+          width: "fit-content",
+          backgroundColor: props.buttonColor,
+          borderRadius: theme.borderRadius,
+          // padding: 5,
+          margin: 5
+        }}
+        whileTap={{ scale: 1.2 }}
+        whileHover={{
+          backgroundColor: props.hoverColor,
+          borderRadius: theme.borderRadius
+        }}
+        onMouseEnter={() => setHovered(true)}
+        onMouseLeave={() => setHovered(false)}
+        onMouseDown={() => {
+          setHovered(true);
+          setTooltip(true);
+        }}
+        onMouseUp={() => {
+          setHovered(false);
+          setTooltip(true);
+        }}
+        onMouseOver={() => {
+          setHovered(true);
+          setTooltip(true);
+        }}
+        onMouseOut={() => {
+          setHovered(false);
+          // setTooltip(true);
+        }}
+      >
+        <StyledTooltip hintTitle="Example" hintContent="More explaination here">
+          <Button
+            disabled={props.disabled}
+            size="small"
+            disableRipple
+            aria-label={props.buttonLabel}
+            onClick={props.handleClick}
+            color={props.danger ? "secondary" : "primary"}
+            style={{
+              padding: 10,
+              color: hovered
+                ? "#ffffff"
+                : props.danger
+                ? "#f50057"
+                : "var(--blue)"
+            }}
+          >
+            {props.icon}
+          </Button>
+        </StyledTooltip>
+        {/* <Tooltip
+          placement={screenSize.width > 400 ? "bottom-center" : "top-center"}
+          enterTouchDelay={100}
+          title={
+            props.hint ? (
+              props.hint
+            ) : (
+              <div>
+                <div
+                  style={{
+                    fontSize: 20,
+                    fontWeight: 800,
+                    padding: 10,
+                    paddingBottom: 5,
+                    textAlign: "center"
+                  }}
+                >
+                  {props.hintTitle}
+                </div>
+                <div
+                  style={{
+                    fontSize: 13,
+                    fontWeight: 100,
+                    padding: 10,
+                    textAlign: "center"
+                  }}
+                >
+                  {props.hintContent}
+                </div>
+              </div>
+            )
+          }
+        >
+
+        </Tooltip> */}
+      </motion.div>
+    );
+  }
+};
+
+AdaptiveButton.propTypes = {
+  buttonLabel: PropTypes.string,
+  danger: PropTypes.bool,
+  disabled: PropTypes.bool,
+  showText: PropTypes.bool
+};