-
Notifications
You must be signed in to change notification settings - Fork 73
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: update mobile web trade form for better ux experience on isolated trades #1108
fix: update mobile web trade form for better ux experience on isolated trades #1108
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
src/styles/layoutMixins.ts
Outdated
@@ -44,6 +44,7 @@ const scrollAreaFadeStart = css` | |||
|
|||
/* Rules */ | |||
position: relative; | |||
overflow: hidden; |
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.
gotta imagine this is going to cause pain SOMEWHERE, but I've got no clue where
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.
oh rip good catch - it's preventing the "More" dropdown from showing. Man lemme fix
@@ -397,6 +412,12 @@ const $TradeForm = styled.form` | |||
} | |||
`; | |||
|
|||
const $Content = styled.div` |
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.
mildly prefer just inlining these short ones (except FadeContainer) with tw=
src/components/ToggleGroup.tsx
Outdated
const [showFadeStart, setShowFadeStart] = useState(false); | ||
const [showFadeEnd, setShowFadeEnd] = useState(false); | ||
|
||
const handleScroll = useCallback((e: UIEvent<HTMLElement>) => { |
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.
potentially could move this into a hook too 👀
There are no designs for this yet, this is just to tide us over until ui refresh designs come in; should match what we have in web
iphone SE
Views
New:
<TradeSideTabs>
New:
forms/TradeForm/MarginAndLeverageButtons
<TradeForm>
currentStep
is not null only in mobile / tablet viewsTradeBoxOrderView
TradeSideTabs
andMarginAndLeverageButtons
component, remove mostly unnecessarytabsStyle
Components
TradeDialog
EditOrder
step so that the new header is justTrade
, and we have theTradeSideTabs
andMarginAndLeverageButtons
in the content of the dialogIcon
Delete:
TradeSideToggle
Components
<Collapsible>
TriggerIcon
sizing to match with--trigger-icon-width
<Icon>
Tabs
useFadeOnHorizontalScrollContainer
to auto apply fadeToggleGroup
useFadeOnHorizontalScrollContainer
to auto apply fadeHooks
useFadeOnHorizontalScrollContainer
Styles
<layoutMixins>
overflow: hidden
to fade mixins