Add discord logo next to login button #1637
Conversation
WalkthroughThis change adds support for displaying an icon in button components. It introduces a new Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Main
participant OButton
User->>Main: Loads app
Main->>OButton: Sets loginDiscordButton properties (disable, hidden, translationKey, icon)
OButton->>OButton: Renders button with icon (if set) and text
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Possibly related PRs
Suggested reviewers
Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
github-project-automation
bot
moved this from Triage
to Development
in OpenFront Release Management
icslucas
dismissed stale reviews from drillskibo and coderabbitai[bot]
via
69c3568
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/client/components/baseComponents/Button.ts(2 hunks)
🧰 Additional context used
🧠 Learnings (1)
📓 Common learnings
Learnt from: VariableVince
PR: openfrontio/OpenFrontIO#1655
File: resources/maps/giantworldmap/manifest.json:165-174
Timestamp: 2025-07-31T12:03:08.052Z
Learning: In OpenFrontIO draft PRs, flag names in map manifest files may be placeholders that will be updated to match the actual SVG flag file names when the assets are received. The final naming depends on the actual flag SVG files provided, not code naming conventions.
Learnt from: andrewNiziolek
PR: openfrontio/OpenFrontIO#1007
File: resources/lang/de.json:115-115
Timestamp: 2025-06-02T14:27:37.609Z
Learning: For OpenFrontIO project: When localization keys are renamed in language JSON files, the maintainers separate technical changes from translation content updates. They wait for community translators to update the actual translation values rather than attempting to translate in the same PR. This allows technical changes to proceed while ensuring accurate translations from native speakers.
Learnt from: its-sii
PR: openfrontio/OpenFrontIO#1089
File: src/client/graphics/layers/ControlPanel.ts:160-183
Timestamp: 2025-06-07T20:01:52.720Z
Learning: The user its-sii prefers simpler, more readable code over complex type-safe approaches when the benefits don't justify the added complexity. They value maintainability and clarity in code implementation.
🪛 Biome (2.1.2)
src/client/components/baseComponents/Button.ts
[error] 10-10: expected a semicolon to end the class property, but found none
(parse)
[error] 10-10: Expected an identifier, a string literal, a number literal, a private field name, or a computed name but instead found '{'.
Expected an identifier, a string literal, a number literal, a private field name, or a computed name here.
(parse)
[error] 10-10: expected a semicolon to end the class property, but found none
(parse)
[error] 10-10: Expected an identifier, a string literal, a number literal, a private field name, or a computed name but instead found ','.
Expected an identifier, a string literal, a number literal, a private field name, or a computed name here.
(parse)
[error] 10-10: Expected a semicolon or an implicit semicolon after a statement, but found none
An explicit or implicit semicolon is expected here...
...Which is required to end this statement
(parse)
[error] 11-11: Shouldn't redeclare 'customElement'. Consider to delete it or rename it.
'customElement' is defined here:
(lint/suspicious/noRedeclare)
[error] 11-11: Shouldn't redeclare 'property'. Consider to delete it or rename it.
'property' is defined here:
(lint/suspicious/noRedeclare)
[error] 12-12: Shouldn't redeclare 'classMap'. Consider to delete it or rename it.
'classMap' is defined here:
(lint/suspicious/noRedeclare)
[error] 13-13: Shouldn't redeclare 'translateText'. Consider to delete it or rename it.
'translateText' is defined here:
(lint/suspicious/noRedeclare)
[error] 16-16: Shouldn't redeclare 'OButton'. Consider to delete it or rename it.
'OButton' is defined here:
(lint/suspicious/noRedeclare)
🪛 GitHub Check: 🔍 ESLint
src/client/components/baseComponents/Button.ts
[failure] 10-10:
Parsing error: Unexpected token. A constructor, method, accessor, or property was expected.
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Analyze (javascript-typescript)
- GitHub Check: Deploy to openfront.dev
🔇 Additional comments (1)
src/client/components/baseComponents/Button.ts (1)
76-83: Clean icon implementation - looks good!Once the duplication is fixed, the icon functionality is well implemented. The flex layout properly centers the icon and text, and the conditional rendering keeps the template clean.
| @@ -299,6 +299,7 @@ class Client { | |||
| loginDiscordButton.disable = false; | |||
| loginDiscordButton.hidden = false; | |||
| loginDiscordButton.translationKey = "main.login_discord"; | |||
| loginDiscordButton.icon = "discord.svg"; | |||
There was a problem hiding this comment.
I think this should also be cleared on the other events where we set translationKey
|
|
drillskibo
added
the
Feature - Frontend
|
@icslucas are you still planning to update this PR? |
Description:
Add discord logo next to login button
Describe the PR.
Add discord logo next to login button
Please complete the following:
Please put your Discord username so you can be contacted if a bug or regression is found:
Lucas