调整部分样式
This commit is contained in:
parent
8b16813403
commit
01d282535e
File diff suppressed because one or more lines are too long
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</>
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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,8 +14,11 @@ interface Props {
|
|||
onDismiss?: () => void;
|
||||
}
|
||||
|
||||
const AccountModal: React.FC<Props> = ({ account, logout, onDismiss = () => null }) => (
|
||||
<Modal title="Your wallet" onDismiss={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
|
||||
|
|
@ -24,9 +28,9 @@ const AccountModal: React.FC<Props> = ({ account, logout, onDismiss = () => null
|
|||
</Text>
|
||||
<Flex mb="32px">
|
||||
<LinkExternal small href={`https://bscscan.com/address/${account}`} mr="16px">
|
||||
View on BscScan
|
||||
Etherscan
|
||||
</LinkExternal>
|
||||
<CopyToClipboard toCopy={account}>Copy Address</CopyToClipboard>
|
||||
<CopyToClipboard toCopy={account}>{t("Copy the address")}</CopyToClipboard>
|
||||
</Flex>
|
||||
<Flex justifyContent="center">
|
||||
<Button
|
||||
|
|
@ -38,10 +42,11 @@ const AccountModal: React.FC<Props> = ({ account, logout, onDismiss = () => null
|
|||
onDismiss();
|
||||
}}
|
||||
>
|
||||
Logout
|
||||
{t("Logout")}
|
||||
</Button>
|
||||
</Flex>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default AccountModal;
|
||||
|
|
|
|||
|
|
@ -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,8 +20,10 @@ const HelpLink = styled(Link)`
|
|||
margin-top: 24px;
|
||||
`;
|
||||
|
||||
const ConnectModal: React.FC<Props> = ({ login, onDismiss = () => null }) => (
|
||||
<Modal title="Connect to a wallet" onDismiss={onDismiss}>
|
||||
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}
|
||||
|
|
@ -32,9 +35,10 @@ const ConnectModal: React.FC<Props> = ({ login, onDismiss = () => null }) => (
|
|||
))}
|
||||
<HelpLink href="https://docs.pancakeswap.finance/get-started/connection-guide" external>
|
||||
<HelpIcon color="primary" mr="6px" />
|
||||
Learn how to connect
|
||||
{t("How to use")}
|
||||
</HelpLink>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default ConnectModal;
|
||||
|
|
|
|||
Loading…
Reference in New Issue