From db942241011289df6e4017c1fcff582ca9862d1d Mon Sep 17 00:00:00 2001
From: Henry Taeschner <henry.taeschner@capgemini.com>
Date: Fri, 4 Oct 2024 07:48:59 +0200
Subject: [PATCH] fix: move operator message, fix various things

---
 .../theme-detail/theme-detail.component.html  | 31 ++++-----
 .../theme-detail/theme-detail.component.scss  | 21 +++---
 .../theme-detail.component.spec.ts            | 64 +++++++-----------
 .../theme-detail/theme-detail.component.ts    | 66 +++++++++++--------
 .../theme-intern/theme-intern.component.html  | 46 +++++++------
 .../theme-intern/theme-intern.component.scss  |  3 +
 .../theme-intern/theme-intern.component.ts    |  5 +-
 7 files changed, 119 insertions(+), 117 deletions(-)
 create mode 100644 src/app/theme/theme-detail/theme-intern/theme-intern.component.scss

diff --git a/src/app/theme/theme-detail/theme-detail.component.html b/src/app/theme/theme-detail/theme-detail.component.html
index 6b15050..c0539ab 100644
--- a/src/app/theme/theme-detail/theme-detail.component.html
+++ b/src/app/theme/theme-detail/theme-detail.component.html
@@ -7,16 +7,10 @@
     [figureImage]="headerImageUrl"
     [figureBackground]="!theme?.logoUrl"
   >
-    <p-message
-      *ngIf="theme?.operator"
-      id="theme_designer_operator_message"
-      severity="warn"
-      [text]="'INTERNAL.OPERATOR_MESSAGE' | translate"
-    ></p-message>
   </ocx-page-header>
 
   <ocx-page-content>
-    <p-tabView>
+    <p-tabView (onChange)="onTabChange($event)">
       <p-tabPanel
         id="th_detail_panel_props"
         [header]="'THEME.TABS.PROPERTIES' | translate"
@@ -25,9 +19,16 @@
         tooltipPosition="top"
         tooltipEvent="hover"
       >
-        <div class="grid grid-nogutter m-3">
-          <div class="col-12 md:col-10 lg:col-10 xl:col-6 flex flex-column row-gap-4">
-            <span class="p-float-label">
+        <p-message
+          *ngIf="theme?.operator && showOperatorMessage"
+          id="theme_designer_operator_message"
+          styleClass="absolute z-1 max-w-11 fadeout animation-duration-1000 animation-delay-3000 animation-iteration-1 animation-fill-forwards"
+          severity="warn"
+          [text]="'INTERNAL.OPERATOR_MESSAGE' | translate"
+        ></p-message>
+        <div class="surface-section mb-1 mt-2 mx-3">
+          <div class="flex flex-wrap flex-column row-gap-4 w-12 md:w-10 lg:w-8 xl:w-6">
+            <span class="mt-01 p-float-label">
               <input
                 pInputText
                 type="text"
@@ -41,7 +42,6 @@
               />
               <label for="th_detail_item_display_name">{{ 'THEME.DISPLAY_NAME' | translate }}</label>
             </span>
-
             <span class="p-float-label">
               <textarea
                 pInputTextarea
@@ -91,7 +91,7 @@
         tooltipPosition="top"
         tooltipEvent="hover"
       >
-        <app-theme-intern [theme]="theme" [dateFormat]="dateFormat" [workspaceList]="workspaceList"></app-theme-intern>
+        <app-theme-intern [theme]="theme" [dateFormat]="dateFormat"></app-theme-intern>
       </p-tabPanel>
 
       <p-tabPanel
@@ -125,14 +125,15 @@
     [(visible)]="themeDeleteVisible"
     [header]="('ACTIONS.DELETE.TOOLTIP' | translate).replace('{{TYPE}}', 'Theme')"
     [modal]="true"
-    [resizable]="false"
+    [resizable]="true"
+    [dragable]="true"
     [dismissableMask]="true"
     [style]="{ 'max-width': '425px' }"
   >
     <div class="flex column-gap-3 row-gap-1 justify-content-start align-items-center">
       <div class="pi pi-question-circle text-3xl danger-action-text"></div>
       <div>
-        <div>{{ this.themeDeleteMessage }}</div>
+        <div class="font-bold">{{ this.themeDeleteMessage }}</div>
         <div class="mt-2">{{ 'ACTIONS.DELETE.MESSAGE_INFO' | translate }}</div>
       </div>
     </div>
