Skip to content

Fix inconsistent styling#2691

Open
osamasayed wants to merge 536 commits intotestingfrom
fix-inconsistent-styling
Open

Fix inconsistent styling#2691
osamasayed wants to merge 536 commits intotestingfrom
fix-inconsistent-styling

Conversation

@osamasayed
Copy link
Member

No description provided.

osamasayed and others added 30 commits September 10, 2025 07:19
* Update Dockerfile: Fix build, proper dependency installation, and ESLint skip

* build(docker): remove env file handling and switch to cmd for startup

* build(docker): update environment variables and port configuration

* build(docker): simplify build process by removing ESLint ignore config

* build(docker): remove unwanted comments from Dockerfile

* build(docker): add runtime environment variable handling

* build(docker): update port to 80 and simplify build process
* Update Dockerfile: Fix build, proper dependency installation, and ESLint skip

* build(docker): remove env file handling and switch to cmd for startup

* build(docker): update environment variables and port configuration

* build(docker): simplify build process by removing ESLint ignore config

* build(docker): remove unwanted comments from Dockerfile

* build(docker): add runtime environment variable handling

* build(docker): update port to 80 and simplify build process
* Update QR integration

* handle comments
* Applied all changes suggested by Codex
* Fixed all unstable tests
* Fixed access to localstorage during tests
* Replaced text and class-based selectors with `data-testid` selectors
* Added tests to ensure verses and their translations are displayed correctly
…ah info

- reader.spec.ts
  - Verify that the surah name translation, Arabic calligraphy, and transliteration are displayed

- content.spec.ts
  - Verify that verses are progressively displayed while scrolling
  - Verify that all verses of Surah Al-Fatiha (1–7) are displayed on scroll
  - Verify that footnotes are present, expand on click, and collapse on second click
  - Verify that the Arabic text and translation of the first verse are displayed

- bookmark.spec.ts
  - Verify that a verse can be bookmarked and that the bookmark persists

- surah-info.spec.ts:
  - Verify that the main surah information (name, place of revelation, and number of verses) is displayed
- **translations.spec.ts**
  - Verify that all available translations are displayed
  - Verify that translation selection persists and multiple translations can be selected and displayed
  - Verify that author names are displayed when multiple translations are selected
  - Verify that translation search works
- Verify searching for a juz works and navigates to the correct URL
- Verify searching for a surah works and navigates to the correct URL
- Verify searching by verse content shows multiple results and navigates correctly
- Verify searching in a non-English translation works
- Verify searching for a specific verse shows the correct result
- Verify that search history is preserved and recent queries appear when reopening the search bar
- **search-bar.spec.ts**
  - Verify that entering a number displays results for surah, page, and juz
  - Verify that a no-result query shows a link to advanced search and navigates correctly

- **search-drawer.spec.ts**
  - Verify that search history is preserved in the search drawer

- **search-page.spec.ts**
  - Verify that popular searches are displayed
  - Verify that a no-result query shows the 'No results found' message
- Verify that the drawer can be opened and closed
- Verify that Surahs are listed, searchable, and filtered correctly
- Verify that verse navigation works and shows the correct verse range
- Verify that Juz list is displayed with correct boundaries
- Verify that Page list is displayed with correct boundaries
- Verify that all navigation options (Surah, Juz, Page, Verse) are clickable and navigate to the correct pages
- Verify that the drawer can be opened and closed
- Verify that Surahs are listed, searchable, and filtered correctly
- Verify that verse navigation works and shows the correct verse range
- Verify that Juz list is displayed with correct boundaries
- Verify that Page list is displayed with correct boundaries
- Verify that all navigation options (Surah, Juz, Page, Verse) are clickable and navigate to the correct pages
- Add all tests for navbar and header
- Add tags to new and some existing tests to leverage full potential of Playwright
- Remove Safari from tested platforms
…dd tags

Simplify workaround for clicking the button to enable mushaf view
al-imam and others added 28 commits December 8, 2025 17:12
* feat(quranic-calendar): add ask question button for logged-in users

- introduces a new button that allows logged-in users to ask questions
- opens a Google Form for submitting questions

* feat(quranic-calendar): enhance action buttons with responsive design

