OZG-5010-OZG-5577 Fix bug on wrong icons in attachments

alfa-client/libs/binary-file/src/lib/binary-file2-container/binary-file2/binary-file2.component.html

@@ -5,7 +5,11 @@
   [attr.aria-label]="'Anhang: Dateiname: ' + file.name"
 >
   <ods-spinner-icon spinner *ngIf="isLoading" class="mr-3 size-10" />
-  <ods-icon icon name="file-pdf" class="mr-3 size-10 fill-primary"></ods-icon>
+  <ods-icon
+    icon
+    [name]="'file-' + getIconType(file.contentType)"
+    class="mr-3 size-10 fill-primary"
+  ></ods-icon>
   <button
     close
     *ngIf="deletable"

alfa-client/libs/binary-file/src/lib/binary-file2-container/binary-file2/binary-file2.component.ts

@@ -34,6 +34,11 @@ export class BinaryFile2Component {
     return isNil(this.stateResource) ? createEmptyStateResource<Resource>() : this.stateResource;
   }
 
+  getIconType(type: string): string {
+    if (type.startsWith('image')) return 'image';
+    return type.split('/')[1];
+  }
+
   downloadFile(): void {
     this.startDownload.emit(this.file);
   }

alfa-client/libs/design-system/src/lib/attachment/attachment.component.html

@@ -4,7 +4,7 @@
   <ng-content select="[spinner]"></ng-content>
   <ng-content select="[icon]"></ng-content>
   <div class="flex w-full flex-col items-start">
-    <p class="text-sm">{{ documentName }}</p>
+    <p class="text-sm text-start">{{ documentName }}</p>
     <p class="text-xs text-ozggray-600">{{ description }}</p>
   </div>
   <ng-content select="[close]"></ng-content>

alfa-client/libs/design-system/src/lib/icon/icon.component.html

@@ -91,7 +91,7 @@
     viewBox="0 0 32 40"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
-    class="fill-pdf"
+    [ngClass]="getFileIconFill(name)"
   >
     <path
       d="M32 12L20 0H4C1.8 0 0.0200005 1.8 0.0200005 4L0 36C0 38.2 1.78 40 3.98 40H28C30.2 40 32 38.2 32 36V12ZM28 36H4V4H18V14H28V36Z"

alfa-client/libs/design-system/src/lib/icon/icon.component.ts

@@ -11,4 +11,20 @@ export class IconComponent {
   @Input() name!: string;
   @Input() fillColor: string = 'black';
   @Input() size: string = '100%';
+
+  getFileIconFill(type: string): string {
+    switch (type.split('-')[1]) {
+      case 'pdf':
+      case 'exclamation':
+      case 'generate':
+      case 'upload':
+        return 'fill-pdf';
+      case 'doc':
+      case 'docx':
+        return 'fill-doc';
+      case 'image':
+        return 'fill-ozggray-800';
+    }
+    return 'fill-ozggray-300';
+  }
 }

alfa-client/libs/design-system/src/lib/tailwind-preset/root.css

@@ -24,6 +24,7 @@
   --color-abgelehnt-500: 0 100% 60%;
 
   --color-pdf: 4 62% 63%;
+  --color-doc: 219 63% 54%;
 }
 
 .dark {

alfa-client/libs/design-system/src/lib/tailwind-preset/tailwind.config.js

@@ -51,8 +51,10 @@ module.exports = {
         ozggray: {
           100: 'hsl(0, 0%, 92%)',
           200: 'hsla(0, 0%, 94%)',
+          300: 'hsla(0, 0%, 77%)',
           600: 'hsla(0, 0%, 0%, 0.4)',
           700: 'hsl(213, 27%, 84%)',
+          800: 'hsl(0, 0%, 43%)',
           DEFAULT: 'hsl(0, 0%, 98%)',
         },
         background: {
@@ -74,6 +76,9 @@ module.exports = {
         pdf: {
           DEFAULT: 'hsl(var(--color-pdf) / <alpha-value>)',
         },
+        doc: {
+          DEFAULT: 'hsl(var(--color-doc) / <alpha-value>)',
+        },
         mainbg: 'hsl(var(--color-mainbg) / <alpha-value>)',
         primary: {
           600: 'hsl(var(--color-primary-600) / <alpha-value>)',