Skip to content

Commit

Permalink
feat: responsive design changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@crnbarr93
crnbarr93 committed Aug 9, 2024
1 parent 906ac9e commit 2f5d0ae
Show file tree
Hide file tree
Showing 6 changed files with 66 additions and 41 deletions.
9 changes: 5 additions & 4 deletions packages/web/components/swap-tool/trade-details.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ export const TradeDetails = observer(
>
<div ref={details} className="flex w-full flex-col">
<Closer isInAmountEmpty={isInAmountEmpty} close={close} />
<div className="flex min-h-[2rem] w-full items-center justify-between sm:min-h-[1.5rem]">
<div className="flex min-h-[2rem] w-full items-start justify-between sm:min-h-[1.5rem]">
<SkeletonLoader
isLoaded={Boolean(swapState?.inBaseOutQuoteSpotPrice)}
>
Expand All @@ -102,7 +102,7 @@ export const TradeDetails = observer(
<span
onClick={() => setOutAsBase(!outAsBase)}
className={classNames(
"body2 sm:caption text-osmoverse-300",
"body2 sm:caption py-1 text-osmoverse-300",
{
"animate-pulse": inPriceFetching || isLoading,
}
Expand Down Expand Up @@ -140,7 +140,7 @@ export const TradeDetails = observer(
height={16}
/>
)}
<span className="body2 sm:caption text-wosmongton-300">
<span className="body2 sm:caption whitespace-nowrap text-wosmongton-300">
{open ? t("swap.hideDetails") : t("swap.showDetails")}
</span>
</div>
Expand Down Expand Up @@ -178,7 +178,8 @@ export const TradeDetails = observer(
"text-bullish-400": !isPriceImpactHigh,
})}
>
-{formatPretty(priceImpact ?? new Dec(0))}
{!priceImpact?.toDec().isZero() && "~"}
{formatPretty(priceImpact ?? new Dec(0))}
</span>
</div>
</GenericDisclaimer>
Expand Down
13 changes: 8 additions & 5 deletions packages/web/components/transactions/transaction-content.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,17 +91,20 @@ export const TransactionContent = ({
<Tab.List className="flex items-center gap-8">
{TX_PAGE_TABS.map((defaultTab) => (
<Tab key={defaultTab}>
<h5
className={classNames({
"text-osmoverse-500": defaultTab !== tab,
})}
<span
className={classNames(
{
"text-osmoverse-500": defaultTab !== tab,
},
"sm:subtitle1 sm:subtitle1 text-h5 font-h5"
)}
>
{t(
defaultTab === "history"
? "transactions.history"
: "transactions.orders"
)}
</h5>
</span>
</Tab>
))}
</Tab.List>
Expand Down
10 changes: 9 additions & 1 deletion packages/web/components/transactions/transaction-details/transaction-details-content.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,11 @@ import { IconButton } from "~/components/buttons/icon-button";
import { displayFiatPrice } from "~/components/transactions/transaction-utils";
import { Button } from "~/components/ui/button";
import { EventName } from "~/config";
import { useAmplitudeAnalytics, useTranslation } from "~/hooks";
import {
useAmplitudeAnalytics,
useFeatureFlags,
useTranslation,
} from "~/hooks";
import { theme } from "~/tailwind.config";
import { formatPretty } from "~/utils/formatter";

Expand Down Expand Up @@ -77,12 +81,16 @@ export const TransactionDetailsContent = ({
failed: t("transactions.swapFailed"),
};

const featureFlags = useFeatureFlags();

return (
<div
className={classNames("flex flex-col overflow-y-auto", {
// 4.5rem is the height of the navbar
"sticky top-[4.5rem] ml-4 h-[calc(100vh_-_4.5rem)] w-[480px] border-osmoverse-700 bg-osmoverse-900 pl-4 pt-3":
!isModal,
"bg-osmoverse-900": !featureFlags.limitOrders,
"bg-osmoverse-1000": featureFlags.limitOrders,
})}
>
<div className="flex flex-col px-4 pb-8 md:p-0">
Expand Down
11 changes: 8 additions & 3 deletions packages/web/modals/base.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { useUnmount } from "react-use";
import { Icon } from "~/components/assets";
import { IconButton } from "~/components/ui/button";
import { SpriteIconId } from "~/config";
import { useFeatureFlags } from "~/hooks";
import { useWindowSize } from "~/hooks/window/use-window-size";

if (setAppElement) {
Expand Down Expand Up @@ -39,7 +40,7 @@ export const ModalBase = ({
children,
}: PropsWithChildren<ModalBaseProps>) => {
const { isMobile } = useWindowSize();

const featureFlags = useFeatureFlags();
const bodyOpenClassNames = classNames("overflow-hidden", bodyOpenClassName);
useUnmount(() => {
document.body.classList.remove(bodyOpenClassNames);
Expand All @@ -58,8 +59,12 @@ export const ModalBase = ({
overlayClassName
)}
className={classNames(
"absolute mx-10 my-8 flex max-h-[95vh] w-full max-w-modal flex-col overflow-auto rounded-3xl bg-osmoverse-800 p-8 outline-none sm:max-h-full sm:w-full sm:px-4",
className
"absolute mx-10 my-8 flex max-h-[95vh] w-full max-w-modal flex-col overflow-auto rounded-3xl p-8 outline-none sm:max-h-full sm:w-full sm:px-4",
className,
{
"bg-osmoverse-800": !featureFlags.limitOrders,
"bg-osmoverse-850": featureFlags.limitOrders,
}
)}
closeTimeoutMS={150}
onAfterClose={onAfterClose}
Expand Down
7 changes: 3 additions & 4 deletions packages/web/modals/review-order.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,6 @@ export function ReviewOrder({
isBeyondOppositePrice = false,
}: ReviewOrderProps) {
const { t } = useTranslation();

const { logEvent } = useAmplitudeAnalytics();
const [manualSlippage, setManualSlippage] = useState("");
const [isEditingSlippage, setIsEditingSlippage] = useState(false);
Expand Down Expand Up @@ -204,7 +203,7 @@ export function ReviewOrder({
isOpen={isOpen}
onRequestClose={onClose}
hideCloseButton
className="w-[512px] rounded-2xl !p-0"
className="w-[512px] rounded-2xl !p-0 sm:h-full sm:max-h-[100vh] sm:!rounded-none"
>
<div className="flex h-auto w-full flex-col bg-osmoverse-850">
<div className="relative flex h-20 items-center justify-center p-4">
Expand All @@ -222,7 +221,7 @@ export function ReviewOrder({
})}
>
{orderType === "limit" && tab !== "swap" && (
<div className="sm:subtitle2 flex flex-col rounded-t-2xl border border-osmoverse-700 px-4 py-2">
<div className="sm:caption flex flex-col rounded-t-2xl border border-osmoverse-700 px-4 py-2">
<div className="flex items-center gap-4">
<div className="flex h-10 min-w-10 items-center justify-center">
{(tab === "buy" && !isBeyondOppositePrice) ||
Expand Down Expand Up @@ -441,7 +440,7 @@ export function ReviewOrder({
<div className="flex items-center justify-end">
<div
className={classNames(
"flex w-fit items-center justify-center overflow-hidden rounded-lg py-1.5 pl-2 text-center transition-all",
"flex w-fit items-center justify-center overflow-hidden rounded-lg py-1.5 pl-2 text-center transition-all sm:-my-0.5 sm:h-7",
{
"border-2 border-solid border-wosmongton-300 bg-osmoverse-900 pr-2":
isEditingSlippage,
Expand Down
57 changes: 33 additions & 24 deletions packages/web/modals/token-select-modal-limit.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ import { SwapAsset, useRecommendedAssets } from "~/hooks/use-swap";
import { ActivateUnverifiedTokenConfirmation, ModalBase } from "~/modals";
import { useStore } from "~/stores";
import { UnverifiedAssetsState } from "~/stores/user-settings";
import { formatPretty } from "~/utils/formatter";
import { formatFiatPrice, formatPretty } from "~/utils/formatter";

interface TokenSelectModalLimitProps {
isOpen: boolean;
Expand Down Expand Up @@ -202,9 +202,9 @@ export const TokenSelectModalLimit: FunctionComponent<TokenSelectModalLimitProps
isOpen={isOpen}
onRequestClose={onClose}
hideCloseButton
className="!max-h-[90vh] w-[512px] self-start rounded-5xl !p-0"
className="!max-h-[90vh] w-[512px] self-start rounded-5xl !p-0 sm:!m-0 sm:h-full sm:!max-h-[100vh] sm:!rounded-none"
>
<div className="flex h-full w-full flex-col overflow-hidden rounded-3xl bg-osmoverse-850">
<div className="flex h-full w-full flex-col overflow-hidden bg-osmoverse-850">
<div className="relative flex min-h-[80px] items-center justify-center p-4">
<h6>{headerTitle}</h6>
<button
Expand Down Expand Up @@ -333,16 +333,16 @@ export const TokenSelectModalLimit: FunctionComponent<TokenSelectModalLimitProps
>
<div
className={classNames(
"flex w-full items-center justify-between text-left",
"flex w-full min-w-0 items-center justify-between text-left",
{
"opacity-40":
!shouldShowUnverifiedAssets && !isVerified,
}
)}
>
<div className="flex items-center gap-4">
<div className="flex min-w-0 items-center gap-4">
{coinImageUrl && (
<div className="h-12 w-12 rounded-full">
<div className="h-12 w-12 shrink-0 rounded-full">
<Image
src={coinImageUrl}
alt={`${coinDenom} icon`}
Expand All @@ -352,32 +352,41 @@ export const TokenSelectModalLimit: FunctionComponent<TokenSelectModalLimitProps
/>
</div>
)}
<div className="flex flex-col">
<span className="subtitle1">{coinName}</span>
<span className="subtitle2 text-osmoverse-400">
<div className="flex flex-col gap-1 overflow-hidden">
<span className="subtitle1 truncate">
{coinName}
</span>
<span className="body2 text-osmoverse-400">
{coinDenom}
</span>
</div>
</div>

{isWalletConnected && !hideBalances && (
<div className="flex flex-col items-end gap-1">
<p
className={classNames(
"text-osmoverse-400",
{
"text-white-full": usdValue,
}
)}
>
{formatPretty(
usdValue ??
new PricePretty(DEFAULT_VS_CURRENCY, 0)
)}
</p>
<div className="flex shrink-0 flex-col items-end gap-1">
{usdValue && (
<p
className={classNames(
"text-osmoverse-400",
{
"text-white-full": usdValue,
}
)}
>
{formatFiatPrice(
usdValue ??
new PricePretty(
DEFAULT_VS_CURRENCY,
0
)
)}
</p>
)}
{amount && (
<span className="body2 text-osmoverse-300">
{formatPretty(amount).split(" ")[0]}
{amount
? formatPretty(amount).split(" ")[0]
: "0"}
</span>
)}
</div>
Expand Down

0 comments on commit 2f5d0ae

Please sign in to comment.