Feature/improve styling in admin control panel (#1665)

* Improve styling

* Update changelog

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

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">
+              <table>
-                <span>{{ coupon.code }} ({{ coupon.duration }})</span>
+                <tr *ngFor="let coupon of coupons">
-                <button
+                  <td class="text-monospace">{{ coupon.code }}</td>
-                  class="mini-icon mx-1 no-min-width px-2"
+                  <td class="d-flex justify-content-end pl-2">
-                  mat-button
+                    {{ coupon.duration }}
-                  (click)="onDeleteCoupon(coupon.code)"
+                  </td>
-                >
+                  <td>
-                  <ion-icon name="trash-outline"></ion-icon>
+                    <button
-                </button>
+                      class="mini-icon mx-1 no-min-width px-2"
-              </div>
+                      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

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;

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) }}

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]