diff --git a/client/src/app/shared/components/icon-container/icon-container.component.scss b/client/src/app/shared/components/icon-container/icon-container.component.scss index f41cb5c47..c8f2b1c16 100644 --- a/client/src/app/shared/components/icon-container/icon-container.component.scss +++ b/client/src/app/shared/components/icon-container/icon-container.component.scss @@ -1,3 +1,19 @@ +@mixin icon-container($iconSize, $contentSize, $fontWeight) { + line-height: $iconSize; + + & > mat-icon { + font-size: $iconSize; + width: $iconSize; + height: $iconSize; + margin-top: 0 !important; + } + + & > .content-node { + font-size: $contentSize; + font-weight: $fontWeight; + } +} + os-icon-container { display: flex; align-items: center; @@ -6,33 +22,16 @@ os-icon-container { margin-top: 5px; } - &.medium-container { - $size: 18px; - line-height: $size; + &.small-container { + @include icon-container(12px, 12px, 400); + } - mat-icon { - font-size: $size; - height: $size; - width: $size; - margin-top: 0 !important; - } + &.medium-container { + @include icon-container(18px, 14px, 400); } &.large-container { - $size: 24px; - line-height: $size; - - mat-icon { - font-size: $size; - width: $size; - height: $size; - margin-top: 0 !important; - } - - .content-node { - font-size: 16px; - font-weight: 500; - } + @include icon-container(24px, 16px, 500); } .content-node { diff --git a/client/src/app/shared/components/icon-container/icon-container.component.ts b/client/src/app/shared/components/icon-container/icon-container.component.ts index ee48ca3c6..c089d2de8 100644 --- a/client/src/app/shared/components/icon-container/icon-container.component.ts +++ b/client/src/app/shared/components/icon-container/icon-container.component.ts @@ -11,12 +11,7 @@ export class IconContainerComponent { */ @HostBinding('class') public get classes(): string { - switch (this.size) { - case 'medium': - return 'medium-container'; - case 'large': - return 'large-container'; - } + return `${this.size}-container`; } /** @@ -29,7 +24,7 @@ export class IconContainerComponent { * Optional size property. Can be large, if needed. */ @Input() - public size: 'medium' | 'large' = 'medium'; + public size: 'small' | 'medium' | 'large' = 'medium'; /** * Reverse text and icon. diff --git a/client/src/app/site/agenda/components/agenda-list/agenda-list.component.html b/client/src/app/site/agenda/components/agenda-list/agenda-list.component.html index f330d319e..c72f8c61f 100644 --- a/client/src/app/site/agenda/components/agenda-list/agenda-list.component.html +++ b/client/src/app/site/agenda/components/agenda-list/agenda-list.component.html @@ -17,7 +17,7 @@ {{ item.getSubtitle() }} +
+ + {{ item.comment }} + +
@@ -56,9 +61,6 @@ -
- -