feat: run-a-node page content alignItems #12467

iusx · 2024-03-15T16:47:09Z

Description

Let them be horizontally centered!

ethereum-org-website/src/pages/run-a-node.tsx

Lines 865 to 881 in 90e4310

    
           <H3 id="plan-on-staking"> 
        
             <Emoji text=":cut_of_meat:" fontSize="2em" me="4" /> 
        
             {t("page-run-a-node-staking-plans-title")} 
        
           </H3> 
        
           <Text> 
        
             <Translation id="page-run-a-node:page-run-a-node-staking-plans-description" /> 
        
           </Text> 
        
           <Text> 
        
             {t("page-run-a-node-staking-plans-ethstaker-link-description")} -{" "} 
        
             <InlineLink href="https://youtu.be/C2wwu1IlhDc"> 
        
               {t("page-run-a-node-staking-plans-ethstaker-link-label")} 
        
             </InlineLink> 
        
           </Text> 
        
           <H3 id="rasp-pi"> 
        
             <Emoji text=":pie:" fontSize="2em" me="4" /> 
        
             {t("page-run-a-node-rasp-pi-title")} 
        
           </H3>

-         <H3 id="plan-on-staking">
+         <H3 id="plan-on-staking" sx={{ display: 'flex', alignItems: 'center' }}>

-         <H3 id="rasp-pi">
+         <H3 id="plan-on-staking" sx={{ display: 'flex', alignItems: 'center' }}

You can preview it here: https://deploy-preview-12467--ethereumorg.netlify.app/en/run-a-node/

And also refer to the current page for comparison: https://ethereum.org/en/run-a-node/

Summary by CodeRabbit

Style
- Improved alignment and display of headings in the "Run a Node" section for better readability.

coderabbitai · 2024-03-15T16:47:16Z

Walkthrough

The update involves enhancing the styling of specific H3 elements on a webpage. By applying a flex display and aligning items to the center, the visual arrangement of these elements is improved, ensuring a more organized and aesthetically pleasing layout. This change affects elements with the ids "plan-on-staking" and "rasp-pi", enhancing their appearance on the page.

Changes

File	Change Summary
`src/pages/.../run-a-node.tsx`	Added `sx={{ display: 'flex', alignItems: 'center' }}` to `H3` elements with ids "plan-on-staking" and "rasp-pi".

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-tests 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 tests 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 tests.
- @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.
The JSON schema for the configuration file is available here.
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/coderabbit-overrides.v2.json

CodeRabbit Discord Community

Join our Discord Community to get help, request features, and share feedback.

netlify · 2024-03-15T16:47:26Z

✅ Deploy Preview for ethereumorg ready!

Name	Link
🔨 Latest commit	`82fd257`
🔍 Latest deploy log	https://app.netlify.com/sites/ethereumorg/deploys/65fb0377208034000894cef9
😎 Deploy Preview	https://deploy-preview-12467--ethereumorg.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

coderabbitai

Review Status

Actionable comments generated: 0

Configuration used: CodeRabbit UI

Commits

Files that changed from the base of the PR and between 90e4310 and 116086b.

Files selected for processing (1)

src/pages/run-a-node.tsx (2 hunks)

Additional comments: 2

src/pages/run-a-node.tsx (2)

865-865: The addition of sx={{ display: 'flex', alignItems: 'center' }} to the <H3> element with the ID "plan-on-staking" correctly applies CSS Flexbox properties to achieve horizontal centering. This change aligns with the PR's objective to enhance visual alignment.

878-878: The addition of sx={{ display: 'flex', alignItems: 'center' }} to the <H3> element with the ID "rasp-pi" also correctly applies CSS Flexbox properties for horizontal centering. This change addresses the initial concern regarding the ID duplication and correctly targets the intended element.

wackerow

Looks good! Just updated these to use style props since they're Chakra components under-the-hood. Thanks @iepn!

src/pages/run-a-node.tsx

coderabbitai

Review Status

Actionable comments generated: 0

Configuration used: CodeRabbit UI

Commits

Files that changed from the base of the PR and between 116086b and 220efcf.

Files selected for processing (1)

src/pages/run-a-node.tsx (2 hunks)

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

src/pages/run-a-node.tsx

iusx · 2024-03-20T05:42:13Z

