Fix user profile error styling

changelog.d/profile-error.fix

@@ -0,0 +1 @@
+Fix error styling for user profiles

src/components/user_profile/user_profile.vue

@@ -146,8 +146,13 @@
           {{ $t('settings.profile_tab') }}
         </h1>
       </div>
-      <div>
+      <div class="panel-body">
-        <span v-if="error">{{ error }}</span>
+        <div
+          v-if="error"
+          class="alert error"
+        >
+          <span class="error-message">{{ error }}</span>
+        </div>
         <FAIcon
           v-else
           spin
@@ -235,6 +240,16 @@
     align-items: center;
     padding: 7em;
   }
+
+  .alert {
+    padding: 0.75em 5em;
+    border-width: 2px;
+
+    .error-message {
+      color: var(--text);
+      font-weight: bold;
+    }
+  }
 }
 
 </style>