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.

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

Impelment UISK Tokens into FX/Dark Mode #2333

Merged
merged 27 commits into from
Jan 16, 2025
Merged
Changes from 1 commit
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
550dc19
feat: begun styling tiles
SHolleworth Oct 22, 2024
2c83ece
feat: tile details, rfq, currency picker, icons
SHolleworth Oct 24, 2024
c431ba8
feat: tile details, rfq, currency picker, icons
SHolleworth Oct 24, 2024
252e709
fix: rfq input bug, tile pop out icon reposition
SHolleworth Oct 24, 2024
3f00947
fix: tests
SHolleworth Oct 24, 2024
371041f
feat: header restyle
SHolleworth Oct 28, 2024
7ffbe73
feat: tile chart view
SHolleworth Oct 28, 2024
540c728
chore: add uisk as optional dep
SHolleworth Oct 29, 2024
29813c1
feat: font styles and tile fixes
SHolleworth Oct 31, 2024
25e3a9d
feat: extracted TabBar component
SHolleworth Oct 31, 2024
f5aaaee
feat: extract and restyle tab bar
SHolleworth Oct 31, 2024
60806fa
feat: restyled header dropdown
SHolleworth Oct 31, 2024
8efb04a
feat: reusable region layout
SHolleworth Nov 1, 2024
50bef17
feat: grid styling begun
SHolleworth Nov 4, 2024
41ed9a4
fix: unit tests
SHolleworth Nov 7, 2024
642a9e1
feat: trade table progress
SHolleworth Nov 8, 2024
5684744
feat: analytics left border
SHolleworth Nov 11, 2024
94da02a
feat: analytics section layout
SHolleworth Nov 12, 2024
4c24a93
feat: analytics positions colour
SHolleworth Nov 12, 2024
2bafbf2
feat: Pnl bars
SHolleworth Nov 13, 2024
bb7a505
fix: live rates scroll bar
SHolleworth Nov 13, 2024
05f6dfb
fix: tests and stories
SHolleworth Nov 13, 2024
4710f1a
chore: tab bar text weight
SHolleworth Nov 14, 2024
749c66e
fix: PnL numbers
SHolleworth Nov 14, 2024
2d903d1
chore: shorted analytics background
SHolleworth Nov 25, 2024
3060ddc
fix: analytics scroll
SHolleworth Dec 3, 2024
31641f2
fix: e2e
SHolleworth Jan 8, 2025
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
Prev Previous commit
Next Next commit
feat: extract and restyle tab bar
SHolleworth committed Oct 31, 2024

Verified

This commit was signed with the committer’s verified signature.
SHolleworth Sam Holleworth
commit f5aaaee35eca6d0780c7436ad416457b25f7c820
2 changes: 1 addition & 1 deletion packages/client/src/client/App/LiveRates/LiveRates.tsx
Original file line number Diff line number Diff line change
@@ -20,7 +20,7 @@ const LiveRateWrapper = styled.div`
height: 100%;
user-select: none;
background: ${({ theme }) =>
theme.newTheme.color["Colors/Background/bg-secondary"]};
theme.newTheme.color["Colors/Background/bg-primary_alt"]};

@media (max-width: 480px) {
padding-right: 1rem;
15 changes: 9 additions & 6 deletions packages/client/src/client/components/TabBar/TabBar.styled.ts
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import styled from "styled-components"

export const Background = styled.div`
height: ${({ theme }) => theme.newTheme.density.md};
display: flex;
justify-content: space-between;
color: ${({ theme }) =>
theme.newTheme.color["Colors/Text/text-quaternary (500)"]};
background-color: ${({ theme }) =>
theme.newTheme.color["Colors/Background/bg-secondary_alt"]};
theme.newTheme.color["Colors/Background/bg-secondary"]};
`

export const LeftSection = styled.ul`
@@ -26,11 +27,13 @@ export const RightSection = styled.ul`
list-style: none;
`

