From 4f81d8ac53db08a4f3a3e1acf7872a2cfdf1bff6 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Tue, 13 Jun 2023 16:04:45 +0100
Subject: [PATCH] UI changes

---
 src/components/RoadCard/RoadCardPage.tsx             | 10 +++++-----
 src/components/UpdatePassword/UpdatePasswordForm.tsx |  2 +-
 src/components/UpdateProfile/UpdateProfileForm.tsx   |  2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/RoadCard/RoadCardPage.tsx b/src/components/RoadCard/RoadCardPage.tsx
index 85f180c0e..14320a637 100644
--- a/src/components/RoadCard/RoadCardPage.tsx
+++ b/src/components/RoadCard/RoadCardPage.tsx
@@ -43,9 +43,9 @@ export function RoadCardPage() {
   return (
     <>
       <div className="mb-8 hidden md:block">
-        <h2 className="text-3xl font-bold sm:text-4xl">Grab your #RoadCard</h2>
-        <p className="mt-2">
-          Pick a badge and share your progress with the world.
+        <h2 className="text-3xl font-bold sm:text-4xl">Road Card</h2>
+        <p className="mt-2 text-gray-400">
+          Grab your #RoadCard and share your progress with others.
         </p>
       </div>
 
@@ -53,7 +53,7 @@ export function RoadCardPage() {
         <div className="mb-6 flex items-center border-b">
           <div className="flex items-center">
             <button
-              className={`relative top-px flex items-center justify-center px-3 py-2 leading-none shadow-gray-600 ${
+              className={`relative top-px flex items-center justify-center px-3 pb-3 leading-none shadow-gray-600 ${
                 selectedBadge === 'long'
                   ? 'shadow-[inset_0_-1px_0_var(--tw-shadow-color)]'
                   : 'text-gray-600'
@@ -67,7 +67,7 @@ export function RoadCardPage() {
             </button>
 
             <button
-              className={`relative top-px flex items-center justify-center px-3 py-2 leading-none shadow-gray-600 ${
+              className={`relative top-px flex items-center justify-center px-3 pb-3 leading-none shadow-gray-600 ${
                 selectedBadge === 'wide'
                   ? 'shadow-[inset_0_-1px_0_var(--tw-shadow-color)]'
                   : 'text-gray-600'
diff --git a/src/components/UpdatePassword/UpdatePasswordForm.tsx b/src/components/UpdatePassword/UpdatePasswordForm.tsx
index 7477aa77f..6590233d5 100644
--- a/src/components/UpdatePassword/UpdatePasswordForm.tsx
+++ b/src/components/UpdatePassword/UpdatePasswordForm.tsx
@@ -80,7 +80,7 @@ export default function UpdatePasswordForm() {
     <form onSubmit={handleSubmit}>
       <div class="hidden md:block mb-8">
         <h2 className="text-3xl font-bold sm:text-4xl">Password</h2>
-        <p className="mt-2">Use the form below to update your password.</p>
+        <p className="mt-2 text-gray-400">Use the form below to update your password.</p>
       </div>
       <div className="space-y-4">
         {authProvider === 'email' && (
diff --git a/src/components/UpdateProfile/UpdateProfileForm.tsx b/src/components/UpdateProfile/UpdateProfileForm.tsx
index 2686a5801..919abc840 100644
--- a/src/components/UpdateProfile/UpdateProfileForm.tsx
+++ b/src/components/UpdateProfile/UpdateProfileForm.tsx
@@ -83,7 +83,7 @@ export function UpdateProfileForm() {
     <div>
       <div className="mb-8 hidden md:block">
         <h2 className="text-3xl font-bold sm:text-4xl">Profile</h2>
-        <p className="mt-2">Update your profile details below.</p>
+        <p className="mt-2 text-gray-400">Update your profile details below.</p>
       </div>
       <UploadProfilePicture
         avatarUrl={