Skip to content

Commit 8301321

Browse files
phklivephklive
committed
Final draft
1 parent 54237b7 commit 8301321

11 files changed

+358
-353
lines changed

‎components/UI/footer.tsx

+13-13
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,19 @@ import React, { FunctionComponent } from "react";
22
import styles from "../styles/components/footer.module.css";
33

44
const Footer: FunctionComponent = () => {
5-
return (
6-
<div className="relative">
7-
<div className={styles.fifthLeaf}>
8-
<img width={"100%"} alt="leaf" src="/leaves/leaf_3.png" />
9-
</div>
10-
<div className={styles.sixthLeaf}>
11-
<img width={"100%"} alt="leaf" src="/leaves/leaf_1.png" />
12-
</div>
13-
<footer className={styles.footer}>
14-
Powered by&nbsp;<strong>Starknet</strong>
15-
</footer>
16-
</div>
17-
);
5+
return (
6+
<div className="relative">
7+
<div className={styles.fifthLeaf}>
8+
<img width={"100%"} alt="leaf" src="/leaves/leaf_3.png" />
9+
</div>
10+
<div className={styles.sixthLeaf}>
11+
<img width={"100%"} alt="leaf" src="/leaves/leaf_1.png" />
12+
</div>
13+
<footer className={styles.footer}>
14+
Powered by&nbsp;<strong>Starknet</strong>
15+
</footer>
16+
</div>
17+
);
1818
};
1919

2020
export default Footer;

‎components/UI/iconsComponents/clickableAction.tsx

+23-19
Original file line numberDiff line numberDiff line change
@@ -6,31 +6,35 @@ import TransferIcon from "./icons/transferIcon";
66
import PlusIcon from "./icons/plusIcon";
77
import AddressIcon from "./icons/addressIcon";
88
import AspectIcon from "./icons/aspectIcon";
9+
import MainIcon from "./icons/mainIcon";
910

1011
type ClickacbleActionProps = {
11-
icon: string;
12-
onClick?: () => void;
13-
title?: string;
12+
icon: string;
13+
onClick?: () => void;
14+
title?: string;
1415
};
1516

1617
const ClickacbleAction: FunctionComponent<ClickacbleActionProps> = ({
17-
icon,
18-
onClick,
19-
title,
18+
icon,
19+
onClick,
20+
title,
2021
}) => {
21-
return (
22-
<div className={styles.clickableAction} onClick={onClick}>
23-
{icon === "change" && <ChangeIcon width="40" color="#402D28" />}
24-
{icon === "mintsquare" && (
25-
<MintsquareIcon width="40" color="#402D28" />
26-
)}
27-
{icon === "aspect" && <AspectIcon width="40" color="#402D28" />}
28-
{icon === "transfer" && <TransferIcon width="40" color="#402D28" />}
29-
{icon === "plus" && <PlusIcon width="40" color="#402D28" />}
30-
{icon === "address" && <AddressIcon width="40" color="#402D28" />}
31-
<h1 className={styles.clickableActionText}>{title}</h1>
32-
</div>
33-
)
22+
return (
23+
<div className={styles.clickableAction} onClick={onClick}>
24+
{icon === "change" && <ChangeIcon width="40" color="#402D28" />}
25+
{icon === "mintsquare" && (
26+
<MintsquareIcon width="40" color="#402D28" />
27+
)}
28+
{icon === "main" && (
29+
<MainIcon width="40" firstColor="#402d28" secondColor="#402d28" />
30+
)}
31+
{icon === "aspect" && <AspectIcon width="40" color="#402D28" />}
32+
{icon === "transfer" && <TransferIcon width="40" color="#402D28" />}
33+
{icon === "plus" && <PlusIcon width="40" color="#402D28" />}
34+
{icon === "address" && <AddressIcon width="40" color="#402D28" />}
35+
<h1 className={styles.clickableActionText}>{title}</h1>
36+
</div>
37+
)
3438

3539
};
3640

‎components/UI/iconsComponents/clickableIcon.tsx

+28-28
Original file line numberDiff line numberDiff line change
@@ -13,38 +13,38 @@ import AspectIcon from "./icons/aspectIcon";
1313
import { Tooltip } from "@mui/material";
1414

