Drop mui (#897)

* Mui removed and basic functionality implemented * Put it in working state * button styles * Fix modal styling * Button component * Change checkbox selector * Add hover styles to buttons * bot suggestion * Add package-lock.json back in * switch span to p * Add dev data tags * preventDefault * Fix web3 select box * Correct svg attr * min and max width, margin * Make checkbox component. Address Hugh's review points
prosopo · Dec 20, 2023 · c8277e8 · c8277e8
1 parent dc46694
commit c8277e8
Show file tree

Hide file tree

Showing 14 changed files with 2,756 additions and 327 deletions.
diff --git a/demos/cypress-shared/cypress/support/commands.ts b/demos/cypress-shared/cypress/support/commands.ts
@@ -30,7 +30,7 @@ declare global {
     }
 }
 
-export const checkboxClass = '.PrivateSwitchBase-input'
+export const checkboxClass = '[type="checkbox"]'
 function clickIAmHuman(): Cypress.Chainable<Captcha[]> {
     cy.intercept('GET', '**/prosopo/provider/captcha/**').as('getCaptcha')
     cy.get(checkboxClass, { timeout: 12000 }).first().click()

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/procaptcha-react/src/components/Button.tsx b/packages/procaptcha-react/src/components/Button.tsx
@@ -0,0 +1,78 @@
+import { darkTheme, lightTheme } from './theme.js'
+import React, { ButtonHTMLAttributes, CSSProperties, useMemo, useState } from 'react'
+import addDataAttr from '../util/index.js'
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    themeColor: 'light' | 'dark'
+    buttonType: 'cancel' | 'next'
+    onClick: () => void
+    text: string
+}
+
+const buttonStyleBase: CSSProperties = {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'relative',
+    boxSizing: 'border-box',
+    outline: '0px',
+    border: '0px',
+    margin: '0px',
+    cursor: 'pointer',
+    userSelect: 'none',
+    verticalAlign: 'middle',
+    appearance: undefined,
+    textDecoration: 'none',
+    fontWeight: '500',
+    fontSize: '0.875rem',
+    lineHeight: '1.75',
+    letterSpacing: '0.02857em',
+    textTransform: 'uppercase',
+    minWidth: '64px',
+    padding: '6px 16px',
+    borderRadius: '4px',
+    transition:
+        'background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+    color: 'rgb(0, 0, 0)',
+    backgroundColor: '#ffffff',
+    boxShadow:
+        'rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px',
+}
+
+const Button: React.FC<ButtonProps> = ({ themeColor, buttonType, text, onClick }: ButtonProps) => {
+    const theme = useMemo(() => (themeColor === 'light' ? lightTheme : darkTheme), [themeColor])
+    const [hover, setHover] = useState(false)
+    const buttonStyle = useMemo(() => {
+        const baseStyle = {
+            ...buttonStyleBase,
+            color: hover ? theme.palette.primary.contrastText : theme.palette.background.contrastText,
+        }
+        if (buttonType === 'cancel') {
+            return {
+                ...baseStyle,
+                backgroundColor: hover ? theme.palette.grey[600] : 'transparent',
+            }
+        } else {
+            return {
+                ...baseStyle,
+                backgroundColor: hover ? theme.palette.primary.main : theme.palette.background.default,
+            }
+        }
+    }, [buttonType, hover, theme])
+
+    return (
+        <button
+            {...addDataAttr({ dev: { cy: `button-${buttonType}` } })}
+            onMouseEnter={() => setHover(true)}
+            onMouseLeave={() => setHover(false)}
+            style={buttonStyle}
+            onClick={(e) => {
+                e.preventDefault()
+                onClick()
+            }}
+        >
+            {text}
+        </button>
+    )
+}
+export default Button
diff --git a/packages/procaptcha-react/src/components/CaptchaComponent.tsx b/packages/procaptcha-react/src/components/CaptchaComponent.tsx
@@ -11,13 +11,13 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { Box, Button, Typography } from '@mui/material'
 import { CaptchaWidget } from './CaptchaWidget.js'
 import { GetCaptchaResponse } from '@prosopo/api'
 import { at } from '@prosopo/util'
 import { darkTheme, lightTheme } from './theme.js'
 import { useMemo } from 'react'
 import { useTranslation } from '@prosopo/common'
