From 1461a3b0814b008b76b9697499c74c28b837bee1 Mon Sep 17 00:00:00 2001 From: Andrei Dekterev Date: Thu, 14 Jul 2022 18:14:50 +0400 Subject: [PATCH] fix($#2579): add search to player name,autocomplete for team, fix audio for ios and fix some styles for mobile --- Makefile | 28 +++---- src/components/AudioPlayer/hooks.tsx | 25 +++--- src/config/lexics/highlightsPageLexic.tsx | 6 +- src/config/lexics/payment.tsx | 1 + src/config/routes.tsx | 2 +- .../components/Form/hooks/index.tsx | 70 ++++++++++++---- src/features/AddCardForm/styled.tsx | 2 +- .../AuthServiceApp/components/Login/hooks.tsx | 2 - .../components/CardStep/index.tsx | 31 +++++++- .../BuyMatchPopup/store/hooks/index.tsx | 3 + src/features/BuyMatchPopup/styled.tsx | 47 +++++++++-- src/features/CardsStore/hooks/index.tsx | 14 ++-- src/features/Combobox/index.tsx | 9 +++ src/features/Combobox/styled.tsx | 14 ++++ src/features/Combobox/types.tsx | 1 + src/features/Common/Input/index.tsx | 4 + src/features/Common/Input/styled.tsx | 35 ++++++++ .../PopupComponents/BaseButton/index.tsx | 6 +- .../components/ChangeCardPopup/styled.tsx | 2 +- src/features/UserAccount/styled.tsx | 1 + src/helpers/dateForIos/index.tsx | 1 + src/hooks/useLocalStorage.tsx | 29 +++++++ .../components/FormHighlights/hooks.tsx | 79 +++++++++++++++---- .../components/FormHighlights/index.tsx | 10 ++- .../components/FormHighlights/styled.tsx | 21 +++-- .../components/MatchesHighlights/index.tsx | 4 +- .../components/MatchesHighlights/styled.tsx | 5 -- .../components/VideoHighlight/index.tsx | 2 +- .../components/VideoHighlight/styled.tsx | 7 ++ src/pages/HighlightsPage/index.tsx | 51 +++++++----- .../HighlightsPage/storeHighlightsAtoms.tsx | 6 +- src/pages/HighlightsPage/styled.tsx | 32 ++++++-- src/requests/getSearchItems.tsx | 10 ++- 33 files changed, 433 insertions(+), 127 deletions(-) create mode 100644 src/helpers/dateForIos/index.tsx create mode 100644 src/hooks/useLocalStorage.tsx diff --git a/Makefile b/Makefile index 356657bf..43967634 100644 --- a/Makefile +++ b/Makefile @@ -130,7 +130,7 @@ prod: clean rsync -zavP --delete-before build/ -e 'ssh -p 666' ott@de.instat.tv:/usr/local/www/ott/wwwroot/ rsync -zavP --delete-before build/ -e 'ssh -p 666' ott@fr.instat.tv:/usr/local/www/ott/wwwroot/ - rsync -zavP --delete-before build/ -e 'ssh -p 666' ott@10.0.3.8:/usr/local/www/ott/wwwroot/ + rsync -zavP --delete-before build/ -e 'ssh -p 666' ott@137.74.33.74:/usr/local/www/ott/wwwroot/ preprod: clean REACT_APP_TYPE=ott \ @@ -139,7 +139,7 @@ preprod: clean REACT_APP_STRIPE_PK=pk_live_ANI76cBhSo69DZUxPmyRVIZW \ npm run build - rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-test@10.0.3.8:/usr/local/www/ott-test/wwwroot/ + rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-test@137.74.33.74:/usr/local/www/ott-test/wwwroot/ facr-prod: clean REACT_APP_TYPE=ott \ @@ -150,7 +150,7 @@ facr-prod: clean rsync -zavP --delete-before build/ -e 'ssh -p 666' ott@de.instat.tv:/usr/local/www/ott/facr-wwwroot/ rsync -zavP --delete-before build/ -e 'ssh -p 666' ott@fr.instat.tv:/usr/local/www/ott/facr-wwwroot/ - rsync -zavP --delete-before build/ -e 'ssh -p 666' ott@10.0.3.8:/usr/local/www/ott/facr-wwwroot/ + rsync -zavP --delete-before build/ -e 'ssh -p 666' ott@137.74.33.74:/usr/local/www/ott/facr-wwwroot/ lff-prod: clean REACT_APP_TYPE=ott \ @@ -161,39 +161,39 @@ lff-prod: clean rsync -zavP --delete-before build/ -e 'ssh -p 666' ott@de.instat.tv:/usr/local/www/ott/lff-wwwroot/ rsync -zavP --delete-before build/ -e 'ssh -p 666' ott@fr.instat.tv:/usr/local/www/ott/lff-wwwroot/ - rsync -zavP --delete-before build/ -e 'ssh -p 666' ott@10.0.3.8:/usr/local/www/ott/lff-wwwroot/ + rsync -zavP --delete-before build/ -e 'ssh -p 666' ott@137.74.33.74:/usr/local/www/ott/lff-wwwroot/ deploy-all: prod preprod facr-prod lff-prod stage: build-stage - rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@10.0.3.8:/usr/local/www/ott-staging/wwwroot/ + rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@137.74.33.74:/usr/local/www/ott-staging/wwwroot/ a-stage: build-a - rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@10.0.3.8:/usr/local/www/ott-staging/a-wwwroot/ + rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@137.74.33.74:/usr/local/www/ott-staging/a-wwwroot/ b-stage: build-b - rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@10.0.3.8:/usr/local/www/ott-staging/b-wwwroot/ + rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@137.74.33.74:/usr/local/www/ott-staging/b-wwwroot/ c-stage: build-c - rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@10.0.3.8:/usr/local/www/ott-staging/c-wwwroot/ + rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@137.74.33.74:/usr/local/www/ott-staging/c-wwwroot/ d-stage: build-d - rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@10.0.3.8:/usr/local/www/ott-staging/d-wwwroot/ + rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@137.74.33.74:/usr/local/www/ott-staging/d-wwwroot/ e-stage: build-e - rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@10.0.3.8:/usr/local/www/ott-staging/e-wwwroot/ + rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@137.74.33.74:/usr/local/www/ott-staging/e-wwwroot/ f-stage: build-f - rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@10.0.3.8:/usr/local/www/ott-staging/f-wwwroot/ + rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@137.74.33.74:/usr/local/www/ott-staging/f-wwwroot/ g-stage: build-g - rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@10.0.3.8:/usr/local/www/ott-staging/g-wwwroot/ + rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@137.74.33.74:/usr/local/www/ott-staging/g-wwwroot/ h-stage: build-h - rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@10.0.3.8:/usr/local/www/ott-staging/h-wwwroot/ + rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@137.74.33.74:/usr/local/www/ott-staging/h-wwwroot/ i-stage: build-i - rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@10.0.3.8:/usr/local/www/ott-staging/i-wwwroot/ + rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@137.74.33.74:/usr/local/www/ott-staging/i-wwwroot/ test: npm test diff --git a/src/components/AudioPlayer/hooks.tsx b/src/components/AudioPlayer/hooks.tsx index 660ccd9c..7c323646 100644 --- a/src/components/AudioPlayer/hooks.tsx +++ b/src/components/AudioPlayer/hooks.tsx @@ -2,35 +2,36 @@ import { SyntheticEvent, useEffect, useState, + useRef, } from 'react' import { readToken } from 'helpers' export const useAudioPlayer = (asset: string) => { - const [audio, setAudio] = useState(null) + const audio = useRef(new Audio('')) const [playing, setPlaying] = useState(false) const toggle = (e: SyntheticEvent) => { e.preventDefault() e.stopPropagation() - setPlaying(!playing) + if (audio.current.paused) { + audio.current.play() + setPlaying(true) + } else { + audio.current.pause() + setPlaying(false) + } } useEffect(() => { setPlaying(false) - audio?.pause() - asset && setAudio(new Audio(`${asset}?access_token=${readToken()}`)) - // eslint-disable-next-line react-hooks/exhaustive-deps + audio.current?.pause() + audio.current = new Audio(`${asset}?access_token=${readToken()}`) }, [asset]) useEffect(() => { - playing ? audio?.play() : audio?.pause() - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [playing]) - - useEffect(() => { - audio?.addEventListener('ended', () => setPlaying(false)) + audio.current?.addEventListener('ended', () => audio.current.pause()) return () => { - audio?.removeEventListener('ended', () => setPlaying(false)) + audio.current?.removeEventListener('ended', () => audio.current.pause()) } // eslint-disable-next-line react-hooks/exhaustive-deps }, []) diff --git a/src/config/lexics/highlightsPageLexic.tsx b/src/config/lexics/highlightsPageLexic.tsx index 1c484081..356ebd87 100644 --- a/src/config/lexics/highlightsPageLexic.tsx +++ b/src/config/lexics/highlightsPageLexic.tsx @@ -2,15 +2,19 @@ export const highlightsPageLexic = { add_summary: 18360, background_music: 18359, choose_player: 18362, + describe_duration: 18358, + describe_music: 19527, + describe_statistic: 19528, get_highlights: 18355, highlight_will_be_generated: 18364, matches_highlight: 419, - maximal_duration: 18358, + maximal_duration: 2543, order_and_buy: 18361, player_highlight: 630, price: 18356, purchase_auto_generated: 18363, sport_highlight: 15115, + statistics_highlights: 1587, team_highlight: 657, watch_demo: 18357, } diff --git a/src/config/lexics/payment.tsx b/src/config/lexics/payment.tsx index a2eb9559..170f7da9 100644 --- a/src/config/lexics/payment.tsx +++ b/src/config/lexics/payment.tsx @@ -8,6 +8,7 @@ export const paymentLexics = { card_holder_name: 2021, change_card: 14018, city: 15206, + clear: 18313, country: 835, error_address_latin_letters: 15758, error_can_not_add_card: 14447, diff --git a/src/config/routes.tsx b/src/config/routes.tsx index 4aba3a76..f8282707 100644 --- a/src/config/routes.tsx +++ b/src/config/routes.tsx @@ -4,7 +4,7 @@ import { ENV, isProduction } from './env' export const APIS = { preproduction: { - api: 'https://api-aws-stage.instat.tv:11630', + api: 'https://api.instat.tv', // 'https://api-aws-stage.instat.tv:11630', auth: 'https://auth.instat.tv', }, production: { diff --git a/src/features/AddCardForm/components/Form/hooks/index.tsx b/src/features/AddCardForm/components/Form/hooks/index.tsx index 3efb83c3..09c58bd2 100644 --- a/src/features/AddCardForm/components/Form/hooks/index.tsx +++ b/src/features/AddCardForm/components/Form/hooks/index.tsx @@ -12,6 +12,8 @@ import { import type { StripeElementChangeEvent } from '@stripe/stripe-js' import { CardNumberElement, + CardCvcElement, + CardExpiryElement, useStripe, useElements, } from '@stripe/react-stripe-js' @@ -49,10 +51,12 @@ export enum ElementTypes { export type Props = { children?: ReactNode, + clearInputs?: boolean, initialformOpen?: boolean, inputsBackground?: string, loader?: boolean, onAddSuccess?: () => void, + setClearInputs?: ((clear: boolean) => void) | undefined, } const inputState = { @@ -70,15 +74,21 @@ const initialState = { cardNumber: inputState, } -export const useFormSubmit = ({ onAddSuccess }: Props) => { +export const useFormSubmit = ({ + clearInputs, + onAddSuccess, + setClearInputs, +}: Props) => { const stripe = useStripe() const elements = useElements() const { translate } = useLexicsStore() const { defaultCard, isHighlightsPage, + lastCard, onAddCard, setError: setCardError, + setLastCard, } = useCardsStore() const [name, setName] = useState('') const [city, setCity] = useState('') @@ -91,6 +101,7 @@ export const useFormSubmit = ({ onAddSuccess }: Props) => { const { onSuccessfulHighlights, onUnsuccessfulSubscription, + setShowClearBtn, } = useBuyMatchPopupStore() const { @@ -104,8 +115,23 @@ export const useFormSubmit = ({ onAddSuccess }: Props) => { setCardError('') }, [setErrorMessage, setCardError]) + const resetInputs = () => { + resetErrors() + setName('') + setCity('') + setAddress('') + setSelectedCountry(null) + elements?.getElement(CardNumberElement)?.clear() + elements?.getElement(CardCvcElement)?.clear() + elements?.getElement(CardExpiryElement)?.clear() + setInputStates(initialState) + setShowClearBtn(false) + setClearInputs && setClearInputs(false) + } + const setElementTypeState = useCallback((elementType: ElementTypes, value: string) => { const elementState = inputStates[elementType] + setInputStates({ [elementType]: { ...elementState, @@ -154,6 +180,7 @@ export const useFormSubmit = ({ onAddSuccess }: Props) => { const onInputsChange = (e: StripeElementChangeEvent) => { const value = inputStates[e.elementType as ElementTypes] + setInputStates({ [e.elementType]: { ...value, empty: e.empty } }) resetErrors() } @@ -172,6 +199,8 @@ export const useFormSubmit = ({ onAddSuccess }: Props) => { inputStates[elementType].empty && !inputStates[elementType].focused ) + const allInputEmpty = Object.values(inputStates).every((inputValue) => inputValue.empty) + const handleSubmit = async (e: FormEvent) => { e.preventDefault() resetErrors() @@ -181,8 +210,6 @@ export const useFormSubmit = ({ onAddSuccess }: Props) => { return } - const allInputEmpty = Object.values(inputStates).every((inputValue) => inputValue.empty) - if (isHighlightsPage && defaultCard && allInputEmpty) { setErrorMessage('') setLoader(true) @@ -228,25 +255,38 @@ export const useFormSubmit = ({ onAddSuccess }: Props) => { setLoader(true) onAddCard(token.id) .then(onAddSuccess) - .then(() => defaultCard && isHighlightsPage && setInputStates(initialState)) - .then(() => { - if (defaultCard && isHighlightsPage) { - onePayment({ - cardId: defaultCard.id, - order: { ...dataHighlights?.data }, - }) - .then(onSuccessfulHighlights, onUnsuccessfulSubscription) - .catch(() => setErrorMessage(translate('error_payment_unsuccessful'))) - } - }) - .finally(() => setLoader(false)) + .then(() => lastCard && isHighlightsPage && setInputStates(initialState)) + .catch(() => setLoader(false)) } } + useEffect(() => { + if (lastCard && isHighlightsPage) { + onePayment({ + cardId: lastCard, + order: { ...dataHighlights?.data }, + }) + .then(onSuccessfulHighlights, onUnsuccessfulSubscription) + .catch(() => setErrorMessage(translate('error_payment_unsuccessful'))) + .finally(() => setLoader(false)) + } + setLastCard(null) + // eslint-disable-next-line + }, [lastCard]) + useEffect(() => { setCardError('') }, [setCardError]) + useEffect(() => { + if (!allInputEmpty) setShowClearBtn(true) + }, [allInputEmpty, setShowClearBtn]) + + useEffect(() => { + if (clearInputs) resetInputs() + // eslint-disable-next-line + }, [clearInputs]) + return { address, city, diff --git a/src/features/AddCardForm/styled.tsx b/src/features/AddCardForm/styled.tsx index 79a04526..4b79ca95 100644 --- a/src/features/AddCardForm/styled.tsx +++ b/src/features/AddCardForm/styled.tsx @@ -83,7 +83,7 @@ export const SectionTitle = styled.span` margin-bottom: 8px; ${isMobileDevice ? css` - margin-bottom: 25px; + margin-bottom: 5px; font-size: 10px; @media (orientation: landscape){ margin-bottom: 10px; diff --git a/src/features/AuthServiceApp/components/Login/hooks.tsx b/src/features/AuthServiceApp/components/Login/hooks.tsx index 89c5cf35..636e6a18 100644 --- a/src/features/AuthServiceApp/components/Login/hooks.tsx +++ b/src/features/AuthServiceApp/components/Login/hooks.tsx @@ -73,8 +73,6 @@ export const useLoginForm = () => { scope, }, }) - const numberVisits = localStorage.getItem('countVisits') ?? 0 - localStorage.setItem('countVisits', (Number(numberVisits) + 1).toString()) submitForm() } catch (err) { handleError(String(err)) diff --git a/src/features/BuyMatchPopup/components/CardStep/index.tsx b/src/features/BuyMatchPopup/components/CardStep/index.tsx index b33fce43..c74034f3 100644 --- a/src/features/BuyMatchPopup/components/CardStep/index.tsx +++ b/src/features/BuyMatchPopup/components/CardStep/index.tsx @@ -1,3 +1,5 @@ +import { useState } from 'react' + import isEmpty from 'lodash/isEmpty' import { AddCardFormInner } from 'features/AddCardForm/components/Form' @@ -18,6 +20,8 @@ import { Header, HeaderTitle, Button, + ButtonBlock, + ButtonClear, ButtonPrevious, } from '../../styled' @@ -32,8 +36,13 @@ export const CardStep = ({ closeHandle, title, }: CardStepType) => { + const [clearInputs, setClearInputs] = useState(false) const { cards, isHighlightsPage } = useCardsStore() - const { close, goBack } = useBuyMatchPopupStore() + const { + close, + goBack, + showClearBtn, + } = useBuyMatchPopupStore() const emptyCards = isEmpty(cards) @@ -56,10 +65,24 @@ export const CardStep = ({ onAddSuccess={goBack} initialformOpen={emptyCards} inputsBackground='rgba(255, 255, 255, 0.1)' + clearInputs={clearInputs} + setClearInputs={setClearInputs} > - + + {isHighlightsPage + && showClearBtn && ( + { + e.preventDefault() + setClearInputs(true) + }} + > + + + )} + + diff --git a/src/features/BuyMatchPopup/store/hooks/index.tsx b/src/features/BuyMatchPopup/store/hooks/index.tsx index 38c93c6b..e1625fb5 100644 --- a/src/features/BuyMatchPopup/store/hooks/index.tsx +++ b/src/features/BuyMatchPopup/store/hooks/index.tsx @@ -53,6 +53,7 @@ export const useBuyMatchPopup = () => { const [error, setError] = useState('') const [loader, setLoader] = useState(false) const [disabledBuyBtn, setDisabledBuyBtn] = useState(false) + const [showClearBtn, setShowClearBtn] = useState(false) const [lastSelectedPackage, setLastSelectedPackage] = useState('') const setDataHighlights = useSetRecoilState(dataForPayHighlights) @@ -226,6 +227,8 @@ export const useBuyMatchPopup = () => { selectedSubscription, setDisabledBuyBtn, setLastSelectedPackage, + setShowClearBtn, + showClearBtn, subscriptions, } } diff --git a/src/features/BuyMatchPopup/styled.tsx b/src/features/BuyMatchPopup/styled.tsx index 38d06ec8..e22634bc 100644 --- a/src/features/BuyMatchPopup/styled.tsx +++ b/src/features/BuyMatchPopup/styled.tsx @@ -2,7 +2,7 @@ import styled, { css } from 'styled-components/macro' import { isMobileDevice } from 'config/userAgent' -import { ButtonSolid } from 'features/Common' +import { ButtonOutline, ButtonSolid } from 'features/Common' import { ModalWindow } from 'features/Modal/styled' import { Modal as BaseModal } from 'features/Modal' @@ -48,8 +48,7 @@ export const HeaderTitle = styled.h2` ` export const Button = styled(ButtonSolid)` - min-width: 270px; - width: auto; + width: 275px; height: 50px; padding: 0 20px; background-color: ${({ theme: { colors } }) => colors.button}; @@ -58,13 +57,15 @@ export const Button = styled(ButtonSolid)` border-radius: 5px; font-weight: 600; font-size: 20px; + ${isMobileDevice ? css` - height: 32px; + max-height: 38px; min-width: 117px; - font-size: 12px; + max-width: 49%; + font-size: 16px; @media screen and (orientation: landscape){ - min-width: 178px; + /* min-width: 178px; */ } ` @@ -108,7 +109,7 @@ export const Wrapper = styled.div` } @media (max-width: 650px){ width: 100%; - padding: 40px 10px 20px; + padding: 20px 10px 20px; display: flex; flex-direction: column; justify-content: space-evenly; @@ -190,3 +191,35 @@ export const ButtonPrevious = styled.button` left: 20px; cursor: pointer; ` +export const ButtonClear = styled(ButtonOutline)` + border: 1px solid #FFFFFF; + border-radius: 4px; + font-weight: 600; + font-size: 20px; + line-height: 16px; + height: 50px; + width: 275px; + max-width: 49%; + + ${isMobileDevice + ? css` + height: 100%; + font-size: 16px; + width: 100%; + padding: 0 20px; + max-width: 49%; + max-height: 38px; + + ` + : ''}; +` +type ButtonsProps = { + showClearBtn: boolean, +} +export const ButtonBlock = styled.div` + display: flex; + flex-direction: row; + height: 38px; + width: 100%; + justify-content: ${({ showClearBtn }) => (showClearBtn ? 'space-between' : 'center')}; +` diff --git a/src/features/CardsStore/hooks/index.tsx b/src/features/CardsStore/hooks/index.tsx index 70673f78..ce7216a6 100644 --- a/src/features/CardsStore/hooks/index.tsx +++ b/src/features/CardsStore/hooks/index.tsx @@ -25,6 +25,7 @@ export const useBankCards = () => { const [isHighlightsPage, setIsHighlightsPage] = useState(false) const [error, setError] = useState('') const [cards, setCards] = useState(null) + const [lastCard, setLastCard] = useState(null) const defaultCard = useMemo( () => find(cards, { default: true }), [cards], @@ -38,6 +39,9 @@ export const useBankCards = () => { setError('error_can_not_add_card') return Promise.reject() }) + .then(({ card }) => { + isHighlightsPage && setLastCard(card.id) + }) .then(fetchCards) ) @@ -49,12 +53,8 @@ export const useBankCards = () => { } useEffect(() => { - if (window.location.pathname === PAGES.highlights) { - setIsHighlightsPage(true) - } else { - setIsHighlightsPage(false) - } - }, []) + setIsHighlightsPage(window.location.pathname === PAGES.highlights) + }, [cards]) return { cards, @@ -64,10 +64,12 @@ export const useBankCards = () => { infoModalOpen, isFetching, isHighlightsPage, + lastCard, onAddCard, onDeleteCard: handleCardDelete, onSetDefaultCard, setError, + setLastCard, toggleInfoModal, } } diff --git a/src/features/Combobox/index.tsx b/src/features/Combobox/index.tsx index 069ae7d5..3590f4d7 100644 --- a/src/features/Combobox/index.tsx +++ b/src/features/Combobox/index.tsx @@ -22,6 +22,7 @@ import { LabelTitle, LabelAfter, LabelBefore, + ScTooltip, } from 'features/Common/Input/styled' import { Props, Option } from './types' @@ -50,6 +51,7 @@ export const Combobox = (props: Props) => { maxLength, noSearch, title, + toolTip, withError, wrapperHeight, } = props @@ -82,8 +84,15 @@ export const Combobox = (props: Props) => { { + if (toolTip) { + e.preventDefault() + e.stopPropagation() + } + }} > {labelLexic ? : label} + {toolTip && } {labelBefore && ( diff --git a/src/features/Combobox/styled.tsx b/src/features/Combobox/styled.tsx index 11cb03e4..acd235b3 100644 --- a/src/features/Combobox/styled.tsx +++ b/src/features/Combobox/styled.tsx @@ -50,6 +50,14 @@ export const ListOption = styled.li.attrs(() => ({ background-color: #999; color: #fff; } + + ${isMobileDevice + ? css` + font-size: 12px; + height: 36px; + padding-left: 14px; + ` + : ''}; ` export const WrapperIcon = styled.span` position: absolute; @@ -58,6 +66,12 @@ export const WrapperIcon = styled.span` width: 15px; height: 15px; transform: translateY(-60%); + + ${isMobileDevice + ? css` + right: 11px; + ` + : ''}; ` export const ScAudioWrap = styled.div` diff --git a/src/features/Combobox/types.tsx b/src/features/Combobox/types.tsx index 3a46b596..301d9c48 100644 --- a/src/features/Combobox/types.tsx +++ b/src/features/Combobox/types.tsx @@ -35,6 +35,7 @@ export type Props = Pick, ( onSelect?: (option: T | null) => void, options: Array, selected?: boolean, + toolTip?: string, value: string, withError?: boolean, wrapperHeight?: number, diff --git a/src/features/Common/Input/index.tsx b/src/features/Common/Input/index.tsx index 0d5d07d4..7304c8b7 100644 --- a/src/features/Common/Input/index.tsx +++ b/src/features/Common/Input/index.tsx @@ -16,6 +16,7 @@ import { LabelTitle, Error, Column, + ScTooltip, } from './styled' type Props = { @@ -38,6 +39,7 @@ type Props = { pattern?: string, required?: boolean, title?: string, + toolTip?: string, type?: string, value?: string, withError?: boolean, @@ -65,6 +67,7 @@ export const Input = ({ pattern, required, title, + toolTip, type, value, withError = true, @@ -85,6 +88,7 @@ export const Input = ({