Merge pull request #288 from Gateway-DAO/release/nov-29

Release - November 29th (Prod)

.graphqlrc.ts

@@ -32,7 +32,7 @@ const config: IGraphQLConfig = {
       generates: {
         './apps/website/services-cyberconnect/types.generated.ts': {
           ...generateConfig,
-          schema: process.env.NEXT_PUBLIC_CYBERCONNECT_ENDPOINT as string,
+          schema: process.env.CYBERCONNECT_ENDPOINT as string,
           documents: ['apps/website/services-cyberconnect/**/*.gql'],
         },
         './apps/website/services/graphql/types.generated.ts': {

apps/website/components/atoms/task-icon/index.ts

@@ -0,0 +1,2 @@
+export * from './task-icon';
+export * from './types';

apps/website/components/atoms/task-icon/task-icon.tsx

@@ -0,0 +1,64 @@
+import { PhotoCameraBack } from '@mui/icons-material';
+import ElectricBoltIcon from '@mui/icons-material/ElectricBolt';
+import GitHubIcon from '@mui/icons-material/GitHub';
+import InsertLinkIcon from '@mui/icons-material/InsertLink';
+import MonetizationOnIcon from '@mui/icons-material/MonetizationOn';
+import NumbersIcon from '@mui/icons-material/Numbers';
+import QuizIcon from '@mui/icons-material/Quiz';
+import StarIcon from '@mui/icons-material/Star';
+import Twitter from '@mui/icons-material/Twitter';
+import Box from '@mui/material/Box';
+import { SvgIcon, SvgIconProps } from '@mui/material';
+import { useMemo } from 'react';
+import { SxProps } from '@mui/material';
+import { TaskType } from './types';
+
+export function TaskIcon({ type, sx }: { type: TaskType; sx?: SxProps }) {
+  const iconBgColor =
+    {
+      self_verify: '#9A53FF',
+      quiz: '#9A53FF',
+      token_hold: '#9A53FF',
+      nft_hold: '#9A53FF',
+      meeting_code: '#9A53FF',
+      twitter_follow: '#0094FF',
+      twitter_retweet: '#0094FF',
+      twitter_tweet: '#0094FF',
+      github_contribute: '#4A4F57',
+      github_prs: '#4A4F57',
+      snapshot: '#F3B04E',
+    } ?? '#9A53FF';
+
+  const iconComponent = useMemo(() => {
+    const types = {
+      self_verify: InsertLinkIcon,
+      quiz: QuizIcon,
+      token_hold: MonetizationOnIcon,
+      nft_hold: PhotoCameraBack,
+      meeting_code: NumbersIcon,
+      twitter_follow: Twitter,
+      twitter_retweet: Twitter,
+      twitter_tweet: Twitter,
+      github_contribute: GitHubIcon,
+      github_prs: GitHubIcon,
+      snapshot: ElectricBoltIcon,
+    };
+
+    return types[type] || null;
+  }, [type]);
+
+  return (
+    <Box
+      display="flex"
+      component="span"
+      bgcolor={iconBgColor[type]}
+      padding={1.5}
+      borderRadius={1}
+      color={'#ffffff'}
+      alignContent={'center'}
+      sx={{ ...sx }}
+    >
+      <SvgIcon component={iconComponent} />
+    </Box>
+  );
+}

apps/website/components/atoms/task-icon/types.ts

@@ -0,0 +1,12 @@
+export type TaskType =
+  | 'self_verify'
+  | 'quiz'
+  | 'token_hold'
+  | 'nft_hold'
+  | 'meeting_code'
+  | 'twitter_follow'
+  | 'twitter_retweet'
+  | 'twitter_tweet'
+  | 'github_contribute'
+  | 'github_prs'
+  | 'snapshot';

apps/website/components/molecules/add-task/add-task-button.tsx

@@ -1,17 +1,21 @@
-import { Stack } from '@mui/material';
+import { Stack, Box } from '@mui/material';
+import Typography from '@mui/material/Typography';
+import { TaskIcon, TaskType } from '../../atoms/task-icon';
 
 type AddTaskButtonProps = {
-  icon: JSX.Element;
+  type: TaskType;
   title: string;
+  description: string;
   disabled?: boolean;
   addTask: () => void;
 };
 
 const AddTaskButton = ({
-  icon,
+  type,
   title,
-  disabled,
+  description,
   addTask,
+  disabled,
 }: AddTaskButtonProps) => {
   return (
     <Stack
@@ -26,26 +30,29 @@ const AddTaskButton = ({
         borderColor: 'rgba(255, 255, 255, 0.1)',
         borderRadius: '10px',
         alignItems: 'center',
-        justifyContent: 'center',
-        flexDirection: { xs: 'row', md: 'column' },
+
+        flexDirection: 'row',
         columnGap: '10px',
-        padding: '20px 0',
+        padding: '20px',
         cursor: !disabled && 'pointer',
         '&:hover': {
-          filter: !disabled && 'brightness(150%)',
+          backgroundColor: !disabled && 'background.paper',
         },
-        fontWeight: '700',
-        fontSize: '15px',
-        lineHeight: '22px',
-        letterSpacing: '0.46px',
-        textTransform: 'uppercase',
       }}
       onClick={() => addTask()}
     >
-      <span>{icon}</span>
-      <span style={{ margin: '5px 0px 5px 0px', fontSize: '11px' }}>
-        {disabled ? title + ' (Soon)' : title}
-      </span>
+      <TaskIcon type={type} />
+      <Stack>
+        <Typography
+          variant="subtitle2"
+          color={'#FFFFFF'}
+          fontWeight={600}
+          gutterBottom
+        >
+          {title}
+        </Typography>
+        <Typography variant="caption">{description}</Typography>
+      </Stack>
     </Stack>
   );
 };