export const Tab = styled.li<{ active: boolean }>`
width: ${({ theme }) => theme.newTheme.spacing["9xl"]};
height: ${({ theme }) => theme.newTheme.density.md};
font-size: 12px;
const TabText = styled.li(({ theme }) => ({
...theme.newTheme.textStyles["Text md/Semibold"],
}))

export const Tab = styled(TabText)<{ active: boolean }>`
height: 100%;
width: ${({ theme }) => theme.newTheme.spacing["9xl"]};
display: flex;
flex-direction: column;
justify-content: center;
@@ -43,7 +46,7 @@ export const Tab = styled.li<{ active: boolean }>`
? theme.newTheme.color["Colors/Text/text-brand-primary (900)"]
: "inherit"};
background-color: ${({ active, theme }) =>
active ? theme.newTheme.color["Colors/Background/bg-tertiary"] : "none"};
active ? theme.newTheme.color["Colors/Background/bg-primary_alt"] : "none"};

&:hover {
cursor: pointer;
256 changes: 167 additions & 89 deletions packages/client/src/client/theme/uiskTheme.ts

Large diffs are not rendered by default.


Unchanged files with check annotations Beta

)
act(() => {
fireEvent.click(screen.getByTestId("toggleButton"))

Check failure on line 99 in packages/client/src/client/App/LiveRates/MainHeader/__tests__/MainHeader.test.tsx

GitHub Actions / Build & deploy

src/client/App/LiveRates/MainHeader/__tests__/MainHeader.test.tsx > MainHeader > should show the charts in tiles once click toggle view button

TestingLibraryElementError: Unable to find an element by: [data-testid="toggleButton"] Ignored nodes: comments, script, style <body> <div> <div class="sc-gLDzan kUuPVM" > <ul class="sc-iAEyYk hazexI" > <li class="sc-qRumB sc-jsMahE euBVVk fiqgZt" data-testid="tabItem-All" > All </li> <li class="sc-qRumB sc-jsMahE euBVVk dVyeIM" data-testid="tabItem-EUR" > EUR </li> <li class="sc-qRumB sc-jsMahE euBVVk dVyeIM" data-testid="tabItem-GBP" > GBP </li> </ul> <ul class="sc-fsQiph ijNJsT" > <li class="sc-qRumB sc-jsMahE sc-irTswW euBVVk dVyeIM dvrYsc" > <button class="sc-beqWaB ewosyU" > <svg fill="none" height="16" viewBox="0 0 14 14" width="16" xmlns="http://www.w3.org/2000/svg" > <path d="M7.58331 6.41663L12.3666 1.6333" stroke="#737373" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" /> <path d="M12.8333 3.96663V1.16663H10.0333" stroke="#737373" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" /> <path d="M6.41669 1.16663H5.25002C2.33335 1.16663 1.16669 2.33329 1.16669 5.24996V8.74996C1.16669 11.6666 2.33335 12.8333 5.25002 12.8333H8.75002C11.6667 12.8333 12.8334 11.6666 12.8334 8.74996V7.58329" stroke="#737373" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" /> </svg> </button> </li> <li class="sc-qRumB sc-jsMahE sc-irTswW euBVVk fiqgZt dvrYsc" > <svg fill="#7E8188" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg" > <path d="M22 22.75H5C2.93 22.75 1.25 21.07 1.25 19V2C1.25 1.59 1.59 1.25 2 1.25C2.41 1.25 2.75 1.59 2.75 2V19C2.75 20.24 3.76 21.25 5 21.25H22C22.41 21.25 22.75 21.59 22.75 22C22.75 22.41 22.41 22.75 22 22.75Z" fill="#7E8188" /> <path d="M4.99982 17.7498C4.82982 17.7498 4.64982 17.6898 4.50982 17.5698C4.19982 17.2998 4.15982 16.8298 4.42982 16.5098L9.01982 11.1498C9.51982 10.5698 10.2398 10.2198 10.9998 10.1898C11.7598 10.1698 12.5098 10.4498 13.0498 10.9898L13.9998 11.9398C14.2498 12.1898 14.5798 12.3098 14.9298 12.3098C15.2798 12.2998 15.5998 12.1398 15.8298 11.8698L20.4198 6.50983C20.6898 6.19983 21.1598 6.15981 21.4798 6.42981C21.7898 6.69981 21.8298 7.16981 21.5598 7.48981L16.9698 12.8498C16.4698 13.4298 15.7498 13.7798 14.9898 13.8098C14.2298 13.8298 13.4798 13.5498 12.9398 13.0098L11.9998 12.0598C11.7498 11.8098 11.4198 11.6798 11.0698 11.6898C10.7198 11.6998 10.3998 11.8598 10.1698 12.1298L5.57982 17.4898C5.41982 17.6598 5.20982 17.7498 4.99982 17.7498Z" fill="#7E8188" /> </svg> </li> <div class="sc-kFuwaP eFYVPw" > <div class="sc-gueYoa icsWVb" > <div> All </div> <div> <svg class="sc-jTrPJq jOQVow" fill="currentColor" height="1em" stroke="currentColor" stroke-width="0" viewBox="0 0 448 512" width="1em" xmlns="http://www.w3.org/2000/svg" > <path d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-
})
expect(screen.getByTestId("tile-EURUSD").textContent).toBe(