Post UI Refresh: Mobile fixes + minor SDK updates

components/BaseModal/BaseModal.tsx

@@ -65,9 +65,11 @@ export const BaseModal: FC<BaseModalProps> = memo(
 const StyledDialogOverlay = styled(DialogOverlay)`
 	z-index: ${zIndex.DIALOG_OVERLAY};
 	background: rgba(0, 0, 0, 0.7);
-	${media.lessThan('sm')`
+	${media.lessThan('md')`
+		z-index: ${zIndex.MOBILE_FOOTER};
 		overflow: scroll;
-		padding-bottom: 80px;
+		display: flex;
+		align-items: flex-end;
 	`}
 `;
 
@@ -78,7 +80,7 @@ const StyledDialogContent = styled(DialogContent)`
 
 	${media.lessThan('md')`
 		&&& {
-			width: 80%;
+			/*width: 80%;*/
 			display: flex;
 			justify-content: center;
 			align-items: center;
@@ -100,13 +102,8 @@ const StyledCard = styled(Card)`
 	border: ${(props) => props.theme.colors.selectedTheme.border};
 	${media.lessThan('md')`
 		&&& {
-			width: 80%;
-		}
-	`}
-	${media.lessThan('sm')`
-		&&& {
-			width: 90%;
-			margin-top: 30px;
+			width: 100%;
+			border-radius: 10px 10px 0 0;
 		}
 	`}
 `;

components/ErrorView/ErrorNotifier.tsx

@@ -3,7 +3,7 @@ import { toast, ToastContainer } from 'react-toastify';
 import styled, { useTheme } from 'styled-components';
 
 import ErrorIcon from 'assets/svg/app/error.svg';
-import { truncateString } from 'utils/formatters/string';
+import { truncateString } from 'sdk/utils/string';
 
 function ToastContent({ message, errorDetails }: { message: string; errorDetails?: string }) {
 	const [expanded, setExpanded] = useState(false);

components/ErrorView/ErrorView.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import Button from 'components/Button';
 import Spacer from 'components/Spacer';
 import { formatRevert, isUserDeniedError } from 'utils/formatters/error';
-import { truncateString } from 'utils/formatters/string';
+import { truncateString } from 'sdk/utils/string';
 
 import { formatError } from './ErrorNotifier';
 

components/SegmentedControl/SegmentedControl.tsx

@@ -1,29 +1,31 @@
 import React, { FC, memo } from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 export type StyleType = 'tab' | 'check' | 'pill-button' | 'pill-button-large';
 
 interface SegmentedControlProps {
-	values: string[];
+	values: React.ReactNode[];
 	selectedIndex?: number;
 	style?: React.CSSProperties;
 	className?: string;
 	styleType?: StyleType;
 	suffix?: string;
 	isLarge?: boolean | undefined;
 	onChange(index: number): void;
+	icon?: boolean;
 }
 
 const SegmentedControl: FC<SegmentedControlProps> = memo(
-	({ values, selectedIndex, suffix, onChange, styleType = 'tab', ...props }) => {
+	({ values, selectedIndex, suffix, onChange, styleType = 'tab', icon, ...props }) => {
 		return (
 			<SegmentedControlContainer $length={values.length} styleType={styleType} {...props}>
 				{values.map((value, index) => (
 					<SegmentedControlOption
 						styleType={styleType}
-						key={value}
+						key={index}
 						isSelected={selectedIndex === index}
 						onClick={() => onChange(index)}
+						$icon={icon}
 					>
 						{styleType === 'check' && <CheckBox selected={selectedIndex === index} />}
 						{value}
@@ -57,7 +59,11 @@ const SegmentedControlContainer = styled.div<{ $length: number; styleType: Style
 	border-radius: 8px;
 `;
 
-const SegmentedControlOption = styled.button<{ isSelected: boolean; styleType: StyleType }>`
+const SegmentedControlOption = styled.button<{
+	isSelected: boolean;
+	styleType: StyleType;
+	$icon?: boolean;
+}>`
 	font-size: ${(props) =>
 		props.styleType === 'pill-button' || props.styleType === 'pill-button-large' ? '12px' : '13px'};
 	font-family: ${(props) =>
@@ -108,6 +114,20 @@ const SegmentedControlOption = styled.button<{ isSelected: boolean; styleType: S
 		props.isSelected &&
 		(props.styleType === 'pill-button' || props.styleType === 'pill-button-large') &&
 		props.theme.colors.common.darkYellow};
+
+	${(props) =>
+		props.$icon &&
+		css`
+			display: flex;
+			justify-content: center;
+			align-items: center;
+
+			svg {
+				fill: ${props.theme.colors.selectedTheme.newTheme.button.tab[
+					props.isSelected ? 'active' : 'inactive'
+				]};
+			}
+		`}
 	transition: all 0.1s ease-in-out;
 	&:hover {
 		color: ${(props) => props.theme.colors.selectedTheme.icon.hover};

constants/ui.ts

@@ -10,5 +10,7 @@ export enum zIndex {
 	BASE = 1,
 	HEADER = 10,
 	DIALOG_OVERLAY = 50,
+	MOBILE_FOOTER = 51,
 	DRAWER = 65,
+	MARKET_DROPDOWN = 40,
 }