feat: updated mobile header #1004

adithyaakrishna · 2024-03-08T07:55:46Z

Description:

Updated mobile header with respect to latest designs

Summary by CodeRabbit

New Features
- Added a new showText property to the MenuSwitcher component to control text visibility.
- Added a textSectionClassName property to the AvatarWithText component for conditional text section styling.
- Updated the CommandDialog and DialogContent components with new positioning and styling properties.
Style Updates
- Adjusted text size responsiveness in the Hero component for various screen sizes.
- Modified text truncation and input styling in the Widget component.
- Changed the width of the SheetContent element in MobileNavigation and adjusted footer layout.
Documentation
- Added instructions for certificate placement in SIGNING.md.
Refactor
- Standardized type imports across various components and utilities for improved type checking.

Signed-off-by: Adithya Krishna <adithya@documenso.com>

coderabbitai · 2024-03-08T07:55:53Z

Walkthrough

The recent updates focus on refining type imports and enhancing UI components across marketing and dashboard applications. Changes include using type for type-only imports, adjusting UI component styling for consistency, adding new properties for UI flexibility, and clarifying steps for handling certificates in the signing process.

Changes

File Path	Change Summary
`.../fetcher.ts`, `.../metric-card.tsx`, `.../salary-bands.tsx`, `.../container.tsx`, `.../robots.ts`, `.../sitemap.ts`, `.../open-build-template-bento.tsx`, `.../form-error-message.tsx`, `.../background.tsx`, `.../next-theme.tsx`	Modified import statements to use `type` for type-only imports.
`.../bar-metrics.tsx`, `.../funding-raised.tsx`	Added inline comments to disable specific ESLint rules.
`.../hero.tsx`, `.../widget.tsx`	Adjusted `className` attributes for better responsiveness and text rendering.
`.../menu-switcher.tsx`, `.../mobile-navigation.tsx`	Updated component properties and styles for improved layout and visibility.
`.../avatar.tsx`, `.../command.tsx`, `.../dialog.tsx`	Introduced new props and updated class names for enhanced customization and positioning.
`SIGNING.md`	Added clarification on creating paths for certificates.

Recent Review Details

Configuration used: CodeRabbit UI

Commits

Files that changed from the base of the PR and between f498ee8 and 9ecd438.

Files selected for processing (2)

apps/web/src/components/(dashboard)/layout/menu-switcher.tsx (2 hunks)
packages/ui/primitives/avatar.tsx (3 hunks)

Files skipped from review as they are similar to previous changes (2)

