From 45cfd61dbb30f3b8d0b5b7f1cc5c414ed38afa6d Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Mon, 6 Feb 2023 11:35:56 +0100
Subject: [PATCH] Feature/improve styling in admin control panel (#1665)

* Improve styling

* Update changelog
---
 CHANGELOG.md                                  |  6 +++++
 .../admin-overview/admin-overview.html        | 27 ++++++++++++-------
 .../admin-users/admin-users.component.ts      |  2 ++
 .../components/admin-users/admin-users.html   | 12 +++++----
 libs/common/src/lib/helper.ts                 | 12 +++++++++
 5 files changed, 44 insertions(+), 15 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 74e9b81f2..cadd77304 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Changed
+
+- Improved the styling in the admin control panel
+
 ## 1.232.0 - 2023-02-05
 
 ### Changed
diff --git a/apps/client/src/app/components/admin-overview/admin-overview.html b/apps/client/src/app/components/admin-overview/admin-overview.html
index 18f6dffa3..5ca7a5c2f 100644
--- a/apps/client/src/app/components/admin-overview/admin-overview.html
+++ b/apps/client/src/app/components/admin-overview/admin-overview.html
@@ -151,16 +151,23 @@
           >
             <div class="w-50" i18n>Coupons</div>
             <div class="w-50">
-              <div *ngFor="let coupon of coupons">
-                <span>{{ coupon.code }} ({{ coupon.duration }})</span>
-                <button
-                  class="mini-icon mx-1 no-min-width px-2"
-                  mat-button
-                  (click)="onDeleteCoupon(coupon.code)"
-                >
-                  <ion-icon name="trash-outline"></ion-icon>
-                </button>
-              </div>
+              <table>
+                <tr *ngFor="let coupon of coupons">
+                  <td class="text-monospace">{{ coupon.code }}</td>
+                  <td class="d-flex justify-content-end pl-2">
+                    {{ coupon.duration }}
+                  </td>
+                  <td>
+                    <button
+                      class="mini-icon mx-1 no-min-width px-2"
+                      mat-button
+                      (click)="onDeleteCoupon(coupon.code)"
+                    >
+                      <ion-icon name="trash-outline"></ion-icon>
+                    </button>
+                  </td>
+                </tr>
+              </table>
               <div class="mt-2">
                 <form #couponForm="ngForm" class="align-items-center d-flex">
                   <mat-form-field
diff --git a/apps/client/src/app/components/admin-users/admin-users.component.ts b/apps/client/src/app/components/admin-users/admin-users.component.ts
index 11ef91b8d..0e76a8733 100644
--- a/apps/client/src/app/components/admin-users/admin-users.component.ts
+++ b/apps/client/src/app/components/admin-users/admin-users.component.ts
@@ -1,6 +1,7 @@
 import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
+import { getEmojiFlag } from '@ghostfolio/common/helper';
 import { AdminData, InfoItem, User } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import {
@@ -17,6 +18,7 @@ import { takeUntil } from 'rxjs/operators';
   templateUrl: './admin-users.html'
 })
 export class AdminUsersComponent implements OnDestroy, OnInit {
+  public getEmojiFlag = getEmojiFlag;
   public hasPermissionForSubscription: boolean;
   public info: InfoItem;
   public user: User;
diff --git a/apps/client/src/app/components/admin-users/admin-users.html b/apps/client/src/app/components/admin-users/admin-users.html
index 15983f2f7..317086c90 100644
--- a/apps/client/src/app/components/admin-users/admin-users.html
+++ b/apps/client/src/app/components/admin-users/admin-users.html
@@ -9,7 +9,7 @@
               <th class="mat-header-cell px-1 py-2" i18n>User</th>
               <th
                 *ngIf="hasPermissionForSubscription"
-                class="mat-header-cell px-1 py-2 text-right"
+                class="mat-header-cell px-1 py-2"
               >
                 <ng-container i18n>Country</ng-container>
               </th>
@@ -37,10 +37,10 @@
               <td class="mat-cell px-1 py-2 text-right">{{ i + 1 }}</td>
               <td class="mat-cell px-1 py-2">
                 <div class="d-flex align-items-center">
-                  <span class="d-none d-sm-inline-block"
+                  <span class="d-none d-sm-inline-block text-monospace"
                     >{{ userItem.id }}</span
                   >
-                  <span class="d-inline-block d-sm-none"
+                  <span class="d-inline-block d-sm-none text-monospace"
                     >{{ (userItem.id | slice:0:5) + '...' }}</span
                   >
                   <gf-premium-indicator
@@ -52,9 +52,11 @@
               </td>
               <td
                 *ngIf="hasPermissionForSubscription"
-                class="mat-cell px-1 py-2 text-right"
+                class="mat-cell px-1 py-2"
               >
-                {{ userItem.country }}
+                <span class="h5" [title]="userItem.country"
+                  >{{ getEmojiFlag(userItem.country) }}</span
+                >
               </td>
               <td class="mat-cell px-1 py-2">
                 {{ formatDistanceToNow(userItem.createdAt) }}
diff --git a/libs/common/src/lib/helper.ts b/libs/common/src/lib/helper.ts
index 575d433a0..0bfefb729 100644
--- a/libs/common/src/lib/helper.ts
+++ b/libs/common/src/lib/helper.ts
@@ -118,6 +118,18 @@ export function getDateWithTimeFormatString(aLocale?: string) {
   return `${getDateFormatString(aLocale)}, HH:mm:ss`;
 }
 
+export function getEmojiFlag(aCountryCode: string) {
+  if (!aCountryCode) {
+    return aCountryCode;
+  }
+
+  return aCountryCode
+    .toUpperCase()
+    .replace(/./g, (character) =>
+      String.fromCodePoint(127397 + character.charCodeAt(0))
+    );
+}
+
 export function getLocale() {
   return navigator.languages?.length
     ? navigator.languages[0]