Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Widget UI 3 #3180

Closed
wants to merge 3 commits into from
Closed

Widget UI 3 #3180

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b6fb7c4
feat: fix semicolons
fairlighteth Oct 3, 2023
e33cbe7
feat: menu styling
fairlighteth Oct 3, 2023
e55c121
feat: general styling
fairlighteth Oct 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/cowswap-frontend/src/assets/icon/carret.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 9 additions & 1 deletion apps/cowswap-frontend/src/common/pure/ConfirmationPendingContent/styled.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -302,11 +302,19 @@ export const StepsWrapper = styled.div`
margin: auto;
position: absolute;
width: 100%;
max-width: 162px;
max-width: 35%;
left: 0;
right: 0;
top: 32px;
z-index: 1;

${({ theme }) => theme.mediaWidth.upToSmall`
max-width: 25%;
`}

${({ theme }) => theme.mediaWidth.upToVerySmall`
max-width: 20%;
`}
}

> hr::before {
Expand Down
15 changes: 12 additions & 3 deletions apps/cowswap-frontend/src/legacy/components/SearchModal/CurrencyList/styled.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,17 +75,26 @@ export const Wrapper = styled.div`
`};
}
}

${StyledLogo} {
height: 36px;
width: 36px;
border-radius: 36px;
--size: 36px;
height: var(--size);
width: var(--size);
border-radius: var(--size);

${({ theme }) => theme.mediaWidth.upToSmall`
--size: 32px;
`};
}

${TagLink} {
color: var(${UI.COLOR_TEXT1});
}

${LightGreyCard} {
background: var(${UI.COLOR_CONTAINER_BG_01});
}

${LightGreyCard} ${RowFixed} > div {
color: var(${UI.COLOR_TEXT1});
}
Expand Down
21 changes: 14 additions & 7 deletions apps/cowswap-frontend/src/legacy/components/SearchModal/CurrencySearch/CurrencySearchMod.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { ChangeEvent, KeyboardEvent, RefObject, useCallback, useEffect, useMemo,
import { searchByAddressAnalytics } from '@cowprotocol/analytics'
import { useTheme, useDebounce, useNetworkName, useOnClickOutside, useToggle } from '@cowprotocol/common-hooks'
import { isAddress } from '@cowprotocol/common-utils'
import { isInjectedWidget } from '@cowprotocol/common-utils'
import { Row } from '@cowprotocol/ui'
import { useWalletInfo } from '@cowprotocol/wallet'
import { Currency, Token } from '@uniswap/sdk-core'
Expand Down Expand Up @@ -205,6 +206,8 @@ export function CurrencySearch({
inputRef.current?.focus()
}, [])

const isInjectedWidgetMode = isInjectedWidget()

return (
<>
<ContentWrapper>
Expand Down Expand Up @@ -278,13 +281,17 @@ export function CurrencySearch({
</ThemedText.Main>
</Column>
)}
<Footer>
<Row justify="center">
<ButtonText onClick={showManageView} color={theme.primary1} className="list-token-manage-button">
<FooterButtonTextComponent theme={theme} />
</ButtonText>
</Row>
</Footer>

{!isInjectedWidgetMode && (
<Footer>
<Row justify="center">
<ButtonText onClick={showManageView} color={theme.primary1} className="list-token-manage-button">
<FooterButtonTextComponent theme={theme} />
</ButtonText>
</Row>
</Footer>
)}

</ContentWrapper>
</>
)
Expand Down
19 changes: 10 additions & 9 deletions apps/cowswap-frontend/src/legacy/components/SearchModal/styleds.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,23 +49,24 @@ export const SearchInput = styled.input`
align-items: center;
width: 100%;
white-space: nowrap;
background: none;
border: none;
outline: none;
border-radius: 20px;
color: var(${UI.COLOR_TEXT1});
border-style: solid;
border: 1px solid ${({ theme }) => theme.bg3};
-webkit-appearance: none;

font-size: 18px;
background: var(${UI.COLOR_GREY});
color: var(${UI.COLOR_TEXT1});
border: 1px solid var(${UI.COLOR_BORDER});
appearance: none;
font-size: 16px;
border-radius: 12px;

::placeholder {
color: ${({ theme }) => theme.text3};
color: var(${UI.COLOR_TEXT1});
opacity: 0.7;
}

