@sikka/hawa 0.0.8 → 0.0.11

package/src/themes/HawaProvider.js

@@ -1,183 +1,192 @@
-import { createContext } from "react";
+import { createTheme } from "@mui/system";
+// import { createContext } from "react";
 
-//make the text color of the action buttons different from the text color of the layout
-let allPrimaryBG = "#f90900";
-let allPrimaryAction = "#B20D30";
-export const defaultTheme = {
-  allPrimaryBG: "#f90900",
-  allPrimaryAction: "#138A36",
-  allBorderRadius: 10,
-  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",
-  testcolor: "green",
-  margins: 10,
-  paddings: 10,
-  typography: {
-    fontFamily: ["IBMPlex"].join(","),
-    primary: { color: "black" },
-    secondary: { color: "white" }
-  },
-  logoButton: {
-    primary: {
-      borderRadius: 10,
-      backgroundColor: allPrimaryAction,
-      // margin: 10,
-      marginTop: 10,
-      padding: 30,
-      paddingTop: 0,
-      paddingBottom: 0,
-      border: "1px solid #ced4da",
-      height: 50,
-      "&:focus": {
-        borderColor: allPrimaryAction
-      }
-    },
-    secondary: {
-      borderRadius: 10,
-      backgroundColor: "#f90900",
-      marginTop: 10,
-      padding: 30,
-      paddingTop: 0,
-      paddingBottom: 0,
-      border: "1px solid #ced4da",
-      height: 50,
-      "&:focus": {
-        borderColor: "green"
-      }
-    }
-  },
-  actionButton: {
-    primary: {
-      borderRadius: 10,
-      // backgroundColor: "#f90900",
-      backgroundColor: allPrimaryAction,
-      color: "white",
-      margin: 10,
-      padding: 10,
-      border: "1px solid #ced4da",
-      fontSize: 16,
-      height: 50,
-      "&:focus": {
-        borderColor: "red"
-      }
-    },
-    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",
-      borderRadius: 10,
-      "&:focus": {
-        borderColor: "red",
-        borderWidth: 1,
-        border: "1px solid black"
-      },
-      "&:hover": {
-        borderColor: "red",
-        borderWidth: 1,
-        border: "1px solid black"
-      }
-    },
-    secondary: {
-      backgroundColor: "white",
+// //make the text color of the action buttons different from the text color of the layout
+// let allPrimaryBG = "#f90900";
+// let allPrimaryAction = "#B20D30";
+// export const defaultTheme = {
+//   allPrimaryBG: "#f90900",
+//   allPrimaryAction: "#138A36",
+//   allBorderRadius: 10,
+//   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",
+//   testcolor: "green",
+//   margins: 10,
+//   paddings: 10,
+//   typography: {
+//     fontFamily: ["IBMPlex"].join(","),
+//     primary: { color: "black" },
+//     secondary: { color: "white" }
+//   },
+//   logoButton: {
+//     primary: {
+//       borderRadius: 10,
+//       backgroundColor: allPrimaryAction,
+//       // margin: 10,
+//       marginTop: 10,
+//       padding: 30,
+//       paddingTop: 0,
+//       paddingBottom: 0,
+//       border: "1px solid #ced4da",
+//       height: 50,
+//       "&:focus": {
+//         borderColor: allPrimaryAction
+//       }
+//     },
+//     secondary: {
+//       borderRadius: 10,
+//       backgroundColor: "#f90900",
+//       marginTop: 10,
+//       padding: 30,
+//       paddingTop: 0,
+//       paddingBottom: 0,
+//       border: "1px solid #ced4da",
+//       height: 50,
+//       "&:focus": {
+//         borderColor: "green"
+//       }
+//     }
+//   },
+//   actionButton: {
+//     primary: {
+//       borderRadius: 10,
+//       // backgroundColor: "#f90900",
+//       backgroundColor: allPrimaryAction,
+//       color: "white",
+//       margin: 10,
+//       padding: 10,
+//       border: "1px solid #ced4da",
+//       fontSize: 16,
+//       height: 50,
+//       "&:focus": {
+//         borderColor: "red"
+//       }
+//     },
+//     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",
+//       borderRadius: 10,
+//       padding: 10,
+//       "&:hover": {
+//         borderColor: "red",
+//         borderWidth: 1,
+//         outline: "1px solid black"
+//       }
+//     },
+//     secondary: {
+//       backgroundColor: "white",
+//       borderRadius: 10,
+//       padding: 10
+//     }
+//   },
+//   alerts: {
+//     primary: {
+//       marginBottom: 10,
+//       padding: 10,
+//       borderRadius: 10
+//     },
+//     secondary: {
+//       marginBottom: 10,
+//       padding: 10,
+//       borderRadius: 10
+//     }
+//   },
+//   settingsRow: {
+//     primary: {
+//       display: "flex",
+//       flexDirection: "row",
+//       justifyContent: "space-between",
+//       alignItems: "center",
+//       backgroundColor: "#F5F5F5",
+//       margin: 0,
+//       padding: 10,
+//       borderRadius: 10
+//     },
+//     secondary: {
+//       display: "flex",
+//       flexDirection: "row",
+//       justifyContent: "space-between",
+//       alignItems: "center",
+//       backgroundColor: "blue",
+//       margin: 0,
+//       padding: 5,
+//       borderRadius: 10
+//     }
+//   },
+//   radioSelector: {
+//     primary: {
+//       padding: 10,
+//       borderRadius: 10
+//     },
+//     secondary: {
+//       padding: 10,
+//       borderRadius: 10
+//     }
+//   }
+// };
 
-      borderRadius: 10
-    }
-  },
-  alerts: {
-    primary: {
-      marginBottom: 10,
-      padding: 10,
-      borderRadius: 10
-    },
-    secondary: {
-      marginBottom: 10,
-      padding: 10,
-      borderRadius: 10
-    }
-  },
-  settingsRow: {
-    primary: {
-      display: "flex",
-      flexDirection: "row",
-      justifyContent: "space-between",
-      alignItems: "center",
-      backgroundColor: "#F5F5F5",
-      margin: 0,
-      padding: 10,
-      borderRadius: 10
-    },
-    secondary: {
-      display: "flex",
-      flexDirection: "row",
-      justifyContent: "space-between",
-      alignItems: "center",
-      backgroundColor: "blue",
-      margin: 0,
-      padding: 5,
-      borderRadius: 10
-    }
-  },
-  radioSelector: {
-    primary: {
-      padding: 10,
-      borderRadius: 10
+export const QawaimTheme = createTheme({
+  components: {
+    MuiButton: {
+      variants: [
+        {
+          props: { variant: "withLogo" },
+          style: {
+            textTransform: "none",
+            border: `2px solid blue`,
+            backgroundColor: "red"
+          }
+        },
+        {
+          props: { variant: "dashed", color: "secondary" },
+          style: {
+            border: `4px dashed red`
+          }
+        }
+      ]
     },
-    secondary: {
-      padding: 10,
-      borderRadius: 10
+    MuiButton: {
+      styleOverrides: {
+        // Name of the slot
+        root: {
+          // Some CSS
+          fontSize: "3rem"
+        }
+      }
     }
   }
-};
-
-export const ThemeProvider = createContext(defaultTheme);
-
-export const HawaProvider = ({ theme, ...props }) => {
-  console.log("theme is ", theme);
-  if (props.size === "large") {
-    theme = {
-      ...theme,
-      paddings: 20,
-      margins: 20
-    };
-  }
-  return (
-    <ThemeProvider.Provider
-      value={{ hawaTheme: defaultTheme, themeName: props.themeName }}
-    >
-      {props.children}
-    </ThemeProvider.Provider>
-  );
-};
+});

package/src/themes/QawaimTheme.js

@@ -0,0 +1,199 @@
+import { createTheme } from "@mui/system";
+// import { createContext } from "react";
+
+// //make the text color of the action buttons different from the text color of the layout
+// let allPrimaryBG = "#f90900";
+// let allPrimaryAction = "#B20D30";
+// export const defaultTheme = {
+//   allPrimaryBG: "#f90900",
+//   allPrimaryAction: "#138A36",
+//   allBorderRadius: 10,
+//   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",
+//   testcolor: "green",
+//   margins: 10,
+//   paddings: 10,
+//   typography: {
+//     fontFamily: ["IBMPlex"].join(","),
+//     primary: { color: "black" },
+//     secondary: { color: "white" }
+//   },
+//   logoButton: {
+//     primary: {
+//       borderRadius: 10,
+//       backgroundColor: allPrimaryAction,
+//       // margin: 10,
+//       marginTop: 10,
+//       padding: 30,
+//       paddingTop: 0,
+//       paddingBottom: 0,
+//       border: "1px solid #ced4da",
+//       height: 50,
+//       "&:focus": {
+//         borderColor: allPrimaryAction
+//       }
+//     },
+//     secondary: {
+//       borderRadius: 10,
+//       backgroundColor: "#f90900",
+//       marginTop: 10,
+//       padding: 30,
+//       paddingTop: 0,
+//       paddingBottom: 0,
+//       border: "1px solid #ced4da",
+//       height: 50,
+//       "&:focus": {
+//         borderColor: "green"
+//       }
+//     }
+//   },
+//   actionButton: {
+//     primary: {
+//       borderRadius: 10,
+//       // backgroundColor: "#f90900",
+//       backgroundColor: allPrimaryAction,
+//       color: "white",
+//       margin: 10,
+//       padding: 10,
+//       border: "1px solid #ced4da",
+//       fontSize: 16,
+//       height: 50,
+//       "&:focus": {
+//         borderColor: "red"
+//       }
+//     },
+//     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",
+//       borderRadius: 10,
+//       padding: 10,
+//       "&:hover": {
+//         borderColor: "red",
+//         borderWidth: 1,
+//         outline: "1px solid black"
+//       }
+//     },
+//     secondary: {
+//       backgroundColor: "white",
+//       borderRadius: 10,
+//       padding: 10
+//     }
+//   },
+//   alerts: {
+//     primary: {
+//       marginBottom: 10,
+//       padding: 10,
+//       borderRadius: 10
+//     },
+//     secondary: {
+//       marginBottom: 10,
+//       padding: 10,
+//       borderRadius: 10
+//     }
+//   },
+//   settingsRow: {
+//     primary: {
+//       display: "flex",
+//       flexDirection: "row",
+//       justifyContent: "space-between",
+//       alignItems: "center",
+//       backgroundColor: "#F5F5F5",
+//       margin: 0,
+//       padding: 10,
+//       borderRadius: 10
+//     },
+//     secondary: {
+//       display: "flex",
+//       flexDirection: "row",
+//       justifyContent: "space-between",
+//       alignItems: "center",
+//       backgroundColor: "blue",
+//       margin: 0,
+//       padding: 5,
+//       borderRadius: 10
+//     }
+//   },
+//   radioSelector: {
+//     primary: {
+//       padding: 10,
+//       borderRadius: 10
+//     },
+//     secondary: {
+//       padding: 10,
+//       borderRadius: 10
+//     }
+//   }
+// };
+
+export const QawaimTheme = createTheme({
+  components: {
+    MuiButton: {
+      styleOverrides: {
+        // Name of the slot
+        root: {
+          // Some CSS
+          fontSize: "1rem"
+        }
+      },
+      variants: [
+        {
+          props: { variant: "withLogo" },
+          style: {
+            textTransform: "none",
+            border: `2px solid blue`,
+            backgroundColor: "red"
+          }
+        },
+        {
+          props: { variant: "dashed", color: "secondary" },
+          style: {
+            border: `4px dashed red`
+          }
+        }
+      ]
+    },
+    MuiButton: {
+      styleOverrides: {
+        // Name of the slot
+        root: {
+          // Some CSS
+          fontSize: "3rem"
+        }
+      }
+    }
+  }
+});

package/src/ui/ActionButton.js

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

package/src/ui/AdaptiveButton.js

@@ -1,18 +1,13 @@
-import React, { useState, useContext } from "react";
+import React, { useState } from "react";
 import Button from "@mui/material/Button";
 import Tooltip from "@mui/material/Tooltip";
 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
@@ -26,7 +21,7 @@ export const AdaptiveButton = (props) => {
         onClick={props.handleClick}
         style={{
           backgroundColor: theme.primaryColor,
-          borderRadius: theme.borderRadius,
+          // borderRadius: theme.borderRadius,
           padding: theme.paddings,
           color: getTextColor(theme.primaryColor)
           // color: hovered