[5.x] Update design and copy for connected accounts form

stubs/breeze/inertia-react-ts/resources/js/Pages/Profile/Partials/ConnectedAccountsForm.tsx

@@ -54,13 +54,15 @@ export default function ConnectedAccountsForm({ className = '', hasPassword, pro
                 <h2 className="text-lg font-medium text-gray-900 dark:text-gray-100">Connected Accounts</h2>
 
                 <p className="max-w-xl mt-1 text-sm text-gray-600 dark:text-gray-400">
-                    You are free to connect any social accounts to your profile and may remove any connected accounts at any
-                    time. If you feel any of your connected accounts have been compromised, you should disconnect them
-                    immediately and change your password.
+                    Connect your social media accounts to enable Sign In with OAuth.
                 </p>
             </header>
 
-            <div className="mt-5 space-y-6">
+            <div className="p-4 bg-red-500/10 dark:bg-red-500/5 text-red-500 border-l-4 border-red-600 dark:border-red-700 rounded font-medium text-sm">
+                If you feel any of your connected accounts have been compromised, you should disconnect them immediately and change your password.
+            </div>
+
+            <div className="space-y-6 mt-6">
                 {providers.map(provider => {
                     const connectedAccount = connectedAccounts
                         .filter(account => account.provider === provider.id)

stubs/breeze/inertia-react/resources/js/Pages/Profile/Partials/ConnectedAccountsForm.jsx

@@ -53,13 +53,15 @@ export default function ConnectedAccountsForm({ className = '', hasPassword, pro
                 <h2 className="text-lg font-medium text-gray-900 dark:text-gray-100">Connected Accounts</h2>
 
                 <p className="max-w-xl mt-1 text-sm text-gray-600 dark:text-gray-400">
-                    You are free to connect any social accounts to your profile and may remove any connected accounts at
-                    any time. If you feel any of your connected accounts have been compromised, you should disconnect
-                    them immediately and change your password.
+                    Connect your social media accounts to enable Sign In with OAuth.
                 </p>
             </header>
 
-            <div className="mt-5 space-y-6">
+            <div className="p-4 bg-red-500/10 dark:bg-red-500/5 text-red-500 border-l-4 border-red-600 dark:border-red-700 rounded font-medium text-sm">
+                If you feel any of your connected accounts have been compromised, you should disconnect them immediately and change your password.
+            </div>
+
+            <div className="space-y-6 mt-6">
                 {providers.map((provider) => {
                     const connectedAccount = connectedAccounts
                         .filter((account) => account.provider === provider.id)

stubs/breeze/inertia-vue-ts/resources/js/Components/ConnectedAccount.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {computed, defineProps} from 'vue';
+import {defineProps} from 'vue';
 import ProviderIcon from '@/Components/SocialstreamIcons/ProviderIcon.vue';
 import {Provider} from '@/types';
 

stubs/breeze/inertia-vue-ts/resources/js/Pages/Profile/Partials/ConnectedAccountsForm.vue

@@ -70,13 +70,15 @@ const closeModal = () => {
             <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">Connected Accounts</h2>
 
             <p class="max-w-xl mt-1 text-sm text-gray-600 dark:text-gray-400">
-                You are free to connect any social accounts to your profile and may remove any connected accounts at any
-                time. If you feel any of your connected accounts have been compromised, you should disconnect them
-                immediately and change your password.
+               Connect your social media accounts to enable Sign In with OAuth.
             </p>
         </header>
 
-        <div class="mt-5 space-y-6">
+       <div class="p-4 bg-red-500/10 dark:bg-red-500/5 text-red-500 border-l-4 border-red-600 dark:border-red-700 rounded font-medium text-sm">
+          If you feel any of your connected accounts have been compromised, you should disconnect them immediately and change your password.
+       </div>
+
+        <div class="space-y-6 mt-6">
             <div v-for="provider in providers" :key="provider.id">
                 <ConnectedAccount :created-at="hasAccountForProvider(provider) ? getAccountForProvider(provider)?.created_at : ''" :provider="provider">
                     <template #action>

stubs/breeze/inertia-vue/resources/js/Components/ConnectedAccount.vue

@@ -1,5 +1,5 @@
 <script setup>
-import {computed, defineProps} from 'vue';
+import {defineProps} from 'vue';
 import ProviderIcon from '@/Components/SocialstreamIcons/ProviderIcon.vue';
 
 const props = defineProps({

stubs/breeze/inertia-vue/resources/js/Pages/Profile/Partials/ConnectedAccountsForm.vue

@@ -75,13 +75,15 @@ const closeModal = () => {
             <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">Connected Accounts</h2>
 
             <p class="max-w-xl mt-1 text-sm text-gray-600 dark:text-gray-400">
-                You are free to connect any social accounts to your profile and may remove any connected accounts at any
-                time. If you feel any of your connected accounts have been compromised, you should disconnect them
-                immediately and change your password.
+               Connect your social media accounts to enable Sign In with OAuth.
             </p>
         </header>
 
-        <div class="mt-5 space-y-6">
+       <div class="p-4 bg-red-500/10 dark:bg-red-500/5 text-red-500 border-l-4 border-red-600 dark:border-red-700 rounded font-medium text-sm">
+          If you feel any of your connected accounts have been compromised, you should disconnect them immediately and change your password.
+       </div>
+
+        <div class="space-y-6 mt-6">
             <div v-for="provider in providers" :key="provider.id">
                 <ConnectedAccount :created-at="hasAccountForProvider(provider) ? getAccountForProvider(provider)?.created_at : ''" :provider="provider">
                     <template #action>

stubs/breeze/livewire-functional/resources/views/livewire/profile/connected-accounts-form.blade.php

@@ -28,13 +28,17 @@
         </h2>
 
         <p class="max-w-xl mt-1 text-sm text-gray-600 dark:text-gray-400">
-            {{ __('You are free to connect any social accounts to your profile and may remove any connected accounts at any time. If you feel any of your connected accounts have been compromised, you should disconnect them immediately and change your password.') }}
+            {{ __('Connect your social media accounts to enable Sign In with OAuth.') }}
         </p>
     </header>
 
     <x-input-error :messages="$errors->get('socialstream')" class="mt-2" />
 
-    <div class="mt-5 space-y-6">
+    <div class="p-4 bg-red-500/10 dark:bg-red-500/5 text-red-500 border-l-4 border-red-600 dark:border-red-700 rounded font-medium text-sm">
+        {{ __('If you feel any of your connected accounts have been compromised, you should disconnect them immediately and change your password.') }}
+    </div>
+
+    <div class="space-y-6 mt-6">
         @foreach (JoelButcher\Socialstream\Socialstream::providers() as $provider)
             @php
                 $account = null;

stubs/breeze/livewire/resources/views/livewire/profile/connected-accounts-form.blade.php

@@ -32,13 +32,17 @@ public function removeAccount(string|int $id): void
         </h2>
 
         <p class="max-w-xl mt-1 text-sm text-gray-600 dark:text-gray-400">
-            {{ __('You are free to connect any social accounts to your profile and may remove any connected accounts at any time. If you feel any of your connected accounts have been compromised, you should disconnect them immediately and change your password.') }}
+            {{ __('Connect your social media accounts to enable Sign In with OAuth.') }}
         </p>
     </header>
 
     <x-input-error :messages="$errors->get('socialstream')" class="mt-2" />
 
-    <div class="mt-5 space-y-6">
+    <div class="p-4 bg-red-500/10 dark:bg-red-500/5 text-red-500 border-l-4 border-red-600 dark:border-red-700 rounded font-medium text-sm">
+        {{ __('If you feel any of your connected accounts have been compromised, you should disconnect them immediately and change your password.') }}
+    </div>
+
+    <div class="space-y-6 mt-6">
         @foreach (JoelButcher\Socialstream\Socialstream::providers() as $provider)
             @php
                 $account = null;

stubs/jetstream/inertia/resources/js/Components/ConnectedAccount.vue

@@ -1,5 +1,5 @@
 <script setup>
-import {computed, defineProps} from 'vue';
+import {defineProps} from 'vue';
 import ProviderIcon from '@/Components/SocialstreamIcons/ProviderIcon.vue';
 
 const props = defineProps({

stubs/jetstream/inertia/resources/js/Pages/Profile/Partials/ConnectedAccountsForm.vue

@@ -65,25 +65,16 @@ const closeModal = () => {
         </template>
 
         <template #description>
-            Manage and remove your connected accounts.
+           Connect your social media accounts to enable Sign In with OAuth.
         </template>
 
         <template #content>
-            <h3 class="text-lg font-medium text-gray-900"
-                v-if="$page.props.socialstream.connectedAccounts.length === 0">
-                You have no connected accounts.
-            </h3>
-            <h3 class="text-lg font-medium text-gray-900" v-else>
-                Your connected accounts.
-            </h3>
-
-            <div class="mt-3 ax-w-xl text-sm text-gray-600">
-                You are free to connect any social accounts to your profile and may remove any connected accounts at any
-                time. If you feel any of your connected accounts have been compromised, you should disconnect them
-                immediately and change your password.
-            </div>
+           <div class="p-4 bg-red-500/10 dark:bg-red-500/5 text-red-500 border-l-4 border-red-600 dark:border-red-700 rounded font-medium text-sm">
+              If you feel any of your connected accounts have been compromised, you should disconnect them
+              immediately and change your password.
+           </div>
 
-            <div class="mt-5 space-y-6">
+            <div class="space-y-6 mt-6">
                 <div v-for="(provider) in $page.props.socialstream.providers" :key="provider">
                     <ConnectedAccount :provider="provider"
                                       :created-at="getAccountForProvider(provider)?.created_at">

stubs/jetstream/livewire/resources/views/profile/connected-accounts-form.blade.php

@@ -4,23 +4,15 @@
     </x-slot>
 
     <x-slot name="description">
-        {{ __('Manage and remove your connected accounts.') }}
+        {{ __('Connect your social media accounts to enable Sign In with OAuth.') }}
     </x-slot>
 
     <x-slot name="content">
-        <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">
-            @if (count($this->accounts) == 0)
-                {{ __('You have no connected accounts.') }}
-            @else
-                {{ __('Your connected accounts.') }}
-            @endif
-        </h3>
-
-        <div class="mt-3 max-w-xl text-sm text-gray-600 dark:text-gray-400">
-            {{ __('You are free to connect any social accounts to your profile and may remove any connected accounts at any time. If you feel any of your connected accounts have been compromised, you should disconnect them immediately and change your password.') }}
+        <div class="p-4 bg-red-500/10 dark:bg-red-500/5 text-red-500 border-l-4 border-red-600 dark:border-red-700 rounded font-medium text-sm">
+            {{ __('If you feel any of your connected accounts have been compromised, you should disconnect them immediately and change your password.') }}
         </div>
 
-        <div class="mt-5 space-y-6">
+        <div class="space-y-6 mt-6">
             @foreach ($this->providers as $provider)
                 @php
                     $account = null;