fix QuestDetails page

packages/design-system/src/MetaTile.tsx

@@ -37,17 +37,24 @@ export const MetaTileBody: React.FC<StackProps> = ({ children, ...props }) => (
   </VStack>
 );
 
-export const MetaTile: React.FC<FlexProps> = ({ children, ...props }) => {
-  if (typeof window !== 'undefined') {
+type MetaTileProps = {
+  noTilt?: boolean;
+};
+
+export const MetaTile: React.FC<FlexProps & MetaTileProps> = ({
+  children,
+  ...props
+}) => {
+  if (typeof window !== 'undefined' && !props.noTilt) {
     const element = document.querySelectorAll('.js-tilt');
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     VanillaTilt.init(element);
   }
+  console.log('props.noTilt', props.noTilt);
   return (
     <div
-      className="js-tilt"
-      data-tilt
+      className={props.noTilt ? '' : 'js-tilt'}
       data-tilt-scale="1.03"
       data-tilt-max="6"
       data-tilt-glare="true"

packages/web/components/Quest/QuestDetails.tsx

@@ -1,7 +1,5 @@
 import {
-  Avatar,
   Box,
-  Flex,
   Heading,
   HStack,
   MetaButton,
@@ -12,7 +10,6 @@ import {
   Text,
   VStack,
 } from '@metafam/ds';
-import BackgroundImage from 'assets/main-background.png';
 import { MetaLink } from 'components/Link';
 import { MarkdownViewer as Markdown } from 'components/MarkdownViewer';
 import { RepetitionTag, StatusTag } from 'components/Quest/QuestTags';
@@ -28,7 +25,6 @@ import {
 } from 'graphql/autogen/types';
 import { useUser } from 'lib/hooks';
 import moment from 'moment';
-import { optimizedImage } from 'utils/imageHelpers';
 import { safelyParseNChakrifyHtml } from 'utils/stringHelpers';
 
 type Props = {
@@ -44,62 +40,35 @@ export const QuestDetails: React.FC<Props> = ({ quest }) => {
     : '';
 
   return (
-    <MetaTile maxW={undefined}>
-      <Box
-        bgImage={`url(${BackgroundImage})`}
-        bgSize="cover"
-        bgPosition="center"
-        position="absolute"
-        top="0"
-        left="0"
-        w="100%"
-        h="3.5rem"
-      />
-      <Flex justify="center" mb={4}>
-        <Avatar
-          size="lg"
-          src={optimizedImage('logoURL', quest.guild.logo)}
-          name={quest.guild.name}
-        />
-      </Flex>
-
-      <MetaTileHeader>
-        <VStack>
-          <MetaLink as={`/quest/${quest.id}`} href="/quest/[id]">
-            <Heading
-              size="lg"
-              color="white"
-              fontFamily="body"
-              textAlign="center"
-            >
-              {quest.title}
-            </Heading>
-          </MetaLink>
-          <HStack mt={2}>
-            <RepetitionTag
-              repetition={quest.repetition}
-              cooldown={quest.cooldown}
-            />
-            <StatusTag status={quest.status} />
-            <Text>
-              <i>{moment(quest.createdAt).fromNow()}</i>
-            </Text>
-          </HStack>
-          <HStack w="100%" mt={2}>
-            {isMyQuest && quest.status === QuestStatus_Enum.Open && (
-              <MetaLink as={`/quest/${quest.id}/edit`} href="/quest/[id]/edit">
-                <MetaButton size="md">Edit Quest</MetaButton>
-              </MetaLink>
-            )}
-            {quest.externalLink && (
-              <MetaLink href={quest.externalLink} isExternal>
-                <MetaButton variant="outline" colorScheme="cyan" size="md">
-                  Open link
-                </MetaButton>
-              </MetaLink>
-            )}
-          </HStack>
-        </VStack>
+    <MetaTile maxW={undefined} noTilt>
+      <MetaTileHeader py={6} px={3}>
+        <Heading size="lg" color="white" fontFamily="body" textAlign="center">
+          {quest.title}
+        </Heading>
+        <HStack mt={2}>
+          <RepetitionTag
+            repetition={quest.repetition}
+            cooldown={quest.cooldown}
+          />
+          <StatusTag status={quest.status} />
+          <Text>
+            <i>{moment(quest.createdAt).fromNow()}</i>
+          </Text>
+        </HStack>
+        <HStack w="100%" mt={2}>
+          {isMyQuest && quest.status === QuestStatus_Enum.Open && (
+            <MetaLink as={`/quest/${quest.id}/edit`} href="/quest/[id]/edit">
+              <MetaButton size="md">Edit Quest</MetaButton>
+            </MetaLink>
+          )}
+          {quest.externalLink && (
+            <MetaLink href={quest.externalLink} isExternal>
+              <MetaButton variant="outline" colorScheme="cyan" size="md">
+                Open link
+              </MetaButton>
+            </MetaLink>
+          )}
+        </HStack>
       </MetaTileHeader>
       <MetaTileBody>
         <VStack spacing={2} align="stretch">