7561631569

Committed 17 Jan 2024 08:51PM UTC coverage: 95.441% (-0.06%) from 95.505%

Build # 7561631569

Build Type

push

github

Committed by

web-flow

Commit Message

#77 Header UI becomes distorted in tablet view (#95)

Run Details

345 of 423 branches covered (0.0%)

Branch coverage included in aggregate %.

4909 of 5082 relevant lines covered (96.6%)

14.31 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

94.3

/apps/web/src/components/layout/footer.tsx

import type { FC, ReactNode } from "react";
import {
    Anchor,
    Box,
    Flex,
    List,
    Text,
    useMantineColorScheme,
    useMantineTheme,
} from "@mantine/core";
import { useMediaQuery } from "@mantine/hooks";
import Link from "next/link";
import {
    TbBrandDiscord,
    TbBrandGithub,
    TbBug,
    TbMessage2Code,
} from "react-icons/tb";
import CartesiLogo from "../cartesiLogo";

interface FooterLinkProps {
    children: ReactNode;
    href: string;
    color?: string;
}

const FooterLink: FC<FooterLinkProps> = ({ children, href, color }) => {
    const theme = useMantineTheme();
    const { colorScheme } = useMantineColorScheme();

    return (
        <Anchor
            href={href}
            target="_blank"
            component={Link}
            c={color ?? theme.colors.gray[colorScheme === "light" ? 7 : 6]}
        >
            {children}
        </Anchor>
    );
};

const Footer: FC = () => {
    const theme = useMantineTheme();
    const { colorScheme } = useMantineColorScheme();
    const isSmallDevice = useMediaQuery(`(max-width:${theme.breakpoints.sm})`);

    return (
        <footer
            style={{
                position: "relative",
                zIndex: 102,
                backgroundColor: "var(--mantine-color-body)",
                padding: isSmallDevice ? "2rem" : "3rem 4rem",
                borderTop: `calc(0.0625rem * var(--mantine-scale)) solid ${
                    colorScheme === "light"
                        ? "var(--mantine-color-gray-3)"
                        : "var(--mantine-color-dark-4)"
                }`,
            }}
        >
            <Flex
                justify="space-between"
                direction={isSmallDevice ? "column" : "row"}
            >
                <Box
                    mr={isSmallDevice ? 0 : "2rem"}
                    style={{ order: isSmallDevice ? 2 : 1 }}
                >
                    <CartesiLogo height={40} />
                    <Text mt={12}>
                        CartesiScan is a tool for inspecting and analyzing
                        Cartesi rollups applications.
                        <br />
                        Blockchain explorer for Ethereum Networks.
                    </Text>

                    <Text mt={20} data-testid="app-copyright">
                        (c) Cartesi and individual authors (see{" "}
                        <FooterLink
                            href="https://github.com/cartesi/rollups-explorer/blob/main/AUTHORS"
                            color="var(--text-color)"
                        >
                            AUTHORS
                        </FooterLink>
                        )
                        <br />
                        SPDX-License-Identifier: Apache-2.0 (see{" "}
                        <FooterLink
                            href="https://github.com/cartesi/rollups-explorer/blob/main/LICENSE"
                            color="var(--text-color)"
                        >
                            LICENSE
                        </FooterLink>
                        )
                    </Text>
                </Box>

                <Flex
                    justify="space-between"
                    direction={isSmallDevice ? "column" : "row"}
                    mr={isSmallDevice ? 0 : "4rem"}
                    style={{ order: isSmallDevice ? 1 : 2 }}
                >
                    <Box w="14rem">
                        <Text size="lg" mb="1rem">
                            CartesiScan
                        </Text>
                        <List>
                            <List.Item
                                icon={
                                    <Flex>
                                        <TbBug size={20} />
                                    </Flex>
                                }
                            >
                                <FooterLink href="https://github.com/cartesi/rollups-explorer/issues/new?assignees=&labels=Type%3A+Bug%2CStatus%3A+Needs+triage&projects=&template=2-bug.md&title=">
                                    Report a bug
                                </FooterLink>
                            </List.Item>
                            <List.Item
                                icon={
                                    <Flex>
                                        <TbMessage2Code
                                            size={20}
                                            style={{ display: "flex" }}
                                        />
                                    </Flex>
                                }
                            >
                                <FooterLink href="https://github.com/cartesi/rollups-explorer/issues/new?assignees=&labels=Type%3A+Feature%2CStatus%3A+Needs+triage&projects=&template=1-feature.md&title=">
                                    Feature request
                                </FooterLink>
                            </List.Item>
                            <List.Item
                                icon={
                                    <Flex>
                                        <TbBrandGithub
                                            size={20}
                                            style={{ display: "flex" }}
                                        />
                                    </Flex>
                                }
                            >
                                <FooterLink href="https://github.com/cartesi/rollups-explorer/blob/main/CONTRIBUTING.md">
                                    Contribute
                                </FooterLink>
                            </List.Item>
                            <List.Item
                                icon={
                                    <Flex>
                                        <TbBrandDiscord
                                            size={20}
                                            style={{ display: "flex" }}
                                        />
                                    </Flex>
                                }
                            >
                                <FooterLink href="https://discord.com/invite/pfXMwXDDfW">
                                    Discord
                                </FooterLink>
                            </List.Item>
                        </List>
                    </Box>

                    <Box my={isSmallDevice ? "2rem" : 0}>
                        <Text size="lg" mb="1rem">
                            General
                        </Text>
                        <FooterLink href="https://docs.cartesi.io/">
                            Docs
                        </FooterLink>
                    </Box>
                </Flex>
            </Flex>
        </footer>
    );
};