1515
type ClickableIconProps = {
16-
icon: string;
17-
onClick?: () => void;
18-
title?: string;
16+
icon: string;
17+
onClick?: () => void;
18+
title?: string;
1919
};
2020

2121
const ClickableIcon: FunctionComponent<ClickableIconProps> = ({
22-
icon,
23-
onClick,
24-
title = "",
22+
icon,
23+
onClick,
24+
title = "",
2525
}) => {
26-
return (
27-
<Tooltip title={title} arrow>
28-
<div>
29-
<div className={styles.clickableIcon} onClick={onClick}>
30-
{icon === "twitter" && <TwitterIcon width="20" color="#402D28" />}
31-
{icon === "discord" && <DiscordIcon width="20" color="#402D28" />}
32-
{icon === "github" && <GithubIcon width="20" color="#402D28" />}
33-
{icon === "main" && (
34-
<MainIcon width="40" firstColor="#402d28" secondColor="#402d28" />
35-
)}
36-
{icon === "change" && <ChangeIcon width="40" color="#402D28" />}
37-
{icon === "mintsquare" && (
38-
<MintsquareIcon width="40" color="#402D28" />
39-
)}
40-
{icon === "aspect" && <AspectIcon width="40" color="#402D28" />}
41-
{icon === "transfer" && <TransferIcon width="40" color="#402D28" />}
42-
{icon === "plus" && <PlusIcon width="40" color="#402D28" />}
43-
{icon === "address" && <AddressIcon width="40" color="#402D28" />}
44-
</div>
45-
</div>
46-
</Tooltip>
47-
);
26+
return (
27+
<Tooltip title={title} arrow>
28+
<div>
29+
<div className={styles.clickableIcon} onClick={onClick}>
30+
{icon === "twitter" && <TwitterIcon width="20" color="#402D28" />}
31+
{icon === "discord" && <DiscordIcon width="20" color="#402D28" />}
32+
{icon === "github" && <GithubIcon width="20" color="#402D28" />}
33+
{icon === "main" && (
34+
<MainIcon width="40" firstColor="#402d28" secondColor="#402d28" />
35+
)}
36+
{icon === "change" && <ChangeIcon width="40" color="#402D28" />}
37+
{icon === "mintsquare" && (
38+
<MintsquareIcon width="40" color="#402D28" />
39+
)}
40+
{icon === "aspect" && <AspectIcon width="40" color="#402D28" />}
41+
{icon === "transfer" && <TransferIcon width="40" color="#402D28" />}
42+
{icon === "plus" && <PlusIcon width="40" color="#402D28" />}
43+
{icon === "address" && <AddressIcon width="40" color="#402D28" />}
44+
</div>
45+
</div>
46+
</Tooltip>
47+
);
4848
};
4949

5050
export default ClickableIcon;

‎components/UI/identitiesActionsSkeleton.tsx

+7-11
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,14 @@ import styles from "../../styles/components/identitiesV1.module.css";
44

55

66
const identitiesActionsSkeleton: FunctionComponent = () => {
7-
return (
8-
<div className={styles.identitiesActionsSkeletonContainer}>
9-
<Skeleton variant="text" width={110} height={60} />
10-
<div className={styles.identitiesActionsSkeletonButtons}>
11-
<Skeleton variant="circular" width={60} height={60} />
12-
<Skeleton variant="circular" width={60} height={60} />
13-
<Skeleton variant="circular" width={60} height={60} />
14-
<Skeleton variant="circular" width={60} height={60} />
15-
<Skeleton variant="circular" width={60} height={60} />
16-
</div>
7+
return (
8+
<div className={styles.identitiesActionsSkeletonButtons}>
9+
<Skeleton variant="rounded" width={300} height={50} />
10+
<Skeleton variant="rounded" width={300} height={50} />
11+
<Skeleton variant="rounded" width={300} height={50} />
12+
<Skeleton variant="rounded" width={300} height={50} />
1713
</div>
18-
)
14+
)
1915
};
2016

2117
export default identitiesActionsSkeleton;

0 commit comments

Comments
 (0)