d-bis/impersonator
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: improve dark color scheme

Browse Source
This commit is contained in:
apoorvlathey
2024-03-10 04:41:36 +05:30
parent 01c5696d83
commit 557370042a
16 changed files with 91 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/logo-no-bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

1
src/components/Body/AddressInput/AddressBook/index.tsx
View File

@@ -72,6 +72,7 @@ function AddressBook({
lg: "60rem",
}}
pb="6"
bg={"brand.lightBlack"}
>
<ModalHeader>Address Book</ModalHeader>
<ModalCloseButton />

4
src/components/Body/AddressInput/index.tsx
View File

@@ -18,7 +18,6 @@ interface AddressInputParams {
setShowAddress: (value: string) => void;
setAddress: (value: string) => void;
setIsAddressValid: (value: boolean) => void;
bg: string;
isAddressValid: boolean;
selectedTabIndex: number;
isConnected: boolean;
@@ -32,7 +31,6 @@ function AddressInput({
setShowAddress,
setAddress,
setIsAddressValid,
bg,
isAddressValid,
selectedTabIndex,
isConnected,
@@ -61,7 +59,7 @@ function AddressInput({
setAddress(_showAddress);
setIsAddressValid(true); // remove inValid warning when user types again
}}
bg={bg}
bg={"brand.lightBlack"}
isInvalid={!isAddressValid}
/>
{(selectedTabIndex === 0 && isConnected) ||

1
src/components/Body/IFrameConnectTab/SupportedDapps/index.tsx
View File

@@ -95,6 +95,7 @@ function SupportedDapps({
md: "40rem",
lg: "60rem",
}}
bg={"brand.lightBlack"}
>
<ModalHeader>Select a dapp</ModalHeader>
<ModalCloseButton />

4
src/components/Body/IFrameConnectTab/index.tsx
View File

@@ -24,7 +24,6 @@ interface IFrameConnectTabParams {
inputAppUrl: string | undefined;
setInputAppUrl: (value: string | undefined) => void;
appUrl: string | undefined;
bg: string;
isIFrameLoading: boolean;
setIsIFrameLoading: (value: boolean) => void;
iframeKey: number;
@@ -37,7 +36,6 @@ function IFrameConnectTab({
initIFrame,
setInputAppUrl,
inputAppUrl,
bg,
isIFrameLoading,
appUrl,
iframeKey,
@@ -63,12 +61,12 @@ function IFrameConnectTab({
<InputGroup>
<Input
pr="3.5rem"
bg={"brand.lightBlack"}
placeholder="https://app.uniswap.org/"
aria-label="dapp-url"
autoComplete="off"
value={inputAppUrl}
onChange={(e) => setInputAppUrl(e.target.value)}
bg={bg}
/>
{inputAppUrl && (
<InputRightElement px="1rem" mr="0.5rem">

10
src/components/Body/NetworkInput.tsx
View File

@@ -46,10 +46,20 @@ function NetworkInput({
size="md"
tagVariant="solid"
chakraStyles={{
menuList: (provided) => ({
...provided,
bg: "brand.black",
}),
option: (provided, state) => ({
...provided,
color: "white",
bg: state.isFocused ? "whiteAlpha500" : "brand.lightBlack",
}),
groupHeading: (provided, state) => ({
...provided,
h: "1px",
borderTop: "1px solid white",
bg: "brand.black",
}),
}}
closeMenuOnSelect

57
src/components/Body/NotificationBar.tsx
View File

@@ -13,50 +13,49 @@ import { faDiscord } from "@fortawesome/free-brands-svg-icons";
import { ExternalLinkIcon } from "@chakra-ui/icons";
import axios from "axios";
// const CLOSED_KEY = "discord-notif-closed";
const CLOSED_KEY = "new-ui-notif-closed";
function NotificationBar() {
// const isClosed = localStorage.getItem(CLOSED_KEY);
const isClosed = localStorage.getItem(CLOSED_KEY);
// const [isVisible, setIsVisible] = useState(
// isClosed === "true" ? false : true
// );
// useEffect(() => {
// if (!isVisible) {
// localStorage.setItem(CLOSED_KEY, "true");
// }
// }, [isVisible]);
const [donor, setDonor] = useState<string>();
const [isVisible, setIsVisible] = useState(
isClosed === "true" ? false : true
);
useEffect(() => {
axios
.get("https://api.impersonator.xyz/api")
.then((res) => {
setDonor(res.data);
})
.catch((err) => {
console.log(err);
});
}, []);
if (!isVisible) {
localStorage.setItem(CLOSED_KEY, "true");
}
}, [isVisible]);
return donor ? (
<Alert status="info">
// const [donor, setDonor] = useState<string>();
// useEffect(() => {
// axios
// .get("https://api.impersonator.xyz/api")
// .then((res) => {
// setDonor(res.data);
// })
// .catch((err) => {
// console.log(err);
// });
// }, []);
return isVisible ? (
<Alert status="info" bg={"#151515"}>
<Center w="100%">
<Text>
<span style={{ fontSize: "1.2rem" }}>🏆</span> Thanks to{" "}
<span style={{ fontWeight: "bold" }}>{donor}</span> for donating in
Gitcoin Grants #18
<span style={{ fontSize: "1.2rem" }}>✨</span>{" "}
<span style={{ fontWeight: "bold" }}>New UI is here</span>
</Text>
</Center>
{/* <CloseButton
<CloseButton
alignSelf="flex-start"
position="relative"
right={-1}
top={-1}
onClick={() => setIsVisible(false)}
/> */}
/>
</Alert>
) : null;
}

2
src/components/Body/TabsSelect.tsx
View File

@@ -19,7 +19,7 @@ function TabsSelect({
minH="3rem"
px="1.5rem"
spacing={"8"}
background="gray.700"
bg={"brand.lightBlack"}
borderRadius="xl"
>
{tabs.map((t, i) => (

8
src/components/Body/TenderlySettings.tsx
View File

@@ -43,7 +43,13 @@ function TenderlySettings({
</Button>
</Box>
</PopoverTrigger>
<PopoverContent border={0} boxShadow="xl" rounded="xl" overflowY="auto">
<PopoverContent
border={0}
bg="brand.lightBlack"
boxShadow="xl"
rounded="xl"
overflowY="auto"
>
<Box px="1rem" py="1rem">
<HStack>
<Text>(optional) Tenderly Fork Id:</Text>

12
src/components/Body/TransactionRequests.tsx
View File

@@ -25,6 +25,7 @@ import {
} from "@chakra-ui/icons";
import CopyToClipboard from "./CopyToClipboard";
import { TxnDataType } from "../../types";
import { useEffect } from "react";
export const slicedText = (txt: string) => {
return txt.length > 6
@@ -81,7 +82,16 @@ function TransactionRequests({
setSendTxnData,
networkId,
}: TransactionRequestsParams) {
const { isOpen: tableIsOpen, onToggle: tableOnToggle } = useDisclosure();
const {
isOpen: tableIsOpen,
onOpen: tableOnOpen,
onToggle: tableOnToggle,
} = useDisclosure();
useEffect(() => {
// keep table open on load
tableOnOpen();
}, []);
return (
<Box

4
src/components/Body/WalletConnectTab/URIInput.tsx
View File

@@ -16,7 +16,6 @@ import { InfoIcon, DeleteIcon } from "@chakra-ui/icons";
interface URIInputParams {
uri: string;
setUri: (value: string) => void;
bg: string;
isConnected: boolean;
initWalletConnect: () => void;
}
@@ -24,7 +23,6 @@ interface URIInputParams {
function URIInput({
uri,
setUri,
bg,
isConnected,
initWalletConnect,
}: URIInputParams) {
@@ -63,6 +61,7 @@ function URIInput({
<InputGroup>
<Input
pr={isConnected ? "0" : "3.5rem"}
bg={"brand.lightBlack"}
placeholder="wc:xyz123"
aria-label="uri"
autoComplete="off"
@@ -73,7 +72,6 @@ function URIInput({
setPasted(true);
setUri(e.clipboardData.getData("text"));
}}
bg={bg}
isDisabled={isConnected}
/>
{uri && !isConnected && (

3
src/components/Body/WalletConnectTab/index.tsx
View File

@@ -7,7 +7,6 @@ import URIInput from "./URIInput";
interface WalletConnectTabParams {
uri: string;
setUri: (value: string) => void;
bg: string;
isConnected: boolean;
initWalletConnect: () => void;
loading: boolean;
@@ -20,7 +19,6 @@ interface WalletConnectTabParams {
function WalletConnectTab({
uri,
setUri,
bg,
isConnected,
initWalletConnect,
loading,
@@ -34,7 +32,6 @@ function WalletConnectTab({
<URIInput
uri={uri}
setUri={setUri}
bg={bg}
isConnected={isConnected}
initWalletConnect={initWalletConnect}
/>

3
src/components/Body/index.tsx
View File

@@ -641,7 +641,6 @@ function Body() {
setShowAddress={setShowAddress}
setAddress={setAddress}
setIsAddressValid={setIsAddressValid}
bg={bgColor[colorMode]}
isAddressValid={isAddressValid}
selectedTabIndex={selectedTabIndex}
isConnected={isConnected}
@@ -666,7 +665,6 @@ function Body() {
<WalletConnectTab
uri={uri}
setUri={setUri}
bg={bgColor[colorMode]}
isConnected={isConnected}
initWalletConnect={initWalletConnect}
loading={loading}
@@ -683,7 +681,6 @@ function Body() {
initIFrame={initIFrame}
setInputAppUrl={setInputAppUrl}
inputAppUrl={inputAppUrl}
bg={bgColor[colorMode]}
isIFrameLoading={isIFrameLoading}
appUrl={appUrl}
iframeKey={iframeKey}

14
src/components/Footer.tsx
View File

@@ -92,7 +92,13 @@ function Footer() {
</Box>
)}
<VStack>
<Alert status="info" variant="solid" rounded="lg">
<Alert
status="info"
bg={"whiteAlpha.200"}
color="white"
variant="solid"
rounded="lg"
>
<Stack direction={{ base: "column", md: "row" }}>
<Center>Found the project helpful?</Center>
<HStack>
@@ -113,13 +119,11 @@ function Footer() {
<>
<Button
size={"sm"}
colorScheme={"linkedin"}
fontWeight={"bold"}
onClick={() => {
openSupportModal();
}}
border="1px"
borderColor={"cyan.500"}
bg={"blackAlpha.500"}
>
Support!
</Button>
@@ -133,7 +137,7 @@ function Footer() {
backdropFilter="auto"
backdropBlur="3px"
/>
<ModalContent>
<ModalContent bg={"brand.lightBlack"}>
<ModalHeader>Support</ModalHeader>
<ModalCloseButton />
<ModalBody pb={6}>

7
src/components/Navbar.tsx
View File

@@ -15,7 +15,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faGithub } from "@fortawesome/free-brands-svg-icons";
function Navbar() {
const { colorMode, toggleColorMode } = useColorMode();
const { colorMode } = useColorMode();
const underlineColor = { light: "gray.500", dark: "gray.400" };
return (
@@ -32,14 +32,11 @@ function Navbar() {
pr="2rem"
>
<HStack>
<Image src="/logo.png" w="3rem" mr="1rem" />
<Image src="/logo-no-bg.png" w="3rem" mr="1rem" />
<Text>Impersonator</Text>
</HStack>
</Heading>
<Flex flex="1" justifyContent="flex-end" alignItems={"center"}>
<Button onClick={toggleColorMode} rounded="full" h="40px" w="40px">
{colorMode === "light" ? <MoonIcon /> : <SunIcon />}
</Button>
<Box pl="1rem">
<Link
href={"https://github.com/apoorvlathey/impersonator"}

19
src/theme.ts
View File

@@ -1,10 +1,27 @@
import { extendTheme, ThemeConfig } from "@chakra-ui/react";
const colors = {
brand: {
black: "#101010",
lightBlack: "#1a1a1a",
},
};
const config: ThemeConfig = {
initialColorMode: "dark",
useSystemColorMode: false,
};
const theme = extendTheme({ config });
const theme = extendTheme({
styles: {
global: {
body: {
bg: "brand.black",
},
},
},
config,
colors,
});
export default theme;