调整部分样式

This commit is contained in:
myf 2022-05-12 18:33:28 +08:00
parent 8b16813403
commit 01d282535e
8 changed files with 5977 additions and 54 deletions

File diff suppressed because one or more lines are too long

View File

@ -30,6 +30,7 @@ export { default as CrownIcon } from "./Icons/Crown";
export { default as ErrorIcon } from "./Icons/Error";
export { default as HelpIcon } from "./Icons/Help";
export { default as More } from "./Icons/More";
export { default as HighIcon } from "./Icons/HighIcon";
export { default as HistoryIcon } from "./Icons/History";
export { default as InfoIcon } from "./Icons/Info";
export { default as LanguageIcon } from "./Icons/Language";

View File

@ -5,11 +5,12 @@ import { CopyToClipboard } from "../../WalletModal";
interface Props {
inviteUrl: string;
title: string;
onDismiss?: () => void;
}
const InviteModal: React.FC<Props> = ({ inviteUrl, onDismiss }) => (
<Modal title="Invite" onDismiss={onDismiss}>
const InviteModal: React.FC<Props> = ({ inviteUrl, title, onDismiss }) => (
<Modal title={title} onDismiss={onDismiss}>
<CopyToClipboard toCopy={inviteUrl}>
<Text fontSize="20px" bold style={{ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
{inviteUrl}

View File

@ -2,7 +2,9 @@ import React from "react";
import styled, { keyframes } from "styled-components";
import { Link } from "react-router-dom";
import { LogoIcon } from "../../../components/Svg";
import HighIcon from "../../../components/Svg/Icons/HighIcon";
import Flex from "../../../components/Box/Flex";
import Text from "../../../components/Text/Text";
import { HamburgerIcon, HamburgerCloseIcon, LogoIcon as LogoWithText } from "../icons";
import MenuButton from "./MenuButton";
@ -27,6 +29,15 @@ const StyledLink = styled(Link)`
display: none;
}
}
.mobile-Text {
margin-left: 10px;
color: #000000;
font-size: 18px;
display: none;
${({ theme }) => theme.mediaQueries.md} {
display: block;
}
}
.desktop-icon {
width: 160px;
display: none;
@ -52,8 +63,10 @@ const Logo: React.FC<Props> = ({ isPushed, togglePush, isDark, href }) => {
const isAbsoluteUrl = href.startsWith("http");
const innerLogo = (
<>
<LogoIcon className="mobile-icon" />
<LogoWithText className="desktop-icon" isDark={isDark} />
{/* <LogoIcon className="mobile-icon" /> */}
{/* <LogoWithText className="desktop-icon" isDark={isDark} /> */}
<HighIcon width={30} height={30} />
<Text className="mobile-Text">High City Swap</Text>
</>
);

View File

@ -211,7 +211,7 @@ const PanelFooter: React.FC<Props> = ({
</>
</SocialEntry>
<SettingsEntry>
<ThemeSwitcher isDark={isDark} toggleTheme={toggleTheme} />
{/* <ThemeSwitcher isDark={isDark} toggleTheme={toggleTheme} /> */}
<LangSelector currentLang={currentLang} langs={langs} setLang={setLang} />
</SettingsEntry>
</Container>

View File

@ -16,7 +16,7 @@ interface Props {
const UserBlock: React.FC<Props> = ({ account, login, logout, inviteUrl }) => {
const { t } = useContext(ConfigContext);
const { onPresentConnectModal, onPresentAccountModal } = useWalletModal(login, logout, account);
const [onPresentInviteModal] = useModal(<InviteModal inviteUrl={inviteUrl} />);
const [onPresentInviteModal] = useModal(<InviteModal title={t("Invite")} inviteUrl={inviteUrl} />);
const accountEllipsis = account ? `${account.substring(0, 4)}...${account.substring(account.length - 4)}` : null;
return (
<div>

View File

@ -1,4 +1,4 @@
import React from "react";
import React, { useContext } from "react";
import Button from "../../components/Button/Button";
import Text from "../../components/Text/Text";
import LinkExternal from "../../components/Link/LinkExternal";
@ -6,6 +6,7 @@ import Flex from "../../components/Box/Flex";
import { Modal } from "../Modal";
import CopyToClipboard from "./CopyToClipboard";
import { connectorLocalStorageKey } from "./config";
import { ConfigContext } from "../../components/ConfigProvider/context";
interface Props {
account: string;
@ -13,35 +14,39 @@ interface Props {
onDismiss?: () => void;
}
const AccountModal: React.FC<Props> = ({ account, logout, onDismiss = () => null }) => (
<Modal title="Your wallet" onDismiss={onDismiss}>
<Text
fontSize="20px"
bold
style={{ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", marginBottom: "8px" }}
>
{account}
</Text>
<Flex mb="32px">
<LinkExternal small href={`https://bscscan.com/address/${account}`} mr="16px">
View on BscScan
</LinkExternal>
<CopyToClipboard toCopy={account}>Copy Address</CopyToClipboard>
</Flex>
<Flex justifyContent="center">
<Button
scale="sm"
variant="secondary"
onClick={() => {
logout();
window.localStorage.removeItem(connectorLocalStorageKey);
onDismiss();
}}
const AccountModal: React.FC<Props> = ({ account, logout, onDismiss = () => null }) => {
const { t } = useContext(ConfigContext);
return (
<Modal title={t("my wallet")} onDismiss={onDismiss}>
<Text
fontSize="20px"
bold
style={{ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", marginBottom: "8px" }}
>
Logout
</Button>
</Flex>
</Modal>
);
{account}
</Text>
<Flex mb="32px">
<LinkExternal small href={`https://bscscan.com/address/${account}`} mr="16px">
Etherscan
</LinkExternal>
<CopyToClipboard toCopy={account}>{t("Copy the address")}</CopyToClipboard>
</Flex>
<Flex justifyContent="center">
<Button
scale="sm"
variant="secondary"
onClick={() => {
logout();
window.localStorage.removeItem(connectorLocalStorageKey);
onDismiss();
}}
>
{t("Logout")}
</Button>
</Flex>
</Modal>
);
};
export default AccountModal;

View File

@ -1,4 +1,5 @@
import React from "react";
import React, { useContext } from "react";
import { ConfigContext } from "../../components/ConfigProvider/context";
import styled from "styled-components";
import { Link } from "../../components/Link";
import { HelpIcon } from "../../components/Svg";
@ -19,22 +20,25 @@ const HelpLink = styled(Link)`
margin-top: 24px;
`;
const ConnectModal: React.FC<Props> = ({ login, onDismiss = () => null }) => (
<Modal title="Connect to a wallet" onDismiss={onDismiss}>
{config.map((entry, index) => (
<WalletCard
key={entry.title}
login={login}
walletConfig={entry}
onDismiss={onDismiss}
mb={index < config.length - 1 ? "8px" : "0"}
/>
))}
<HelpLink href="https://docs.pancakeswap.finance/get-started/connection-guide" external>
<HelpIcon color="primary" mr="6px" />
Learn how to connect
</HelpLink>
</Modal>
);
const ConnectModal: React.FC<Props> = ({ login, onDismiss = () => null }) => {
const { t } = useContext(ConfigContext);
return (
<Modal title={t("Connect the purse")} onDismiss={onDismiss}>
{config.map((entry, index) => (
<WalletCard
key={entry.title}
login={login}
walletConfig={entry}
onDismiss={onDismiss}
mb={index < config.length - 1 ? "8px" : "0"}
/>
))}
<HelpLink href="https://docs.pancakeswap.finance/get-started/connection-guide" external>
<HelpIcon color="primary" mr="6px" />
{t("How to use")}
</HelpLink>
</Modal>
);
};
export default ConnectModal;