Standardize button styles and add icons: is-success for Add/Save, is-primary for Select/Complete/Recover

[Copilot]

Standardizes button color semantics across the application and adds Font Awesome icons to all Add/Save buttons for better visual consistency. Previously, both is-success and is-primary were used inconsistently for similar actions, and many buttons lacked icons.

Changes

Buttons updated to is-success (green):

• All Add/Create operations (Add User, Create Shift, Add Tag, etc.)
• All Save/Update operations (Save Changes, Update Employee, etc.)

Buttons updated to is-primary (blue):

• Select operations (choosing existing work orders/tasks)
• Complete operations (marking milestones complete)
• Recover operations (undeleting items)

Icons added:

• Added fa-plus icon to ~30 Add/Create buttons that didn't have icons
• Added fa-save icon to ~20 Save/Update buttons that didn't have icons
• Changed fa-check to fa-plus in shifts-addAdhocTask for consistency

Examples

<!-- Add User modal - style change -->
- <button class="button is-primary" type="submit" form="form--addUser">
+ <button class="button is-success" type="submit" form="form--addUser">

<!-- Add User modal - icon addition -->
- <button class="button is-success" type="submit" form="form--addUser">
-   Add User
+ <button class="button is-success" type="submit" form="form--addUser">
+   <span class="icon"><i class="fa-solid fa-plus"></i></span>
+   <span>Add User</span>

<!-- Select Work Order button -->
- <button class="button is-small is-success button--select" type="button">
+ <button class="button is-small is-primary button--select" type="button">

Scope

• 45 HTML modal files (style changes)
• 39 HTML modal files (icon additions)
• 6 TypeScript files + 6 compiled JavaScript files
• Visual enhancements only - no functional changes

Visual Result

All buttons now have consistent styling and iconography:

• 🟢 Green with ➕ icon = Add/Create operations
• 🟢 Green with 💾 icon = Save/Update operations
• 🔵 Blue = Select/Complete/Recover operations

Original prompt

Update all "Add" and "Save" buttons to use the "is-success" button style. Buttons currently using the "is-success" that are not "add" or "save" buttons should use "is-primary" instead.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[deepsource-io]

Here's the code health analysis summary for commits a3ea6b2..40b97d6. View details on DeepSource ↗.

Analysis Summary

Analyzer	Status	Summary	Link
JavaScript	✅ Success		View Check ↗

---

💡 If you’re a repository administrator, you can configure the quality gates from the settings.

[dangowans]

@copilot Update "add" buttons that do not include an icon to include the "fa-plus" icon. Update the "save" buttons that do not include an icon to include the "fa-save" icon.

[Copilot]

@copilot Update "add" buttons that do not include an icon to include the "fa-plus" icon. Update the "save" buttons that do not include an icon to include the "fa-save" icon.

Done in cebc48b. Added fa-plus icons to ~30 Add/Create buttons and fa-save icons to ~20 Save/Update buttons that were missing icons.

Examples:

• Add buttons: <span class="icon"><i class="fa-solid fa-plus"></i></span>
• Save buttons: <span class="icon"><i class="fa-solid fa-save"></i></span>

All green (is-success) buttons now have appropriate icons for better visual consistency.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud