Updates

quran · Dec 28, 2024 · 555f002 · 555f002
1 parent 45c77cd
commit 555f002
Show file tree

Hide file tree

Showing 13 changed files with 69 additions and 48 deletions.
diff --git 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
@@ -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 <div className={styles.container} />;
+  const isVoiceSearchFlowStarted = useSelector(selectIsSearchDrawerVoiceFlowStarted, shallowEqual);
+  return (
+    <>
+      {isVoiceSearchFlowStarted ? (
+        <div className={styles.container}>
+          <Separator />
+          <TarteelAttribution />
+        </div>
+      ) : (
+        <div className={styles.container} />
+      )}
+    </>
+  );
 };
 
 export default Footer;
diff --git 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,25 +24,23 @@ $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);
   }
 }
 
 .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
@@ -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/...nents/Search/CommandBar/ExpandedSearchInputSection/ExpandedSearchInputSection.module.scss b/...nents/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
@@ -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<Props> = ({ searchQuery }) => {
           />
         )}
       </div>
+      {isVoiceSearchFlowStarted && <TarteelAttribution isCommandBar />}
     </div>
   );
 };

diff --git 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
@@ -13,15 +13,27 @@
 }
 
 .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 {
     display: flex;
     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
@@ -35,7 +35,7 @@ const SearchResultsHeader: React.FC<Props> = ({ searchQuery, onSearchResultClick
   };
   return (
     <div className={styles.resultsSummaryContainer}>
-      <p>{t('common:search-results-no-count')}</p>
+      <p className={styles.resultsSummary}>{t('common:search-results-no-count')}</p>
       <div
         role="button"
         onClick={onNavigationLinkClicked}

diff --git a/src/components/TarteelAttribution/TarteelAttribution.module.scss b/src/components/TarteelAttribution/TarteelAttribution.module.scss
@@ -19,3 +19,8 @@
     fill: var(--color-text-default);
   }
 }
+
+.attribution {
+  display: flex;
+  flex-direction: row-reverse;
+}
diff --git a/src/components/TarteelAttribution/TarteelAttribution.tsx b/src/components/TarteelAttribution/TarteelAttribution.tsx
@@ -17,15 +17,17 @@ const TarteelAttribution: React.FC<Props> = ({ isCommandBar = false }) => {
     logTarteelLinkClick(isCommandBar ? 'command_bar' : 'search_drawer');
   };
   return (
-    <Link href="https://download.tarteel.ai/" onClick={onLinkClicked} isNewTab>
-      <div className={styles.container}>
-        <span className={styles.poweredBy}>{t('voice.voice-search-powered-by')}</span>
-        <TarteelLogo />
-        <span className={styles.tarteelTextWrapper}>
-          <TarteelText />
-        </span>
-      </div>
-    </Link>
+    <div className={styles.attribution}>
+      <Link href="https://download.tarteel.ai/" onClick={onLinkClicked} isNewTab>
+        <div className={styles.container}>
+          <span className={styles.poweredBy}>{t('voice.voice-search-powered-by')}</span>
+          <TarteelLogo />
+          <span className={styles.tarteelTextWrapper}>
+            <TarteelText />
+          </span>
+        </div>
+      </Link>
+    </div>
   );
 };
 

diff --git 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<Props> = ({ error, isWaitingForPermission, isCommandBar }) => {
+const Error: React.FC<Props> = ({ 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<Props> = ({ error, isWaitingForPermission, isCommandBar })
     errorBody = (
       <div>
         <span>{errorText}</span>
-        <Link
-          href="https://download.tarteel.ai"
-          isNewTab
-          variant={LinkVariant.Highlight}
-          onClick={onTarteelLinkClicked}
-        >
-          {t('tarteel.app')}
-        </Link>
       </div>
     );
   }

diff --git a/src/components/TarteelVoiceSearch/BodyContainer/index.tsx b/src/components/TarteelVoiceSearch/BodyContainer/index.tsx
@@ -54,11 +54,7 @@ const VoiceSearchBodyContainer: React.FC<Props> = ({ isCommandBar = false }) =>
           [styles.container]: !isCommandBar,
         })}
       >
-        <Error
-          isCommandBar={isCommandBar}
-          error={error}
-          isWaitingForPermission={isWaitingForPermission}
-        />
+        <Error error={error} isWaitingForPermission={isWaitingForPermission} />
       </div>
     );
   }