chore(spa): change spacing to var introduced in !1052

Signed-off-by: Timon Masberg <[email protected]>
kordis-leitstelle · Sep 20, 2024 · 21649d0 · 21649d0
1 parent 50dd8d8
commit 21649d0
Show file tree

Hide file tree

Showing 14 changed files with 39 additions and 40 deletions.
diff --git a/.../deployment/src/lib/components/alert-group-edit-modal/alert-group-edit-modal.component.ts b/.../deployment/src/lib/components/alert-group-edit-modal/alert-group-edit-modal.component.ts
@@ -69,7 +69,7 @@ import { alertGroupMinUnitsValidator } from '../rescue-station/rescue-station-ed
 		}
 
 		.actions {
-			margin-top: 10px;
+			margin-top: var(--base-spacing);
 			display: flex;
 			justify-content: flex-end;
 		}

diff --git a/.../deployment/src/lib/components/deployment/alert-group/deployment-alert-group.component.ts b/.../deployment/src/lib/components/deployment/alert-group/deployment-alert-group.component.ts
@@ -29,7 +29,7 @@ import { DeploymentUnitComponent } from '../unit/deployment-unit.component';
 		.alert-group {
 			display: flex;
 			flex-direction: column;
-			gap: 4px;
+			gap: calc(var(--base-spacing) / 2);
 		}
 
 		.name {
@@ -38,7 +38,7 @@ import { DeploymentUnitComponent } from '../unit/deployment-unit.component';
 
 		nz-card {
 			.ant-card-body {
-				padding: 4px 8px;
+				padding: calc(var(--base-spacing) / 2) var(--base-spacing);
 				background-color: #fafafa;
 			}
 		}

diff --git a/libs/spa/feature/deployment/src/lib/components/deployment/deployment-note-popup.component.ts b/libs/spa/feature/deployment/src/lib/components/deployment/deployment-note-popup.component.ts
@@ -50,7 +50,8 @@ import { NzSpinComponent } from 'ng-zorro-antd/spin';
 			position: absolute;
 			top: 0;
 			right: 0;
-			padding: 4px 16px 4px;
+			padding: calc(var(--base-spacing) / 2) calc(var(--base-spacing) * 2)
+				calc(var(--base-spacing) / 2);
 		}
 
 		.ant-input {

diff --git a/libs/spa/feature/deployment/src/lib/components/deployment/deployments.component.css b/libs/spa/feature/deployment/src/lib/components/deployment/deployments.component.css
@@ -3,7 +3,7 @@
 
 	display: flex;
 	flex-direction: column;
-	gap: 5px;
+	gap: calc(var(--base-spacing) / 2);
 	height: 100%;
 
 	.header-bar {
@@ -24,7 +24,7 @@
 		}
 
 		div > :not(:last-child) {
-			margin-right: 5px;
+			margin-right: calc(var(--base-spacing) / 2);
 		}
 	}
 

diff --git a/libs/spa/feature/deployment/src/lib/components/deployment/deplyoment-card.component.ts b/libs/spa/feature/deployment/src/lib/components/deployment/deplyoment-card.component.ts
@@ -77,24 +77,24 @@ const STATUS_SORT_ORDER: Readonly<Record<number, number>> = Object.freeze({
 			}
 
 			.ant-card-body {
-				padding: 18px;
+				padding: calc(var(--base-spacing) * 2);
 				display: flex;
 				flex-direction: column;
 				flex-grow: 1;
 				height: 100%;
 			}
 
 			.sub-header {
-				margin-bottom: 10px;
+				margin-bottom: var(--base-spacing);
 			}
 
 			.assignments {
 				display: flex;
 				flex-direction: column;
-				gap: 4px;
+				gap: calc(var(--base-spacing) / 2);
 				width: 100%;
 				overflow-y: auto;
-				padding-right: 4px;
+				padding-right: calc(var(--base-spacing) / 2);
 				box-sizing: content-box;
 			}
 		}

diff --git a/...a/feature/deployment/src/lib/components/deployment/signed-in-rescue-stations.component.ts b/...a/feature/deployment/src/lib/components/deployment/signed-in-rescue-stations.component.ts
@@ -75,7 +75,7 @@ import { RescueStationDeploymentCardHeaderComponent } from './rescue-station/res
 		:host {
 			display: flex;
 			flex-direction: row;
-			gap: 5px;
+			gap: calc(var(--base-spacing) / 2);
 			height: 100%;
 		}
 

diff --git a/.../spa/feature/deployment/src/lib/components/deployment/signed-off-deployments.component.ts b/.../spa/feature/deployment/src/lib/components/deployment/signed-off-deployments.component.ts
@@ -44,7 +44,7 @@ import { NameSearchWrapperComponent } from './name-search-wrapper.component';
 			display: flex;
 			flex-direction: column;
 			flex-wrap: wrap;
