From c3e23ff5572bf51a39bbb7414ef7d9ef14e02fbc Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sun, 31 Dec 2023 12:06:03 -0800
Subject: [PATCH] Update profile UI for social accounts

---
 .../profile-edit-dialog.component.html        | 41 +++++++++----------
 1 file changed, 20 insertions(+), 21 deletions(-)

diff --git a/src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.html b/src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.html
index a82328c89..46becacc6 100644
--- a/src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.html
+++ b/src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.html
@@ -52,31 +52,30 @@
       @if (socialAccounts?.length > 0) {
         <div class="mb-3">
           <p i18n>Connected social accounts</p>
-          <div class="position-relative">
-            <ul>
-              @for (account of socialAccounts; track account.id) {
-                <li>{{account.name}}<button type="button" class="btn btn-outline-secondary btn-sm ms-2 align-baseline" (click)="disconnectSocialAccount(account.id)" i18n-title title="Disconnect {{ account.name }} social account">
-                  <svg class="buttonicon" fill="currentColor">
-                    <use xlink:href="assets/bootstrap-icons.svg#trash" />
-                  </svg>
-                  </button>
-                </li>
-              }
-            </ul>
-            <div class="form-text text-muted text-end fst-italic" i18n>Warning: changing the social accounts cannot be undone</div>
-          </div>
+          <ul class="list-group">
+            @for (account of socialAccounts; track account.id) {
+              <li class="list-group-item">{{account.name}} ({{account.provider}})<button type="button" class="btn btn-outline-danger btn-sm ms-2 align-baseline" (click)="disconnectSocialAccount(account.id)" i18n-title title="Disconnect {{ account.name }} social account">
+                <ng-container i18n>Disconnect</ng-container><svg class="buttonicon-sm ms-1" fill="currentColor">
+                  <use xlink:href="assets/bootstrap-icons.svg#trash" />
+                </svg>
+                </button>
+              </li>
+            }
+          </ul>
+          <div class="form-text text-muted text-end fst-italic" i18n>Warning: disconnecting social accounts cannot be undone</div>
         </div>
       }
       @if (socialAccountProviders?.length > 0) {
         <div class="mb-3">
-          <p i18n>Available social account providers</p>
-          <div class="position-relative">
-            <ul>
-              @for (provider of socialAccountProviders; track provider.name) {
-                <li><a href="{{ provider.login_url }}">{{provider.name}}</a></li>
-              }
-            </ul>
-            <div class="form-text text-muted text-end fst-italic" i18n>Warning: changing the social account providers cannot be undone</div>
+          <p i18n>Connect new social account</p>
+          <div class="list-group">
+            @for (provider of socialAccountProviders; track provider.name) {
+              <a class="list-group-item list-group-item-action text-primary d-flex align-items-center" href="{{ provider.login_url }}" target="_blank">
+                {{provider.name}}<svg class="buttonicon-sm ms-2" style="margin-bottom: 1px;" fill="currentColor">
+                  <use xlink:href="assets/bootstrap-icons.svg#box-arrow-up-right" />
+                </svg>
+              </a>
+            }
           </div>
         </div>
       }