update and fix (#5)

* update list 1.2.1& 2.2 add list 2.2.1 * update figma 1.2 & 2.2 * comment out components/Home/ FacebookPosts/Cardlist due to an error in Cardlist list.map is not a function
daodaoedu · May 28, 2023 · 2370d59 · 2370d59
1 parent ada370a
commit 2370d59
Show file tree

Hide file tree

Showing 24 changed files with 778 additions and 147 deletions.
diff --git a/.prettierrc b/.prettierrc
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -0,0 +1,6 @@
+{
+	"singleQuote": true,
+	"trailingComma": "all",
+	"printWidth": 80,
+	"tabWidth": 2
+}
diff --git a/components/Home/FacebookPosts/index.jsx b/components/Home/FacebookPosts/index.jsx
@@ -81,12 +81,12 @@ const Guide = () => {
         isLoading={isLoadingInstagramPosts}
         direction="right"
       />
-      <CardList
+      {/* <CardList
         title="📌 FaceBook 社團貼文"
         list={groupPosts}
         isLoading={isLoadingGroupPosts}
         direction="left"
-      />
+      /> */}
     </GuideWrapper>
   );
 };

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,81 @@
+import { Modal, Box, Typography, Button } from '@mui/material';
+
+function ContactDoneModal() {
+  return (
+    <Modal
+      keepMounted
+      open
+      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',
+          height: '602px',
+          bgcolor: 'background.paper',
+          boxShadow: 24,
+          borderRadius: '16px',
+          p: '45px',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+        }}
+      >
+        <Box sx={{ mt: '77px', mb: '16px' }}>
+          <img
+            src="/assets/contactdone.png"
+            alt="nobody-land"
+            width="312px"
+            height="184px"
+          />
+        </Box>
+        <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%',
+            mt: '8px',
+          }}
+        >
+          請耐心等候夥伴的回應
+        </Typography>
+        <Button
+          sx={{
+            color: 'white',
+            width: '100%',
+            borderRadius: '20px',
+            mt: '145px',
+          }}
+          variant="contained"
+        >
+          關閉
+        </Button>
+      </Box>
+    </Modal>
+  );
+}
+
+export default ContactDoneModal;
diff --git a/components/Profile/Contact/ContactError/index.jsx b/components/Profile/Contact/ContactError/index.jsx
@@ -0,0 +1,66 @@
+import { Modal, Box, Typography, Button } from '@mui/material';
+
+function ContactErrorModal() {
+  return (
+    <Modal
+      keepMounted
+      open
+      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',
+          height: '602px',
+          bgcolor: 'background.paper',
+          boxShadow: 24,
+          borderRadius: '16px',
+          p: '45px',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+        }}
+      >
+        <Box sx={{ mt: '68px', mb: '21px' }}>
+          <img
+            src="/assets/contacterror.png"
+            alt="nobody-land"
+            width="212px"
+            height="184px"
+          />
+        </Box>
+        <Typography
+          id="keep-mounted-modal-title"
+          variant="h3"
+          component="h2"
+          textAlign="center"
+          sx={{
+            color: ' #536166',
+            fontWeight: 700,
+            fontWize: '18px',
+            lineHeight: '120%',
+          }}
+        >
+          哎呀！有不明錯誤
+        </Typography>
+        <Button
+          sx={{
+            color: 'white',
+            width: '100%',
+            borderRadius: '20px',
+            mt: '173px ',
+          }}
+          variant="contained"
+        >
+          再試一次
+        </Button>
+      </Box>
+    </Modal>
+  );
+}
+
+export default ContactErrorModal;