refactor: more UI tweaks to follow design (#16)

resources/lang/en/pages.php

@@ -2,26 +2,27 @@
 
 return [
     'user-settings' => [
-        '2fa_title'                        => 'Two Factor Authentication',
-        '2fa_description'                  => 'Add additional security to your account using two factor authentication.',
-        '2fa_enabled_title'                => 'You have enabled two factor authentication.',
-        '2fa_not_enabled_title'            => 'You have not enabled two factor authentication.',
-        '2fa_summary'                      => "When two factor authentication is enabled, you will be prompted for a secure, random token during authentication. You may retrieve this token from your phone's <a href='https://authy.com' target='_blank' class='font-bold'>Authy</a> or <a href='https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2' target='_blank' class='font-bold'>Google Authenticator</a> application.",
-        'one_time_password'                => 'One-Time Password',
-        '2fa_reset_code_title'             => 'Two-Factor Authentication Reset Code',
-        '2fa_reset_code_description'       => 'Reset Code',
-        '2fa_warning_text'                 => 'If you lose your two-factor authentication device, you may use this emergency reset token to disable two-factor authentication on your account. <strong>This is the only time this token will be displayed, so be sure not to lose it!</strong>',
-        'reset_link_email'                 => 'Request submitted. If your email address is associated with an account, you will receive an email with instructions on how to reset your password.',
-        'update_timezone_title'            => 'Timezone',
-        'update_timezone_description'      => 'Select a Timezone below and update it by clicking the update button.',
-        'timezone_updated'                 => 'Timezone was successfully updated',
-        'password_information_title'       => 'Password',
-        'password_information_description' => 'Ensure your account is using a long, random password to stay secure.',
-        'contact_information_title'        => 'Contact Information',
-        'contact_information_description'  => "Update your account's contact information and email address.",
-        'gdpr_title'                       => 'General Data Protection Regulation (GDPR)',
-        'gdpr_description'                 => 'This will will create a zip containing all personal data to respect your right to data portability. You will receive the zip file on the email address linked to your account.',
-        'delete_account_title'             => 'Delete Account',
-        'delete_account_description'       => 'Deletion of the account will result in the loss of your data instantly and your account will be unrecoverable.',
+        '2fa_title'                         => 'Two Factor Authentication',
+        '2fa_description'                   => 'Add additional security to your account using two factor authentication.',
+        '2fa_enabled_title'                 => 'You have enabled two factor authentication.',
+        '2fa_not_enabled_title'             => 'You have not enabled two factor authentication.',
+        '2fa_summary'                       => "When two factor authentication is enabled, you will be prompted for a secure, random token during authentication. You may retrieve this token from your phone's <a href='https://authy.com' target='_blank' class='font-bold'>Authy</a> or <a href='https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2' target='_blank' class='font-bold'>Google Authenticator</a> application.",
+        'one_time_password'                 => 'One-Time Password',
+        '2fa_reset_code_title'              => 'Two-Factor Authentication Reset Code',
+        '2fa_reset_code_description'        => 'Reset Code',
+        '2fa_warning_text'                  => 'If you lose your two-factor authentication device, you may use this emergency reset token to disable two-factor authentication on your account. <strong>This is the only time this token will be displayed, so be sure not to lose it!</strong>',
+        'reset_link_email'                  => 'Request submitted. If your email address is associated with an account, you will receive an email with instructions on how to reset your password.',
+        'update_timezone_title'             => 'Timezone',
+        'update_timezone_description'       => 'Select a Timezone below and update it by clicking the update button.',
+        'timezone_updated'                  => 'Timezone was successfully updated',
+        'password_information_title'        => 'Password',
+        'password_information_description'  => 'Ensure your account is using a long, random password to stay secure.',
+        'contact_information_title'         => 'Contact Information',
+        'contact_information_description'   => "Update your account's contact information and email address.",
+        'gdpr_title'                        => 'General Data Protection Regulation (GDPR)',
+        'gdpr_description'                  => 'This will will create a zip containing all personal data to respect your right to data portability. You will receive the zip file on the email address linked to your account.',
+        'delete_account_title'              => 'Delete Account',
+        'delete_account_description'        => 'Deletion of the account will result in the loss of your data instantly and your account will be unrecoverable.',
+        'update_password_alert_description' => 'The Security Settings allow you to change your passwords and enable or disable 2FA. Please remember the changes made for when you next sign in.',
     ],
 ];

resources/views/profile/delete-user-form.blade.php

@@ -1,7 +1,7 @@
 <div>
     <div class="flex flex-col">
-        <span class="text-2xl font-semibold text-theme-secondary-900">@lang('fortify::pages.user-settings.delete_account_title')</span>
-        <span>
+        <span class="header-4">@lang('fortify::pages.user-settings.delete_account_title')</span>
+        <span class="mt-4">
             @lang('fortify::pages.user-settings.delete_account_description')
         </span>
 

resources/views/profile/export-user-data.blade.php

@@ -1,7 +1,7 @@
 <div>
     <div class="flex flex-col">
-        <span class="text-2xl font-semibold text-theme-secondary-900">@lang('fortify::pages.user-settings.gdpr_title')</span>
-        <span>@lang('fortify::pages.user-settings.gdpr_description')</span>
+        <span class="header-4">@lang('fortify::pages.user-settings.gdpr_title')</span>
+        <span class="mt-4">@lang('fortify::pages.user-settings.gdpr_description')</span>
 
         <div class="flex justify-end mt-8">
             <button type="submit" class="button-secondary" wire:click="export">@lang('fortify::actions.export_personal_data')</button>

resources/views/profile/two-factor-authentication-form.blade.php

@@ -1,8 +1,8 @@
 <div>
     @if (! $this->enabled)
         <div class="flex flex-col">
-            <span class="text-2xl font-semibold leading-9 text-theme-secondary-900">@lang('fortify::pages.user-settings.2fa_title')</span>
-            <span class="paragraph-description">@lang('fortify::pages.user-settings.2fa_description')</span>
+            <span class="header-4">@lang('fortify::pages.user-settings.2fa_title')</span>
+            <span class="mt-4">@lang('fortify::pages.user-settings.2fa_description')</span>
 
             <div class="flex justify-start mt-8">
                 <div class="flex md:divide-x md:divide-theme-secondary-400">
@@ -45,8 +45,8 @@
         </div>
     @else
         <div class="flex flex-col">
-            <span class="text-2xl font-semibold text-theme-secondary-900">@lang('fortify::pages.user-settings.2fa_title')</span>
-            <span>@lang('fortify::pages.user-settings.2fa_description')</span>
+            <span class="header-4">@lang('fortify::pages.user-settings.2fa_title')</span>
+            <span class="mt-4">@lang('fortify::pages.user-settings.2fa_description')</span>
 
             <div class="flex mt-8">
                 <div class="flex flex-col">

resources/views/profile/update-password-form.blade.php

@@ -1,7 +1,10 @@
 <div x-data="{isTyping: false}">
     <div class="flex flex-col">
-        <span class="text-2xl font-semibold text-theme-secondary-900">@lang('fortify::pages.user-settings.password_information_title')</span>
-        <span>@lang('fortify::forms.update-password.requirements_notice')</span>
+        <div class="my-8">
+            <x-ark-alert type="warning" :message="trans('fortify::pages.user-settings.update_password_alert_description')" />
+        </div>
+        <span class="header-4">@lang('fortify::pages.user-settings.password_information_title')</span>
+        <span class="mt-4">@lang('fortify::forms.update-password.requirements_notice')</span>
 
         <form class="mt-8" wire:submit.prevent="updatePassword">
             <div class="space-y-4">

resources/views/profile/update-profile-information-form.blade.php

@@ -1,7 +1,7 @@
 <div>
     <div class="flex flex-col">
-        <span class="text-2xl font-semibold text-theme-secondary-900">@lang('fortify::pages.user-settings.contact_information_title')</span>
-        <span>@lang('fortify::pages.user-settings.contact_information_description')</span>
+        <span class="header-4 mt-4">@lang('fortify::pages.user-settings.contact_information_title')</span>
+        <span class="mt-4">@lang('fortify::pages.user-settings.contact_information_description')</span>
 
         <form class="mt-8" wire:submit.prevent="updateProfileInformation">
             <div class="space-y-4">