apps/web/src/components/(dashboard)/layout/menu-switcher.tsx
packages/ui/primitives/avatar.tsx

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share

Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>.
- Generate unit testing code for this file.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai generate unit testing code for this file.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai generate interesting stats about this repository and render them as a table.
- @coderabbitai show all the console.log statements in this repository.
- @coderabbitai read src/utils.ts and generate unit testing code.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (invoked as PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger a review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

vercel · 2024-03-08T07:55:58Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
prd-app	🔄 Building (Inspect)	Visit Preview		Apr 15, 2024 8:50am
stg-app	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 15, 2024 8:50am
stg-marketing	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 15, 2024 8:50am

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
prd-marketing	⬜️ Ignored (Inspect)			Apr 15, 2024 8:50am

github-actions · 2024-03-08T07:56:01Z

Thank you for following the naming conventions for pull request titles! 💚🚀

Signed-off-by: Adithya Krishna <aadithya794@gmail.com>

…at/mobile-header

apps/marketing/src/components/(marketing)/widget.tsx

dguyen · 2024-03-19T04:52:38Z

Please make sure build and CI passes before requesting reviews.

…at/mobile-header

…umenso into feat/mobile-header

Signed-off-by: Adithya Krishna <aadithya794@gmail.com>

dguyen · 2024-04-08T12:50:45Z

packages/ui/primitives/avatar.tsx

@@ -65,7 +65,8 @@ const AvatarWithText = ({
  primaryText,
  secondaryText,
  rightSideComponent,
-  showText = true,
+  // Optional class to hide/show the text beside avatar


Put this in the type, not here

dguyen · 2024-04-08T12:53:30Z

packages/ui/primitives/avatar.tsx

@@ -75,7 +76,7 @@ const AvatarWithText = ({
    </Avatar>

    <div
-      className={cn('hidden flex-col text-left text-sm font-normal lg:flex', showText && 'flex')}
+      className={cn('hidden flex-col text-left text-sm font-normal lg:flex', textSectionClassName)}


Why is hidden still here? Revert the lg:flex and hidden changes

It's causing text to not be visible in the actual switcher

Also if the design wants the avatars to be aligned try ml-3

@dguyen Actually for mobile, the text is hidden and for desktop screens it is shown according to the designs

@adithyaakrishna can you please link me the designs

@dguyen Here's the link, https://www.figma.com/file/k44S7KkjaT16S88n6BVjx7/Single-Player-Mobile?type=design&node-id=2614%3A1805&mode=design&t=tdgZ7CnLCj2um4uX-1

@adithyaakrishna could you please compare the image I posted and the design you linked?

The text next to the avatars within the dialog is not visible. You have inadvertently broken all usage of this component on mobile due to hardcoding this hidden class onto the avatar.

I asked you to add a class prop for the avatar text section so you can hide it only for the header.

@dguyen My bad, I missed the text next to the Avatars on the dropdown. I've added the classProp and also removed the hardcoded className

Signed-off-by: Adithya Krishna <aadithya794@gmail.com>

…umenso into feat/mobile-header

Signed-off-by: Adithya Krishna <aadithya794@gmail.com>

coderabbitai

Actionable comments posted: 0

Review Status

Configuration used: CodeRabbit UI

Commits

Files that changed from the base of the PR and between f551174 and a467a4a.

Files selected for processing (2)

apps/web/src/components/(dashboard)/layout/menu-switcher.tsx (1 hunks)
packages/ui/primitives/avatar.tsx (3 hunks)

Files skipped from review as they are similar to previous changes (2)

apps/web/src/components/(dashboard)/layout/menu-switcher.tsx
packages/ui/primitives/avatar.tsx

coderabbitai

Actionable comments posted: 0

Review Status

Configuration used: CodeRabbit UI

Commits

Files that changed from the base of the PR and between a467a4a and 3b7e73e.

Files selected for processing (1)

apps/web/src/components/(dashboard)/layout/menu-switcher.tsx (1 hunks)

Files skipped from review as they are similar to previous changes (1)

apps/web/src/components/(dashboard)/layout/menu-switcher.tsx

…at/mobile-header

…umenso into feat/mobile-header

Signed-off-by: Adithya Krishna <aadithya794@gmail.com>

coderabbitai

Actionable comments posted: 0

Actionable comments outside the diff hunks (7)

SIGNING.md (7)
Line range hint 34-34: Specify the language for fenced code blocks.
- ```
+ ```bash
Adding a language specification to the fenced code blocks improves readability and syntax highlighting in markdown renderers.

Line range hint 25-27: Use hyphens in compound adjectives.
- production ready docker image
+ production-ready docker image
When compound adjectives precede a noun, they should be hyphenated to improve readability and prevent misinterpretation.

Line range hint 29-29: Start sentences with an uppercase letter.
- cd into `docker` directory
+ Cd into the `docker` directory
Ensuring that sentences start with an uppercase letter follows standard writing conventions and improves the professionalism of the documentation.

Line range hint 40-40: Correct the contraction to enhance clarity.
- Let's you run the container in background
+ Lets you run the container in the background
"Let's" is a contraction for "let us," which is inappropriate in this context. "Lets" is the correct form for allowing or permitting something.

Line range hint 41-41: Capitalize only proper nouns.
- Second half is the app port
+ second half is the app port
In lists or mid-sentence, avoid capitalizing words unless they are proper nouns to maintain consistency and readability.

Line range hint 41-41: Add a missing preposition for clarity.
- you can change the first half anything you want
+ you can change the first half to anything you want
Adding the preposition "to" clarifies the intended meaning and ensures grammatical correctness.

Line range hint 42-42: Correct the contraction to enhance clarity.
- Volume let's you persist the data
+ Volume lets you persist the data
Similar to a previous correction, "let's" should be replaced with "lets" for grammatical accuracy.

feat: updated mobile header

73944fe

Signed-off-by: Adithya Krishna <adithya@documenso.com>

adithyaakrishna self-assigned this Mar 8, 2024

github-actions bot added the apps: web Issues related to the webapp label Mar 8, 2024

vercel bot deployed to Preview – stg-marketing March 8, 2024 07:57 View deployment

adithyaakrishna added 2 commits March 12, 2024 12:29

chore: updated avatar component and switcher

f545d37

Signed-off-by: Adithya Krishna <aadithya794@gmail.com>

chore: truncated long signatures in marketing app

1792e01

Signed-off-by: Adithya Krishna <aadithya794@gmail.com>

vercel bot deployed to Preview – stg-app March 12, 2024 07:00 View deployment

github-actions bot added the apps: marketing Issues related to website or marketing app label Mar 12, 2024

chore: reverted changes to cmd menu

61b43bf

Signed-off-by: Adithya Krishna <aadithya794@gmail.com>

vercel bot deployed to Preview – stg-app March 12, 2024 07:01 View deployment

adithyaakrishna requested review from dguyen and Mythie March 12, 2024 07:01

adithyaakrishna marked this pull request as ready for review March 12, 2024 07:02

Merge branch 'main' of https://github.com/documenso/documenso into fe…

19c0b7c

…at/mobile-header

vercel bot deployed to Preview – stg-app March 12, 2024 07:02 View deployment

vercel bot had a problem deploying to Preview – stg-marketing March 12, 2024 07:05 Failure

adithyaakrishna commented Mar 12, 2024

View reviewed changes

apps/marketing/src/components/(marketing)/widget.tsx Show resolved Hide resolved

adithyaakrishna added 3 commits March 26, 2024 22:32

Merge branch 'main' into feat/mobile-header

5649e45

Merge branch 'main' of https://github.com/documenso/documenso into fe…

b6b61f1

…at/mobile-header

Merge branch 'feat/mobile-header' of https://github.com/documenso/doc…

c4f59b7

…umenso into feat/mobile-header

vercel bot had a problem deploying to Preview – stg-app March 26, 2024 14:37 Failure

vercel bot had a problem deploying to Preview – stg-marketing March 26, 2024 14:39 Failure

chore: fix all import issues

dda67f2

Signed-off-by: Adithya Krishna <aadithya794@gmail.com>

vercel bot deployed to Preview – stg-marketing March 26, 2024 14:53 View deployment

adithyaakrishna requested review from catalinpit and ephraimduncan March 26, 2024 14:55

Merge branch 'main' into feat/mobile-header

47aa623

vercel bot deployed to Preview – stg-app April 8, 2024 12:43 View deployment

adithyaakrishna requested a review from dguyen April 8, 2024 12:43

vercel bot deployed to Preview – stg-marketing April 8, 2024 12:45 View deployment

dguyen requested changes Apr 8, 2024

View reviewed changes

adithyaakrishna added 3 commits April 8, 2024 19:44

chore: make requested changes - v2

908abd6

Signed-off-by: Adithya Krishna <aadithya794@gmail.com>

Merge branch 'feat/mobile-header' of https://github.com/documenso/doc…

a467a4a

…umenso into feat/mobile-header

chore: align dropdown with avatar

3b7e73e

Signed-off-by: Adithya Krishna <aadithya794@gmail.com>

coderabbitai bot reviewed Apr 8, 2024

View reviewed changes

vercel bot deployed to Preview – stg-app April 8, 2024 14:21 View deployment

coderabbitai bot reviewed Apr 8, 2024

View reviewed changes

vercel bot deployed to Preview – stg-marketing April 8, 2024 14:23 View deployment

Merge branch 'main' into feat/mobile-header

c2ceae5

vercel bot deployed to Preview – stg-app April 10, 2024 08:36 View deployment

vercel bot deployed to Preview – stg-marketing April 10, 2024 08:39 View deployment

adithyaakrishna added 3 commits April 15, 2024 12:59

Merge branch 'main' of https://github.com/documenso/documenso into fe…

25b6b37

…at/mobile-header

Merge branch 'feat/mobile-header' of https://github.com/documenso/doc…

7234dc3

…umenso into feat/mobile-header

chore: remove hardcoding of hidden class

fa1fe2a

Signed-off-by: Adithya Krishna <aadithya794@gmail.com>

vercel bot deployed to Preview – stg-app April 15, 2024 07:46 View deployment

vercel bot deployed to Preview – stg-marketing April 15, 2024 07:49 View deployment

chore: update signing.md file

f498ee8

Signed-off-by: Adithya Krishna <aadithya794@gmail.com>

vercel bot deployed to Preview – stg-marketing April 15, 2024 07:55 View deployment

vercel bot deployed to Preview – stg-app April 15, 2024 07:59 View deployment

coderabbitai bot reviewed Apr 15, 2024

View reviewed changes

fix: refactor

9ecd438

vercel bot deployed to Preview – stg-marketing April 15, 2024 08:46 View deployment

vercel bot deployed to Preview – stg-app April 15, 2024 08:50 View deployment

dguyen approved these changes Apr 15, 2024

View reviewed changes

dguyen merged commit aa4b6f1 into main Apr 15, 2024
13 checks passed

dguyen deleted the feat/mobile-header branch April 15, 2024 08:52

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: updated mobile header #1004

feat: updated mobile header #1004

adithyaakrishna commented Mar 8, 2024 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Mar 8, 2024 •

edited

Loading

Chat

CodeRabbit Commands (invoked as PR comments)

CodeRabbit Configration File (`.coderabbit.yaml`)

Documentation and Community

vercel bot commented Mar 8, 2024 •

edited

Loading

github-actions bot commented Mar 8, 2024 •

edited

Loading

dguyen commented Mar 19, 2024

dguyen Apr 8, 2024

dguyen Apr 8, 2024 •

edited

Loading

adithyaakrishna Apr 8, 2024

dguyen Apr 9, 2024

adithyaakrishna Apr 10, 2024

dguyen Apr 10, 2024

adithyaakrishna Apr 15, 2024

coderabbitai bot left a comment

coderabbitai bot left a comment

coderabbitai bot left a comment

feat: updated mobile header #1004

feat: updated mobile header #1004

Conversation

adithyaakrishna commented Mar 8, 2024 • edited by coderabbitai bot Loading

Summary by CodeRabbit

coderabbitai bot commented Mar 8, 2024 • edited Loading

Walkthrough

Changes

Chat

CodeRabbit Commands (invoked as PR comments)

CodeRabbit Configration File (.coderabbit.yaml)

Documentation and Community

vercel bot commented Mar 8, 2024 • edited Loading

github-actions bot commented Mar 8, 2024 • edited Loading

dguyen commented Mar 19, 2024

dguyen Apr 8, 2024

Choose a reason for hiding this comment

dguyen Apr 8, 2024 • edited Loading

Choose a reason for hiding this comment

adithyaakrishna Apr 8, 2024

Choose a reason for hiding this comment

dguyen Apr 9, 2024

Choose a reason for hiding this comment

adithyaakrishna Apr 10, 2024

Choose a reason for hiding this comment

dguyen Apr 10, 2024

Choose a reason for hiding this comment

adithyaakrishna Apr 15, 2024

Choose a reason for hiding this comment

coderabbitai bot left a comment

Choose a reason for hiding this comment

coderabbitai bot left a comment

Choose a reason for hiding this comment

coderabbitai bot left a comment

Choose a reason for hiding this comment

adithyaakrishna commented Mar 8, 2024 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Mar 8, 2024 •

edited

Loading

CodeRabbit Configration File (`.coderabbit.yaml`)

vercel bot commented Mar 8, 2024 •

edited

Loading

github-actions bot commented Mar 8, 2024 •

edited

Loading

dguyen Apr 8, 2024 •

edited

Loading