feat: Refactor profile creation form for improved accessibility and styling

ui/src/app/profile-create.component.css

@@ -1,22 +0,0 @@
-.profile-form {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  padding: 1rem;
-  border: 1px solid #e0e0e0;
-  border-radius: 0.25rem;
-}
-
-.card-error {
-  --wa-card-background-color: var(--wa-color-danger-50);
-  --wa-card-border-color: var(--wa-color-danger-300);
-  color: var(--wa-color-danger-800);
-  margin-bottom: 1rem;
-}
-
-.card-success {
-  --wa-card-background-color: var(--wa-color-success-50);
-  --wa-card-border-color: var(--wa-color-success-300);
-  color: var(--wa-color-success-800);
-  margin-bottom: 1rem;
-}

ui/src/app/profile-create.component.html

@@ -1,39 +1,53 @@
-<!--
-  Using ngForm and ngSubmit for a template-driven approach.
-  The form's state is now managed through the 'model' object in the component.
--->
-<form class="profile-form" #profileForm="ngForm" (ngSubmit)="createProfile()">
+<form class="wa-stack" id="profile-create-form">
   <h5>Create New Profile</h5>
 
   <!-- Error and success messages now use simple properties -->
   @if (error) {
-    <wa-card class="card-error">
+    <div class="card card-error">
       <p>{{ error }}</p>
-    </wa-card>
+    </div>
   }
   @if (success) {
-    <wa-card class="card-success">
+    <div class="card card-success">
       <p>{{ success }}</p>
-    </wa-card>
+    </div>
   }
 
   <!-- Two-way data binding with [(ngModel)] -->
-  <wa-input name="name" label="Profile Name" [(ngModel)]="model.name" required></wa-input>
+  <div>
+    <label for="name">Profile Name</label>
+    <input id="name" name="name" [(ngModel)]="model.name" required>
+  </div>
 
-  <wa-select name="minerType" label="Miner Type" [(ngModel)]="model.minerType" required>
-    @for(miner of state().manageableMiners; track miner.name) {
-      <wa-option [value]="miner.name">{{ miner.name }}</wa-option>
-    }
-  </wa-select>
+  <div>
+    <label for="minerType">Miner Type</label>
+    <select id="minerType" name="minerType" [(ngModel)]="model.minerType" required>
+      @for(miner of state().manageableMiners; track miner.name) {
+        <option [value]="miner.name">{{ miner.name }}</option>
+      }
+    </select>
+  </div>
 
   <!-- ngModelGroup to group related form controls into a nested object -->
-  <fieldset ngModelGroup="config">
+  <fieldset name="config">
     <legend>Configuration</legend>
-    <wa-input name="pool" label="Pool Address" [(ngModel)]="model.config.pool" required></wa-input>
-    <wa-input name="wallet" label="Wallet Address" [(ngModel)]="model.config.wallet" required></wa-input>
-    <wa-checkbox name="tls" [(ngModel)]="model.config.tls">TLS</wa-checkbox>
-    <wa-checkbox name="hugePages" [(ngModel)]="model.config.hugePages">Huge Pages</wa-checkbox>
+    <div>
+      <label for="pool">Pool Address</label>
+      <input id="pool" name="pool" [(ngModel)]="model.config.pool" required>
+    </div>
+    <div>
+      <label for="wallet">Wallet Address</label>
+      <input id="wallet" name="wallet" [(ngModel)]="model.config.wallet" required>
+    </div>
+    <div>
+      <input class="" type="checkbox" id="tls" name="tls" [(ngModel)]="model.config.tls">
+      <label for="tls">TLS</label>
+    </div>
+    <div>
+      <input type="checkbox" id="hugePages" name="hugePages" [(ngModel)]="model.config.hugePages">
+      <label for="hugePages">Huge Pages</label>
+    </div>
   </fieldset>
 
-  <wa-button type="submit">Create Profile</wa-button>
+  <button type="submit" (click)="createProfile()">Create Profile</button>
 </form>

ui/src/app/profile-create.component.ts

@@ -17,8 +17,7 @@ import '@awesome.me/webawesome/dist/components/card/card.js';
   standalone: true,
   imports: [CommonModule, FormsModule],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  templateUrl: './profile-create.component.html',
-  styleUrls: ['./profile-create.component.css']
+  templateUrl: './profile-create.component.html'
 })
 export class ProfileCreateComponent {
   minerService = inject(MinerService);

ui/src/styles.css

@@ -1,3 +1,4 @@
 /* You can add global styles to this file, and also import other style files */
 @import "@awesome.me/webawesome/dist/styles/webawesome.css";
 @import "@awesome.me/webawesome/dist/styles/themes/awesome.css";
+@import "@awesome.me/webawesome/dist/styles/native.css";