+import Button from './Button.js'
 import addDataAttr from '../util/index.js'
 
 export interface CaptchaComponentProps {
@@ -47,93 +47,106 @@ const CaptchaComponent = ({
     const theme = useMemo(() => (themeColor === 'light' ? lightTheme : darkTheme), [themeColor])
 
     return (
-        <Box
-            sx={{
+        <div
+            style={{
                 // introduce scroll bars when screen < minWidth of children
                 overflowX: 'auto',
                 overflowY: 'auto',
                 width: '100%',
                 maxWidth: '500px',
                 maxHeight: '100%',
+                display: 'flex',
+                flexDirection: 'column',
             }}
         >
-            <Box
-                bgcolor={theme.palette.background.default}
-                sx={{
+            <div
+                style={{
+                    backgroundColor: theme.palette.background.default,
                     display: 'flex',
                     flexDirection: 'column',
                     minWidth: '300px',
                 }}
             >
-                <Box
-                    px={2}
-                    py={3}
-                    sx={{
+                <div
+                    style={{
                         display: 'flex',
                         alignItems: 'center',
                         width: '100%',
+                        backgroundColor: theme.palette.primary.main,
+                        padding: '24px 16px',
                     }}
-                    bgcolor={theme.palette.primary.main}
                 >
-                    <Typography
-                        sx={{
+                    <p
+                        style={{
                             color: '#ffffff',
                             fontWeight: 700,
+                            lineHeight: 1.5,
                         }}
                     >
                         {t('WIDGET.SELECT_ALL')}
                         {': '}
-                    </Typography>
-                    <Typography
-                        px={1}
-                        sx={{
+                    </p>
+                    <p
+                        style={{
                             color: '#ffffff',
                             fontWeight: 700,
                             textTransform: 'capitalize',
-                            fontSize: theme.typography.h6.fontSize,
+                            lineHeight: 1.5,
                         }}
                     >
                         {`${at(challenge.captchas, index).captcha.target}`}
-                    </Typography>
-                </Box>
-                <Box {...addDataAttr({ dev: { cy: 'captcha-' + index } })}>
-                    {captcha && <CaptchaWidget challenge={captcha} solution={solution} onClick={onClick} />}
-                </Box>
-                <Box
-                    px={2}
-                    py={1}
-                    sx={{
+                    </p>
+                </div>
+                <div {...addDataAttr({ dev: { cy: 'captcha-' + index } })}>
+                    {captcha && (
+                        <CaptchaWidget
+                            challenge={captcha}
+                            solution={solution}
+                            onClick={onClick}
+                            themeColor={themeColor}
+                        />
+                    )}
+                </div>
+                <div
+                    style={{
                         display: 'flex',
                         alignItems: 'center',
                         justifyContent: 'center',
                         width: '100%',
                     }}
                     {...addDataAttr({ dev: { cy: 'dots-captcha' } })}
                 />
-                <Box
-                    px={2}
-                    pt={0}
-                    pb={2}
-                    sx={{
+                <div
+                    style={{
+                        padding: '8px 16px',
+                        display: 'flex',
+                        width: '100%',
+                    }}
+                ></div>
+                <div
+                    style={{
+                        padding: '0 16px 16px',
                         display: 'flex',
                         alignItems: 'center',
                         justifyContent: 'space-between',
+                        lineHeight: 1.75,
                     }}
                 >
-                    <Button onClick={onCancel} variant="text">
-                        {t('WIDGET.CANCEL')}
-                    </Button>
                     <Button
-                        color="primary"
+                        themeColor={themeColor}
+                        buttonType="cancel"
+                        onClick={onCancel}
+                        text={t('WIDGET.CANCEL')}
+                    ></Button>
+                    <Button
+                        themeColor={themeColor}
+                        buttonType="next"
+                        text={index < challenge.captchas.length - 1 ? t('WIDGET.NEXT') : t('WIDGET.SUBMIT')}
                         onClick={index < challenge.captchas.length - 1 ? onNext : onSubmit}
-                        variant="contained"
-                        {...addDataAttr({ dev: { cy: 'button-next' } })}
-                    >
-                        {index < challenge.captchas.length - 1 ? t('WIDGET.NEXT') : t('WIDGET.SUBMIT')}
-                    </Button>
-                </Box>
-            </Box>
-        </Box>
+                    ></Button>
+                </div>
+            </div>
+        </div>
     )
 }