Looks good! Just updated these to use style props since they're Chakra components under-the-hood. Thanks @iepn!

This approach is very concise, thank you. Using sx for <h3> does seem a bit too verbose.

So I also adopted your approach in #12485, it's very concise and comfortable.

wackerow · 2024-03-20T16:51:52Z

@all-contributors please add @iepn for code

allcontributors · 2024-03-20T16:52:02Z

@wackerow

I've put up a pull request to add @iepn! 🎉

iusx requested review from wackerow, corwintines, pettinarip, minimalsm and nhsz as code owners March 15, 2024 16:47

github-actions bot added content 🖋️ This involves copy additions or edits review needed 👀 labels Mar 15, 2024

coderabbitai bot reviewed Mar 15, 2024

View reviewed changes

nloureiro approved these changes Mar 18, 2024

View reviewed changes

iusx mentioned this pull request Mar 19, 2024

fix: upgrate new twitter logo #12379 #12382

Closed

wackerow approved these changes Mar 20, 2024

View reviewed changes

src/pages/run-a-node.tsx Outdated Show resolved Hide resolved

src/pages/run-a-node.tsx Outdated Show resolved Hide resolved

style: use style props

220efcf

coderabbitai bot reviewed Mar 20, 2024

View reviewed changes

Merge branch 'dev' into pr/12467

82fd257

wackerow merged commit 7f46b31 into ethereum:dev Mar 20, 2024
10 checks passed

allcontributors bot mentioned this pull request Mar 20, 2024

docs: add iepn as a contributor for code #12519

Merged

This was referenced Mar 26, 2024

Release candidate v8.4.0 #12583

Merged

Deploy v8.4.0 #12586

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: run-a-node page content alignItems #12467

feat: run-a-node page content alignItems #12467

iusx commented Mar 15, 2024 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Mar 15, 2024 •

edited

Loading

Chat

CodeRabbit Commands (invoked as PR comments)

CodeRabbit Configration File (`.coderabbit.yaml`)

CodeRabbit Discord Community

netlify bot commented Mar 15, 2024 •

edited

Loading

coderabbitai bot left a comment

wackerow left a comment

coderabbitai bot left a comment

iusx commented Mar 20, 2024 •

edited

Loading

wackerow commented Mar 20, 2024

allcontributors bot commented Mar 20, 2024

	<H3 id="plan-on-staking">
	<Emoji text=":cut_of_meat:" fontSize="2em" me="4" />
	{t("page-run-a-node-staking-plans-title")}
	</H3>
	<Text>
	<Translation id="page-run-a-node:page-run-a-node-staking-plans-description" />
	</Text>
	<Text>
	{t("page-run-a-node-staking-plans-ethstaker-link-description")} -{" "}
	<InlineLink href="https://youtu.be/C2wwu1IlhDc">
	{t("page-run-a-node-staking-plans-ethstaker-link-label")}
	</InlineLink>
	</Text>
	<H3 id="rasp-pi">
	<Emoji text=":pie:" fontSize="2em" me="4" />
	{t("page-run-a-node-rasp-pi-title")}
	</H3>

feat: run-a-node page content alignItems #12467

feat: run-a-node page content alignItems #12467

Conversation

iusx commented Mar 15, 2024 • edited by coderabbitai bot Loading

Description

Let them be horizontally centered!

Summary by CodeRabbit

Summary by CodeRabbit

coderabbitai bot commented Mar 15, 2024 • edited Loading

Walkthrough

Changes

Chat

CodeRabbit Commands (invoked as PR comments)

CodeRabbit Configration File (.coderabbit.yaml)

CodeRabbit Discord Community

netlify bot commented Mar 15, 2024 • edited Loading

✅ Deploy Preview for ethereumorg ready!

coderabbitai bot left a comment

Choose a reason for hiding this comment

wackerow left a comment

Choose a reason for hiding this comment

coderabbitai bot left a comment

Choose a reason for hiding this comment

iusx commented Mar 20, 2024 • edited Loading

wackerow commented Mar 20, 2024

allcontributors bot commented Mar 20, 2024

iusx commented Mar 15, 2024 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Mar 15, 2024 •

edited

Loading

CodeRabbit Configration File (`.coderabbit.yaml`)

netlify bot commented Mar 15, 2024 •

edited

Loading

iusx commented Mar 20, 2024 •

edited

Loading