UI: Centralize alerts, field errors, and status dots - #233
Conversation
|
I had refactored it and check it manually and it works fine PR is ready for review, take time for it |
|
@Ayush4958, thanks. I'll start reviewing it today. In the meantime, could you rebase the PR and solve the conflicts to avoid adding this merge commits: Merge branch 'main' of https://github.com/stratum-mining/sv2-ui Because they are polluting the diff that I want to review. |
…i to maintain re-usability
732219b to
91bb24f
Compare
|
sorry @lucasbalieiro for late reply |
| ) : ( | ||
| <Play className="h-4 w-4 shrink-0 text-primary" /> | ||
| )} | ||
| <Alert |
There was a problem hiding this comment.
the icon in this Start Mining alert got misaligned:
| const [currentStep, setCurrentStep] = useState<SetupStep>('mining-mode'); | ||
| const [data, setData] = useState<SetupData>(initialSetupData); | ||
| const [isReconfiguring, setIsReconfiguring] = useState(false); | ||
| const [isSetupReview, setIsSetupReview] = useState(false); |
There was a problem hiding this comment.
what is the reason to delete this state?
| <div className="mb-6 p-3 rounded-xl bg-warning/[0.08] text-sm text-warning flex gap-2 items-start"> | ||
| <AlertCircle className="w-4 h-4 mt-0.5 flex-shrink-0" aria-hidden="true" /> | ||
| {isSetupReview | ||
| ? 'Review your setup to continue mining. Your saved settings are prefilled.' |
There was a problem hiding this comment.
I saw that you dropped this but is not introducing anywhere else in this refactor. Any reason why?
lucasbalieiro
left a comment
lucasbalieiro
left a comment
There was a problem hiding this comment.
This is going in the right direction. I've left a few comments regarding some changes around the drop of the alert for "Review your setup to continue mining. Your saved settings are prefilled".
This might introduce a regression that was fixed in #234.
Please avoid dropping the error messages even if they seem alike, let's focus only on reorganizing the ui components
2 participants
Description
It solves the issue by centralizing the duplicated UI components scattered across the setup wizard, settings & dashboard. It introduces a unified, scalable design system using
class-variance(CV) to eliminate raw Tailwind class duplication.Closes :- #178
Changes Made
<Alert>: Replaces 15+ duplicated warning/success/error banners. Supportsneutral,info,warning,destructive&successvariants with automatic ARIA roles.<FieldError>: Replaces 20+ inline<p className="text-destructive">form validation error messages across the setup forms.<StatusDot>: Unifies the connection status indicators in theShell,ConfigurationTab, andConnectionStatuscomponents.Validation
npm run typecheckpasses with no unused imports.npm run lintpasses with 0 warnings.