export default Footer;

1	import type { FC, ReactNode } from "react";	1✔
2	import {	1✔
3	Anchor,	1✔
4	Box,	1✔
5	Flex,	1✔
6	List,	1✔
7	Text,	1✔
8	useMantineColorScheme,	1✔
9	useMantineTheme,	1✔
10	} from "@mantine/core";	1✔
11	import { useMediaQuery } from "@mantine/hooks";	1✔
12	import Link from "next/link";	1✔
13	import {	1✔
14	TbBrandDiscord,	1✔
15	TbBrandGithub,	1✔
16	TbBug,	1✔
17	TbMessage2Code,	1✔
18	} from "react-icons/tb";	1✔
19	import CartesiLogo from "../cartesiLogo";	1✔
20		1✔
21	interface FooterLinkProps {	1✔
22	children: ReactNode;	1✔
23	href: string;	1✔
24	color?: string;	1✔
25	}	1✔
26		1✔
27	const FooterLink: FC<FooterLinkProps> = ({ children, href, color }) => {	1✔
28	const theme = useMantineTheme();	196✔
29	const { colorScheme } = useMantineColorScheme();	196✔
30		196✔
31	return (	196✔
32	<Anchor	196✔
33	href={href}	196✔
34	target="_blank"	196✔
35	component={Link}	196✔
36	c={color ?? theme.colors.gray[colorScheme === "light" ? 7 : 6]}	196!
37	>	196✔
38	{children}	196✔
39	</Anchor>	196✔
40	);	196✔
41	};	196✔
42		1✔
43	const Footer: FC = () => {	1✔
44	const theme = useMantineTheme();	28✔
45	const { colorScheme } = useMantineColorScheme();	28✔
46	const isSmallDevice = useMediaQuery(`(max-width:${theme.breakpoints.sm})`);	28✔
47		28✔
48	return (	28✔
49	<footer	28✔
50	style={{	28✔
51	position: "relative",	28✔
52	zIndex: 102,	28✔
53	backgroundColor: "var(--mantine-color-body)",	28✔
54	padding: isSmallDevice ? "2rem" : "3rem 4rem",	28!
55	borderTop: `calc(0.0625rem * var(--mantine-scale)) solid ${	28✔
56	colorScheme === "light"	28!
57	? "var(--mantine-color-gray-3)"	×
58	: "var(--mantine-color-dark-4)"	28✔
59	}`,	28✔
60	}}	28✔
61	>	28✔
62	<Flex	28✔
63	justify="space-between"	28✔
64	direction={isSmallDevice ? "column" : "row"}	28!
65	>	28✔
66	<Box	28✔
67	mr={isSmallDevice ? 0 : "2rem"}	28!
68	style={{ order: isSmallDevice ? 2 : 1 }}	28!
69	>	28✔
70	<CartesiLogo height={40} />	28✔
71	<Text mt={12}>	28✔
72	CartesiScan is a tool for inspecting and analyzing	28✔
73	Cartesi rollups applications.	28✔
74	<br />	28✔
75	Blockchain explorer for Ethereum Networks.	28✔
76	</Text>	28✔
77		28✔
78	<Text mt={20} data-testid="app-copyright">	28✔
79	(c) Cartesi and individual authors (see{" "}	28✔
80	<FooterLink	28✔
81	href="https://github.com/cartesi/rollups-explorer/blob/main/AUTHORS"	28✔
82	color="var(--text-color)"	28✔
83	>	28✔
84	AUTHORS	28✔
85	</FooterLink>	28✔
86	)	28✔
87	<br />	28✔
88	SPDX-License-Identifier: Apache-2.0 (see{" "}	28✔
89	<FooterLink	28✔
90	href="https://github.com/cartesi/rollups-explorer/blob/main/LICENSE"	28✔
91	color="var(--text-color)"	28✔
92	>	28✔
93	LICENSE	28✔
94	</FooterLink>	28✔
95	)	28✔
96	</Text>	28✔
97	</Box>	28✔
98		28✔
99	<Flex	28✔
100	justify="space-between"	28✔
101	direction={isSmallDevice ? "column" : "row"}	28!
102	mr={isSmallDevice ? 0 : "4rem"}	28!
103	style={{ order: isSmallDevice ? 1 : 2 }}	28!
104	>	28✔
105	<Box w="14rem">	28✔
106	<Text size="lg" mb="1rem">	28✔
107	CartesiScan	28✔
108	</Text>	28✔
109	<List>	28✔
110	<List.Item	28✔
111	icon={	28✔
112	<Flex>	28✔
113	<TbBug size={20} />	28✔
114	</Flex>	28✔
115	}	28✔
116	>	28✔
117	<FooterLink href="https://github.com/cartesi/rollups-explorer/issues/new?assignees=&labels=Type%3A+Bug%2CStatus%3A+Needs+triage&projects=&template=2-bug.md&title=">	28✔
118	Report a bug	28✔
119	</FooterLink>	28✔
120	</List.Item>	28✔
121	<List.Item	28✔
122	icon={	28✔
123	<Flex>	28✔
124	<TbMessage2Code	28✔
125	size={20}	28✔
126	style={{ display: "flex" }}	28✔
127	/>	28✔
128	</Flex>	28✔
129	}	28✔
130	>	28✔
131	<FooterLink href="https://github.com/cartesi/rollups-explorer/issues/new?assignees=&labels=Type%3A+Feature%2CStatus%3A+Needs+triage&projects=&template=1-feature.md&title=">	28✔
132	Feature request	28✔
133	</FooterLink>	28✔
134	</List.Item>	28✔
135	<List.Item	28✔
136	icon={	28✔
137	<Flex>	28✔
138	<TbBrandGithub	28✔
139	size={20}	28✔
140	style={{ display: "flex" }}	28✔
141	/>	28✔
142	</Flex>	28✔
143	}	28✔
144	>	28✔
145	<FooterLink href="https://github.com/cartesi/rollups-explorer/blob/main/CONTRIBUTING.md">	28✔
146	Contribute	28✔
147	</FooterLink>	28✔
148	</List.Item>	28✔
149	<List.Item	28✔
150	icon={	28✔
151	<Flex>	28✔
152	<TbBrandDiscord	28✔
153	size={20}	28✔
154	style={{ display: "flex" }}	28✔
155	/>	28✔
156	</Flex>	28✔
157	}	28✔
158	>	28✔
159	<FooterLink href="https://discord.com/invite/pfXMwXDDfW">	28✔
160	Discord	28✔
161	</FooterLink>	28✔
162	</List.Item>	28✔
163	</List>	28✔
164	</Box>	28✔
165		28✔
166	<Box my={isSmallDevice ? "2rem" : 0}>	28!
167	<Text size="lg" mb="1rem">	28✔
168	General	28✔
169	</Text>	28✔
170	<FooterLink href="https://docs.cartesi.io/">	28✔
171	Docs	28✔
172	</FooterLink>	28✔
173	</Box>	28✔
174	</Flex>	28✔
175	</Flex>	28✔
176	</footer>	28✔
177	);	28✔
178	};	28✔
179		1✔
180	export default Footer;	1✔

cartesi / rollups-explorer / 7561631569

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous