diff --git a/src/widgets/Menu/Menu.tsx b/src/widgets/Menu/Menu.tsx index fee0ebb09..01fb07843 100644 --- a/src/widgets/Menu/Menu.tsx +++ b/src/widgets/Menu/Menu.tsx @@ -4,12 +4,12 @@ import throttle from "lodash/throttle"; import Overlay from "../../components/Overlay/Overlay"; import Flex from "../../components/Box/Flex"; import { useMatchBreakpoints } from "../../hooks"; -import Logo from "./Logo"; -import Panel from "./Panel"; -import UserBlock from "./UserBlock"; +import Logo from "./components/Logo"; +import Panel from "./components/Panel"; +import UserBlock from "./components/UserBlock"; import { NavProps } from "./types"; +import Avatar from "./components/Avatar"; import { MENU_HEIGHT, SIDEBAR_WIDTH_REDUCED, SIDEBAR_WIDTH_FULL } from "./config"; -import Avatar from "./Avatar"; const Wrapper = styled.div` position: relative; diff --git a/src/widgets/Menu/Accordion.tsx b/src/widgets/Menu/components/Accordion.tsx similarity index 90% rename from src/widgets/Menu/Accordion.tsx rename to src/widgets/Menu/components/Accordion.tsx index 5981951a4..4556c87f1 100644 --- a/src/widgets/Menu/Accordion.tsx +++ b/src/widgets/Menu/components/Accordion.tsx @@ -1,9 +1,9 @@ import React, { useState } from "react"; import styled from "styled-components"; -import { MENU_ENTRY_HEIGHT } from "./config"; +import { MENU_ENTRY_HEIGHT } from "../config"; import { MenuEntry, LinkLabel } from "./MenuEntry"; -import { PushedProps } from "./types"; -import { ArrowDropDownIcon, ArrowDropUpIcon } from "../../components/Svg"; +import { PushedProps } from "../types"; +import { ArrowDropDownIcon, ArrowDropUpIcon } from "../../../components/Svg"; interface Props extends PushedProps { label: string; diff --git a/src/widgets/Menu/Avatar.tsx b/src/widgets/Menu/components/Avatar.tsx similarity index 92% rename from src/widgets/Menu/Avatar.tsx rename to src/widgets/Menu/components/Avatar.tsx index 44ce4aa40..d2e6dff3a 100644 --- a/src/widgets/Menu/Avatar.tsx +++ b/src/widgets/Menu/components/Avatar.tsx @@ -1,8 +1,8 @@ import React from "react"; import styled from "styled-components"; import { Link } from "react-router-dom"; -import { Profile } from "./types"; -import NoProfileAvatar from "../../components/Svg/Icons/NoProfileAvatar"; +import { Profile } from "../types"; +import NoProfileAvatar from "../../../components/Svg/Icons/NoProfileAvatar"; interface AvatarProps { profile: Profile; diff --git a/src/widgets/Menu/Logo.tsx b/src/widgets/Menu/components/Logo.tsx similarity index 92% rename from src/widgets/Menu/Logo.tsx rename to src/widgets/Menu/components/Logo.tsx index 9eb157e60..f9f53d576 100644 --- a/src/widgets/Menu/Logo.tsx +++ b/src/widgets/Menu/components/Logo.tsx @@ -1,9 +1,9 @@ import React from "react"; import styled from "styled-components"; import { Link } from "react-router-dom"; -import { LogoIcon } from "../../components/Svg"; -import Flex from "../../components/Box/Flex"; -import { HamburgerIcon, HamburgerCloseIcon, LogoIcon as LogoWithText } from "./icons"; +import { LogoIcon } from "../../../components/Svg"; +import Flex from "../../../components/Box/Flex"; +import { HamburgerIcon, HamburgerCloseIcon, LogoIcon as LogoWithText } from "../icons"; import MenuButton from "./MenuButton"; interface Props { diff --git a/src/widgets/Menu/MenuButton.tsx b/src/widgets/Menu/components/MenuButton.tsx similarity index 82% rename from src/widgets/Menu/MenuButton.tsx rename to src/widgets/Menu/components/MenuButton.tsx index 433d9d87a..fd9490b80 100644 --- a/src/widgets/Menu/MenuButton.tsx +++ b/src/widgets/Menu/components/MenuButton.tsx @@ -1,5 +1,5 @@ import styled from "styled-components"; -import Button from "../../components/Button/Button"; +import Button from "../../../components/Button/Button"; const MenuButton = styled(Button)` color: ${({ theme }) => theme.colors.text}; diff --git a/src/widgets/Menu/MenuEntry.tsx b/src/widgets/Menu/components/MenuEntry.tsx similarity index 95% rename from src/widgets/Menu/MenuEntry.tsx rename to src/widgets/Menu/components/MenuEntry.tsx index 0051804eb..537e5e8e8 100644 --- a/src/widgets/Menu/MenuEntry.tsx +++ b/src/widgets/Menu/components/MenuEntry.tsx @@ -1,5 +1,5 @@ import styled, { keyframes, DefaultTheme } from "styled-components"; -import { MENU_ENTRY_HEIGHT } from "./config"; +import { MENU_ENTRY_HEIGHT } from "../config"; export interface Props { secondary?: boolean; @@ -53,7 +53,7 @@ const MenuEntry = styled.div` flex-shrink: 0; &.rainbow { - -webkit-background-clip: text; + background-clip: text; animation: ${rainbowAnimation} 3s ease-in-out infinite; background: ${({ theme }) => theme.colors.gradients.bubblegum}; background-size: 400% 100%; diff --git a/src/widgets/Menu/MenuLink.tsx b/src/widgets/Menu/components/MenuLink.tsx similarity index 100% rename from src/widgets/Menu/MenuLink.tsx rename to src/widgets/Menu/components/MenuLink.tsx diff --git a/src/widgets/Menu/Panel.tsx b/src/widgets/Menu/components/Panel.tsx similarity index 91% rename from src/widgets/Menu/Panel.tsx rename to src/widgets/Menu/components/Panel.tsx index 8abb61d72..54f853231 100644 --- a/src/widgets/Menu/Panel.tsx +++ b/src/widgets/Menu/components/Panel.tsx @@ -2,8 +2,8 @@ import React from "react"; import styled from "styled-components"; import PanelBody from "./PanelBody"; import PanelFooter from "./PanelFooter"; -import { SIDEBAR_WIDTH_REDUCED, SIDEBAR_WIDTH_FULL } from "./config"; -import { PanelProps, PushedProps } from "./types"; +import { SIDEBAR_WIDTH_REDUCED, SIDEBAR_WIDTH_FULL } from "../config"; +import { PanelProps, PushedProps } from "../types"; interface Props extends PanelProps, PushedProps { showMenu: boolean; diff --git a/src/widgets/Menu/PanelBody.tsx b/src/widgets/Menu/components/PanelBody.tsx similarity index 94% rename from src/widgets/Menu/PanelBody.tsx rename to src/widgets/Menu/components/PanelBody.tsx index fd71b5ea9..9f268c836 100644 --- a/src/widgets/Menu/PanelBody.tsx +++ b/src/widgets/Menu/components/PanelBody.tsx @@ -1,12 +1,12 @@ import React from "react"; import styled from "styled-components"; import { useLocation } from "react-router-dom"; -import { SvgProps } from "../../components/Svg"; -import * as IconModule from "./icons"; +import { SvgProps } from "../../../components/Svg"; +import * as IconModule from "../icons"; import Accordion from "./Accordion"; import { MenuEntry, LinkLabel } from "./MenuEntry"; import MenuLink from "./MenuLink"; -import { PanelProps, PushedProps } from "./types"; +import { PanelProps, PushedProps } from "../types"; interface Props extends PanelProps, PushedProps { isMobile: boolean; diff --git a/src/widgets/Menu/PanelFooter.tsx b/src/widgets/Menu/components/PanelFooter.tsx similarity index 86% rename from src/widgets/Menu/PanelFooter.tsx rename to src/widgets/Menu/components/PanelFooter.tsx index 836408d0b..09c6a9b85 100644 --- a/src/widgets/Menu/PanelFooter.tsx +++ b/src/widgets/Menu/components/PanelFooter.tsx @@ -1,17 +1,17 @@ import React from "react"; import styled from "styled-components"; -import { PancakeRoundIcon, CogIcon, SvgProps } from "../../components/Svg"; -import Text from "../../components/Text/Text"; -import Flex from "../../components/Box/Flex"; -import Dropdown from "../../components/Dropdown/Dropdown"; -import Link from "../../components/Link/Link"; -import Skeleton from "../../components/Skeleton/Skeleton"; -import Button from "../../components/Button/Button"; -import IconButton from "../../components/Button/IconButton"; +import { PancakeRoundIcon, CogIcon, SvgProps } from "../../../components/Svg"; +import Text from "../../../components/Text/Text"; +import Flex from "../../../components/Box/Flex"; +import Dropdown from "../../../components/Dropdown/Dropdown"; +import Link from "../../../components/Link/Link"; +import Skeleton from "../../../components/Skeleton/Skeleton"; +import Button from "../../../components/Button/Button"; +import IconButton from "../../../components/Button/IconButton"; import MenuButton from "./MenuButton"; -import * as IconModule from "./icons"; -import { socials, MENU_ENTRY_HEIGHT } from "./config"; -import { PanelProps, PushedProps } from "./types"; +import * as IconModule from "../icons"; +import { socials, MENU_ENTRY_HEIGHT } from "../config"; +import { PanelProps, PushedProps } from "../types"; interface Props extends PanelProps, PushedProps {} diff --git a/src/widgets/Menu/UserBlock.tsx b/src/widgets/Menu/components/UserBlock.tsx similarity index 84% rename from src/widgets/Menu/UserBlock.tsx rename to src/widgets/Menu/components/UserBlock.tsx index bcacd8d20..6457a85a0 100644 --- a/src/widgets/Menu/UserBlock.tsx +++ b/src/widgets/Menu/components/UserBlock.tsx @@ -1,7 +1,7 @@ import React from "react"; -import Button from "../../components/Button/Button"; -import { useWalletModal } from "../WalletModal"; -import { Login } from "../WalletModal/types"; +import Button from "../../../components/Button/Button"; +import { useWalletModal } from "../../WalletModal"; +import { Login } from "../../WalletModal/types"; interface Props { account?: string; diff --git a/src/widgets/Menu/index.stories.tsx b/src/widgets/Menu/index.stories.tsx index a1b6288fa..eecf849b5 100644 --- a/src/widgets/Menu/index.stories.tsx +++ b/src/widgets/Menu/index.stories.tsx @@ -1,11 +1,11 @@ -import React from "react"; +import React, { useEffect, useState } from "react"; import noop from "lodash/noop"; import { BrowserRouter } from "react-router-dom"; import Flex from "../../components/Box/Flex"; import Heading from "../../components/Heading/Heading"; import Text from "../../components/Text/Text"; +import { MenuEntry } from "./components/MenuEntry"; import Menu from "./Menu"; -import { MenuEntry } from "./MenuEntry"; import { LangType } from "./types"; import { links } from "./config"; @@ -17,22 +17,51 @@ export default { const langs: LangType[] = [...Array(20)].map((_, i) => ({ code: `en${i}`, language: `English${i}` })); +// This hook is used to simulate a props change, and force a re rendering +const useProps = () => { + const [props, setProps] = useState({ + account: "0xbdda50183d817c3289f895a4472eb475967dc980", + login: noop, + logout: noop, + isDark: false, + toggleTheme: noop, + langs, + setLang: noop, + currentLang: "EN", + cakePriceUsd: 0.023158668932877668, + links, + profile: null, + }); + + useEffect(() => { + const interval = setInterval(() => { + setProps({ + account: "0xbdda50183d817c3289f895a4472eb475967dc980", + login: noop, + logout: noop, + isDark: false, + toggleTheme: noop, + langs, + setLang: noop, + currentLang: "EN", + cakePriceUsd: 0.023158668932877668, + links, + profile: null, + }); + }, 2000); + return () => { + clearInterval(interval); + }; + }, []); + + return props; +}; + export const Connected: React.FC = () => { + const props = useProps(); return ( - +
Page body