- refactor action buttons to use useIsMobile hook for mobile detection
- update button styles for better responsiveness and alignment
- conditionally render ask question button based on user subscription status

* feat(quranic-calendar): refactor action buttons layout style

* feat(quranic-calendar): improve button text visibility and responsiveness for mobile devices

* fix: use reactive useIsLoggedIn hook instead of isLoggedIn function

* reactor: align code with project standards

* chore: add comment

* refactor: removed className and capitalize function

* feat: enhance action buttons with accessibility improvements

* refactor: use enum for social button names and improve className handling
* QF-3590: Update PopularButton and ChapterCard styles for improved responsivene and RTL support (#2558)

* Update PopularButton and ChapterCard styles for improved responsiveness and RTL support

* Update HeroButtons styles to enforce nowrap text wrapping for better layout consistency

* Update PopularButton styles to set fixed widths for improved layout on different screen sizes

* Remove extra newline in PopularButton styles

* Remove unnecessary whitespace in PopularButton styles for cleaner code

* Implement PopularDropdown component and integrate it into HomePageHero; refactor PopularButton to accept onClick prop for dropdown handling

* Remove PopularButton styles as part of the component refactor; streamline codebase by eliminating unused SCSS file.

* refactor(quran-reader): centralize page tracking with intersection observers

Move intersection observer registration and data attributes from VerseText and ChapterHeader components to Line and TranslationViewCell components for better consistency in page tracking. Update useSyncChapterPage hook to detect navigation changes and sync pages accordingly. This refactoring improves code organization without altering functionality.

* fix(quran-reader): fix page number update on chapter navigation

Refine chapter navigation detection in useSyncChapterPage hook by tracking previous chapterId instead of initialData, ensuring accurate page syncing when navigating between chapters. Improve type safety in ReadingView and TranslationView components by updating ref types to include null and adjusting mergedRef callbacks. Replace div wrapper with React Fragment in TranslationViewCell for cleaner rendering.

---------

Co-authored-by: Yousef Dergham <79238462+yousefdergham@users.noreply.github.com>
* fix(quran-reader): update page number tracking in translation view

Refactor useSyncChapterPage hook to directly use initial verse data for immediate page and hizb updates on navigation, removing unnecessary props from TranslationPageVerse component. This ensures accurate page number display without relying on scrolling or external lookups.

* fix: add null guard for verseKey in intersection observer callback

Prevent runtime error when observed element lacks data-verse-key attribute.
* fix(quran-reader): update page number tracking in translation view

Refactor useSyncChapterPage hook to directly use initial verse data for immediate page and hizb updates on navigation, removing unnecessary props from TranslationPageVerse component. This ensures accurate page number display without relying on scrolling or external lookups.

* fix: add null guard for verseKey in intersection observer callback

Prevent runtime error when observed element lacks data-verse-key attribute.

* fix: add missing pageNumber and hizbNumber props to ChapterHeader

The ChapterHeader component requires pageNumber and hizbNumber props
for data attributes used by the intersection observer.
…use it (#2635)

* Add CheckboxChip component and update WordByWordSection to use it

- Introduced a new CheckboxChip component with styles for checkbox chips.
- Updated WordByWordSection to replace existing Checkbox components with CheckboxChip.
- Adjusted styles in WordByWordSection for better layout and spacing.
- Added new spacing variable for consistent sizing in theme.scss.

* Refactor CheckboxChip styles to use new spacing variable

- Updated CheckboxChip styles to utilize the new --spacing-hairline-px variable for width and height.
- Added --spacing-hairline-px variable in theme.scss for consistent sizing across components.

* Update CheckboxChip styles and component structure

- Added clip and white-space properties to CheckboxChip styles for improved accessibility.
- Adjusted icon size to use the new --spacing-medium1-5-px variable for consistency.
- Refactored CheckboxChip component structure for better readability and maintainability.
* Draft version

* Add interactive search and filters to App Majlis page

* wire filter pills and search input to shared state for app grid
* apply category + query filtering with translations and empty state styling
* keep featured apps static while browse section filters six app tiles

* Fix dark mode filter chip visibility on App Majlis

* use themed backgrounds/borders for filters/search to keep contrast in dark mode
* apply placeholder/text color tokens and correct alternate section background for theme support (src/pages/app-majlis.module.scss)

* Rename App Majlis to App Portal

* Improve developers page layout

* Refine developers page hero and projects

* [QF] Fix developers page lint issues

* Added real featured apps

* Added real apps in browse apps section

* Fix featured app portal images to match actual asset filenames

* Open app portal Learn more links in new tabs

* fixed icorrect url of images

* Replaced the three feature images

* Removed linear gradient from the images

* Changed the preview image of Quran Reflect

* removed nested sections from developers page

* changed app-url to apps-url

* Optimize images

* Localize apps-portal page

* Add logging

* Fix view all button

* Add developers page specific styles file

* updates

* refactors

* remove un-used keys

* Add localization

* Add localization to developers

---------

Co-authored-by: Osama Sayed <toto777_90@hotmail.com>
* Added mobile apps for qdc

* Optimize images

* Add localization

---------

Co-authored-by: Osama Sayed <toto777_90@hotmail.com>
* fix: revert bookmark and add another variant

* fix: profile avatar button bookmark icon
* fix: show yellow lightbulb icon for clarification questions

The API returns question type keys with incorrect casing (e.g., "cLARIFICATION"
instead of "CLARIFICATION"). Added normalization to convert type keys to
uppercase, allowing the yellow lightbulb icon to display correctly for
verses with clarification questions.

* fix: use local type definition in test to avoid import issues

Avoid importing QuestionsData from api.ts which has complex dependencies
that don't resolve in the Vitest test environment.

* refactor: move normalizeQuestionsData to separate utility file

Move the normalization function to src/utils/questions.ts to avoid
test import issues with complex dependencies in api.ts.
* fix: input height inconsistency & password input focus issue

* refactor(login): redesign sign-in/sign-up ui

* feat: update social auth buttons to horizontal layout

* fix(login): correct typo in unified registration text and add loading state

* refactor: add small margin top utility class and apply to submit buttons

* test: update tests & refactor code

* fix: code comment

* refactor: switch to logical properties for directional support

---------

Co-authored-by: zonetecde <zonetecde@gmail.com>
* feat: design surah info modal and show surah info data

* feat: sync surah info modal state to url

* feat: sync surah info modal state to url

* feat: implement redirects for surah and chapter info pages

* added margin bottom on drawer screen

* refactor: remove unnecessary code

* fix: only open surah info modal automatically initially on /surah/id/info page once

* fix: backend already had fallback removed unnecessary code

- removed unnecessary code
- set state on else block.

* fix: code comment

* fix: avoid unnecessary requests

* refactor: use variables for calligraphy offset and container min-height
* [QF-3666-hooks] add hooks and function related to updating user profile including avatar

* [QF-3666-hooks] Refactor hooks

* [QF-3666-hooks] remove base64 param handling and refactor how cache work

* [QF-3666-hooks] change type to interface

* [QF-3666-hooks] remove unused

* [QF-3666-hooks] fix avatar handling error

* [QF-3666-hooks] add logging and fix profile.json

* [QF-3666-hooks] configure body parse limit

* [QF-3666-hooks] custom error handler for avatar

* [QF-3666] Update user profile

* [QF-3666-hooks] fix image format conversion, api limit and refactor

* [QF-3666-hooks] refactor

* [QF-3666-hooks] put back translationsParams

* [QF-3666] refactor

* [QF-3666] refactor

* [QF-3666] remove unnecessary

* [QF-3666] refactor integration test

* [QF-3675-hooks] add useUpdatePassword hook

* [QF-3675-hooks] fix error merge
* [QF-3666-hooks] add hooks and function related to updating user profile including avatar

* [QF-3666-hooks] Refactor hooks

* [QF-3666-hooks] remove base64 param handling and refactor how cache work

* [QF-3666-hooks] change type to interface

* [QF-3666-hooks] remove unused

* [QF-3666-hooks] fix avatar handling error

* [QF-3666-hooks] add logging and fix profile.json

* [QF-3666-hooks] configure body parse limit

* [QF-3666-hooks] custom error handler for avatar

* [QF-3666] Update user profile

* [QF-3666-hooks] fix image format conversion, api limit and refactor

* [QF-3666-hooks] refactor

* [QF-3666-hooks] put back translationsParams

* [QF-3666] refactor

* [QF-3666] refactor

* [QF-3666] remove unnecessary

* [QF-3666] refactor integration test

* [QF-3675-hooks] add useUpdatePassword hook

* [QF-3675] Update Password UI for Profile Page

* [QF-3666] add test id utils

* [QF-3675] add test

* [QF-3675] reusable wait time in test

* [QF-3675] fix code comments

* [QF-3675] fix test

* [QF-3675] fix password input

* [QF-3675] fix test

* [QF-3675] fix error merge
* QF-3590: Update PopularButton and ChapterCard styles for improved responsivene and RTL support (#2558)

* Update PopularButton and ChapterCard styles for improved responsiveness and RTL support

* Update HeroButtons styles to enforce nowrap text wrapping for better layout consistency

* Update PopularButton styles to set fixed widths for improved layout on different screen sizes

* Remove extra newline in PopularButton styles

* Remove unnecessary whitespace in PopularButton styles for cleaner code

* Implement PopularDropdown component and integrate it into HomePageHero; refactor PopularButton to accept onClick prop for dropdown handling

* Remove PopularButton styles as part of the component refactor; streamline codebase by eliminating unused SCSS file.

* refactor(bookmarks): extract custom hooks and improve cache management

Refactor bookmark and collection functionality by extracting business logic
into reusable custom hooks and fixing SWR cache patterns.

- `useVerseBookmark` - verse bookmark operations with optimistic updates
- `usePageBookmark` - page bookmark operations with optimistic updates
- `useBookmarkCollections` - manage bookmark-collection associations
- `useCollections` - fetch and manage user collections
- `useBookmarkBase` - shared bookmark functionality
- `useBookmarkCacheInvalidator` - centralized cache invalidation

- Add "Pages" tab to profile bookmarks section
- `BookmarkedPagesList` and `PageBookmarkPill` components
- Bulk fetch optimization for Reading View (reduces API calls)

- Replace improper `cache.delete()` with `globalMutate()`
- Add optimistic updates for instant UI feedback
- Improve login/logout sync with retry logic
- Add `clearBookmarks` and `clearReadingTracker` Redux actions
- Add unit tests for Redux slices

- Reduce component complexity by ~60%
- Separate UI components from business logic
- Add TypeScript types and JSDoc documentation

* chore(icons): replace bookmark svg with feather icon

* fix(bookmarks): address PR review comments

- Add isSyncingRef guard to prevent duplicate syncs in useSyncUserData
  when effect re-runs due to dependency changes
- Remove redundant null check in useVerseBookmark handleRemoveBookmark

* style: add eslint disable comments and remove debug logging to fix ts build

* fix(bookmarks): address PR review comments

- Remove redundant cache mutation in SaveToCollectionAction.tsx
  (addToCollection already handles cache mutation internally)
- Remove unnecessary empty fragment wrapper in BookmarkAction.tsx
- Fix `any` type to `unknown` in errors.ts for type safety
- Add UseVerseBookmarkReturn interface for consistency with usePageBookmark

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

* fix(bookmarks): validate page bookmark response to prevent stale/error data

- Check response has valid id and matches requested page number
- Handle 404 error objects that were incorrectly treated as bookmarks
- Prevent stale cached data from one page showing on another page
- Add pageNumber validation to isPageBookmarked and handleBookmarkRemove

* fix(bookmarks): resolve page bookmark hydration mismatch issue

- Capture initial SSR mushafId with useRef to avoid hydration mismatch
  where server session has correct preference but client localStorage is stale
- Use serialized SWR key format (pageBookmark:{mushafId}:{pageNumber})
  to ensure fetcher receives correct values on revalidation
- Add isClient check to prevent fetching during SSR
- Use Number() for type-safe bookmark key comparisons
- Reduce SWR dedupingInterval from 10s to 2s for better cross-tab sync

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* fix(bookmarks): improve sync reliability and cache invalidation

- Use reactive useIsLoggedIn hook instead of non-reactive isLoggedIn()
  to properly trigger sync when login status changes
- Clear lastSyncAt cookie when user logs out (handles server-side
  logout via /logout page where client-side cleanup doesn't run)
- Add pageBookmark: pattern to cache invalidation so page bookmark
  SWR caches are revalidated after sync completes
- Add path: '/' to cookie operations for consistent behavior
- Add bookmarkedVerses/Pages to useEffect dependencies to ensure
  sync runs with latest local data

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

---------

Co-authored-by: Yousef Dergham <79238462+yousefdergham@users.noreply.github.com>
Co-authored-by: Claude <noreply@anthropic.com>
…le including avatar (#2590)

* [QF-3666-hooks] add hooks and function related to updating user profile including avatar

* [QF-3666-hooks] Refactor hooks

* [QF-3666-hooks] remove base64 param handling and refactor how cache work

* [QF-3666-hooks] change type to interface

* [QF-3666-hooks] remove unused

* [QF-3666-hooks] fix avatar handling error

* [QF-3666-hooks] add logging and fix profile.json

* [QF-3666-hooks] configure body parse limit

* [QF-3666-hooks] custom error handler for avatar

* [QF-3666-hooks] fix image format conversion, api limit and refactor

* [QF-3666-hooks] refactor

* [QF-3666-hooks] put back translationsParams

* [QF-3666-hooks] localise error and refactor useImageUpload

* [QF-3666-hooks] refactor validation error messages

* [QF-3666] Update user profile (#2608)

* [QF-3666] Update user profile

* [QF-3666] refactor

* [QF-3666] refactor

* [QF-3666] remove unnecessary

* [QF-3666] refactor integration test

* [QF-3666] add test id utils

* [QF-3666] implement router back

* [QF-3666] fix extra params naming

* [QF-3666] remove profile.module.scss

* [QF-3666-hooks] fix merging error
Replace justify-self: center with margin-inline: auto for cross-browser
compatibility. justify-self only works in CSS Grid contexts, but Chrome
has non-standard support for it in other layouts. Safari and Firefox
follow the CSS spec strictly and require margin-inline: auto to center
block elements with a max-width.

Also fix pre-existing stylelint warnings (use logical CSS properties).

Fixes: https://quranfoundation.atlassian.net/browse/QF-3926
* Refactor course components and localization strings

- Update button labels in localization files for consistency: "Start Learning" to "Start Here" and "Begin Now" to "Start Now".
- Remove unused NotEnrolledNotice component and related hooks for guest enrollment.
- Simplify course detail components by removing unnecessary state and props.
- Enhance navigation logic for better user experience when enrolling in courses.
- Clean up SCSS by removing styles related to the deleted NotEnrolledNotice component.

* [QF-3520] Open learning plans (add enrollment method) (#2644)

* Refactor course enrollment logic and introduce new enrollment methods

- Simplify course enrollment handling in StatusHeader and LessonPage components by utilizing a new custom hook, useCourseEnrollment.
- Update enrollment API to accept an enrollment method parameter, allowing for manual and automatic enrollment options.
- Enhance user experience by managing loading states and redirecting users appropriately based on their enrollment status.
- Introduce a utility function to update the course enrollment status in the SWR cache for better state management.
- Add a new EnrollmentMethod enum to standardize enrollment types across the application.

* Enhance course enrollment logic to handle success response

- Update the useCourseEnrollment hook to check for a successful enrollment response before updating the course enrollment cache.
- Improve error handling by logging errors to Sentry for better tracking of enrollment issues.

* Refactor course enrollment cache update logic

- Introduce a check for currentCourse existence before updating the enrollment status in the cache to prevent potential errors.
- Clean up imports by removing unused references to maintain code clarity.

* Enhance course enrollment error handling and user feedback

- Update the StatusHeader component to display a toast notification for enrollment failures, improving user experience.
- Modify the useCourseEnrollment hook to return a success status, allowing for better handling of enrollment outcomes.
- Open the Apps Portal link in a new browser tab to avoid
navigating users away from the Developers page.

- This improves the developer experience by keeping the
current context intact while exploring available apps.

navigating users away from the Developers page.

This improves the developer experience by keeping the
current context intact while exploring available apps.
.tsx
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.