fix:posts-page-styling to match Figma design#7175
fix:posts-page-styling to match Figma design#7175aadityasingh9601 wants to merge 11 commits intoPalisadoesFoundation:developfrom
Conversation
Our Pull Request Approval ProcessThis PR will be reviewed according to our: Your PR may be automatically closed if:
Thanks for contributing! |
|
Important Review skippedReview was skipped due to path filters ⛔ Files ignored due to path filters (1)
CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including You can disable this status message by setting the Use the checkbox below for a quick retry:
WalkthroughAdds a CreatePostContainer UI and translations, introduces auto-scrolling pinned-posts behavior, renders post bodies in cards, updates post feed layout and styles, and adjusts GraphQL query and types to include post body. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant PinnedLayout as PinnedPostsLayout
participant DOM as Browser DOM
User->>PinnedLayout: Mounts component with pinnedPosts
activate PinnedLayout
PinnedLayout->>PinnedLayout: startAutoScroll()
loop requestAnimationFrame auto-scroll
PinnedLayout->>DOM: increment scrollLeft
DOM->>DOM: container scrolls horizontally
PinnedLayout->>PinnedLayout: if scrollLeft >= half scrollWidth -> reset scrollLeft
end
User->>DOM: mouseenter (hover)
DOM->>PinnedLayout: onMouseEnter
PinnedLayout->>PinnedLayout: stopAutoScroll() / cancel rAF
User->>DOM: mouseleave
DOM->>PinnedLayout: onMouseLeave
PinnedLayout->>PinnedLayout: resumeAutoScroll() / start rAF
User->>PinnedLayout: Unmount
PinnedLayout->>PinnedLayout: stopAutoScroll() cleanup
deactivate PinnedLayout
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Suggested reviewers
Important Pre-merge checks failedPlease resolve all errors before merging. Addressing warnings is optional. ❌ Failed checks (1 error, 1 warning, 1 inconclusive)
✅ Passed checks (7 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Tip Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 18
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (10)
src/shared-components/Navbar/Navbar.module.css (1)
23-34:⚠️ Potential issue | 🟠 MajorReplace dropdown custom props with design tokens (avoid app-fixed dependency).
Line 24-33 still relies on
--dropdown-*variables, which are slated to be removed with app-fixed. Please swap these for tokens fromsrc/style/tokensso the navbar styling remains stable after the cleanup.Based on learnings: In talawa-admin, all CSS custom properties must come exclusively from src/style/tokens/ directory (spacing.css, colors.css, borders.css, typography.css, etc.), NOT from src/style/app-fixed.module.css; component-specific vars like --dropdown-bg must be replaced with equivalent tokens.
src/shared-components/pinnedPosts/pinnedPostCard.module.css (1)
1-52: 🛠️ Refactor suggestion | 🟠 MajorReplace hardcoded styling values with design tokens
Several new/updated values are hardcoded (
#ddd,#a8c7fa,#8bb5e8, 8px/6px). Please switch these to design tokens from src/style/tokens to keep theming consistent.♻️ Example tokenization
.postCardContainer { - border-radius: 8px; + border-radius: var(--radius-lg); height: 390px; } .card { width: 340px; - height: 390px; - border: 1px solid `#ddd`; + height: 390px; + border: 1px solid var(--color-gray-200); overflow: hidden; } .viewPostButton { - background-color: `#a8c7fa`; + background-color: var(--color-blue-200); color: black; text-transform: none; - border-radius: 6px; - padding: 6px 16px; + border-radius: var(--radius-md); + padding: var(--space-2) var(--space-4); } .viewPostButton:hover { - background-color: `#8bb5e8` !important; + background-color: var(--color-blue-300); }Based on learnings, "In the talawa-admin repository, replace hardcoded CSS values (including calc() expressions for font-size, padding, margin, etc.) with design tokens from src/style/tokens/."
src/shared-components/pinnedPosts/pinnedPostCard.spec.tsx (1)
109-153:⚠️ Potential issue | 🔴 CriticalPinnedPostCard.spec.tsx: Fix dynamic dates and menu race conditions
Issue Goals
- Issue
#6652expects Posts page styling to match Figma; these tests only verify text/button presence (lines 156-191, 197-242) without validating layout/styling. Consider adding visual regression coverage elsewhere.Tests (incl. Flakiness)
⚠️ NON-DETERMINISTIC DATES at lines 121-122 —dayjs.utc().subtract(14, 'days').toISOString()depends on current time; use fixed UTC timestamps (e.g.,"2025-01-01T10:00:00Z").⚠️ RACE CONDITION at lines 327-330, 407-410, 445-448, 561-564 — menu items are queried immediately after clicking the button without waiting for the MUI Menu to render. Useawait screen.findByTestId('delete-post-menu-item')instead ofgetByTestIdto await the async Menu portal render.⚠️ INCOMPLETE CLEANUP at lines 109-112 — afterEach only callsvi.clearAllMocks(); missingcleanup()from@testing-library/react. Addcleanup()call in afterEach.Components/Policy
- No additional component-policy issues found.
GraphQL
- The body field in mocks (line 120) is valid; it exists in the InterfacePost type and is requested by the GraphQL query.
i18n & a11y
- No issues found.
Security
- No issues found.
Action Items
- Replace dynamic dates with fixed UTC timestamps.
- Wrap menu item queries in
findByTestIdor addawait waitFor(() => expect(screen.getByTestId(...)).toBeInTheDocument())after clicking the menu button.- Add
import { cleanup } from '@testing-library/react'and callcleanup()in the afterEach block.- Run:
pnpm run test:coverageandpnpm run typecheckto verify no regressions.src/shared-components/pinnedPosts/pinnedPostsLayout.module.css (1)
44-53:⚠️ Potential issue | 🔴 CriticalHover/active transforms override base
translateY(-50%), causing the nav button to jump.The base
.navButton(Line 27) usestransform: translateY(-50%)for vertical centering. On:hover, the transform is replaced withscale(1.05)(Line 48), and on:activewithscale(0.95)(Line 52). Since CSStransformis a single property, the hover/active values completely replace the basetranslateY(-50%), causing the button to visually snap out of vertical center on interaction.🐛 Fix: combine transforms
.navButton:hover { background: `#fff`; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); color: `#333`; - transform: scale(1.05); + transform: translateY(-50%) scale(1.05); } .navButton:active { - transform: scale(0.95); + transform: translateY(-50%) scale(0.95); }src/shared-components/pinnedPosts/pinnedPostsLayout.tsx (1)
165-180:⚠️ Potential issue | 🔴 CriticalDuplicate React keys from doubled
allPostsarray.
allPosts(Line 139) is[...pinnedPosts, ...pinnedPosts], so everypinnedPost.node.idappears twice. Usingkey={pinnedPost.node.id}on Line 173 produces duplicate keys, which breaks React's reconciliation and triggers console warnings.🐛 Fix: use index to disambiguate keys
- {allPosts + {allPosts .filter( ( pinnedPost, ): pinnedPost is InterfacePostEdge & { node: InterfacePost } => Boolean(pinnedPost.node), ) - .map((pinnedPost) => ( - <div key={pinnedPost.node.id} className={styles.cardWrapper}> + .map((pinnedPost, index) => ( + <div key={`${pinnedPost.node.id}-${index}`} className={styles.cardWrapper}> <PinnedPostCardsrc/shared-components/posts/posts.spec.tsx (4)
1016-1048: 🧹 Nitpick | 🔵 TrivialDuplicate test — this is functionally identical to the test at Line 993.
The test "opens create post modal when post input is clicked" (Line 1027) performs the same open → close → assert-gone flow as "closes create post modal when close button is clicked" (Line 993). Either deduplicate or differentiate their assertions (e.g., one tests only opening, the other tests only closing).
Also, Line 1046 has the same missing
waitForafter close as noted above.Suggested differentiation
- it('opens create post modal when post input is clicked', async () => { + it('renders create post container on the page', async () => { renderComponent([orgPostListMock, emptyPinnedPostsMock]); await waitFor(() => { expect(screen.getByTestId('postInput')).toBeInTheDocument(); }); - // Open modal - const postInput = screen.getByTestId('postInput'); - await user.click(postInput); - - await waitFor(() => { - expect(screen.getByTestId('create-post-modal')).toBeInTheDocument(); - }); - - // Close modal - const closeButton = screen.getByTestId('close-create-modal'); - await user.click(closeButton); - - expect(screen.queryByTestId('create-post-modal')).not.toBeInTheDocument(); + expect(screen.getByTestId('createPostContainer')).toBeInTheDocument(); });
571-573:⚠️ Potential issue | 🟡 Minor
⚠️ INCOMPLETE CLEANUP — Missingcleanup()inafterEach.Per coding guidelines, each test file must call
cleanup()from@testing-library/reactinafterEachto prevent DOM state leakage between tests. This applies to allafterEachblocks in the file (Lines 571, 884, 989, 1023, 1057, 1111, 1342, 1377, 1446, 1548).Proposed fix (apply to each afterEach)
+import { render, screen, waitFor, cleanup } from '@testing-library/react';afterEach(() => { + cleanup(); vi.clearAllMocks(); });
564-1586: 🧹 Nitpick | 🔵 TrivialStructured Test Review
Issue Goals (Priority
#1)
- Fixes
#6652: Posts page styling to match Figma design.- Tests cover: CreatePostContainer rendering and interaction (Line 997, 1027), body field in post data (Lines 292, 321, 339, 358, 376), updated modal flow.
- Gap: No test explicitly verifies visual/styling changes or that the CreatePost button was removed from the posts page.
Tests (incl. Flakiness)
⚠️ RACE CONDITION at Line 1012, 1046 — Synchronous assertion afteruser.click(closeButton)withoutwaitFor.- Dynamic
dayjs()timestamps at module scope (Line 268, 323, 341, etc.) are acceptable per project convention.- No hardcoded
setTimeoutor fixed delays.Components/Policy
- CreatePostContainer mock correctly wired (Line 198-208).
- Duplicate test: "Create Post Container" block (Line 1016-1048) mirrors "Create Post Modal" block (Line 993-1013).
GraphQL
- Mock data enriched with
bodyfield — verify against schema (see separate comment).i18n & a11y
- No new i18n assertions in changed tests.
- No a11y regressions in mock components.
Security
- No security concerns.
Action Items
- Wrap modal-close assertions at Lines 1012 and 1046 in
waitFor.- Add
cleanup()to allafterEachblocks.- Deduplicate or differentiate the two identical modal open/close tests.
- Confirm
bodyfield is available in the GraphQL Post type.
271-314:⚠️ Potential issue | 🔴 CriticalRemove the
bodyfield from theenrichPostNodefunction return object.The
PostNodeGraphQL type does not include abodyfield; it only hascaptionfor post content. TheenrichPostNodefunction should not includebodyin its return object at lines 292, as this creates a type mismatch with the actualPostNodetype definition. Remove the linebody: post.body ?? 'Test body'and the corresponding parameter from the input type.src/shared-components/postCard/PostCard.tsx (1)
373-386:⚠️ Potential issue | 🔴 CriticalBug:
postCardStyles.bodyis a CSS class name string, not the post body prop.Line 373 conditionally renders the body section based on whether the CSS module has a
.bodyclass — which is a static truthy/falsy string, not the actual post body content. This means the body container renders even whenprops.bodyis empty/null, or never renders if the class is removed.Proposed fix
- {postCardStyles.body && ( + {props.body && ( <Box className={postCardStyles.bodyContainer}>
🤖 Fix all issues with AI agents
In `@src/GraphQl/Queries/OrganizationQueries.ts`:
- Around line 31-34: The GraphQL queries ORGANIZATION_PINNED_POST_LIST and
ORGANIZATION_POST_BY_ID still request the removed Post.body and deprecated
attachmentURL fields; update both queries to remove body and attachmentURL and
replace attachmentURL with the attachments selection (mimeType, name, fileHash,
objectName). Update pinnedPostCard.tsx to stop using node.body and render
node.caption instead (adjust any trimming/HTML handling to use caption), and
ensure components expect attachments array with
mimeType/name/fileHash/objectName. After making these changes run pnpm run
typecheck to verify no type errors.
In `@src/screens/UserPortal/UserScreen/UserScreen.module.css`:
- Around line 62-67: The .titleContainer h1 rule uses hardcoded values (40px,
500, black, 2rem); replace these with the project's design tokens from
src/style/tokens (e.g., use the appropriate --font-size-*, --font-weight-*,
--color-*, --space-* variables already used elsewhere in this file) — update the
.titleContainer h1 selector to reference var(--font-size-28) or the correct
typography token, var(--font-weight-bold) (or matching weight token),
var(--color-gray-500) (or the correct color token), and var(--space-2) (or
matching spacing token); if a token is missing, add a new token to the relevant
tokens file rather than introducing a literal.
In `@src/shared-components/pinnedPosts/pinnedPostCard.tsx`:
- Around line 142-143: Replace the hardcoded borderRadius: 8 in the sx/style
object inside the PinnedPostCard component with the design token CSS custom
property (e.g., use "var(--radius-lg)") so the component uses the project's
theme token; update the object where p: 1, borderRadius: 8 appears (the sx prop
in pinnedPostCard.tsx) to reference the CSS variable instead of the numeric
literal.
- Around line 291-302: The body preview currently truncates with substring
(pinnedPost.node.body) which can cut words mid-word; remove the JS-based
ternary/substring logic and render pinnedPost.node.body directly inside the
Typography, and apply the same CSS-based line-clamp used for the caption (the
Typography sx at line ~272) — e.g., add the -webkit-box display,
WebkitLineClamp, WebkitBoxOrient, overflow: hidden and textOverflow rules in the
same sx prop for this body Typography so the text is cleanly clamped instead of
being sliced by character count.
In `@src/shared-components/pinnedPosts/pinnedPostsLayout.module.css`:
- Around line 109-111: Remove the unused and misspelled CSS rule `.buttonn` from
pinnedPostsLayout.module.css: delete the `.buttonn { background-color: `#e9f1ff`;
}` block, run a quick project-wide search for `.buttonn` to confirm there are no
references, and if the intent was to style a button instead, create or use a
properly named `.button` class in pinnedPostsLayout.tsx (or update the JSX to
match the new class); otherwise simply remove the rule to clean up dead CSS.
In `@src/shared-components/pinnedPosts/pinnedPostsLayout.tsx`:
- Around line 102-124: startAutoScroll currently captures a stale container
variable; change the step closure to read the live DOM from
scrollContainerRef.current each tick (i.e., use scrollContainerRef.current
inside step instead of the captured container) and guard against null; continue
to use animationRef to prevent multiple loops and isPausedRef to pause;
additionally, respect user reduced-motion preferences by checking
window.matchMedia('(prefers-reduced-motion: reduce)').matches at the start of
startAutoScroll and return early if true (or skip animating) so users who opted
out of animations are not auto-scrolled.
- Around line 142-147: The container div with className styles.carouselWrapper
and data-testid "pinned-posts-layout" only uses onMouseEnter/onMouseLeave
(stopAutoScroll/resumeAutoScroll) which is inaccessible to
keyboard/screen-reader users; make it focusable and add keyboard equivalents by
wiring onFocus to stopAutoScroll and onBlur to resumeAutoScroll and add either
tabIndex={0} or role="region" plus an aria-label to describe the carousel so
assistive tech can pause it; update the element where styles.carouselWrapper is
used to include onFocus={stopAutoScroll}, onBlur={resumeAutoScroll}, and add
tabIndex and/or role+aria-label accordingly.
- Around line 73-82: There are two useEffect hooks both depending on pinnedPosts
that call startAutoScroll (one also calls checkScrollability and only the other
performs cleanup), causing redundant starts; consolidate into a single useEffect
that runs when pinnedPosts changes, calls checkScrollability(), calls
startAutoScroll(), and returns a cleanup that calls stopAutoScroll() so
start/stop happen exactly once per change (update the effects referencing
useEffect, checkScrollability, startAutoScroll, and stopAutoScroll accordingly).
In `@src/shared-components/postCard/PostCard.module.css`:
- Around line 39-45: The avatar rule .userImageUserPost img currently uses
transform: scale(1.5) which causes fragile cropping; update the CSS for
.userImageUserPost img to remove transform and instead set width: 100% and
height: 100% plus object-fit: cover so the image fills the 28×28 container
predictably (keep the existing position/top/left and rely on the container's
overflow:hidden behavior).
- Around line 182-184: Remove the duplicate CSS rule for the .image class in
PostCard.module.css so only a single `.image { width: 100%; }` remains; locate
both `.image` blocks and delete one of them (keep either the first or the
second) to avoid redundant definitions and ensure the remaining rule preserves
`width: 100%`.
- Around line 174-176: The .pinnedIcon CSS rule uses a fragile hardcoded
margin-left: 15rem which breaks across viewports; update the .pinnedIcon rule to
use margin-left: auto (or switch the parent container to display: flex and use
justify/content or align-items so the pinned icon naturally sits at the right)
and remove the 15rem magic number; locate the .pinnedIcon class in
PostCard.module.css and replace the fixed spacing with a responsive approach
(margin-left: auto or flexbox on the parent) so the icon stays right-aligned
across sizes.
In `@src/shared-components/postCard/PostCard.tsx`:
- Around line 462-508: Replace the three hardcoded labels ("Like", "Comment",
"Share") inside the Typography elements in the PostCard component with i18n keys
using the existing t(...) pattern (e.g., t('postCard.like'),
t('postCard.comment'), t('postCard.share')) so toggleComments, copyToClipboard
and showComments flows remain localized; also replace the inline sx color
'rgb(117 117 117)' on those Typography nodes with the theme token (e.g.,
'text.secondary' or the project CSS custom property/design token) to ensure
theme consistency and avoid hardcoded colors while keeping the same elements
that use postCardStyles.action and the IconButton aria-label patterns.
In
`@src/shared-components/posts/createPostContainer/createPostContainer.module.css`:
- Around line 1-73: Replace hardcoded colors, radii and spacing in
createPostContainer.module.css with design tokens: swap `#1778f2` with
tokens.colors.primary for .browseFilesButton and .sendButton/.sendButton svg,
replace rgba(0,0,0,0.9) and rgba(0,0,0,0.4/0.1/0.05) with
tokens.colors.textPrimary / tokens.colors.textMuted / tokens.colors.surfaceTint
(or equivalent) for .title, .postInput::placeholder, borders and background,
replace fixed radii 8px with tokens.radii.md for .createPostContainer,
.browseFilesButton, .inputArea and .sendButton, and replace
paddings/margins/gaps (16px, 12px, 8px, 24px, 48px, 55px, 37px) and font-size
values with tokens.spacing.* and tokens.typography.* (e.g.,
tokens.spacing.sm/md/lg and tokens.fontSize.md) in .createPostContainer,
.createPostContent, .title, .inputArea, .browseFilesButton, .postInput and
.sendButton so all hardcoded values reference the design tokens.
In `@src/shared-components/posts/createPostContainer/createPostContainer.tsx`:
- Around line 40-48: The read-only Input in createPostContainer (the Input JSX
with props className={styles.postInput}, placeholder={t('startYourPost')},
onClick={onClick}, readOnly, data-testid="postInput") lacks an explicit
accessible name; add an aria-label prop (e.g. aria-label={t('startYourPost')} or
a localized equivalent) to that Input so screen readers get a clear label while
keeping the placeholder and existing props unchanged.
- Around line 33-55: The Browse Files and Send Button render as interactive
elements but lack click handlers; wire both Button components (the one with
className styles.browseFilesButton and the send Button with className
styles.sendButton / data-testid "sendPostButton") to the same onClick prop
already used by the Input (onClick), so they trigger the CreatePostModal or the
same handler; update the Button elements to call the onClick prop (or
alternatively make the parent container clickable and delegate to onClick) so
all interactive controls consistently invoke the CreatePostContainer's onClick
handler.
In `@src/shared-components/posts/posts.spec.tsx`:
- Around line 1008-1013: After clicking the close button (closeButton /
user.click), the test asserts synchronously that
screen.queryByTestId('create-post-modal') is gone which can race with async DOM
updates; update the test to wait for the modal to be removed (e.g., wrap the
assertion in a waitFor or use waitForElementToBeRemoved/findByTestId) so the
expectation that 'create-post-modal' is not in the document runs after the modal
has actually been removed.
In `@src/shared-components/posts/posts.tsx`:
- Around line 381-387: Remove the extraneous JSX text nodes around the
CreatePostContainer by deleting the {' '} tokens present before and after
<CreatePostContainer onClick={showCreatePostModal} />; you can also simplify the
wrapper (the conditional block that checks userId) by returning the
CreatePostContainer directly instead of rendering an extra div if no additional
layout is required, keeping the onClick prop (showCreatePostModal) intact.
- Around line 392-397: Replace the hardcoded styling in the Typography instances
(the <Typography> that renders {t('pinnedPosts')} and the similar one around
line 432) to use design token CSS custom properties instead of numeric literals:
remove fontSize: 40 and fontWeight: 500 from the sx prop and reference the
project's tokens (e.g., var(--font-size-xxl) and var(--font-weight-medium) or
the equivalent token names used in the codebase) so the sx uses fontSize:
'var(--... )' and fontWeight: 'var(--... )' for both Typography declarations.
| id | ||
| caption | ||
| body | ||
| commentsCount |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# First, let's examine the file around the specified lines
cat -n src/GraphQl/Queries/OrganizationQueries.ts | head -60Repository: PalisadoesFoundation/talawa-admin
Length of output: 2044
🏁 Script executed:
# Also search for ORGANIZATION_PINNED_POST_LIST to understand its full definition
rg -A 30 "ORGANIZATION_PINNED_POST_LIST" src/GraphQl/Queries/OrganizationQueries.tsRepository: PalisadoesFoundation/talawa-admin
Length of output: 827
🏁 Script executed:
# Check for typecheck issues in the file
pnpm run typecheck 2>&1 | grep -i "OrganizationQueries\|body\|caption" || echo "No specific errors found for this file"Repository: PalisadoesFoundation/talawa-admin
Length of output: 115
🏁 Script executed:
# Check other post queries to see if body has been removed elsewhere
rg "body" src/GraphQl/Queries/OrganizationQueries.ts | grep -E "(query|body)"Repository: PalisadoesFoundation/talawa-admin
Length of output: 121
🏁 Script executed:
# Search for all post queries to see the pattern
rg "export const.*POST.*= gql" src/GraphQl/Queries/OrganizationQueries.tsRepository: PalisadoesFoundation/talawa-admin
Length of output: 224
🏁 Script executed:
# Check if post.body is used in any components
rg "post\.body|post\?.body" src/screens/OrgPost/ --type tsx --type tsRepository: PalisadoesFoundation/talawa-admin
Length of output: 104
🏁 Script executed:
# Check usage of post.attachmentURL to understand if it's critical
rg "attachmentURL" src/screens/OrgPost/ --type tsx --type tsRepository: PalisadoesFoundation/talawa-admin
Length of output: 104
🏁 Script executed:
# Search for post.body usage in components (without type flag)
rg "post\.body|post\?.body" src/screens/OrgPost/Repository: PalisadoesFoundation/talawa-admin
Length of output: 137
🏁 Script executed:
# Check all three post queries for body field presence
rg -A 50 "export const ORGANIZATION_POST_BY_ID" src/GraphQl/Queries/OrganizationQueries.ts | head -70Repository: PalisadoesFoundation/talawa-admin
Length of output: 1250
🏁 Script executed:
# Check for attachmentURL usage
rg "attachmentURL" src/screens/OrgPost/Repository: PalisadoesFoundation/talawa-admin
Length of output: 137
🏁 Script executed:
# Check if any other post-related query files exist
fd -t f ".*Query\|.*query" src/GraphQl/ | grep -i postRepository: PalisadoesFoundation/talawa-admin
Length of output: 59
🏁 Script executed:
# Find the actual directory structure
fd -t d "OrgPost\|orgpost\|post" src/screens/ 2>/dev/null | head -20Repository: PalisadoesFoundation/talawa-admin
Length of output: 59
🏁 Script executed:
# Search for all TypeScript files using post queries
rg "ORGANIZATION_PINNED_POST_LIST\|ORGANIZATION_POST_BY_ID\|ORGANIZATION_POST_LIST_WITH_VOTES" src/ | grep -v "OrganizationQueries.ts" | head -20Repository: PalisadoesFoundation/talawa-admin
Length of output: 59
🏁 Script executed:
# List screens directory to understand structure
ls -la src/screens/ 2>/dev/null || echo "Directory not found"Repository: PalisadoesFoundation/talawa-admin
Length of output: 418
🏁 Script executed:
# Search everywhere for usage of these queries
rg "ORGANIZATION_PINNED_POST_LIST" src/ --max-count 10Repository: PalisadoesFoundation/talawa-admin
Length of output: 878
🏁 Script executed:
# Check if body field is referenced anywhere in components
rg "\.body|post\.body" src/ | grep -v "\.ts:" | head -20Repository: PalisadoesFoundation/talawa-admin
Length of output: 1871
🏁 Script executed:
# Check the AdminPortal for post-related components
find src/screens/AdminPortal -type f -name "*[Pp]ost*" | head -20Repository: PalisadoesFoundation/talawa-admin
Length of output: 319
🏁 Script executed:
# Read the pinnedPostCard component to see how body is used
cat -n src/shared-components/pinnedPosts/pinnedPostCard.tsx | grep -A 5 -B 5 "body"Repository: PalisadoesFoundation/talawa-admin
Length of output: 571
🏁 Script executed:
# Check if PostCard also uses body from query results
rg -A 3 -B 3 "node\.body" src/shared-components/postCard/PostCard.tsxRepository: PalisadoesFoundation/talawa-admin
Length of output: 59
🏁 Script executed:
# Check the test file for how body is mocked
cat -n src/shared-components/posts/posts.spec.tsx | grep -A 5 -B 5 "post.body"Repository: PalisadoesFoundation/talawa-admin
Length of output: 512
Remove body from pinned posts and post-by-ID queries—the schema no longer exposes this field.
The Post GraphQL type no longer supports the body field. Both ORGANIZATION_PINNED_POST_LIST (line 33) and ORGANIZATION_POST_BY_ID queries request it, which will cause runtime failures. Additionally, pinnedPostCard.tsx actively depends on node.body to display post content (lines 298–301), so removal requires updating the component to use caption instead.
Also remove the deprecated attachmentURL field from both queries and use attachments { mimeType, name, fileHash, objectName } instead.
Run pnpm run typecheck after changes to confirm no new errors.
🤖 Prompt for AI Agents
In `@src/GraphQl/Queries/OrganizationQueries.ts` around lines 31 - 34, The GraphQL
queries ORGANIZATION_PINNED_POST_LIST and ORGANIZATION_POST_BY_ID still request
the removed Post.body and deprecated attachmentURL fields; update both queries
to remove body and attachmentURL and replace attachmentURL with the attachments
selection (mimeType, name, fileHash, objectName). Update pinnedPostCard.tsx to
stop using node.body and render node.caption instead (adjust any trimming/HTML
handling to use caption), and ensure components expect attachments array with
mimeType/name/fileHash/objectName. After making these changes run pnpm run
typecheck to verify no type errors.
There was a problem hiding this comment.
Including the body field in the schema in needed to fix the issue. @coderabbitai
There was a problem hiding this comment.
@aadityasingh9601, you're absolutely right, and I apologize for the confusion. The body field is supported by the GraphQL schema and is already in use in the other post queries (ORGANIZATION_POST_LIST_WITH_VOTES at line 79 and ORGANIZATION_POST_BY_ID at line 125 in the same file).
Adding it to ORGANIZATION_PINNED_POST_LIST is consistent and necessary for displaying the post body content in pinnedPostCard.tsx as part of fixing the UI to match the Figma design. My review comment was mistaken. Thank you for the clarification!
(\(\
( -.-)
o_(")(")
(whoops!)
| .titleContainer h1 { | ||
| font-size: var(--font-size-28); | ||
| font-weight: var(--font-weight-bold); | ||
| color: var(--color-gray-500); | ||
| margin-top: var(--space-2); | ||
| font-size: 40px; | ||
| font-weight: 500; | ||
| color: black; | ||
| margin-top: 2rem; | ||
| } |
There was a problem hiding this comment.
Hardcoded values regress from design tokens — use token variables instead.
These four properties replace existing design-token references with raw literals (40px, 500, black, 2rem), which is the opposite direction of the project's CSS standardization effort. The rest of this file already uses var(--space-*) and the previous version used var(--font-size-28), var(--font-weight-bold), var(--color-gray-500), and var(--space-2).
Please use the appropriate tokens from src/style/tokens/ (typography, colors, spacing) — adding new tokens if needed to match the Figma spec — rather than hardcoding values.
Suggested direction
.titleContainer h1 {
- font-size: 40px;
- font-weight: 500;
- color: black;
- margin-top: 2rem;
+ font-size: var(--font-size-40); /* add token if missing */
+ font-weight: var(--font-weight-medium); /* add token if missing */
+ color: var(--color-black);
+ margin-top: var(--space-8); /* pick the token closest to 2rem */
}Based on learnings: "all CSS custom properties must come exclusively from src/style/tokens/" and "replace hardcoded CSS values (including calc() expressions for font-size, padding, margin, etc.) with design tokens from src/style/tokens/."
🤖 Prompt for AI Agents
In `@src/screens/UserPortal/UserScreen/UserScreen.module.css` around lines 62 -
67, The .titleContainer h1 rule uses hardcoded values (40px, 500, black, 2rem);
replace these with the project's design tokens from src/style/tokens (e.g., use
the appropriate --font-size-*, --font-weight-*, --color-*, --space-* variables
already used elsewhere in this file) — update the .titleContainer h1 selector to
reference var(--font-size-28) or the correct typography token,
var(--font-weight-bold) (or matching weight token), var(--color-gray-500) (or
the correct color token), and var(--space-2) (or matching spacing token); if a
token is missing, add a new token to the relevant tokens file rather than
introducing a literal.
There was a problem hiding this comment.
Will fix it in the next commit.
There was a problem hiding this comment.
@aadityasingh9601 Thank you for confirming! Looking forward to seeing the design token variables in the next commit. 👍
| p: 1, | ||
| borderRadius: 8, |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Hardcoded borderRadius: 8 — prefer a design token.
Per project conventions, use a CSS custom property like var(--radius-lg) instead of a hardcoded value to maintain theme consistency.
Based on learnings: "In talawa-admin, design tokens via CSS custom properties should be used for borderRadius and other styling in React components (including MUI sx props)."
🤖 Prompt for AI Agents
In `@src/shared-components/pinnedPosts/pinnedPostCard.tsx` around lines 142 - 143,
Replace the hardcoded borderRadius: 8 in the sx/style object inside the
PinnedPostCard component with the design token CSS custom property (e.g., use
"var(--radius-lg)") so the component uses the project's theme token; update the
object where p: 1, borderRadius: 8 appears (the sx prop in pinnedPostCard.tsx)
to reference the CSS variable instead of the numeric literal.
| <Typography | ||
| color="text.secondary" | ||
| sx={{ | ||
| fontSize: '14px', | ||
| fontWeight: '400', | ||
| }} | ||
| > | ||
| {pinnedPost.node.body && | ||
| (pinnedPost.node.body.length > 100 | ||
| ? pinnedPost.node.body?.substring(0, 100) + '...' | ||
| : pinnedPost.node.body)} | ||
| </Typography> |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Body truncation may clip mid-word; consider a CSS-based approach.
The JS-based truncation at 100 characters can cut words in half. Since you're already using MUI Typography with -webkit-line-clamp elsewhere (Line 272 for caption), consider applying the same CSS-based text clamping for the body preview for cleaner truncation at word boundaries.
♻️ CSS-based truncation alternative
<Typography
color="text.secondary"
sx={{
fontSize: '14px',
fontWeight: '400',
+ display: '-webkit-box',
+ WebkitLineClamp: 3,
+ WebkitBoxOrient: 'vertical',
+ overflow: 'hidden',
+ textOverflow: 'ellipsis',
}}
>
- {pinnedPost.node.body &&
- (pinnedPost.node.body.length > 100
- ? pinnedPost.node.body?.substring(0, 100) + '...'
- : pinnedPost.node.body)}
+ {pinnedPost.node.body}
</Typography>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <Typography | |
| color="text.secondary" | |
| sx={{ | |
| fontSize: '14px', | |
| fontWeight: '400', | |
| }} | |
| > | |
| {pinnedPost.node.body && | |
| (pinnedPost.node.body.length > 100 | |
| ? pinnedPost.node.body?.substring(0, 100) + '...' | |
| : pinnedPost.node.body)} | |
| </Typography> | |
| <Typography | |
| color="text.secondary" | |
| sx={{ | |
| fontSize: '14px', | |
| fontWeight: '400', | |
| display: '-webkit-box', | |
| WebkitLineClamp: 3, | |
| WebkitBoxOrient: 'vertical', | |
| overflow: 'hidden', | |
| textOverflow: 'ellipsis', | |
| }} | |
| > | |
| {pinnedPost.node.caption} | |
| </Typography> |
🤖 Prompt for AI Agents
In `@src/shared-components/pinnedPosts/pinnedPostCard.tsx` around lines 291 - 302,
The body preview currently truncates with substring (pinnedPost.node.body) which
can cut words mid-word; remove the JS-based ternary/substring logic and render
pinnedPost.node.body directly inside the Typography, and apply the same
CSS-based line-clamp used for the caption (the Typography sx at line ~272) —
e.g., add the -webkit-box display, WebkitLineClamp, WebkitBoxOrient, overflow:
hidden and textOverflow rules in the same sx prop for this body Typography so
the text is cleanly clamped instead of being sliced by character count.
| .buttonn { | ||
| background-color: #e9f1ff; | ||
| } |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Search for any use of buttonn in the codebase
rg -n 'buttonn' --type-list | head -20
rg -n 'buttonn' -g '!node_modules' -iRepository: PalisadoesFoundation/talawa-admin
Length of output: 1133
🏁 Script executed:
#!/bin/bash
# Check the CSS file for all button-related classes
rg -n 'button' src/shared-components/pinnedPosts/pinnedPostsLayout.module.css
# Show the context around lines 109-111
sed -n '100,120p' src/shared-components/pinnedPosts/pinnedPostsLayout.module.cssRepository: PalisadoesFoundation/talawa-admin
Length of output: 233
🏁 Script executed:
#!/bin/bash
# Check pinnedPostsLayout.tsx for any button-related imports or references
rg -n 'button|styles' src/shared-components/pinnedPosts/pinnedPostsLayout.tsx | head -30Repository: PalisadoesFoundation/talawa-admin
Length of output: 757
Remove the unused .buttonn class.
The class is defined in the CSS file but is never referenced anywhere in pinnedPostsLayout.tsx or the rest of the codebase. The double-n appears to be a typo, and since there's no .button class to rename it to, the class should simply be removed.
🤖 Prompt for AI Agents
In `@src/shared-components/pinnedPosts/pinnedPostsLayout.module.css` around lines
109 - 111, Remove the unused and misspelled CSS rule `.buttonn` from
pinnedPostsLayout.module.css: delete the `.buttonn { background-color: `#e9f1ff`;
}` block, run a quick project-wide search for `.buttonn` to confirm there are no
references, and if the intent was to style a button instead, create or use a
properly named `.button` class in pinnedPostsLayout.tsx (or update the JSX to
match the new class); otherwise simply remove the rule to clean up dead CSS.
| <Button | ||
| className={styles.browseFilesButton} | ||
| data-testid="browseFilesButton" | ||
| > | ||
| {t('browseFiles')} | ||
| </Button> | ||
|
|
||
| <Input | ||
| className={styles.postInput} | ||
| placeholder={t('startYourPost')} | ||
| onClick={onClick} | ||
| disableUnderline | ||
| readOnly | ||
| data-testid="postInput" | ||
| data-cy="createPostInput" | ||
| /> | ||
| </Box> | ||
|
|
||
| {/* Send Button */} | ||
| <Box className={styles.sendButtonContainer}> | ||
| <Button className={styles.sendButton} data-testid="sendPostButton"> | ||
| <Send /> | ||
| </Button> |
There was a problem hiding this comment.
Non-functional buttons mislead users.
The "Browse Files" button (Line 33) and "Send" button (Line 53) render as interactive elements but have no onClick handlers. Users who click these buttons will experience nothing, which is confusing. Since this component is a trigger for the CreatePostModal, consider wiring both buttons to the same onClick prop, or making the entire container a single click target.
🐛 Proposed fix — wire all interactive elements to onClick
<Button
className={styles.browseFilesButton}
data-testid="browseFilesButton"
+ onClick={onClick}
>
{t('browseFiles')}
</Button>- <Box className={styles.sendButtonContainer}>
- <Button className={styles.sendButton} data-testid="sendPostButton">
+ <Box className={styles.sendButtonContainer} onClick={onClick}>
+ <Button className={styles.sendButton} data-testid="sendPostButton" onClick={onClick}>
<Send />
</Button>
</Box>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <Button | |
| className={styles.browseFilesButton} | |
| data-testid="browseFilesButton" | |
| > | |
| {t('browseFiles')} | |
| </Button> | |
| <Input | |
| className={styles.postInput} | |
| placeholder={t('startYourPost')} | |
| onClick={onClick} | |
| disableUnderline | |
| readOnly | |
| data-testid="postInput" | |
| data-cy="createPostInput" | |
| /> | |
| </Box> | |
| {/* Send Button */} | |
| <Box className={styles.sendButtonContainer}> | |
| <Button className={styles.sendButton} data-testid="sendPostButton"> | |
| <Send /> | |
| </Button> | |
| <Button | |
| className={styles.browseFilesButton} | |
| data-testid="browseFilesButton" | |
| onClick={onClick} | |
| > | |
| {t('browseFiles')} | |
| </Button> | |
| <Input | |
| className={styles.postInput} | |
| placeholder={t('startYourPost')} | |
| onClick={onClick} | |
| disableUnderline | |
| readOnly | |
| data-testid="postInput" | |
| data-cy="createPostInput" | |
| /> | |
| </Box> | |
| {/* Send Button */} | |
| <Box className={styles.sendButtonContainer} onClick={onClick}> | |
| <Button className={styles.sendButton} data-testid="sendPostButton" onClick={onClick}> | |
| <Send /> | |
| </Button> | |
| </Box> |
🤖 Prompt for AI Agents
In `@src/shared-components/posts/createPostContainer/createPostContainer.tsx`
around lines 33 - 55, The Browse Files and Send Button render as interactive
elements but lack click handlers; wire both Button components (the one with
className styles.browseFilesButton and the send Button with className
styles.sendButton / data-testid "sendPostButton") to the same onClick prop
already used by the Input (onClick), so they trigger the CreatePostModal or the
same handler; update the Button elements to call the onClick prop (or
alternatively make the parent container clickable and delegate to onClick) so
all interactive controls consistently invoke the CreatePostContainer's onClick
handler.
There was a problem hiding this comment.
Hi @palisadoes,
Could you please guide me about how the createPostContainer.tsx should behave to address this particular issue?
Current behavior of createPostContainer.tsx component :
- Only clicking inside the input area in the
createPostContainer.tsxopen thecreatePostModal.tsx. - Nothing happens if the user clicks on the "Send" button or the "Browse Files" button.
Here's a demo video --
Demo.mp4
Kindly review it & suggest the required changes to it.
There was a problem hiding this comment.
Seems like the humans are having a chat. I'll hop back into my burrow for now. If you need me again, just tag @coderabbitai in a new comment, and I'll come hopping out!
| <Input | ||
| className={styles.postInput} | ||
| placeholder={t('startYourPost')} | ||
| onClick={onClick} | ||
| disableUnderline | ||
| readOnly | ||
| data-testid="postInput" | ||
| data-cy="createPostInput" | ||
| /> |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Add aria-label to the read-only input for better accessibility.
The Input uses readOnly and placeholder as its only text, but placeholder is not reliably announced by all screen readers as the accessible name. Adding an explicit aria-label will ensure the element's purpose is clear to assistive technology users.
♿ Suggested fix
<Input
className={styles.postInput}
placeholder={t('startYourPost')}
onClick={onClick}
disableUnderline
readOnly
+ aria-label={t('startYourPost')}
data-testid="postInput"
data-cy="createPostInput"
/>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <Input | |
| className={styles.postInput} | |
| placeholder={t('startYourPost')} | |
| onClick={onClick} | |
| disableUnderline | |
| readOnly | |
| data-testid="postInput" | |
| data-cy="createPostInput" | |
| /> | |
| <Input | |
| className={styles.postInput} | |
| placeholder={t('startYourPost')} | |
| onClick={onClick} | |
| disableUnderline | |
| readOnly | |
| aria-label={t('startYourPost')} | |
| data-testid="postInput" | |
| data-cy="createPostInput" | |
| /> |
🤖 Prompt for AI Agents
In `@src/shared-components/posts/createPostContainer/createPostContainer.tsx`
around lines 40 - 48, The read-only Input in createPostContainer (the Input JSX
with props className={styles.postInput}, placeholder={t('startYourPost')},
onClick={onClick}, readOnly, data-testid="postInput") lacks an explicit
accessible name; add an aria-label prop (e.g. aria-label={t('startYourPost')} or
a localized equivalent) to that Input so screen readers get a clear label while
keeping the placeholder and existing props unchanged.
| // Close modal | ||
| const closeButton = screen.getByTestId('close-create-modal'); | ||
| await user.click(closeButton); | ||
|
|
||
| expect(screen.queryByTestId('create-post-modal')).not.toBeInTheDocument(); | ||
| }); |
There was a problem hiding this comment.
waitFor after closing modal.
After clicking the close button, the assertion expect(screen.queryByTestId('create-post-modal')).not.toBeInTheDocument() runs synchronously. The modal removal may not have completed yet.
Proposed fix
// Close modal
const closeButton = screen.getByTestId('close-create-modal');
await user.click(closeButton);
- expect(screen.queryByTestId('create-post-modal')).not.toBeInTheDocument();
+ await waitFor(() => {
+ expect(screen.queryByTestId('create-post-modal')).not.toBeInTheDocument();
+ });🤖 Prompt for AI Agents
In `@src/shared-components/posts/posts.spec.tsx` around lines 1008 - 1013, After
clicking the close button (closeButton / user.click), the test asserts
synchronously that screen.queryByTestId('create-post-modal') is gone which can
race with async DOM updates; update the test to wait for the modal to be removed
(e.g., wrap the assertion in a waitFor or use
waitForElementToBeRemoved/findByTestId) so the expectation that
'create-post-modal' is not in the document runs after the modal has actually
been removed.
| {/* Create Post Container */} | ||
| {userId && ( | ||
| <div> | ||
| {' '} | ||
| <CreatePostContainer onClick={showCreatePostModal} />{' '} | ||
| </div> | ||
| )} |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Remove extraneous whitespace text nodes.
Lines 384 and 385 contain {' '} expressions that produce unnecessary DOM text nodes around <CreatePostContainer />. These add unintended whitespace to the layout.
♻️ Suggested cleanup
{userId && (
<div>
- {' '}
- <CreatePostContainer onClick={showCreatePostModal} />{' '}
+ <CreatePostContainer onClick={showCreatePostModal} />
</div>
)}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| {/* Create Post Container */} | |
| {userId && ( | |
| <div> | |
| {' '} | |
| <CreatePostContainer onClick={showCreatePostModal} />{' '} | |
| </div> | |
| )} | |
| {/* Create Post Container */} | |
| {userId && ( | |
| <div> | |
| <CreatePostContainer onClick={showCreatePostModal} /> | |
| </div> | |
| )} |
🤖 Prompt for AI Agents
In `@src/shared-components/posts/posts.tsx` around lines 381 - 387, Remove the
extraneous JSX text nodes around the CreatePostContainer by deleting the {' '}
tokens present before and after <CreatePostContainer
onClick={showCreatePostModal} />; you can also simplify the wrapper (the
conditional block that checks userId) by returning the CreatePostContainer
directly instead of rendering an extra div if no additional layout is required,
keeping the onClick prop (showCreatePostModal) intact.
| <Typography | ||
| variant="h5" | ||
| sx={{ fontSize: 40, fontWeight: 500, mb: 2 }} | ||
| > | ||
| {t('pinnedPosts')} | ||
| </Typography> |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Use design tokens instead of hardcoded fontSize and fontWeight.
fontSize: 40 and fontWeight: 500 are hardcoded values. The same pattern is repeated at Line 432. Per project conventions, styling in MUI sx props should use CSS custom properties (design tokens) to ensure theme consistency and maintainability.
Based on learnings: "In talawa-admin, design tokens via CSS custom properties (e.g., var(--radius-2xl), var(--radius-lg), var(--radius-xl)) should be used for borderRadius and other styling in React components (including MUI sx props)."
🤖 Prompt for AI Agents
In `@src/shared-components/posts/posts.tsx` around lines 392 - 397, Replace the
hardcoded styling in the Typography instances (the <Typography> that renders
{t('pinnedPosts')} and the similar one around line 432) to use design token CSS
custom properties instead of numeric literals: remove fontSize: 40 and
fontWeight: 500 from the sx prop and reference the project's tokens (e.g.,
var(--font-size-xxl) and var(--font-weight-medium) or the equivalent token names
used in the codebase) so the sx uses fontSize: 'var(--... )' and fontWeight:
'var(--... )' for both Typography declarations.
|
Got it! Thanks! |
|
I am working on fixing the failing tests & issues, will commit the fixes shortly! |
|
Hi @palisadoes, I’ve responded to the CodeRabbitAI suggestions above and have a few questions. Could you please review them when you get time? Thanks! |
|
Please fix the many failing checks |
…9601/talawa-admin into fix/posts-page-styling-6652
|
I am resolving the conflicts. |
All conflicts are resolved. |
|
Please fix the failing CI/CD checks |
Hi @palisadoes, The translation tag check is failing because new texts "Like", "Comment", "Share" are being introduced in the changes, so translations needed to be added for those. For these hardcoded English strings, "Like", "Comment" & "Share", I am trying to add translations using these key-value pairs.
But the issue is that translation.json files already have these keys but with different values. See here --
I am thinking of editing the already existing translations keys & make them
After doing this we can safely add the new translation keys for "Like", "Comment" & "Share". So finally, our translations key-value pairs would look like this --
Is this approach fine or we should do something else? How should I proceed from here? |
The "Check if sensitive files have been changed without authorization" is failing because -- In order to implement the required changes for this PR, new design tokens needed to be added in these files.
|
The linting check if failing because of this error in file "error 'fireEvent' import from '@testing-library/react' is restricted. Tests in this file use fireEvent for user interactions; use userEvent from @testing-library/user-event instead no-restricted-imports" I have tried replacing
Because, userEvent doesn't have the methods So, I am unable to replace fireEvent with userEvent. So, how should we proceed from here? |
Refer to the docs, this might help you |
|
Are you still working on this? |
Yes, I am working on the issue, but in order to proceed & fix the failing checks, I need your guidance, could you please take a look at the comments left by me above & suggest me how to proceed from there? @palisadoes |
Thanks @adityai0, I will take a look at the docs & try to fix it. |
|
any update on this? |
Yes, I fixed the issues that I could by myself, but in order to proceed ahead with this PR, I need guidance on what steps should I take, could you please take a look at the questions I left above? @adityai0 |
Take a look at this @adityai0 |
Take a look at this, what should I do in this case? @adityai0 |
Yes you can add those values but try to use existing tokens if available else add it and make sure it doesn't cause any issues. also coderabbit approves it. after that ignore-sensitive-file label will be added to this PR which will make the check pass. |
Missing translations need to be added and you should ensure that there are no hardcoded text in the ui. |
Great, Once you make some progress further the let us know. |
Ok, thanks! |
Ok, will do this! |
Sure! I will make the changes! |
Hi, @adityai0, I have tried reading the docs but couldn't find a proper solution for the issue, because of the fact that |
4 participants
What kind of change does this PR introduce?
Fix post page styling to match Figma design.
Issue Number:
Fixes #6652
Snapshots/Videos:
Before:
https://drive.google.com/file/d/1oODJ3DyV03eoTz24_NDgsnnmp_59jT0y/view?usp=sharing
After:
https://drive.google.com/file/d/1pfgs4YKDhRqCp0rHj7Gf51zsaALBxXRc/view?usp=sharing
If relevant, did you update the documentation?
No, only auto-docs got updated themselves.
Summary
This PR fixes the styling of the Posts page to match the Figma design.
createPostContainer.tsxis introduced along withcreatePostContainer.module.cssfor styling &createPostContainer.spec.tsxfor testingcreatePostContainer.tsxcomponentbodyfield is added in thepinnedPostCard.tsxpinnedPostsLayout.tsx&startAutoScroll,stopAutoScroll&resumeAutoScrollfunctions are added to provide autoscroll feature.pinnedPostsLayout.spec.tsxDoes this PR introduce a breaking change?
No
Checklist
CodeRabbit AI Review
Test Coverage
Have you read the contributing guide?
Yes
Summary by CodeRabbit
New Features
Style
Localization