diff --git a/src/features/Combobox/styled.tsx b/src/features/Combobox/styled.tsx index b530d1c8..6a62b02b 100644 --- a/src/features/Combobox/styled.tsx +++ b/src/features/Combobox/styled.tsx @@ -1,5 +1,7 @@ import styled from 'styled-components/macro' +import { devices } from 'config/devices' + import { Combobox, ComboboxInput, @@ -8,12 +10,32 @@ import { ComboboxPopover, } from '@reach/combobox' -import { wrapperStyles, inputStyles } from 'features/Common/Input/styled' +import { + wrapperStyles, + inputStyles, + Label, +} from 'features/Common/Input/styled' import { customScrollbar, customStylesMixin } from 'features/Common' export const ComboboxStyled = styled(Combobox)` ${wrapperStyles} position: relative; + + @media${devices.laptop} { + margin-top: 12px; + + ${Label} { + display: block; + + span { + display: none; + } + } + } + + @media${devices.tablet} { + margin-top: -8px; + } ` export const ComboboxInputStyled = styled(ComboboxInput)` @@ -23,6 +45,28 @@ export const ComboboxInputStyled = styled(ComboboxInput)` ::placeholder { opacity: 0; } + + @media${devices.laptop} { + + margin-left: -105px; + padding-right: 4px; + ::placeholder { + opacity: 1; + width: 90%; + font-style: normal; + font-weight: normal; + white-space: nowrap; + font-size: 16px; + line-height: 24px; + letter-spacing: -0.01em; + text-align: center; + } + } + + @media${devices.mobile} { + text-align: center; + font-size: 14px; + } ` export const ComboboxPopoverStyled = styled(ComboboxPopover)` @@ -43,6 +87,11 @@ export const ComboboxListStyled = styled(ComboboxList)` ${customScrollbar} ${customStylesMixin} + + @media${devices.laptop} { + left: -33px; + min-width: calc(100% + 58px); + } ` export const ComboboxOptionStyled = styled(ComboboxOption)` diff --git a/src/features/Login/styled.tsx b/src/features/Login/styled.tsx index de6a09b0..8d184025 100644 --- a/src/features/Login/styled.tsx +++ b/src/features/Login/styled.tsx @@ -21,13 +21,19 @@ export const CenterBlock = styled.div` } ` -export const Form = styled.form` +export const Form = styled.form<{forRegPage?: boolean}>` width: 544px; margin: 80px 0 140px 0; display: flex; flex-direction: column; align-items: center; + @media${devices.laptop} { + margin: ${({ forRegPage }) => (forRegPage ? '75px 0 140px 0' : '80px 0 140px 0')}; + } + + + @media${devices.mobile} { width: auto; margin: 50px 0 140px 0; diff --git a/src/features/Register/components/RegistrationStep/index.tsx b/src/features/Register/components/RegistrationStep/index.tsx index 3add5f2d..8f1ea91c 100644 --- a/src/features/Register/components/RegistrationStep/index.tsx +++ b/src/features/Register/components/RegistrationStep/index.tsx @@ -32,7 +32,7 @@ const Registration = () => { } = useRegistrationForm() return ( -