raise sidebar title contrast, fix profile text colors in light mode

Author: Onatcer

resources/css/app.css

@@ -53,7 +53,7 @@
     --color-bg-background: #ffffff;
     --color-text-primary: #18181b;
     --color-text-secondary: #3f3f46;
-    --color-text-tertiary: #71717a;
+    --color-text-tertiary: #57575C;
     --color-text-quaternary: #a1a1aa;
     --color-border-primary: #e7e7e7;
     --color-border-secondary: #e5e5e5;

resources/js/Pages/Profile/Partials/ApiTokensForm.vue

@@ -209,7 +209,7 @@ const revokeApiTokenMutation = useMutation({
                                 v-for="token in tokens"
                                 :key="token.id"
                                 class="flex items-center py-2.5 justify-between">
-                                <div class="break-all text-white">
+                                <div class="break-all text-text-primary">
                                     <div>{{ token.name }}</div>
                                     <div class="text-sm text-text-tertiary space-x-3">
                                         <span v-if="token.created_at">

resources/js/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue

@@ -137,7 +137,7 @@ const disableTwoFactorAuthentication = () => {
                 Finish enabling two factor authentication.
             </h3>
 
-            <h3 v-else class="text-lg font-medium text-white">
+            <h3 v-else class="text-lg font-medium text-text-primary">
                 You have not enabled two factor authentication.
             </h3>
 

resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue

@@ -178,7 +178,7 @@ const page = usePage<{
                         page.props.jetstream.hasEmailVerification &&
                         user.email_verified_at === null
                     ">
-                    <p class="text-sm mt-2 text-white">
+                    <p class="text-sm mt-2 text-text-primary">
                         Your email address is unverified.
 
                         <Link

resources/js/Pages/Teams/Partials/ImportData.vue

@@ -147,17 +147,17 @@ const showResultModal = ref(false);
             </div>
             <div
                 class="py-2.5 px-3 border-t border-t-card-background-separator">
-                <span class="text-white font-semibold">Projects created:</span>
+                <span class="text-text-primary font-semibold">Projects created:</span>
                 {{ reportResult?.report.projects.created }}
             </div>
             <div
                 class="py-2.5 px-3 border-t border-t-card-background-separator">
-                <span class="text-white font-semibold">Tasks created:</span>
+                <span class="text-text-primary font-semibold">Tasks created:</span>
                 {{ reportResult?.report.tasks.created }}
             </div>
             <div
                 class="py-2.5 px-3 border-t border-t-card-background-separator">
-                <span class="text-white font-semibold"
+                <span class="text-text-primary font-semibold"
                     >Time entries created:</span
                 >
                 {{ reportResult?.report.time_entries.created }}
@@ -207,7 +207,7 @@ const showResultModal = ref(false);
                     </select>
                     <div
                         v-if="currentImporterDescription"
-                        class="py-3 text-white">
+                        class="py-3 text-text-primary">
                         <div class="font-semibold text-muted py-1">
                             Instructions:
                         </div>

resources/js/Pages/Teams/Partials/TeamMemberManager.vue

@@ -311,7 +311,7 @@ const displayableRole = (role: string) => {
                                     class="w-8 h-8 rounded-full object-cover"
                                     :src="user.profile_photo_url"
                                     :alt="user.name" />
-                                <div class="ms-4 text-whites">
+                                <div class="ms-4 text-text-primary">
                                     {{ user.name }}
                                 </div>
                             </div>