feat(feedback): add button to google form to report errors (#46)

* [ADD] fab button * [ADD] link fab button
ogticrd · Jun 29, 2023 · 4a98c61 · 4a98c61
1 parent 6bbf6a6
commit 4a98c61
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 6 deletions.
diff --git a/src/components/elements/passwordLevel/index.tsx b/src/components/elements/passwordLevel/index.tsx
@@ -22,7 +22,7 @@ const PasswordRequirement: React.FC<PasswordRequirementProps> = ({
   </div>
 );
 
-const PASSWORD_LEVELS = ['Muy Bajo', ' Bajo', ' Medio', ' Fuerte'];
+const PASSWORD_LEVELS = [' Muy Bajo', ' Bajo', ' Medio', ' Fuerte'];
 interface PasswordLevelProps {
   passwordLevel: {
     contains: string[];

diff --git a/src/components/layout/index.tsx b/src/components/layout/index.tsx
@@ -1,13 +1,26 @@
-import Container from "@mui/material/Container";
+import Container from '@mui/material/Container';
+import { Fab } from '@mui/material';
+import LiveHelpOutlinedIcon from '@mui/icons-material/LiveHelpOutlined';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { useTheme } from '@mui/material/styles';
 
-import NavBar from "./navBar";
-import Footer from "./footer";
+import NavBar from './navBar';
+import Footer from './footer';
 
 export default function Index({ children }: any) {
+  const theme = useTheme();
+  const matches = useMediaQuery(theme.breakpoints.up('sm'));
+
   return (
     <>
       <NavBar />
-      <Container sx={{ padding: "50px 0px" }}>{children}</Container>
+      <div style={{ padding: '50px 0px' }}>
+        {children}
+          <Fab onClick={() => window.open("https://docs.google.com/forms/d/e/1FAIpQLSexFmkoGsVbyRS90B1IwRoAjYg6R6mX8IAJiT1BExN9wT7yjA/viewform?usp=pp_url")} size={matches ? 'large' : 'small'} variant={matches ? 'extended' : 'circular'} sx={{ marginTop: '-140px', marginRight: '10px' , float: 'right', background: 'white', textTransform: 'none', fontWeight: 'bold', color: theme.palette.primary.main }}>
+            <LiveHelpOutlinedIcon sx={{ mr: matches ? 1 : 0 }} color='info' />
+            {matches && 'Reportar'}
+          </Fab>
+      </div>
       <Footer />
     </>
   );

diff --git a/src/themes/index.tsx b/src/themes/index.tsx
@@ -20,7 +20,7 @@ export const theme = createTheme({
   typography: {
     fontFamily: ["Poppins", "sans-serif"].join(","),
   },
-
+  
   components: {
     MuiInputLabel: {
       defaultProps: {
@@ -56,6 +56,15 @@ export const theme = createTheme({
           },
         }
       }
+    },
+    MuiStepIcon: {
+      styleOverrides: {
+        root: {
+          '&.Mui-active': {
+            color: "#0087FF",
+          },
+        },
+      },
     }
   },
 });