Responsive optimizations

frontend/src/app/bounty/[bountyId]/exploit/page.tsx

@@ -3,6 +3,7 @@ import { FC, useState } from "react";
 
 import {
     Box,
+    Flex,
     Button,
     Code,
     Center,
@@ -143,7 +144,15 @@ const SendExploitForm: FC<ConcreteBountyParams> = ({ bountyIndex, bounty }) => {
 
     return (
         <form>
-            <Stack w={800}>
+            <Stack
+                px={{ base: "xs", md: "lg" }}
+                pt="xl"
+                style={{
+                    maxWidth: 800,
+                    marginLeft: "auto",
+                    marginRight: "auto",
+                }}
+            >
                 <Title size="h1">Submit exploit</Title>
                 <Text size="lg" fw={700} c="dimmed">
                     {bounty.name}
@@ -267,14 +276,10 @@ const SendExploitPage: FC<BountyParams> = ({ params: { bountyId } }) => {
             return <Center>{bountyResult.message}</Center>;
         case "success":
             return (
-                <Center>
-                    <Box p={20} mt={50} bg={theme.colors.dark[7]}>
-                        <SendExploitForm
-                            bountyIndex={bountyIndex}
-                            bounty={bountyResult.response}
-                        />
-                    </Box>
-                </Center>
+                <SendExploitForm
+                    bountyIndex={bountyIndex}
+                    bounty={bountyResult.response}
+                />
             );
     }
 };

frontend/src/app/bounty/[bountyId]/page.tsx

@@ -6,6 +6,7 @@ import {
     Center,
     Code,
     Group,
+    Flex,
     Stack,
     Image,
     Title,
@@ -33,6 +34,7 @@ import { useErc20Metadata, formatErc20Amount } from "../../../utils/erc20";
 import { BountyStatusBadgeGroup } from "../../../components/bountyStatus";
 import { ProfileCard } from "../../../components/profileCard";
 import { LinkButton } from "../../../components/linkbtn";
+import Link from "next/link";
 import { HasConnectedAccount } from "../../../components/hasConnectedAccount";
 import { transactionStatus } from "../../../utils/transactionStatus";
 
@@ -58,6 +60,7 @@ const WithdrawButton: FC<{
             }
             loading={addInputLoading}
             onClick={() => addInputWrite.write && addInputWrite.write()}
+            fullWidth
         >
             Withdraw
         </Button>
@@ -72,24 +75,34 @@ const ButtonsBox: FC<{
     const canWithdraw =
         bountyStatus.kind === "expired" && !bountyStatus.withdrawn;
     return (
-        <Group justify="left">
-            <LinkButton
+        <Flex
+            direction={{ base: "column", sm: "row" }}
+            gap="md"
+            justify={"space-between"}
+            w="100%"
+        >
+            <Button
+                component={Link}
                 href={`/bounty/${bountyIndex}/sponsor`}
                 disabled={!isOpen}
+                fullWidth
             >
                 Sponsor
-            </LinkButton>
-            <LinkButton
+            </Button>
+            <Button
+                component={Link}
                 href={`/bounty/${bountyIndex}/exploit`}
                 disabled={!isOpen}
+                fullWidth
+                visibleFrom="md"
             >
                 Submit exploit
-            </LinkButton>
+            </Button>
             <WithdrawButton
                 bountyIndex={bountyIndex}
                 canWithdraw={canWithdraw}
             />
-        </Group>
+        </Flex>
     );
 };
 
@@ -106,7 +119,9 @@ const BountyBox: FC<ConcreteBountyParams> = ({ bountyIndex, bounty }) => {
                 <BountyStatusBadgeGroup bountyStatus={bountyStatus} />
             </Group>
             <Image
-                w={300}
+                w="100%"
+                style={{ maxWidth: 365 }}
+                fit="cover"
                 src={bounty.imgLink}
                 alt="Bounty Image"
                 fallbackSrc="/static/default_app.webp"
@@ -133,7 +148,9 @@ const ExploitCodeBox: FC<{ exploitCode?: string }> = ({ exploitCode }) => {
         return (
             <Stack align="center">
                 <Title order={2}>Exploit Code</Title>
-                <Code block>{exploitCode}</Code>
+                <Code w="100%" block>
+                    {exploitCode}
+                </Code>
             </Stack>
         );
     }
@@ -162,8 +179,10 @@ const ParticipantsBox: FC<{
     );
 
     return (
-        <Stack align="center">
-            <Title order={2}>Participants</Title>
+        <Stack>
+            <Center>
+                <Title order={2}>Participants</Title>
+            </Center>
             {bounty.exploit && (
                 <ProfileCard
                     profile={bounty.exploit.hacker}
@@ -229,13 +248,15 @@ const BountyInfoPage: FC<BountyParams> = ({ params: { bountyId } }) => {
     const bounty = bountyResult.response;
 
     return (
-        <Center p={20} mt={20}>
-            <Stack w={800} gap={50} align="center" justify="center">
-                <BountyBox bountyIndex={bountyIndex} bounty={bounty} />
-                <ExploitCodeBox exploitCode={exploitCode} />
-                <ParticipantsBox bounty={bounty} />
-            </Stack>
-        </Center>
+        <Stack
+            style={{ maxWidth: 768, marginLeft: "auto", marginRight: "auto" }}
+            p={{ base: "xs", md: "lg" }}
+            gap="xl"
+        >
+            <BountyBox bountyIndex={bountyIndex} bounty={bounty} />
+            <ExploitCodeBox exploitCode={exploitCode} />
+            <ParticipantsBox bounty={bounty} />
+        </Stack>
     );
 };
 

frontend/src/app/bounty/[bountyId]/sponsor/page.tsx

@@ -3,7 +3,7 @@ import {
     Box,
     Button,
     Center,
-    Group,
+    Flex,
     Stack,
     Text,
     TextInput,
@@ -135,7 +135,15 @@ const AddSponsorshipForm: FC<ConcreteBountyParams> = ({
 
     return (
         <form>
-            <Stack w={600}>
+            <Stack
+                px={{ base: "xs", md: "lg" }}
+                pt="xl"
+                style={{
+                    maxWidth: 800,
+                    marginLeft: "auto",
+                    marginRight: "auto",
+                }}
+            >
                 <Title>Sponsor bounty</Title>
                 <Text size="lg" fw={700} c="dimmed">
                     {bounty.name}
@@ -171,14 +179,19 @@ const AddSponsorshipForm: FC<ConcreteBountyParams> = ({
                     placeholder="0"
                     {...form.getInputProps("amount")}
                 />
-                <Group justify="center">
+                <Flex
+                    direction={{ base: "column", sm: "row" }}
+                    gap="md"
+                    justify={"space-between"}
+                >
                     <Button
                         disabled={approveDisabled || !needApproval}
                         loading={approveLoading}
                         onClick={() =>
                             approveWrite.write && approveWrite.write()
                         }
                         size="lg"
+                        fullWidth
                     >
                         Approve
                     </Button>
@@ -191,10 +204,11 @@ const AddSponsorshipForm: FC<ConcreteBountyParams> = ({
                             depositWrite.write && depositWrite.write()
                         }
                         size="lg"
+                        fullWidth
                     >
                         Deposit
                     </Button>
-                </Group>
+                </Flex>
             </Stack>
         </form>
     );
@@ -213,14 +227,10 @@ const AddSponsorshipPage: FC<BountyParams> = ({ params: { bountyId } }) => {
             return <Center>{bountyResult.message}</Center>;
         case "success":
             return (
-                <Center>
-                    <Box p={20} mt={50} bg={theme.colors.dark[7]}>
-                        <AddSponsorshipForm
-                            bountyIndex={bountyIndex}
-                            bounty={bountyResult.response}
-                        />
-                    </Box>
-                </Center>
+                <AddSponsorshipForm
+                    bountyIndex={bountyIndex}
+                    bounty={bountyResult.response}
+                />
             );
     }
 };

frontend/src/app/bounty/create/page.tsx

@@ -104,7 +104,15 @@ const CreateBountyForm: FC = () => {
 
     return (
         <form>
-            <Stack w={800}>
+            <Stack
+                px={{ base: "xs", md: "lg" }}
+                pt="xl"
+                style={{
+                    maxWidth: 800,
+                    marginLeft: "auto",
+                    marginRight: "auto",
+                }}
+            >
                 <Title>Create bounty</Title>
                 <TextInput
                     withAsterisk
@@ -159,6 +167,7 @@ const CreateBountyForm: FC = () => {
                         addInputWait.isSuccess
                     }
                     loading={addInputLoading}
+                    fullWidth
                     onClick={() => addInputWrite.write && addInputWrite.write()}
                 >
                     Create
@@ -170,13 +179,7 @@ const CreateBountyForm: FC = () => {
 
 const CreateBountyPage: FC = () => {
     const theme = useMantineTheme();
-    return (
-        <Center>
-            <Box p={20} mt={50} bg={theme.colors.dark[7]}>
-                <CreateBountyForm />
-            </Box>
-        </Center>
-    );
+    return <CreateBountyForm />;
 };
 
 export default CreateBountyPage;

frontend/src/app/explore/page.tsx

@@ -30,19 +30,19 @@ const Bounty: FC<{
     const bountyStatus = getBountyStatus(bounty, blockTimestamp);
     return (
         <Anchor href={"/bounty/" + index} underline="never">
-            <Card>
-                <Card.Section>
+            <Card h="100%">
+                <Card.Section style={{ overflow: "hidden" }} bg="dark" p="sm">
                     <Image
-                        h={200}
-                        p={6}
+                        style={{ maxWidth: "100%" }}
+                        h="300"
                         fit="contain"
                         alt="Bounty Image"
                         src={bounty.imgLink}
                         fallbackSrc="/static/default_app.webp"
                     />
                 </Card.Section>
-                <Box w={400} mt="md">
-                    <Group mb={10}>
+                <Box>
+                    <Group my="sm">
                         <Text truncate="end" fw={700} size="lg">
                             {bounty.name}
                         </Text>
@@ -71,7 +71,13 @@ const BountyList: FC = () => {
     const state = stateResult.response;
 
     return (
-        <SimpleGrid m="sm" cols={{ base: 1, sm: 2, lg: 3 }}>
+        <SimpleGrid
+            m={{ base: "xs", md: "lg" }}
+            cols={{ base: 1, sm: 2, lg: 3 }}
+            spacing="xl"
+            verticalSpacing="lg"
+            style={{ maxWidth: 1024 }}
+        >
             {state.bounties.map((bounty, index) => {
                 return (
                     <Bounty
@@ -90,7 +96,12 @@ const Explore: FC = () => {
     return (
         <Stack>
             <HasConnectedAccount>
-                <Flex mt={20} mr={20} justify="flex-end">
+                <Flex
+                    mt="lg"
+                    mr={{ base: "xs", md: "lg" }}
+                    justify="flex-end"
+                    visibleFrom="md"
+                >
                     <Link href={GOOGLE_BOUNTY_CREATION_FORM_URL}>
                         <Button size="lg">Create bounty</Button>
                     </Link>

frontend/src/app/footer.tsx

@@ -0,0 +1,32 @@
+import { Group, ActionIcon, Center, Box, Text } from "@mantine/core";
+import { IconBrandX, IconBrandTelegram } from "@tabler/icons-react";
+import { FC } from "react";
+
+export const Footer: FC = () => {
+    return (
+        <Group bg="gray" p="0.3rem">
+            <Center w="100%" py="0.3rem">
+                <Group gap="sm">
+                    <Text>Bug Buster</Text>
+                    <ActionIcon
+                        component="a"
+                        href="https://x.com/BugBusterApp"
+                        size="xl"
+                        variant="transparent"
+                    >
+                        <IconBrandX color="white" />
+                    </ActionIcon>
+
+                    <ActionIcon
+                        component="a"
+                        href="https://t.me/+G_CPMEhCHC04MzA5"
+                        size="xl"
+                        variant="transparent"
+                    >
+                        <IconBrandTelegram color="white" />
+                    </ActionIcon>
+                </Group>
+            </Center>
+        </Group>
+    );
+};