Impelment UISK Tokens into FX/Dark Mode#2333
Conversation
SHolleworth
changed the title
SHolleworth
changed the title
|
(auto-deploy) A deployment has been created for this Pull Request Preview linksAs part of the code review process, please ensure that you test against the following
PerformancePlease ensure that this PR does not degrade the performance of the UI. We should maintain a performance score of 95+. |
algreasley
left a comment
algreasley
left a comment
There was a problem hiding this comment.
quick pass .. more later
| }: PNLBarProps) => { | ||
| const [hovering, setHovering] = useState(false) | ||
| const color = basePnl >= 0 ? "positive" : "negative" | ||
| const color = profitOrLossValue >= 0 ? "positive" : "negative" |
There was a problem hiding this comment.
can we map colors in the theme, so we reference the pos/neg colors by name - I am doing this in RTEq MUI theme, as we did in UISK v1
There was a problem hiding this comment.
will clear your E2E failure too
There was a problem hiding this comment.
removed in the tweaks pr, the pnl bars dont change colour anymore
| basePnl: -849.4217864553628, | ||
| maxVal: 1785.9428620191757, | ||
| profitOrLossValue: -849.4217864553628, | ||
| largetProfitOrLossValue: 1785.9428620191757, |
There was a problem hiding this comment.
typo - restore the type info, perhaps - it needs to be corrected there, too
There was a problem hiding this comment.
fixed in the tweaks pr
| const AnalyticsRegion = styled(Region)` | ||
| width: 320px; | ||
| background-color: ${({ theme }) => | ||
| theme.newTheme.color["Colors/Background/bg-primary"]}; |
There was a problem hiding this comment.
thinking about this .. looks awkward .. no immediate actions, but I'd like to do better around color refs .. in RTEq I am doing all the fiddly mapping in theme.ts
| return ( | ||
| <AnalyticsWrapper ref={ref} hideIfMatches={hideIfMatches}> | ||
| <Suspense fallback={loader}> | ||
| <RegionWrapper fallback={loader}> |
There was a problem hiding this comment.
I've refactored all the major lazy load wrappers (live rates, rfqs, etc) to use this RegionWrapper, as they were all doing basically the same thing.
| {supportsTearOut && <TearOutComponent section="analytics" />} | ||
| </RightNav> | ||
| </AnalyticsHeader> | ||
| <AnalyticsRegion |
There was a problem hiding this comment.
I've refactored all the sections of the app to use this Region component, since their layouts and stuctures all share a lot of commanalities.
| source$={analytics$} | ||
| fallback={children} | ||
| Header={ | ||
| <TabBar |
There was a problem hiding this comment.
The headers for all the regions are now using the tabbar component, which also renders all the icon buttons (tear out, tile chart view, etc) called actions here
| @@ -326,6 +326,10 @@ const fontFacePreload = Unfonts({ | |||
| styles: | |||
| "ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900", | |||
| }, | |||
There was a problem hiding this comment.
not essential, but should we back off preloading these other fonts
| dataObj.baseTradedAmount > 0 | ||
| ? colors.accents.positive.base | ||
| : colors.accents.negative.base | ||
| ? theme.newTheme.color["Colors/Border/border-buy"] |
There was a problem hiding this comment.
odd that we are choosing the color in the stream ... not now, but I would consider refactoring this if we can
| <stop | ||
| offset={offset} | ||
| stopColor="#28c988" | ||
| stopColor={theme.newTheme.color["Colors/Border/border-buy"]} |
| @@ -6,22 +6,23 @@ interface Props { | |||
|
|
|||
| export const ChartIcon = ({ | |||
| fill = "#7E8188", | |||
| animation: ${backgroundEffectKeyframes(props)} 5s; | ||
| ` | ||
|
|
||
| const getDirectionColor = (theme: DefaultTheme, direction: Direction) => |
There was a problem hiding this comment.
nice - probably wants to live in theme area, along with a number of other "getters"
| color: ${({ theme }) => theme.white}; | ||
| &:disabled { | ||
| background-color: ${({ theme }) => theme.accents.primary.darker}; | ||
| opacity: 0.8; |
There was a problem hiding this comment.
beware, opacity now frowned upon (by Ed at least 🙂)
| background-color: ${({ theme }) => theme.accents.primary.base}; | ||
| background-color: ${({ theme }) => | ||
| theme.newTheme.color["Colors/Text/text-brand-primary (900)"]}; | ||
| border-radius: 3px; |
There was a problem hiding this comment.
later .. tokens for this
| } | ||
| ` | ||
| : ""} | ||
| align-items: flex-start; |
| ) | ||
| return accents.positive.base | ||
| return theme.newTheme.color[ | ||
| "Component colors/Utility/Success/utility-success-700" |
There was a problem hiding this comment.
later .. I think these are the wrong tokens (semantically) .. to discuss, I have gone off-design for RTEq, for instance, will need syncing up with UX after
2 participants
No description provided.