refactor: separate menu styles into css file

candirugame · Jan 23, 2025 · 452f170 · 452f170
1 parent e931b31
commit 452f170
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 43 deletions.
diff --git a/src/app/ui/browse.component.ts b/src/app/ui/browse.component.ts
@@ -19,15 +19,7 @@ import { CommonModule } from '@angular/common';
 			</div>
 		</div>
 	`,
-	styles: [`
-		.server-item {
-			@apply p-2 bg-gray-700/50 text-gray-200 mb-2;
-		}
-		.btn-menu {
-			@apply w-full text-left px-4 py-2 text-gray-100 hover:bg-gray-700/50 transition-colors mb-2;
-			border-radius: 0;
-		}
-	`],
+	styleUrls: ['./menu-styles.css'],
 })
 export class BrowseComponent {
 	@Output()

diff --git a/src/app/ui/menu-styles.css b/src/app/ui/menu-styles.css
@@ -0,0 +1,37 @@
+/* Host styles */
+:host {
+	@apply contents;
+	font-family: Tiny5, serif;
+}
+
+/* Fixed backdrop */
+.fixed {
+	@apply overflow-hidden;
+}
+
+/* Menu button styles */
+.btn-menu {
+	@apply text-left px-2 py-1 text-gray-100 hover:bg-gray-700/50 transition-colors mb-2 rounded-none;
+	font-family: Tiny5, serif;
+}
+
+/* Server item styles */
+.server-item {
+	@apply p-2 bg-gray-700/50 text-gray-200 mb-2;
+}
+
+/* Setting item styles */
+.setting-item {
+	@apply flex justify-between items-center mb-4 text-gray-200;
+	font-family: Tiny5, serif;
+}
+
+/* Input styles */
+input[type='text'], select, input[type='color'] {
+	@apply bg-gray-800 text-white px-2 py-1 rounded;
+}
+
+/* Checkbox styles */
+input[type='checkbox'] {
+	@apply w-4 h-4 accent-cyan-500;
+}
diff --git a/src/app/ui/menu.component.ts b/src/app/ui/menu.component.ts
@@ -20,7 +20,7 @@ import { BrowseComponent } from './browse.component.ts';
 
 					<button class="btn-menu" (click)="navigate('play')">play</button><br>
 					<button class="btn-menu" (click)="navigate('settings')">settings</button><br>
-					<button class="btn-menu" (click)="navigate('browse')">servers</button><br>
+					<button class="btn-menu" (click)="navigate('browse')">servers</button>
 				</div>
 
 				<app-settings *ngIf="activePage === 'settings'"
@@ -32,18 +32,7 @@ import { BrowseComponent } from './browse.component.ts';
 			</div>
 		</div>
 	`,
-	styles: [`
-		:host {
-			@apply contents;
-		}
-		.fixed {
-			@apply overflow-hidden;
-		}
-		.btn-menu {
-			@apply text-left px-2 py-1 text-gray-100 hover:bg-gray-700/50 transition-colors mb-2 rounded-none;
-
-		}
-	`],
+	styleUrls: ['./menu-styles.css'],
 })
 export class MenuComponent {
 	@Input()

diff --git a/src/app/ui/settings.component.ts b/src/app/ui/settings.component.ts
@@ -13,8 +13,7 @@ import { SettingsManager } from '../../client/core/SettingsManager.ts';
 			<div class="space-y-4">
 				<div class="setting-item">
 					<label class="mr-2">name</label>
-					<input type="text" [(ngModel)]="settings.name" (change)="saveSettings()"
-						   class="bg-gray-800 text-white px-2 py-1 rounded">
+					<input type="text" [(ngModel)]="settings.name" (change)="saveSettings()">
 				</div>
 
 				<div class="setting-item">
@@ -37,14 +36,12 @@ import { SettingsManager } from '../../client/core/SettingsManager.ts';
 
 				<div class="setting-item">
 					<label class="mr-2">crosshair color</label>
-					<input type="color" [(ngModel)]="settings.crosshairColor" (change)="saveSettings()"
-						   class="h-8 w-12 cursor-pointer border border-gray-600">
+					<input type="color" [(ngModel)]="settings.crosshairColor" (change)="saveSettings()">
 				</div>
 
 				<div class="setting-item">
 					<label class="mr-2">crosshair type</label>
-					<select [(ngModel)]="settings.crosshairType" (change)="saveSettings()"
-							class="bg-gray-800 text-white px-2 py-1 rounded">
+					<select [(ngModel)]="settings.crosshairType" (change)="saveSettings()">
 						<option [ngValue]="1">dot</option>
 						<option [ngValue]="0">cross</option>
 					</select>
@@ -61,34 +58,23 @@ import { SettingsManager } from '../../client/core/SettingsManager.ts';
 
 				<div class="setting-item">
 					<label class="mr-2">pretty text</label>
-					<input type="checkbox" [(ngModel)]="settings.doPrettyText" (change)="saveSettings()"
-						   class="w-4 h-4 accent-cyan-500">
+					<input type="checkbox" [(ngModel)]="settings.doPrettyText" (change)="saveSettings()">
 				</div>
 
 				<div class="setting-item">
 					<label class="mr-2">developer mode</label>
-					<input type="checkbox" [(ngModel)]="settings.developerMode" (change)="saveSettings()"
-						   class="w-4 h-4 accent-cyan-500">
+					<input type="checkbox" [(ngModel)]="settings.developerMode" (change)="saveSettings()">
 				</div>
 
 				<div class="setting-item">
-					<button type="button" (click)="resetSettings()"
-							class="text-gray-100 hover:bg-gray-700/50 transition-colors px-2 py-1 text-left rounded-none">reset all</button>
+					<button type="button" (click)="resetSettings()" class="btn-menu">reset all</button>
 				</div>
 
-
 				<button class="btn-menu" (click)="back.emit()">back</button>
 			</div>
 		</div>
 	`,
-	styles: [`
-		.setting-item {
-			@apply flex justify-between items-center mb-4 text-gray-200;
-		}
-		.btn-menu {
-			@apply  text-left px-2 py-1 text-gray-100 hover:bg-gray-700/50 transition-colors mb-2 rounded-none;
-		}
-	`],
+	styleUrls: ['./menu-styles.css'],
 })
 export class SettingsComponent {
 	@Output()