diff --git a/src/features/AuthServiceApp/components/ConfirmPopup/styled.tsx b/src/features/AuthServiceApp/components/ConfirmPopup/styled.tsx index 7d6cab2b..2623f683 100644 --- a/src/features/AuthServiceApp/components/ConfirmPopup/styled.tsx +++ b/src/features/AuthServiceApp/components/ConfirmPopup/styled.tsx @@ -1,4 +1,8 @@ -import styled from 'styled-components/macro' +import styled, { css } from 'styled-components/macro' + +import { isMobileDevice } from 'config/userAgent' +import { devices } from 'config/devices' + import { ModalWindow } from 'features/Modal/styled' import { ApplyButton, @@ -10,11 +14,26 @@ import { export const Modal = styled(BaseModal)` ${ModalWindow} { min-height: 220px; + + ${isMobileDevice + ? css` + @media ${devices.mobile} { + width: 95vw; + padding-top: 0; + } + ` + : ''}; } ` export const ScHeaderTitle = styled(HeaderTitle)` text-align: center; + + ${isMobileDevice + ? css` + font-size: 20px; + ` + : ''}; ` export const ScBody = styled(Body)` @@ -23,8 +42,20 @@ export const ScBody = styled(Body)` export const ScText = styled.span` text-align: center; + + ${isMobileDevice + ? css` + font-size: 14px; + ` + : ''}; ` export const ScApplyButton = styled(ApplyButton)` margin: 0; + + ${isMobileDevice + ? css` + font-size: 14px; + ` + : ''}; `