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.
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
fix: fixing color of buttons #5179
Changes from 11 commits
ca0867c
74cd35b
703cf82
5b9b33e
9b4ef61
76b6d60
c426c8e
dffad49
f52b8e3
b9d1eec
9e51051
bfd991a
1b592c7
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -31,7 +31,7 @@ export const FilterButton = ({ | |
width={isMobile ? '44' : 'auto'} | ||
height="44" | ||
whiteSpace="nowrap" | ||
color="textPrimary" | ||
color="white" | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. are we sure we want to hardcode this tow hite? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. this is a merge conflict, i changed this upstream There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
> | ||
<FilterIcon /> | ||
{!isMobile ? ( | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -8,7 +8,8 @@ export const container = style([ | |
paddingTop: '4', | ||
}), | ||
{ | ||
width: '300px', | ||
width: '308px', | ||
paddingRight: '8px', | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. the shadow on the right slider overlaps the adjacent div, which creates a line to the right that looks strange(light mode only). This maintains the original dimensions while solving that issue |
||
paddingBottom: '96px', | ||
'@media': { | ||
[`(max-width: ${breakpoints.sm - 1}px)`]: { | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -14,6 +14,7 @@ import { default as Slider } from 'rc-slider' | |
import { FocusEventHandler, FormEvent, useEffect, useState } from 'react' | ||
import { useLocation } from 'react-router-dom' | ||
import styled, { useTheme } from 'styled-components/macro' | ||
import { colorsDark } from 'theme/colors' | ||
|
||
import * as styles from './PriceRange.css' | ||
import { TraitsHeader } from './TraitsHeader' | ||
|
@@ -186,10 +187,11 @@ export const PriceRange = () => { | |
top: '3px', | ||
width: '12px', | ||
height: '20px', | ||
backgroundColor: `${theme.textPrimary}`, | ||
opacity: '1', | ||
backgroundColor: `white`, | ||
borderRadius: '4px', | ||
border: 'none', | ||
boxShadow: `${theme.shallowShadow.slice(0, -1)}`, | ||
boxShadow: colorsDark.shallowShadow.slice(0, -1), | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Why aren't we pulling this from theme anymore? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. theme has a different shadow color. I couldn't find this exact shadow defined anywhere but in darktheme. |
||
}} | ||
railStyle={{ | ||
top: '3px', | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -374,7 +374,7 @@ export const AssetPriceDetails = ({ asset, collection }: AssetPriceDetailsProps) | |
} | ||
}} | ||
> | ||
<SubHeader lineHeight={'20px'}> | ||
<SubHeader color="white" lineHeight={'20px'}> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. should this be primaryColor? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. primary isn't white in light theme There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @aballerr could you sync with yushin on this? Apparently they defined a There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
<span>{assetInBag ? 'Remove' : 'Buy Now'}</span> | ||
</SubHeader> | ||
</BuyNowButton> | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -41,7 +41,6 @@ export const commonButtonStyles = style([ | |
sprinkles({ | ||
borderRadius: '12', | ||
transition: '250', | ||
boxShadow: { hover: 'elevation' }, | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. common button styles has a boxShadow. Not a heavily used style, but we removed boxShadows from buttons |
||
}), | ||
{ | ||
border: 'none', | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,11 @@ | ||
import { Trace } from '@uniswap/analytics' | ||
import { PageName } from '@uniswap/analytics-events' | ||
import { useWeb3React } from '@web3-react/core' | ||
import { | ||
MAX_WIDTH_MEDIA_BREAKPOINT, | ||
MOBILE_MEDIA_BREAKPOINT, | ||
SMALL_MEDIA_BREAKPOINT, | ||
} from 'components/Tokens/constants' | ||
import { useLoadAssetsQuery } from 'graphql/data/nft/Asset' | ||
import { useCollectionQuery, useLoadCollectionQuery } from 'graphql/data/nft/Collection' | ||
import { MobileHoverBag } from 'nft/components/bag/MobileHoverBag' | ||
|
@@ -34,8 +39,27 @@ const MobileFilterHeader = styled(Row)` | |
justify-content: space-between; | ||
` | ||
|
||
// Sticky navbar on light mode looks incorrect because the box shadows from assets overlap the the edges of the navbar. | ||
// As a result it needs 14px padding on either side. These paddings are offset by 14px to account for this | ||
const CollectionDisplaySection = styled(Row)` | ||
${styles.ScreenBreakpointsPaddings} | ||
@media screen and (min-width: ${MAX_WIDTH_MEDIA_BREAKPOINT}) { | ||
padding-left: 34px; | ||
padding-right: 34px; | ||
} | ||
|
||
@media screen and (max-width: ${MAX_WIDTH_MEDIA_BREAKPOINT}) { | ||
padding-left: 26px; | ||
padding-right: 26px; | ||
} | ||
|
||
@media screen and (max-width: ${SMALL_MEDIA_BREAKPOINT}) { | ||
padding-left: 4px; | ||
padding-right: 4px; | ||
} | ||
|
||
@media screen and (max-width: ${MOBILE_MEDIA_BREAKPOINT}) { | ||
padding-left: 16px; | ||
} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
align-items: flex-start; | ||
position: relative; | ||
` | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
we had a random blue hoverstate