Update particle-related styles and improve forms' structure in particle components.

frontend/src/app/pages/particles/components/particle/particle.component.html

@@ -10,7 +10,7 @@
             <input type="color" [(ngModel)]="selectedColor">
             <span>Current color: {{ selectedColor }}</span>
           </div>
-          <mat-form-field appearance="fill" class="type-field">
+          <mat-form-field appearance="outline" class="type-field">
             <mat-label>Select Particle Type</mat-label>
             <input type="text"
                    placeholder="Search for a particle type"
@@ -36,4 +36,4 @@
       </div>
     </mat-card-content>
   </mat-card>
-  </div>
+</div>

frontend/src/app/pages/particles/components/properties/properties.component.html

@@ -9,9 +9,6 @@
           <mat-label>Particle Name</mat-label>
           <input matInput [(ngModel)]="particleData.particle_name" placeholder="Enter particle name">
         </mat-form-field>
-      </div>
-
-      <div class="form-row">
         <mat-form-field appearance="outline">
           <mat-label>Display Name</mat-label>
           <input matInput [(ngModel)]="particleData.display_name" placeholder="Enter display name">
@@ -27,16 +24,6 @@
             }
           </mat-select>
         </mat-form-field>
-      </div>
-
-      <div class="form-row">
-        <mat-form-field appearance="outline">
-          <mat-label>Lore</mat-label>
-          <textarea matInput [(ngModel)]="particleData.lore" placeholder="Enter lore"></textarea>
-        </mat-form-field>
-      </div>
-
-      <div class="form-row">
         <mat-form-field appearance="outline">
           <mat-label>Display Item</mat-label>
           <input matInput [(ngModel)]="particleData.display_item" placeholder="Enter display item">
@@ -44,20 +31,29 @@
       </div>
 
       <div class="form-row">
-        <mat-form-field appearance="outline">
+        <mat-form-field appearance="outline" class="lore-double">
-          <mat-label>Permission</mat-label>
+          <mat-label>Lore</mat-label>
-          <input matInput [(ngModel)]="particleData.permission" placeholder="Enter permission">
+          <textarea matInput [(ngModel)]="particleData.lore" placeholder="Enter lore"></textarea>
         </mat-form-field>
       </div>
 
       <div class="form-row">
         <mat-form-field appearance="outline">
-          <mat-label>Package Permission</mat-label>
+          <mat-label>Permission name</mat-label>
+          <input matInput [(ngModel)]="particleData.permission" placeholder="Enter permission">
+        </mat-form-field>
+        <mat-form-field appearance="outline">
+          <mat-label>Package name</mat-label>
           <input matInput [(ngModel)]="particleData.package_permission" placeholder="Enter package permission">
         </mat-form-field>
       </div>
 
       <div class="form-row">
+        <mat-form-field appearance="outline">
+          <mat-label>Random Offset</mat-label>
+          <input matInput type="number" [(ngModel)]="particleData.random_offset"
+                 placeholder="Enter random offset">
+        </mat-form-field>
         <mat-form-field appearance="outline">
           <mat-label>Frame Delay</mat-label>
           <input matInput type="number" [(ngModel)]="particleData.frame_delay" placeholder="Enter frame delay">
@@ -69,9 +65,6 @@
           <mat-label>Repeat</mat-label>
           <input matInput type="number" [(ngModel)]="particleData.repeat" placeholder="Enter repeat count">
         </mat-form-field>
-      </div>
-
-      <div class="form-row">
         <mat-form-field appearance="outline">
           <mat-label>Repeat Delay</mat-label>
           <input matInput type="number" [(ngModel)]="particleData.repeat_delay"
@@ -79,17 +72,9 @@
         </mat-form-field>
       </div>
 
-        <div class="form-row">
-          <mat-form-field appearance="outline">
-            <mat-label>Random Offset</mat-label>
-            <input matInput type="number" [(ngModel)]="particleData.random_offset"
-              placeholder="Enter random offset">
-            </mat-form-field>
-          </div>
-
       <div class="form-row">
         <mat-checkbox [(ngModel)]="particleData.stationary"><span>Stationary</span></mat-checkbox>
       </div>
     </mat-card-content>
   </mat-card>
-    </div>
+</div>

frontend/src/app/pages/particles/components/properties/properties.component.scss

@@ -1,5 +1,12 @@
 .form-row {
-  margin-bottom: 15px;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 16px;
+  align-items: start;
+}
+
+.lore-double {
+  grid-column: span 2;
 }
 
 .card-div {

frontend/src/app/pages/particles/components/properties/properties.component.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { PropertiesComponent } from './properties.component';
-
-describe('PropertiesComponent', () => {
-  let component: PropertiesComponent;
-  let fixture: ComponentFixture<PropertiesComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [PropertiesComponent]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(PropertiesComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

frontend/src/app/pages/particles/particles.component.html

@@ -10,8 +10,9 @@
     <section class="darkmodeSection full-height">
       <section class="column">
         <div class="renderer-section column">
-          <div class="flex row">
+          <div class="flex row spacing">
             <div class="flex side-column">
+              <app-particle></app-particle>
               <app-particle-properties></app-particle-properties>
             </div>
             <div class="flex middle-column">
@@ -25,7 +26,6 @@
               </div>
             </div>
             <div class="flex side-column">
-              <app-particle></app-particle>
               <app-frames>
                 <button mat-icon-button matTooltip="Copy JSON to clipboard" (click)="copyJson()">
                   <mat-icon>content_copy</mat-icon>

frontend/src/app/pages/particles/particles.component.scss

@@ -1,9 +1,14 @@
 .renderer-section {
+  margin-top: 15px;
   flex: 1;
   min-width: 300px;
   display: flex;
 }
 
+.spacing {
+  gap: 10px;
+}
+
 .side-column {
   flex: 1;
   flex-direction: column;