transition: border 100ms;
:focus {
border: 1px solid ${({ theme }) => theme.primary1};
border: 1px solid var(${UI.COLOR_LINK});
outline: none;
}
`
Expand Down
2 changes: 1 addition & 1 deletion apps/cowswap-frontend/src/legacy/components/Settings/SettingsMod.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ export const EmojiWrapper = styled.div`
`

const StyledMenu = styled.div`
margin-left: 0.5rem;
margin: 0 0 0 auto;
display: flex;
justify-content: center;
align-items: center;
Expand Down
8 changes: 4 additions & 4 deletions apps/cowswap-frontend/src/legacy/components/Tokens/styled.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,8 @@ export const TokenSearchInput = styled.input`
align-self: flex-end;
box-shadow: none;
background: var(${UI.COLOR_GREY});
border: 1px solid ${({ theme }) => theme.bg1};
color: var(${UI.COLOR_TEXT1});
border: 1px solid var(${UI.COLOR_BORDER});
border-radius: 21px;
transition: background 0.2s ease-in-out, max-width 0.2s ease-in-out;
appearance: none;
Expand All @@ -26,7 +27,6 @@ export const TokenSearchInput = styled.input`

&:focus {
max-width: 500px;
background: var(${UI.COLOR_CONTAINER_BG_01});
outline: 0;

${({ theme }) => theme.mediaWidth.upToMedium`
Expand All @@ -35,7 +35,7 @@ export const TokenSearchInput = styled.input`
}

&::placeholder {
font-size: 14px !important;
font-size: inherit;
color: ${({ theme }) => transparentize(0.5, theme.darkMode ? theme.white : theme.text1)};
}

Expand Down Expand Up @@ -88,7 +88,7 @@ export const ResponsiveLogo = styled(CurrencyLogo)`
width: 21px;
height: 21px;
border-radius: 21px;
`};
`}
`

export const Label = styled.div<{ end?: number }>`
Expand Down
10 changes: 9 additions & 1 deletion apps/cowswap-frontend/src/legacy/components/TransactionConfirmationModal/styled.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -312,11 +312,19 @@ export const StepsWrapper = styled.div`
margin: auto;
position: absolute;
width: 100%;
max-width: 162px;
max-width: 35%;
left: 0;
right: 0;
top: 32px;
z-index: 1;

${({ theme }) => theme.mediaWidth.upToSmall`
max-width: 25%;
`}

${({ theme }) => theme.mediaWidth.upToVerySmall`
max-width: 20%;
`}
}