@@ -152,7 +153,7 @@
           icon="pi pi-check"
           styleClass="m-0"
           id="th_delete_action_yes"
-          (onClick)="confirmThemeDeletion()"
+          (onClick)="onConfirmThemeDeletion()"
           [label]="'ACTIONS.CONFIRMATION.YES' | translate"
           [pTooltip]="'ACTIONS.CONFIRMATION.YES.TOOLTIP' | translate"
           tooltipPosition="top"
diff --git a/src/app/theme/theme-detail/theme-detail.component.scss b/src/app/theme/theme-detail/theme-detail.component.scss
index d9cde2e..7ab2257 100644
--- a/src/app/theme/theme-detail/theme-detail.component.scss
+++ b/src/app/theme/theme-detail/theme-detail.component.scss
@@ -1,13 +1,16 @@
-/* limit deletion dialog */
+@import 'src/app/_th-mixins.scss';
+
+@include dialog-non-full-size-modal;
+@include danger-action;
+
 :host ::ng-deep {
-  @media (max-width: 991px) {
-    .p-dialog.p-dialog {
-      max-height: unset !important;
-      height: unset !important;
-    }
+  .mt-01 {
+    //margin-top: 0.25rem !important;
   }
-
-  .danger-action-text {
-    color: var(--danger-button-bg);
+  .max-w-11 {
+    max-width: 90%;
+  }
+  .animation-delay-3000 {
+    animation-delay: 3000ms !important;
   }
 }
diff --git a/src/app/theme/theme-detail/theme-detail.component.spec.ts b/src/app/theme/theme-detail/theme-detail.component.spec.ts
index 9b60536..5c8d683 100644
--- a/src/app/theme/theme-detail/theme-detail.component.spec.ts
+++ b/src/app/theme/theme-detail/theme-detail.component.spec.ts
@@ -1,5 +1,6 @@
 import { NO_ERRORS_SCHEMA } from '@angular/core'
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'
+import { Location } from '@angular/common'
 import { HttpErrorResponse } from '@angular/common/http'
 import { HttpClientTestingModule } from '@angular/common/http/testing'
 import { ActivatedRoute, Router } from '@angular/router'
@@ -26,6 +27,7 @@ describe('ThemeDetailComponent', () => {
     }
   }
   const msgServiceSpy = jasmine.createSpyObj<PortalMessageService>('PortalMessageService', ['success', 'error'])
+  const locationSpy = jasmine.createSpyObj<Location>('Location', ['back'])
 
   const configServiceSpy = {
     getProperty: jasmine.createSpy('getProperty').and.returnValue('123'),
@@ -53,6 +55,7 @@ describe('ThemeDetailComponent', () => {
         { provide: UserService, useValue: mockUserService },
         { provide: PortalMessageService, useValue: msgServiceSpy },
         { provide: ConfigurationService, useValue: configServiceSpy },
+        { provide: Location, useValue: locationSpy },
         { provide: ThemesAPIService, useValue: themesApiSpy }
       ],
       schemas: [NO_ERRORS_SCHEMA]
@@ -63,6 +66,7 @@ describe('ThemeDetailComponent', () => {
     themesApiSpy.getThemeByName.calls.reset()
     themesApiSpy.exportThemes.and.returnValue(of({}) as any)
     themesApiSpy.exportThemes.calls.reset()
+    locationSpy.back.calls.reset()
   }))
 
   beforeEach(() => {
@@ -118,22 +122,15 @@ describe('ThemeDetailComponent', () => {
 
   it('should load theme and action translations on successful call', async () => {
     const themeResponse = {
-      resource: {
-        name: 'themeName'
-      },
-      workspaces: [
-        {
-          name: 'workspace',
-          description: 'workspaceDesc'
-        }
-      ]
+      resource: { name: 'themeName', displayName: 'Theme' },
+      workspaces: [{ name: 'workspace', description: 'workspaceDesc' }]
     }
     themesApiSpy.getThemeByName.and.returnValue(of(themeResponse) as any)
 
     const translateService = TestBed.inject(TranslateService)
     const actionsTranslations = {
-      'ACTIONS.NAVIGATION.CLOSE': 'actionNavigationClose',
-      'ACTIONS.NAVIGATION.CLOSE.TOOLTIP': 'actionNavigationCloseTooltip',
+      'ACTIONS.NAVIGATION.BACK': 'actionNavigationClose',
+      'ACTIONS.NAVIGATION.BACK.TOOLTIP': 'actionNavigationCloseTooltip',
       'ACTIONS.EDIT.LABEL': 'actionEditLabel',
       'ACTIONS.EDIT.TOOLTIP': 'actionEditTooltip',
       'ACTIONS.EXPORT.LABEL': 'actionExportLabel',
@@ -155,8 +152,6 @@ describe('ThemeDetailComponent', () => {
     await component.ngOnInit()
 
     expect(component.theme).toEqual(themeResponse['resource'])
-    //expect(component.workspaceList).toEqual('workspaces')
-    //this.prepareWorkspaceList(data.workspaces)
 
     let actions: any = []
     component.actions$!.subscribe((act) => (actions = act))
@@ -166,9 +161,9 @@ describe('ThemeDetailComponent', () => {
       (a: { label: string; title: string }) =>
         a.label === 'actionNavigationClose' && a.title === 'actionNavigationCloseTooltip'
     )[0]
-    spyOn(component, 'close')
+    spyOn(component, 'onClose')
     closeAction.actionCallback()
-    expect(component.close).toHaveBeenCalledTimes(1)
+    expect(component.onClose).toHaveBeenCalledTimes(1)
 
     const editAction = actions.filter(
       (a: { label: string; title: string }) => a.label === 'actionEditLabel' && a.title === 'actionEditTooltip'
@@ -192,31 +187,25 @@ describe('ThemeDetailComponent', () => {
     expect(component.themeDeleteMessage).toBe('')
     deleteAction.actionCallback()
     expect(component.themeDeleteVisible).toBe(true)
-    expect(component.themeDeleteMessage).toBe('themeName actionDeleteThemeMessage')
+    expect(component.themeDeleteMessage).toBe('Theme actionDeleteThemeMessage')
   })
 
   it('should load prepare object details on successfull call', async () => {
     const themeResponse = {
       resource: {
         name: 'themeName',
+        displayName: 'Theme',
         creationDate: 'myCreDate',
         modificationDate: 'myModDate'
       },
-      workspaces: [
-        {
-          name: 'workspace1'
-        },
-        {
-          name: 'workspace2'
-        }
-      ]
+      workspaces: [{ name: 'workspace1' }, { name: 'workspace2' }]
     }
     themesApiSpy.getThemeByName.and.returnValue(of(themeResponse) as any)
 
     const translateService = TestBed.inject(TranslateService)
     const actionsTranslations = {
-      'ACTIONS.NAVIGATION.CLOSE': 'actionNavigationClose',
-      'ACTIONS.NAVIGATION.CLOSE.TOOLTIP': 'actionNavigationCloseTooltip',
+      'ACTIONS.NAVIGATION.BACK': 'actionNavigationClose',
+      'ACTIONS.NAVIGATION.BACK.TOOLTIP': 'actionNavigationCloseTooltip',
       'ACTIONS.EDIT.LABEL': 'actionEditLabel',
       'ACTIONS.EDIT.TOOLTIP': 'actionEditTooltip',
       'ACTIONS.EXPORT.LABEL': 'actionExportLabel',
@@ -236,12 +225,10 @@ describe('ThemeDetailComponent', () => {
     spyOn(translateService, 'get').and.returnValues(of(actionsTranslations), of(generalTranslations))
 
     await component.ngOnInit()
-
-    expect(component.workspaceList).toBe('workspace1, workspace2')
   })
 
   it('should display not found error and close page on theme fetch failure', () => {
-    spyOn(component, 'close')
+    spyOn(component, 'onClose')
     themesApiSpy.getThemeByName.and.returnValue(
       throwError(
         () =>
@@ -257,11 +244,11 @@ describe('ThemeDetailComponent', () => {
       summaryKey: 'THEME.LOAD_ERROR',
       detailKey: 'THEME.NOT_FOUND'
     })
-    expect(component.close).toHaveBeenCalledTimes(1)
+    expect(component.onClose).toHaveBeenCalledTimes(1)
   })
 
   it('should display catched error and close page on theme fetch failure', () => {
-    spyOn(component, 'close')
+    spyOn(component, 'onClose')
     themesApiSpy.getThemeByName.and.returnValue(
       throwError(
         () =>
@@ -277,7 +264,7 @@ describe('ThemeDetailComponent', () => {
       summaryKey: 'THEME.LOAD_ERROR',
       detailKey: 'does not contain checked string'
     })
-    expect(component.close).toHaveBeenCalledTimes(1)
+    expect(component.onClose).toHaveBeenCalledTimes(1)
   })
 
   it('should return empty string if theme has no workspaces', () => {
@@ -288,12 +275,10 @@ describe('ThemeDetailComponent', () => {
   })
 
   it('should navigate back on close', () => {
-    const router = TestBed.inject(Router)
-    spyOn(router, 'navigate')
-
-    component.close()
+    component.ngOnInit()
+    component.onClose()
 
-    expect(router.navigate).toHaveBeenCalledOnceWith(['./..'], jasmine.any(Object))
+    expect(locationSpy.back).toHaveBeenCalled()
   })
 
   it('should set header image url with prefix when theme logo doesnt have http/https', async () => {
@@ -331,7 +316,7 @@ describe('ThemeDetailComponent', () => {
     themesApiSpy.deleteTheme.and.returnValue(of({}) as any)
     component.themeDeleteVisible = true
 
-    component.confirmThemeDeletion()
+    component.onConfirmThemeDeletion()
 
     expect(component.themeDeleteVisible).toBe(false)
     expect(router.navigate).toHaveBeenCalledOnceWith(['..'], jasmine.any(Object))
@@ -351,7 +336,7 @@ describe('ThemeDetailComponent', () => {
     )
     component.themeDeleteVisible = true
 
-    component.confirmThemeDeletion()
+    component.onConfirmThemeDeletion()
 
     expect(component.themeDeleteVisible).toBe(false)
     expect(msgServiceSpy.error).toHaveBeenCalledOnceWith({
@@ -378,6 +363,7 @@ describe('ThemeDetailComponent', () => {
     component.theme = {
       modificationCount: 1,
       name: 'themeName',
+      displayName: 'Theme',
       logoUrl: 'url',
 
       creationDate: 'creationDate',
diff --git a/src/app/theme/theme-detail/theme-detail.component.ts b/src/app/theme/theme-detail/theme-detail.component.ts
index 3f109fe..221ea6d 100644
--- a/src/app/theme/theme-detail/theme-detail.component.ts
+++ b/src/app/theme/theme-detail/theme-detail.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core'
+import { Location } from '@angular/common'
 import { ActivatedRoute, Router } from '@angular/router'
 import { TranslateService } from '@ngx-translate/core'
 import { Observable, finalize, map } from 'rxjs'
@@ -21,13 +22,13 @@ import {
   styleUrls: ['./theme-detail.component.scss']
 })
 export class ThemeDetailComponent implements OnInit {
-  theme: Theme | undefined
-  workspaceList: string | undefined
-  themeName!: string
-  themeDeleteVisible = false
-  themeDeleteMessage = ''
-  loading = true
-  RefType = RefType
+  public theme: Theme | undefined
+  public themeName!: string
+  public themeDeleteVisible = false
+  public themeDeleteMessage = ''
+  public showOperatorMessage = true // display initially only
+  public loading = true
+  public RefType = RefType
   public dateFormat = 'medium'
   // page header
   public actions$: Observable<Action[]> | undefined
@@ -37,6 +38,7 @@ export class ThemeDetailComponent implements OnInit {
     private readonly user: UserService,
     private readonly router: Router,
     private readonly route: ActivatedRoute,
+    private readonly location: Location,
     private readonly themeApi: ThemesAPIService,
     private readonly msgService: PortalMessageService,
     private readonly translate: TranslateService,
@@ -57,7 +59,6 @@ export class ThemeDetailComponent implements OnInit {
       .subscribe({
         next: (data) => {
           this.theme = data.resource
-          this.workspaceList = this.prepareWorkspaceList(data.workspaces)
           this.preparePage()
           this.headerImageUrl = this.getImageUrl(this.theme, RefType.Logo)
         },
@@ -66,7 +67,7 @@ export class ThemeDetailComponent implements OnInit {
             summaryKey: 'THEME.LOAD_ERROR',
             detailKey: err.error.indexOf('was not found') > 1 ? 'THEME.NOT_FOUND' : err.error
           })
-          this.close()
+          this.onClose()
         }
       })
   }
@@ -78,8 +79,8 @@ export class ThemeDetailComponent implements OnInit {
   private prepareActionButtons(): void {
     this.actions$ = this.translate
       .get([
-        'ACTIONS.NAVIGATION.CLOSE',
-        'ACTIONS.NAVIGATION.CLOSE.TOOLTIP',
+        'ACTIONS.NAVIGATION.BACK',
+        'ACTIONS.NAVIGATION.BACK.TOOLTIP',
         'ACTIONS.EDIT.LABEL',
         'ACTIONS.EDIT.TOOLTIP',
         'ACTIONS.EXPORT.LABEL',
@@ -92,12 +93,19 @@ export class ThemeDetailComponent implements OnInit {
         map((data) => {
           return [
             {
-              label: data['ACTIONS.NAVIGATION.CLOSE'],
-              title: data['ACTIONS.NAVIGATION.CLOSE.TOOLTIP'],
-              actionCallback: () => this.close(),
-              icon: 'pi pi-times',
+              label: data['ACTIONS.NAVIGATION.BACK'],
+              title: data['ACTIONS.NAVIGATION.BACK.TOOLTIP'],
+              actionCallback: () => this.onClose(),
+              icon: 'pi pi-arrow-left',
+              show: 'always'
+            },
+            {
+              label: data['ACTIONS.EXPORT.LABEL'],
+              title: data['ACTIONS.EXPORT.TOOLTIP'],
+              actionCallback: () => this.onExportTheme(),
+              icon: 'pi pi-download',
               show: 'always',
-              permission: 'THEME#SEARCH'
+              permission: 'THEME#EXPORT'
             },
             {
               label: data['ACTIONS.EDIT.LABEL'],
@@ -107,20 +115,15 @@ export class ThemeDetailComponent implements OnInit {
               show: 'always',
               permission: 'THEME#EDIT'
             },
-            {
-              label: data['ACTIONS.EXPORT.LABEL'],
-              title: data['ACTIONS.EXPORT.TOOLTIP'],
-              actionCallback: () => this.onExportTheme(),
-              icon: 'pi pi-download',
-              show: 'always',
-              permission: 'THEME#EXPORT'
-            },
             {
               label: data['ACTIONS.DELETE.LABEL'],
               title: data['ACTIONS.DELETE.TOOLTIP'],
               actionCallback: () => {
                 this.themeDeleteVisible = true
-                this.themeDeleteMessage = data['ACTIONS.DELETE.THEME_MESSAGE'].replace('{{ITEM}}', this.theme?.name)
+                this.themeDeleteMessage = data['ACTIONS.DELETE.THEME_MESSAGE'].replace(
+                  '{{ITEM}}',
+                  this.theme?.displayName
+                )
               },
               icon: 'pi pi-trash',
               show: 'asOverflow',
@@ -133,11 +136,11 @@ export class ThemeDetailComponent implements OnInit {
       )
   }
 
-  public close(): void {
-    this.router.navigate(['./..'], { relativeTo: this.route })
+  public onClose(): void {
+    this.location.back()
   }
 
-  confirmThemeDeletion(): void {
+  public onConfirmThemeDeletion(): void {
     this.deleteTheme()
     this.themeDeleteVisible = false
   }
@@ -154,6 +157,13 @@ export class ThemeDetailComponent implements OnInit {
     })
   }
 
+  /**
+   * UI EVENTS
+   */
+  public onTabChange($event: any) {
+    this.showOperatorMessage = false
+  }
+
   onExportTheme(): void {
     if (this.theme?.name) {
       const exportThemeRequest: ExportThemeRequest = { names: [this.theme.name] }
diff --git a/src/app/theme/theme-detail/theme-intern/theme-intern.component.html b/src/app/theme/theme-detail/theme-intern/theme-intern.component.html
index e860b7a..1c1fc59 100644
--- a/src/app/theme/theme-detail/theme-intern/theme-intern.component.html
+++ b/src/app/theme/theme-detail/theme-intern/theme-intern.component.html
@@ -1,21 +1,19 @@
-<div class="surface-section w-full my-3">
+<div class="surface-section my-1 mx-3">
   <div class="flex flex-wrap flex-column row-gap-4 w-12 sm:w-10 md:w-8 lg:w-6 xl:w-6">
-    <div class="w-12 sm:w-6 px-4 flex align-items-center">
-      <p-checkbox
-        type="text"
-        [readonly]="true"
-        inputId="th_detail_item_operator"
-        [(ngModel)]="operator"
-        [binary]="true"
-        [styleClass]="'cursor-auto shadow-none'"
-        [label]="'INTERNAL.OPERATOR' | translate"
-        [pTooltip]="'INTERNAL.TOOLTIPS.OPERATOR' | translate"
-        tooltipPosition="top"
-        tooltipEvent="hover"
-      ></p-checkbox>
-    </div>
+    <p-checkbox
+      type="text"
+      inputId="th_detail_item_operator"
+      styleClass="ml-3 cursor-auto shadow-none"
+      [(ngModel)]="operator"
+      [binary]="true"
+      [readonly]="true"
+      [label]="'INTERNAL.OPERATOR' | translate"
+      [pTooltip]="'INTERNAL.TOOLTIPS.OPERATOR' | translate"
+      tooltipPosition="top"
+      tooltipEvent="hover"
+    ></p-checkbox>
 
-    <div class="w-12 px-3">
+    <div class="w-12">
       <span class="p-float-label">
         <input
           pInputText
@@ -33,14 +31,14 @@
     </div>
 
     <div class="flex flex-wrap row-gap-4">
-      <div class="w-12 sm:w-6 px-3">
+      <div class="w-12 sm:w-5 sm:pr-3">
         <span class="p-float-label mb-1">
           <input
             pInputText
             type="text"
             readonly
             id="th_detail_item_creationDate"
-            class="w-full pt-3 pb-2"
+            class="w-full pt-3 pb-2 text-responsive"
             [value]="theme?.creationDate | date: dateFormat"
             [pTooltip]="'INTERNAL.TOOLTIPS.CREATION_DATE' | translate"
             tooltipPosition="top"
@@ -50,14 +48,14 @@
         </span>
       </div>
 
-      <div class="w-12 sm:w-6 px-3">
+      <div class="w-12 sm:w-7 sm:pl-3">
         <span class="p-float-label mb-1">
           <input
             pInputText
             type="text"
             readonly
             id="th_detail_item_creationUser"
-            class="w-full pt-3 pb-2"
+            class="w-full pt-3 pb-2 text-responsive"
             [value]="theme?.creationUser"
             [pTooltip]="'INTERNAL.TOOLTIPS.CREATION_USER' | translate"
             tooltipPosition="top"
@@ -69,14 +67,14 @@
     </div>
 
     <div class="flex flex-wrap row-gap-4">
-      <div class="w-12 sm:w-6 px-3">
+      <div class="w-12 sm:w-5 sm:pr-3">
         <span class="p-float-label mb-1">
           <input
             pInputText
             type="text"
             readonly
             id="th_detail_item_modificationDate"
-            class="w-full pt-3 pb-2"
+            class="w-full pt-3 pb-2 text-responsive"
             [value]="theme?.modificationDate | date: dateFormat"
             [pTooltip]="'INTERNAL.TOOLTIPS.MODIFICATION_DATE' | translate"
             tooltipPosition="top"
@@ -86,14 +84,14 @@
         </span>
       </div>
 
-      <div class="w-12 sm:w-6 px-3">
+      <div class="w-12 sm:w-7 sm:pl-3">
         <span class="p-float-label mb-1">
           <input
             pInputText
             type="text"
             readonly
             id="th_detail_item_modificationUser"
-            class="w-full pt-3 pb-2"
+            class="w-full pt-3 pb-2 text-responsive"
             [value]="theme?.modificationUser"
             [pTooltip]="'INTERNAL.TOOLTIPS.MODIFICATION_USER' | translate"
             tooltipPosition="top"
diff --git a/src/app/theme/theme-detail/theme-intern/theme-intern.component.scss b/src/app/theme/theme-detail/theme-intern/theme-intern.component.scss
new file mode 100644
index 0000000..d4e5404
--- /dev/null
+++ b/src/app/theme/theme-detail/theme-intern/theme-intern.component.scss
@@ -0,0 +1,3 @@
+@import 'src/app/_th-mixins.scss';
+
+@include displaying-text-responsive;
diff --git a/src/app/theme/theme-detail/theme-intern/theme-intern.component.ts b/src/app/theme/theme-detail/theme-intern/theme-intern.component.ts
index f1a0c7c..ea6a361 100644
--- a/src/app/theme/theme-detail/theme-intern/theme-intern.component.ts
+++ b/src/app/theme/theme-detail/theme-intern/theme-intern.component.ts
@@ -7,12 +7,13 @@ import { Theme } from 'src/app/shared/generated'
 
 @Component({
   selector: 'app-theme-intern',
-  templateUrl: './theme-intern.component.html'
+  templateUrl: './theme-intern.component.html',
+  styleUrls: ['./theme-intern.component.scss']
 })
 export class ThemeInternComponent implements OnChanges {
   @Input() theme: Theme | undefined
   @Input() dateFormat = 'medium'
-  @Input() workspaceList: string | undefined
+
   public isListWorkspacesUsingThemeComponentDefined$: Observable<boolean> | undefined
   public listWorkspacesUsingThemeSlotName = 'onecx-theme-list-workspaces-using-theme'