From be78b66c5a2fa454e4921e2f07327b910c33d0c0 Mon Sep 17 00:00:00 2001
From: akastijn <akastijn@alttd.com>
Date: Sat, 27 Dec 2025 21:20:49 +0100
Subject: [PATCH] Refactor `ParticleComponent` by replacing custom color picker
 with Angular Material form fields, adjusting style

---
 .../particle/particle.component.html          |  8 +++----
 .../particle/particle.component.scss          |  9 +++-----
 .../particle/particle.component.spec.ts       | 23 -------------------
 3 files changed, 7 insertions(+), 33 deletions(-)
 delete mode 100644 frontend/src/app/pages/particles/components/particle/particle.component.spec.ts

diff --git a/frontend/src/app/pages/particles/components/particle/particle.component.html b/frontend/src/app/pages/particles/components/particle/particle.component.html
index 849b497..15de30a 100644
--- a/frontend/src/app/pages/particles/components/particle/particle.component.html
+++ b/frontend/src/app/pages/particles/components/particle/particle.component.html
@@ -6,10 +6,10 @@
     <mat-card-content>
       <div class="particle-properties">
         <div class="property-row">
-          <div class="color-picker">
-            <input type="color" [(ngModel)]="selectedColor">
-            <span>Current color: {{ selectedColor }}</span>
-          </div>
+          <mat-form-field appearance="outline">
+            <mat-label>Current color: {{ selectedColor }}</mat-label>
+            <input type="color" class="color-input" matInput [(ngModel)]="selectedColor">
+          </mat-form-field>
           <mat-form-field appearance="outline" class="type-field">
             <mat-label>Select Particle Type</mat-label>
             <input type="text"
diff --git a/frontend/src/app/pages/particles/components/particle/particle.component.scss b/frontend/src/app/pages/particles/components/particle/particle.component.scss
index 799dfc3..dbcb89e 100644
--- a/frontend/src/app/pages/particles/components/particle/particle.component.scss
+++ b/frontend/src/app/pages/particles/components/particle/particle.component.scss
@@ -6,10 +6,10 @@
 .particle-properties {
   display: flex;
   flex-direction: column;
-  gap: 20px;
 }
 
 .property-row {
+  margin-top: 20px;
   display: flex;
   align-items: center;
   gap: 15px;
@@ -22,11 +22,8 @@
   max-width: 40ch;
 }
 
-.color-picker {
-  display: flex;
-  flex: 1;
-  align-items: center;
-  gap: 10px;
+.color-input {
+  height: 1em;
 }
 
 .color-picker input[type="color"] {
diff --git a/frontend/src/app/pages/particles/components/particle/particle.component.spec.ts b/frontend/src/app/pages/particles/components/particle/particle.component.spec.ts
deleted file mode 100644
index 5b39607..0000000
--- a/frontend/src/app/pages/particles/components/particle/particle.component.spec.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import {ComponentFixture, TestBed} from '@angular/core/testing';
-
-import {ParticleComponent} from './particle.component';
-
-describe('ParticleComponent', () => {
-  let component: ParticleComponent;
-  let fixture: ComponentFixture<ParticleComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [ParticleComponent]
-    })
-      .compileComponents();
-
-    fixture = TestBed.createComponent(ParticleComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});