update list 1.2.1& 2.2 add list 2.2.1

daodaoedu · Apr 9, 2023 · b6c2bff · b6c2bff
1 parent ada370a
commit b6c2bff
Show file tree

Hide file tree

Showing 10 changed files with 657 additions and 23 deletions.
diff --git a/components/Profile/Accountsetting/index.jsx b/components/Profile/Accountsetting/index.jsx
@@ -0,0 +1,108 @@
+import React from 'react';
+import {
+  Box,
+  Typography,
+  Checkbox,
+  Button,
+  Divider,
+  FormControlLabel,
+} from '@mui/material';
+import { useRouter } from 'next/router';
+import useFirebase from '../../../hooks/useFirebase';
+
+const TypographyStyle = {
+  fontFamily: 'Noto Sans TC',
+  fontStyle: 'normal',
+  fontWeight: '500',
+  fontSize: '16px',
+  lineHeight: '140%',
+  color: '#293A3D',
+};
+
+const AccountSetting = () => {
+  const { push } = useRouter();
+  const { auth, user, signInWithFacebook, signOutWithGoogle } = useFirebase();
+  return (
+    <Box
+      sx={{
+        backgroundColor: '#ffffff',
+        width: '672px',
+        borderRadius: '16px',
+        // border: '1px solid black',
+        padding: '36px 40px',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      <Typography sx={{ fontSize: '22px', color: '#536166' }}>
+        帳號設定
+      </Typography>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'flex-start',
+          width: '544px',
+        }}
+      >
+        <Box sx={{ display: 'flex', flexDirection: 'column', width: '100%' }}>
+          <Typography sx={TypographyStyle}>電子信箱</Typography>
+          <Button
+            variant="contained"
+            disabled
+            sx={{ width: '100%', margin: '8px 0 30px 0' }}
+          >
+            [email protected]
+          </Button>
+        </Box>
+        <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+          <Typography sx={TypographyStyle}>電話驗證</Typography>
+          <Button
+            variant="contained"
+            size="small"
+            sx={{
+              width: '100%',
+              margin: '8px 0 30px 0',
+              backgroundColor: 'white',
+            }}
+          >
+            進行驗證
+          </Button>
+        </Box>
+        <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+          <Typography sx={TypographyStyle}>電子報</Typography>
+          <FormControlLabel
+            sx={{
+              marginTop: '20px',
+              color: '#536166',
+            }}
+            control={<Checkbox />}
+            label="訂閱電子報與島島阿學的新資訊"
+          />
+        </Box>
+        <Divider sx={{ color: '#F3F3F3', margin: '6px 0' }} />
+        <Box sx={{ display: 'flex', flexDirection: 'column', width: '100%' }}>
+          <Typography sx={TypographyStyle}>登出帳號</Typography>
+          <Button
+            variant="contained"
+            sx={{
+              width: '100%',
+              margin: '24px 0 30px 0',
+              backgroundColor: 'white',
+            }}
+            onClick={() => {
+              signOutWithGoogle();
+              push('/');
+            }}
+          >
+            登出
+          </Button>
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default AccountSetting;
diff --git a/components/Profile/Contact/ContactDone/index.jsx b/components/Profile/Contact/ContactDone/index.jsx
@@ -0,0 +1,72 @@
+import { Modal, Box, Typography, Button } from '@mui/material';
+
+function ContactDoneModal({ onClose, onOk, isLoadingSubmit, open }) {
+  return (
+    <Modal
+      keepMounted
+      open={open}
+      onClose={onClose}
+      aria-labelledby="keep-mounted-modal-title"
+      aria-describedby="keep-mounted-modal-description"
+    >
+      <Box
+        sx={{
+          position: 'absolute',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+          width: '480px',
+          bgcolor: 'background.paper',
+          boxShadow: 24,
+          borderRadius: '16px',
+          p: 5,
+        }}
+      >
+        <img
+          src="/assets/partner-popup.png"
+          alt="nobody-land"
+          width="360"
+          height="280"
+        />
+        <Typography
+          id="keep-mounted-modal-title"
+          variant="h3"
+          component="h2"
+          textAlign="center"
+          sx={{
+            color: ' #536166',
+            fontWeight: 700,
+            fontWize: '18px',
+            lineHeight: '120%',
+          }}
+        >
+          已送出邀請
+        </Typography>
+        <Typography
+          id="keep-mounted-modal-subtitle"
+          variant="h6"
+          component="h4"
+          textAlign="center"
+          sx={{
+            color: ' #536166',
+            fontWeight: 400,
+            fontWize: '14px',
+            lineHeight: '140%',
+          }}
+        >
+          請耐心等候夥伴的回應
+        </Typography>
+        <Button
+          sx={{ width: '100%', borderRadius: '20px', mr: '4px' }}
+          variant="outlined"
+          disabled={isLoadingSubmit}
+          onClick={onClose}
+        >
+          關閉
+        </Button>
+      </Box>
+    </Modal>
+  );
+}
+
+export default ContactDoneModal;