Styling

patmagauran · May 17, 2023 · 0c6f0e5 · 0c6f0e5
1 parent 0df688e
commit 0c6f0e5
Show file tree

Hide file tree

Showing 5 changed files with 151 additions and 123 deletions.
diff --git a/.gitignore b/.gitignore
@@ -41,4 +41,6 @@ next-env.d.ts
 !.yarn/plugins
 !.yarn/releases
 !.yarn/sdks
-!.yarn/versions
+!.yarn/versions
+
+webpack-stats.json
diff --git a/math2code/src/components/EquationEditorComp.tsx b/math2code/src/components/EquationEditorComp.tsx
@@ -47,7 +47,7 @@ const ControlledMathView = React.memo((props: { onChange?: (arg0: MathfieldEleme
     onLoad={(e) => {
       props.onLoad && props.onLoad(e.currentTarget);
     }}
-
+    containerClassName={styles.mathquill}
     className={styles.mathquill}
     options={{
       mathVirtualKeyboardPolicy: 'manual',

diff --git a/math2code/src/components/HelpDrawer.tsx b/math2code/src/components/HelpDrawer.tsx
@@ -7,159 +7,161 @@ import {
   TableHead,
   TableRow,
   Typography,
-} from "@mui/material";
+} from '@mui/material';
 
-import StaticMathField  from "../components/StaticLatexComp";
+import StaticMathField from '../components/StaticLatexComp';
 
 function createData(func: string, latex: string, formatted?: string) {
   return { func, latex, formatted };
 }
 
 const AlgebraRows = [
-  createData("Addition", "a+b"),
-  createData("Subtraction", "a-b"),
-  createData("Multiplication", "a\\cdot b", "a\\cdot b"),
-  createData("Division", "\\frac{a}{b}"),
-  createData("Exponentiation", "a^b"),
-  createData("Square Root", "\\sqrt{a}"),
-  createData("n-th Root", "\\sqrt[n]{a}"),
-  createData("Absolute Value", "\\left|a\\right|"),
-  createData("Logarithm", "\\log_{a}\\left(b\\right)"),
-  createData("Natural Logarithm", "\\ln\\left(a\\right)"),
-  createData("Modulo", "a \\% b"),
+  createData('Addition', 'a+b'),
+  createData('Subtraction', 'a-b'),
+  createData('Multiplication', 'a\\cdot b', 'a\\cdot b'),
+  createData('Division', '\\frac{a}{b}'),
+  createData('Exponentiation', 'a^b'),
+  createData('Square Root', '\\sqrt{a}'),
+  createData('n-th Root', '\\sqrt[n]{a}'),
+  createData('Absolute Value', '\\left|a\\right|'),
+  createData('Logarithm', '\\log_{a}\\left(b\\right)'),
+  createData('Natural Logarithm', '\\ln\\left(a\\right)'),
+  createData('Modulo', 'a \\% b'),
 ];
 const TrigRows = [
-  createData("sin(x)", "\\sin(x)"),
+  createData('sin(x)', '\\sin(x)'),
   createData(
-    "arcsin(x)",
-    "\\arcsin(x) or \\sin^{-1}(x)",
-    "\\sin^{-1}\\left(x\\right)"
+    'arcsin(x)',
+    '\\arcsin(x) or \\sin^{-1}(x)',
+    '\\sin^{-1}\\left(x\\right)'
   ),
-  createData("cos(x)", "\\cos(x)"),
+  createData('cos(x)', '\\cos(x)'),
   createData(
-    "arccos(x)",
-    "\\arccos(x) or \\cos^{-1}(x)",
-    "\\cos^{-1}\\left(x\\right)"
+    'arccos(x)',
+    '\\arccos(x) or \\cos^{-1}(x)',
+    '\\cos^{-1}\\left(x\\right)'
   ),
-  createData("tan(x)", "\\tan(x)"),
+  createData('tan(x)', '\\tan(x)'),
   createData(
-    "arctan(x)",
-    "\\arctan(x) or \\tan^{-1}(x)",
-    "\\tan^{-1}\\left(x\\right)"
+    'arctan(x)',
+    '\\arctan(x) or \\tan^{-1}(x)',
+    '\\tan^{-1}\\left(x\\right)'
   ),
-  createData("sec(x)", "\\sec(x)"),
+  createData('sec(x)', '\\sec(x)'),
   createData(
-    "arcsec(x)",
-    "\\arcsec(x) or \\sec^{-1}(x)",
-    "\\sec^{-1}\\left(x\\right)"
+    'arcsec(x)',
+    '\\arcsec(x) or \\sec^{-1}(x)',
+    '\\sec^{-1}\\left(x\\right)'
   ),
-  createData("csc(x)", "\\csc(x)"),
+  createData('csc(x)', '\\csc(x)'),
   createData(
-    "arccsc(x)",
-    "\\arccsc(x) or \\csc^{-1}(x)",
-    "\\csc^{-1}\\left(x\\right)"
+    'arccsc(x)',
+    '\\arccsc(x) or \\csc^{-1}(x)',
+    '\\csc^{-1}\\left(x\\right)'
   ),
-  createData("cot(x)", "\\cot(x)"),
+  createData('cot(x)', '\\cot(x)'),
   createData(
-    "arccot(x)",
-    "\\arccot(x) or \\cot^{-1}(x)",
-    "\\cot^{-1}\\left(x\\right)"
+    'arccot(x)',
+    '\\arccot(x) or \\cot^{-1}(x)',
+    '\\cot^{-1}\\left(x\\right)'
   ),
 ];
 
 const HyperbolicRows = [
-  createData("sinh(x)", "\\sinh(x)"),
+  createData('sinh(x)', '\\sinh(x)'),
   createData(
-    "arcsinh(x)",
-    "\\arcsinh(x) or \\sinh^{-1}(x)",
-    "\\sinh^{-1}\\left(x\\right)"
+    'arcsinh(x)',
+    '\\arcsinh(x) or \\sinh^{-1}(x)',
+    '\\sinh^{-1}\\left(x\\right)'
   ),
-  createData("cosh(x)", "\\cosh(x)"),
+  createData('cosh(x)', '\\cosh(x)'),
   createData(
-    "arccosh(x)",
-    "\\arccosh(x) or \\cosh^{-1}(x)",
-    "\\cosh^{-1}\\left(x\\right)"
+    'arccosh(x)',
+    '\\arccosh(x) or \\cosh^{-1}(x)',
+    '\\cosh^{-1}\\left(x\\right)'
   ),
-  createData("tanh(x)", "\\tanh(x)"),
+  createData('tanh(x)', '\\tanh(x)'),
   createData(
-    "arctanh(x)",
-    "\\arctanh(x) or \\tanh^{-1}(x)",
-    "\\tanh^{-1}\\left(x\\right)"
+    'arctanh(x)',
+    '\\arctanh(x) or \\tanh^{-1}(x)',
+    '\\tanh^{-1}\\left(x\\right)'
   ),
-  createData("sech(x)", "\\sech(x)"),
+  createData('sech(x)', '\\sech(x)'),
   createData(
-    "arcsech(x)",
-    "\\arcsech(x) or \\sech^{-1}(x)",
-    "\\sech^{-1}\\left(x\\right)"
+    'arcsech(x)',
+    '\\arcsech(x) or \\sech^{-1}(x)',
+    '\\sech^{-1}\\left(x\\right)'
   ),
-  createData("csch(x)", "\\csch(x)"),
+  createData('csch(x)', '\\csch(x)'),
   createData(
-    "arccsch(x)",
-    "\\arccsch(x) or \\csch^{-1}(x)",
-    "\\csch^{-1}\\left(x\\right)"
+    'arccsch(x)',
+    '\\arccsch(x) or \\csch^{-1}(x)',
+    '\\csch^{-1}\\left(x\\right)'
   ),
-  createData("coth(x)", "\\coth(x)"),
+  createData('coth(x)', '\\coth(x)'),
   createData(
-    "arccoth(x)",
-    "\\arccoth(x) or \\coth^{-1}(x)",
-    "\\coth^{-1}\\left(x\\right)"
+    'arccoth(x)',
+    '\\arccoth(x) or \\coth^{-1}(x)',
+    '\\coth^{-1}\\left(x\\right)'
   ),
 ];
 
 const GreekRows = [
-  createData("alpha", "\\alpha"),
-  createData("beta", "\\beta"),
-  createData("gamma", "\\gamma"),
-  createData("delta", "\\delta"),
-  createData("epsilon", "\\epsilon"),
-  createData("varepsilon", "\\varepsilon"),
-  createData("zeta", "\\zeta"),
-  createData("eta", "\\eta"),
-  createData("theta", "\\theta"),
-  createData("vartheta", "\\vartheta"),
-  createData("iota", "\\iota"),
-  createData("kappa", "\\kappa"),
-  createData("lambda", "\\lambda"),
-  createData("mu", "\\mu"),
-  createData("nu", "\\nu"),
-  createData("xi", "\\xi"),
-  createData("pi", "\\pi"),
-  createData("varpi", "\\varpi"),
-  createData("rho", "\\rho"),
-  createData("varrho", "\\varrho"),
-  createData("sigma", "\\sigma"),
-  createData("varsigma", "\\varsigma"),
-  createData("tau", "\\tau"),
-  createData("upsilon", "\\upsilon"),
-  createData("phi", "\\phi"),
-  createData("varphi", "\\varphi"),
-  createData("chi", "\\chi"),
-  createData("psi", "\\psi"),
-  createData("omega", "\\omega"),
-  createData("Gamma", "\\Gamma"),
-  createData("Delta", "\\Delta"),
-  createData("Theta", "\\Theta"),
-  createData("Lambda", "\\Lambda"),
-  createData("Xi", "\\Xi"),
-  createData("Pi", "\\Pi"),
-  createData("Sigma", "\\Sigma"),
-  createData("Upsilon", "\\Upsilon"),
-  createData("Phi", "\\Phi"),
-  createData("Psi", "\\Psi"),
-  createData("Omega", "\\Omega"),
+  createData('alpha', '\\alpha'),
+  createData('beta', '\\beta'),
+  createData('gamma', '\\gamma'),
+  createData('delta', '\\delta'),
+  createData('epsilon', '\\epsilon'),
+  createData('varepsilon', '\\varepsilon'),
+  createData('zeta', '\\zeta'),
+  createData('eta', '\\eta'),
+  createData('theta', '\\theta'),
+  createData('vartheta', '\\vartheta'),
+  createData('iota', '\\iota'),
+  createData('kappa', '\\kappa'),
+  createData('lambda', '\\lambda'),
+  createData('mu', '\\mu'),
+  createData('nu', '\\nu'),
+  createData('xi', '\\xi'),
+  createData('pi', '\\pi'),
+  createData('varpi', '\\varpi'),
+  createData('rho', '\\rho'),
+  createData('varrho', '\\varrho'),
+  createData('sigma', '\\sigma'),
+  createData('varsigma', '\\varsigma'),
+  createData('tau', '\\tau'),
+  createData('upsilon', '\\upsilon'),
+  createData('phi', '\\phi'),
+  createData('varphi', '\\varphi'),
+  createData('chi', '\\chi'),
+  createData('psi', '\\psi'),
+  createData('omega', '\\omega'),
+  createData('Gamma', '\\Gamma'),
+  createData('Delta', '\\Delta'),
+  createData('Theta', '\\Theta'),
+  createData('Lambda', '\\Lambda'),
+  createData('Xi', '\\Xi'),
+  createData('Pi', '\\Pi'),
+  createData('Sigma', '\\Sigma'),
+  createData('Upsilon', '\\Upsilon'),
+  createData('Phi', '\\Phi'),
+  createData('Psi', '\\Psi'),
+  createData('Omega', '\\Omega'),
 ];
 
 const FunctionSet = (props: {
   Title: string;
   onRowClick: (latex: string) => void;
-  rows: { func: string; latex: string; formatted: string | undefined; }[];
+  rows: { func: string; latex: string; formatted: string | undefined }[];
 }) => {
   const rows = props.rows;
   return (
-    <Box sx={{
-        my: "5px",
-        padding: "5px",
-    }}>
+    <Box
+      sx={{
+        my: '5px',
+        padding: '5px',
+      }}
+    >
       <Typography variant="subtitle1">{props.Title}</Typography>
       <TableContainer>
         <Table padding="none" size="small" aria-label="a dense table">
@@ -174,12 +176,13 @@ const FunctionSet = (props: {
             {rows.map((row) => (
               <TableRow
                 key={row.func}
-                sx={{ "&:last-child td, &:last-child th": { border: 0 },
-                cursor: "pointer" }}
+                sx={{
+                  '&:last-child td, &:last-child th': { border: 0 },
+                  cursor: 'pointer',
+                }}
                 onClick={() => {
-                    props.onRowClick(row.formatted ?? row.latex);
+                  props.onRowClick(row.formatted ?? row.latex);
                 }}
-
               >
                 <TableCell component="th" scope="row">
                   {row.func}
@@ -201,13 +204,39 @@ const FunctionSet = (props: {
 const drawer = (props: { onRowClick: (latex: string) => void }) => {
   return (
     <Box>
+      <Box
+        sx={{
+          my: '5px',
+          padding: '5px',
+        }}
+      >
         <Typography variant="h4">Help</Typography>
-        <Typography paragraph>Here are all the functions supported by the equation editor. You can click on them to insert the command into the editor, type the latex code, or write like normal!</Typography>
-
-      <FunctionSet Title="Algebra" rows={AlgebraRows} onRowClick={props.onRowClick}/>
-      <FunctionSet Title="Trigonometry" rows={TrigRows}  onRowClick={props.onRowClick}/>
-      <FunctionSet Title="Hyperbolic Trigonometry" rows={HyperbolicRows} onRowClick={props.onRowClick} />
-      <FunctionSet Title="Greek Letters" rows={GreekRows} onRowClick={props.onRowClick} />
+        <Typography paragraph>
+          Here are all the functions supported by the equation editor. You can
+          click on them to insert the command into the editor, type the latex
+          code, or write like normal!
+        </Typography>
+      </Box>
+      <FunctionSet
+        Title="Algebra"
+        rows={AlgebraRows}
+        onRowClick={props.onRowClick}
+      />
+      <FunctionSet
+        Title="Trigonometry"
+        rows={TrigRows}
+        onRowClick={props.onRowClick}
+      />
+      <FunctionSet
+        Title="Hyperbolic Trigonometry"
+        rows={HyperbolicRows}
+        onRowClick={props.onRowClick}
+      />
+      <FunctionSet
+        Title="Greek Letters"
+        rows={GreekRows}
+        onRowClick={props.onRowClick}
+      />
     </Box>
   );
 };

diff --git a/math2code/src/pages/index.tsx b/math2code/src/pages/index.tsx
@@ -96,10 +96,7 @@ export default function Home() {
               <Box>
                 <Typography variant="h6">Note:</Typography>
                 <Typography>
-                  This is currently in Alpha Stage and is intended for testing
-                  purposes only. If you encounter any issues please open an
-                  issue on github or let me know. Please verify any output from
-                  this before use.
+                  This is currently in beta. If you encounter any issues please open an issue on github. Please verify any output from this before use.
                 </Typography>
                 <Typography>
                   I Recommend reading over the readme to fully understand the

diff --git a/react-math-view b/react-math-view