From 555f002a3ea613c964c0a8ac42d00cdb4cb23a67 Mon Sep 17 00:00:00 2001 From: Osama Sayed Date: Sat, 28 Dec 2024 19:05:34 +0500 Subject: [PATCH] Updates --- locales/en/common.json | 6 +++--- .../Navbar/SearchDrawer/Footer/index.tsx | 20 ++++++++++++++++++- .../CommandsList/CommandList.module.scss | 10 ++++------ .../CommandPrefix/CommandPrefix.module.scss | 8 ++++---- .../ExpandedSearchInputSection.module.scss | 2 +- .../ExpandedSearchInputSection/index.tsx | 2 ++ .../SearchInput/SearchInput.module.scss | 4 ++++ .../SearchResultsHeader.module.scss | 14 ++++++++++++- .../SearchResultsHeader/index.tsx | 2 +- .../TarteelAttribution.module.scss | 5 +++++ .../TarteelAttribution/TarteelAttribution.tsx | 20 ++++++++++--------- .../BodyContainer/Error/index.tsx | 18 +---------------- .../BodyContainer/index.tsx | 6 +----- 13 files changed, 69 insertions(+), 48 deletions(-) diff --git a/locales/en/common.json b/locales/en/common.json index 4c9ef4487f..c2186f621c 100644 --- a/locales/en/common.json +++ b/locales/en/common.json @@ -398,9 +398,9 @@ "view": "View", "voice": { "ask-permission": "Please enable microphone permission to start using Voice Search", - "error": "An error has occurred, please try again later. Or download the ", - "no-permission": "It looks like you do not have the microphone permissions enabled. Please enable the microphone permissions and try again or download the ", - "not-supported": "It looks like your browser does not support microphone. Please try a different browser or download the ", + "error": "An error has occurred, please try again later.", + "no-permission": "It looks like you do not have the microphone permissions enabled. Please enable the microphone permissions and try again.", + "not-supported": "It looks like your browser does not support microphone. Please try a different browser.", "suggest": "Please begin reciting and your verse will appear.", "suggest-subtitle": "Recite any verse in Arabic, and the verse will appear", "suggest-title": "Recite now", diff --git a/src/components/Navbar/SearchDrawer/Footer/index.tsx b/src/components/Navbar/SearchDrawer/Footer/index.tsx index 4d4964b0ca..c97a5a8b46 100644 --- a/src/components/Navbar/SearchDrawer/Footer/index.tsx +++ b/src/components/Navbar/SearchDrawer/Footer/index.tsx @@ -1,9 +1,27 @@ import React from 'react'; +import { useSelector, shallowEqual } from 'react-redux'; + import styles from './Footer.module.scss'; +import TarteelAttribution from '@/components/TarteelAttribution/TarteelAttribution'; +import Separator from '@/dls/Separator/Separator'; +import { selectIsSearchDrawerVoiceFlowStarted } from '@/redux/slices/voiceSearch'; + const Footer: React.FC = () => { - return
; + const isVoiceSearchFlowStarted = useSelector(selectIsSearchDrawerVoiceFlowStarted, shallowEqual); + return ( + <> + {isVoiceSearchFlowStarted ? ( +
+ + +
+ ) : ( +
+ )} + + ); }; export default Footer; diff --git a/src/components/Search/CommandBar/CommandsList/CommandList.module.scss b/src/components/Search/CommandBar/CommandsList/CommandList.module.scss index 139f945d24..9f7197020c 100644 --- a/src/components/Search/CommandBar/CommandsList/CommandList.module.scss +++ b/src/components/Search/CommandBar/CommandsList/CommandList.module.scss @@ -1,6 +1,6 @@ @use "src/styles/breakpoints"; -$itemHeight: calc(1.4 * var(--spacing-mega)); +$itemHeight: calc(1.2 * var(--spacing-mega)); .noResult { text-align: center; font-size: var(--font-size-large); @@ -24,17 +24,15 @@ $itemHeight: calc(1.4 * var(--spacing-mega)); display: flex; align-items: center; justify-content: space-between; - min-height: $itemHeight; font-size: var(--font-size-normal); - padding-block-start: 0; - padding-block-end: 0; + padding-block-start: var(--spacing-xxsmall); + padding-block-end: var(--spacing-xxsmall); padding-inline-start: var(--spacing-xsmall); padding-inline-end: var(--spacing-xsmall); cursor: pointer; position: relative; z-index: var(--z-index-default); &.selected { - color: var(--color-text-default); background: var(--color-background-alternative-medium); border-radius: var(--border-radius-rounded); } @@ -42,7 +40,7 @@ $itemHeight: calc(1.4 * var(--spacing-mega)); .highlight { transition: transform var(--transition-fast); - min-height: $itemHeight; + // min-height: $itemHeight; width: 100%; position: absolute; border-radius: var(--border-radius-rounded); diff --git a/src/components/Search/CommandBar/CommandsList/CommandPrefix/CommandPrefix.module.scss b/src/components/Search/CommandBar/CommandsList/CommandPrefix/CommandPrefix.module.scss index f2ec8462c7..89584dca90 100644 --- a/src/components/Search/CommandBar/CommandsList/CommandPrefix/CommandPrefix.module.scss +++ b/src/components/Search/CommandBar/CommandsList/CommandPrefix/CommandPrefix.module.scss @@ -1,17 +1,17 @@ .commandPrefix { margin-inline-end: var(--spacing-small); + margin-block-start: var(--spacing-micro); display: flex; align-items: center; > svg { - width: var(--spacing-large); - height: var(--spacing-large); + width: var(--spacing-medium); + height: var(--spacing-medium); } } .container { display: flex; - align-items: center; - max-width: 90%; + align-items: flex-start; } .name { diff --git a/src/components/Search/CommandBar/ExpandedSearchInputSection/ExpandedSearchInputSection.module.scss b/src/components/Search/CommandBar/ExpandedSearchInputSection/ExpandedSearchInputSection.module.scss index fd2b252050..77ec8a275d 100644 --- a/src/components/Search/CommandBar/ExpandedSearchInputSection/ExpandedSearchInputSection.module.scss +++ b/src/components/Search/CommandBar/ExpandedSearchInputSection/ExpandedSearchInputSection.module.scss @@ -1,5 +1,5 @@ @use "src/styles/breakpoints"; -$height: calc(9 * var(--spacing-mega)); +$height: calc(16 * var(--spacing-mega)); .container { padding: 0 var(--spacing-large); diff --git a/src/components/Search/CommandBar/ExpandedSearchInputSection/index.tsx b/src/components/Search/CommandBar/ExpandedSearchInputSection/index.tsx index 2622054651..d27ee29e14 100644 --- a/src/components/Search/CommandBar/ExpandedSearchInputSection/index.tsx +++ b/src/components/Search/CommandBar/ExpandedSearchInputSection/index.tsx @@ -11,6 +11,7 @@ import styles from './ExpandedSearchInputSection.module.scss'; import { getNewSearchResults } from '@/api'; import DataFetcher from '@/components/DataFetcher'; +import TarteelAttribution from '@/components/TarteelAttribution/TarteelAttribution'; import VoiceSearchBodyContainer from '@/components/TarteelVoiceSearch/BodyContainer'; import { selectRecentNavigations } from '@/redux/slices/CommandBar/state'; import { selectIsCommandBarVoiceFlowStarted } from '@/redux/slices/voiceSearch'; @@ -160,6 +161,7 @@ const ExpandedSearchInputSection: React.FC = ({ searchQuery }) => { /> )}
+ {isVoiceSearchFlowStarted && }
); }; diff --git a/src/components/Search/SearchInput/SearchInput.module.scss b/src/components/Search/SearchInput/SearchInput.module.scss index 1b441b7de2..eadd8ee062 100644 --- a/src/components/Search/SearchInput/SearchInput.module.scss +++ b/src/components/Search/SearchInput/SearchInput.module.scss @@ -46,4 +46,8 @@ z-index: 100; border-radius: 0 0 var(--border-radius-circle-small) var(--border-radius-circle-small); box-shadow: var(--shadow-strong); + ::-webkit-scrollbar { + width: 7px; + height: 7px; + } } diff --git a/src/components/Search/SearchResults/SearchResultsHeader/SearchResultsHeader.module.scss b/src/components/Search/SearchResults/SearchResultsHeader/SearchResultsHeader.module.scss index 75b53c3065..3452968afe 100644 --- a/src/components/Search/SearchResults/SearchResultsHeader/SearchResultsHeader.module.scss +++ b/src/components/Search/SearchResults/SearchResultsHeader/SearchResultsHeader.module.scss @@ -13,10 +13,17 @@ } .moreResultsContainer { - color: var(--color-text-default); display: flex; cursor: pointer; align-items: center; + font-size: var(--font-size-small); + svg { + width: var(--spacing-medium) !important; + height: var(--spacing-medium) !important; + path { + fill: var(--color-text-faded) !important; + } + } } .resultsSummaryContainer { @@ -24,4 +31,9 @@ align-items: center; justify-content: space-between; color: var(--color-text-faded); + padding-block-end: var(--spacing-small); +} + +.resultsSummary { + font-size: var(--font-size-small); } diff --git a/src/components/Search/SearchResults/SearchResultsHeader/index.tsx b/src/components/Search/SearchResults/SearchResultsHeader/index.tsx index 41893c6366..f13e8dd3dc 100644 --- a/src/components/Search/SearchResults/SearchResultsHeader/index.tsx +++ b/src/components/Search/SearchResults/SearchResultsHeader/index.tsx @@ -35,7 +35,7 @@ const SearchResultsHeader: React.FC = ({ searchQuery, onSearchResultClick }; return (
-

{t('common:search-results-no-count')}

+

{t('common:search-results-no-count')}

= ({ isCommandBar = false }) => { logTarteelLinkClick(isCommandBar ? 'command_bar' : 'search_drawer'); }; return ( - -
- {t('voice.voice-search-powered-by')} - - - - -
- +
+ +
+ {t('voice.voice-search-powered-by')} + + + + +
+ +
); }; diff --git a/src/components/TarteelVoiceSearch/BodyContainer/Error/index.tsx b/src/components/TarteelVoiceSearch/BodyContainer/Error/index.tsx index faf991c5ee..cddec2b124 100644 --- a/src/components/TarteelVoiceSearch/BodyContainer/Error/index.tsx +++ b/src/components/TarteelVoiceSearch/BodyContainer/Error/index.tsx @@ -4,26 +4,18 @@ import useTranslation from 'next-translate/useTranslation'; import styles from './Error.module.scss'; -import Link, { LinkVariant } from '@/dls/Link/Link'; import ErrorIcon from '@/icons/info.svg'; import MicrophoneIcon from '@/icons/microphone.svg'; import NoMicrophoneIcon from '@/icons/no-mic.svg'; -import { logTarteelLinkClick } from '@/utils/eventLogger'; import VoiceError from 'types/Tarteel/VoiceError'; interface Props { error: VoiceError; isWaitingForPermission: boolean; - isCommandBar: boolean; } -const Error: React.FC = ({ error, isWaitingForPermission, isCommandBar }) => { +const Error: React.FC = ({ error, isWaitingForPermission }) => { const { t } = useTranslation('common'); - - const onTarteelLinkClicked = () => { - // eslint-disable-next-line i18next/no-literal-string - logTarteelLinkClick(`${isCommandBar ? 'command_bar' : 'search_drawer'}_error`); - }; let icon = null; let errorBody = null; if (isWaitingForPermission) { @@ -48,14 +40,6 @@ const Error: React.FC = ({ error, isWaitingForPermission, isCommandBar }) errorBody = (
{errorText} - - {t('tarteel.app')} -
); } diff --git a/src/components/TarteelVoiceSearch/BodyContainer/index.tsx b/src/components/TarteelVoiceSearch/BodyContainer/index.tsx index f39360cd99..a0f1599985 100644 --- a/src/components/TarteelVoiceSearch/BodyContainer/index.tsx +++ b/src/components/TarteelVoiceSearch/BodyContainer/index.tsx @@ -54,11 +54,7 @@ const VoiceSearchBodyContainer: React.FC = ({ isCommandBar = false }) => [styles.container]: !isCommandBar, })} > - +
); }