> hr::before {
Expand Down
2 changes: 1 addition & 1 deletion apps/cowswap-frontend/src/legacy/theme/baseTheme.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -489,7 +489,7 @@ export const ThemedGlobalStyle = createGlobalStyle`

html {
background-color: ${({ theme }) => theme.isInjectedWidgetMode ? 'transparent' : `var(${UI.COLOR_CONTAINER_BG_02})`};
${({ theme }) => !theme.isInjectedWidgetMode && theme.body.background};
${({ theme }) => theme.body.background};
}

*, *:after, *:before { box-sizing:border-box; }
Expand Down
44 changes: 25 additions & 19 deletions apps/cowswap-frontend/src/modules/application/containers/TradeWidgetLinks/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,25 +38,26 @@ const MENU_ITEMS: MenuItemConfig[] = [
interface TradeWidgetLinksProps {
highlightedBadgeText?: string
highlightedBadgeType?: BadgeType
isDropdown?: boolean;
isDropdown?: boolean
}

export function TradeWidgetLinks({
highlightedBadgeText,
highlightedBadgeType,
isDropdown = false
isDropdown = false,
}: TradeWidgetLinksProps) {
const tradeContext = useTradeRouteContext();
const location = useLocation();
const [isDropdownVisible, setDropdownVisible] = useState(false);
const tradeContext = useTradeRouteContext()
const location = useLocation()
const [isDropdownVisible, setDropdownVisible] = useState(false)

const handleMenuItemClick = (_item: MenuItemConfig) => {
setDropdownVisible(false);
};
if (menuItems.length === 1) return
setDropdownVisible(false)
}

const menuItems = MENU_ITEMS.map((item) => {
const routePath = parameterizeTradeRoute(tradeContext, item.route);
const isActive = !!matchPath(location.pathname, routePath);
const routePath = parameterizeTradeRoute(tradeContext, item.route)
const isActive = !!matchPath(location.pathname, routePath)

const menuItem = (
<MenuItem
Expand All @@ -67,24 +68,28 @@ export function TradeWidgetLinks({
badgeText={item.badgeText || highlightedBadgeText}
badgeType={item.badgeType || highlightedBadgeType}
onClick={() => handleMenuItemClick(item)}
isDropdownVisible={isDropdownVisible}
/>
);
)

return item.featureGuard ? (
<FeatureGuard key={item.label} featureFlag={item.featureGuard}>
{menuItem}
</FeatureGuard>
) : (
menuItem
);
});
)
})

const singleMenuItem = menuItems.length === 1;

return isDropdown ? (
<>
<styledEl.MenuItem onClick={() => setDropdownVisible(!isDropdownVisible)}>
<styledEl.Link to={menuItems.find(item => item.props.isActive)?.props.routePath || '#'}>
<styledEl.MenuItem onClick={() => !singleMenuItem && setDropdownVisible(!isDropdownVisible)} isDropdownVisible={isDropdownVisible}>
<styledEl.Link to={menuItems.find((item) => item.props.isActive)?.props.routePath || '#'}>
<Trans>
{menuItems.find(item => item.props.isActive)?.props.item.label || 'Select'} <SVG src={IMAGE_CARRET} title="select" />
{menuItems.find((item) => item.props.isActive)?.props.item.label}
{!singleMenuItem ? <SVG src={IMAGE_CARRET} title="select" /> : null}
</Trans>
</styledEl.Link>
</styledEl.MenuItem>
Expand All @@ -101,16 +106,18 @@ const MenuItem = ({
isActive,
badgeText,
badgeType,
onClick
onClick,
isDropdownVisible,
}: {
routePath: string
item: MenuItemConfig
isActive: boolean
badgeText?: string
badgeType?: BadgeType
onClick: () => void
isDropdownVisible: boolean
}) => (
<styledEl.MenuItem isActive={isActive} onClick={onClick}>
<styledEl.MenuItem isActive={isActive} onClick={onClick} isDropdownVisible={isDropdownVisible}>
<styledEl.Link to={routePath}>
<Trans>{item.label}</Trans>
{item.featureGuard && badgeText && (
Expand All @@ -120,5 +127,4 @@ const MenuItem = ({
)}
</styledEl.Link>
</styledEl.MenuItem>
);

)
26 changes: 18 additions & 8 deletions apps/cowswap-frontend/src/modules/application/containers/TradeWidgetLinks/styled.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ export const Link = styled(NavLink)`
align-items: center;
justify-content: center;
text-decoration: none;
color: var(${UI.COLOR_TEXT1_INACTIVE});
color: var(${UI.COLOR_TEXT1});
gap: 4px;
font-weight: inherit;
line-height: 1;
Expand All @@ -66,7 +66,7 @@ export const Link = styled(NavLink)`
}

> svg > path {
fill: var(${UI.COLOR_TEXT1_INACTIVE});
fill: var(${UI.COLOR_TEXT1});
}
`

Expand All @@ -83,15 +83,19 @@ export const Wrapper = styled.div`
}
`

export const MenuItem = styled.div<{ isActive?: boolean }>`
export const MenuItem = styled.div<{ isActive?: boolean; isDropdownVisible: boolean }>`
display: flex;
align-items: center;
font-size: 14px;
font-weight: 500;
font-size: ${({ theme }) => theme.isInjectedWidgetMode ? '16px' : '14px'};
font-weight: ${({ theme }) => theme.isInjectedWidgetMode ? '600' : '500'};
border-radius: var(${UI.BORDER_RADIUS_NORMAL});
padding: ${({ theme }) => theme.isInjectedWidgetMode ? '7px' : '5px 10px'};
padding: ${({ theme }) => theme.isInjectedWidgetMode ? '7px 0' : '5px 10px'};
background: transparent;
transition: background 0.2 ease-in-out;
transition: background 0.2s ease-in-out;

&:hover {
background: var(${UI.COLOR_GREY});
}

${({ isActive }) =>
isActive &&
Expand All @@ -105,6 +109,12 @@ export const MenuItem = styled.div<{ isActive?: boolean }>`
${Link} > ${Badge} {
display: none;
}
`}

${({ isDropdownVisible }) =>
isDropdownVisible &&
css`
padding: 7px 10px;
`}
`

Expand All @@ -117,7 +127,7 @@ export const SelectMenu = styled.div`
z-index: 100;
left: 0;
top: 0;
padding: 24px;
padding: 16px;
gap: ${({ theme }) => theme.isInjectedWidgetMode ? '16px' : '24px'};
background: var(${UI.COLOR_CONTAINER_BG_01});
border-radius: var(${UI.BORDER_RADIUS_NORMAL});
Expand Down
2 changes: 1 addition & 1 deletion apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/styled.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export const Header = styled.div`
display: flex;
justify-content: space-between;
align-items: center;
padding: 0;
padding: ${({ theme }) => theme.isInjectedWidgetMode ? '0 7px' : '0 5px 0 0'};
margin: 0;
`

Expand Down
Loading