-			gap: 5px;
+			gap: calc(var(--base-spacing) / 2);
 			height: 100%;
 
 			.empty-state {

diff --git a/libs/spa/feature/deployment/src/lib/components/deployment/unit/deployment-unit.component.ts b/libs/spa/feature/deployment/src/lib/components/deployment/unit/deployment-unit.component.ts
@@ -36,32 +36,30 @@ import { StatusBadgeComponent } from './status-badge.component';
 			(click)="$event.stopPropagation()"
 			nz-popover
 			[nzPopoverBackdrop]="true"
-			[nzBodyStyle]="{ padding: '4px 8px' }"
 			[nzPopoverTitle]="unit().callSign + ' - ' + unit().name"
 			[nzPopoverContent]="notePopoverContent"
 			nzPopoverTrigger="click"
 		>
-			<div class="card-body">
-				<div class="header-row">
-					<span>
-						{{ unit().callSign }}
-						@if (unit().note) {
-							<i nz-icon nzType="info-circle" [nz-tooltip]="unit().note"> </i>
-						}
-					</span>
-					<krd-status-badge [status]="unit().status?.status" />
-				</div>
-				<div class="name">
-					<span>{{ unit().name }}</span>
-				</div>
+			<div class="header-row">
+				<span>
+					{{ unit().callSign }}
+					@if (unit().note) {
+						<i nz-icon nzType="info-circle" [nz-tooltip]="unit().note"> </i>
+					}
+				</span>
+				<krd-status-badge [status]="unit().status?.status" />
+			</div>
+			<div class="name">
+				<span>{{ unit().name }}</span>
 			</div>
 		</nz-card>
 	`,
 	styles: `
 		nz-card {
-			.card-body {
+			.ant-card-body {
 				display: flex;
 				flex-direction: column;
+				padding: calc(var(--base-spacing) / 2) var(--base-spacing);
 			}
 
 			.header-row {

diff --git a/...ation/rescue-station-edit-modal/component/alert-group/alert-group-selections.component.ts b/...ation/rescue-station-edit-modal/component/alert-group/alert-group-selections.component.ts
@@ -75,15 +75,15 @@ import { AlertGroupSelectionComponent } from './alert-group-selection.component'
 			overflow: auto;
 			display: flex;
 			flex-direction: column;
-			gap: 5px;
+			gap: calc(var(--base-spacing) / 2);
 		}
 
 		nz-card {
 			.ant-card-body {
-				padding: 5px;
+				padding: calc(var(--base-spacing) / 2);
 			}
 
-			margin-top: 5px;
+			margin-top: calc(var(--base-spacing) / 2);
 		}
 
 		nz-form-item {

diff --git a/.../components/rescue-station/rescue-station-edit-modal/component/protocol-data.component.ts b/.../components/rescue-station/rescue-station-edit-modal/component/protocol-data.component.ts
@@ -37,7 +37,7 @@ import { Unit } from '@kordis/shared/model';
 			display: flex;
 			flex-direction: row;
 			align-items: center;
-			gap: 5px;
+			gap: calc(var(--base-spacing) / 2);
 		}
 	`,
 	changeDetection: ChangeDetectionStrategy.OnPush,

diff --git a/...c/lib/components/rescue-station/rescue-station-edit-modal/component/strength.component.ts b/...c/lib/components/rescue-station/rescue-station-edit-modal/component/strength.component.ts
@@ -70,7 +70,7 @@ import { Subject, map, of, startWith, takeUntil } from 'rxjs';
 			display: flex;
 			flex-direction: row;
 			align-items: center;
-			gap: 5px;
+			gap: calc(var(--base-spacing) / 2);
 		}
 
 		.ant-form-item {

diff --git a/...escue-station/rescue-station-edit-modal/component/unit/unit-selection-option.component.ts b/...escue-station/rescue-station-edit-modal/component/unit/unit-selection-option.component.ts
@@ -39,7 +39,7 @@ import { StatusBadgeComponent } from '../../../../deployment/unit/status-badge.c
 
 				.call-sign {
 					font-weight: 500;
-					margin-right: 5px;
+					margin-right: calc(var(--base-spacing) / 2);
 				}
 
 				.name {
@@ -50,7 +50,7 @@ import { StatusBadgeComponent } from '../../../../deployment/unit/status-badge.c
 
 			.assignment-note {
 				font-size: 0.8em;
-				margin: -5px 0;
+				margin: calc(-1 * var(--base-spacing) / 2) 0;
 			}
 		}
 	`,

diff --git a/...mponents/rescue-station/rescue-station-edit-modal/rescue-station-edit-modal.component.css b/...mponents/rescue-station/rescue-station-edit-modal/rescue-station-edit-modal.component.css
@@ -1,7 +1,7 @@
 .form {
 	display: flex;
 	flex-direction: column;
-	gap: 10px;
+	gap: var(--base-spacing);
 
 	.form-item {
 		display: flex;
@@ -15,7 +15,7 @@
 }
 
 .actions {
-	margin-top: 10px;
+	margin-top: var(--base-spacing);
 	display: flex;
 }
 
@@ -28,13 +28,13 @@
 }
 
 nz-card {
-	margin-bottom: 5px;
+	margin-bottom: calc(var(--base-spacing) / 2);
 
 	.ant-card-body {
-		padding: 10px;
+		padding: var(--base-spacing);
 	}
 }
 
 nz-alert {
-	margin-top: 5px;
+	margin-top: calc(var(--base-spacing) / 2);
 }
diff --git a/...omponents/rescue-station/rescue-station-note-modal/rescue-station-note-modal.component.ts b/...omponents/rescue-station/rescue-station-note-modal/rescue-station-note-modal.component.ts
@@ -43,7 +43,7 @@ import { GraphqlService, gql } from '@kordis/spa/core/graphql';
 		.actions {
 			display: flex;
 			justify-content: flex-end;
-			margin-top: 10px;
+			margin-top: var(--base-spacing);
 		}
 	`,
 	changeDetection: ChangeDetectionStrategy.OnPush,