diff --git a/src/components/Header/AdministrationMenu.tsx b/src/components/Header/AdministrationMenu.tsx index cb84d563aa..bac86e57d0 100644 --- a/src/components/Header/AdministrationMenu.tsx +++ b/src/components/Header/AdministrationMenu.tsx @@ -1,12 +1,11 @@ import React, { useMemo, useRef } from 'react' import styled, { css } from 'styled-components' import { darken } from 'polished' -import { NavLink, useHistory } from 'react-router-dom' +import { useHistory } from 'react-router-dom' import Column from 'components/Column' -import { ExternalLink } from 'theme' +import { ExternalLink, MEDIA_WIDTHS } from 'theme' import { checkAllowed, routes } from 'utils/routes' -import Popover from 'components/Popover' import useToggle from 'hooks/useToggle' import { useOnClickOutside } from 'hooks/useOnClickOutside' import { ChevronElement } from 'components/ChevronElement' @@ -42,9 +41,7 @@ const Content: React.FC = ({ open, toggle }) => { } return ( - (e ? e.stopPropagation() : null)} - > + {isAdmin ? ( Bridge @@ -79,7 +76,7 @@ const Content: React.FC = ({ open, toggle }) => { {isAdmin ? ( - navigateTo(routes.tenant)}>SaaS configuraiton + navigateTo(routes.tenant)}>SaaS configuration ) : null} @@ -92,21 +89,17 @@ const AdministrationMenu = () => { useOnClickOutside(node, open ? toggle : undefined) return ( - - } - placement={'bottom-start'} - offset={[0, 8]} - > - + + + star
Administration
{}} /> -
-
-
+ + + {open && } + + ) } @@ -120,6 +113,23 @@ const PopoverContent = styled.div` padding: 24px; border-radius: 8px; border: solid 1px #e6e6ff; + position: absolute; + top: 70px; + width: 250px; + z-index: 99; + background: white; + @media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) { + top: 54px; + left: 0; + } + @media screen and (max-width: ${MEDIA_WIDTHS.upToExtraSmall}px) { + right: 70px; + left: 0; + } + @media screen and (max-width: 400px) { + right: 30px; + left: 0; + } ` export const disabledStyle = css` @@ -139,7 +149,6 @@ const navLinkStyles = css` color: ${({ theme }) => theme.text12}; width: fit-content; word-break: break-word; - // opacity: 0.4; border-radius: 45px; font-weight: 500; &.${activeClassName} { @@ -154,15 +163,6 @@ const navLinkStyles = css` color: #b8b8cc; } } - @media (max-width: 1500px) { - font-size: 14px; - } - @media (max-width: 1300px) { - font-size: 16px; - } - @media (max-width: 1250px) { - font-size: 15px; - } ` const Container = styled.div` margin-right: 8px; @@ -171,7 +171,7 @@ const Container = styled.div` ` const subMenuLinkStyle = css` - font-size: 14px; + font-size: 13px; line-height: 24px; font-weight: 500; text-transform: none; @@ -192,8 +192,8 @@ const SubMenuExternalLink = styled(ExternalLink)<{ disabled?: boolean }>` } ` -const StyledBox = styled.div` - font-size: 14px; +const SelectorControls = styled.div` + font-size: 13px; font-weight: 500; border: 1px solid #e6e6ff; padding: 13px 12px; @@ -219,7 +219,7 @@ const StyledBox = styled.div` ` const Link = styled.div` - font-size: 14px; + font-size: 13px; line-height: 24px; font-weight: 500; text-transform: none; @@ -231,3 +231,7 @@ const Link = styled.div` color: #b8b8cc; } ` + +const StyledBox = styled.div` + position: relative; +` diff --git a/src/components/Header/NetworkCard.tsx b/src/components/Header/NetworkCard.tsx index 6790bc2c1f..6b60718eb0 100644 --- a/src/components/Header/NetworkCard.tsx +++ b/src/components/Header/NetworkCard.tsx @@ -118,7 +118,7 @@ const FlyoutMenu = styled.div` border: 1px solid #e6e6ff; display: flex; flex-direction: column; - font-size: 14px; + font-size: 13px; overflow: auto; padding: 6px 24px; position: absolute; @@ -185,7 +185,7 @@ const StyledBox = styled.div` ` const PendingText = styled.div` - font-size: 14px; + font-size: 13px; color: #292933; font-weight: 500; margin-right: 10px; diff --git a/src/components/Vault/WithdrawRequestForm.tsx b/src/components/Vault/WithdrawRequestForm.tsx index 2c0b840e21..a391c62455 100644 --- a/src/components/Vault/WithdrawRequestForm.tsx +++ b/src/components/Vault/WithdrawRequestForm.tsx @@ -230,7 +230,13 @@ export const WithdrawRequestForm = ({ currency, changeModal, token, onRedirect } disabled={!!inputError || loadingFee || loadingWithdraw} onClick={onClick} > - {loadingFee || loadingWithdraw ? ( + {loadingWithdraw ? ( + + + + ) : null} + + {loadingFee ? ( {`Sending Withdrawal Fee`}