many visual changes and improvements

components/Modal/ChangePassword.tsx

@@ -34,7 +34,7 @@ export default function ChangePassword({
       <div className="max-w-sm mx-auto flex flex-col gap-3">
         <p className="text-xl text-sky-500 mb-2 text-center">Change Password</p>
 
-        <p className="text-sm font-bold text-sky-300">Old Password</p>
+        <p className="text-sm text-sky-500">Old Password</p>
 
         <input
           value={oldPassword}
@@ -42,7 +42,7 @@ export default function ChangePassword({
           type="text"
           className="w-full rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
         />
-        <p className="text-sm font-bold text-sky-300">New Password</p>
+        <p className="text-sm text-sky-500">New Password</p>
 
         <input
           value={newPassword1}
@@ -50,7 +50,7 @@ export default function ChangePassword({
           type="text"
           className="w-full rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
         />
-        <p className="text-sm font-bold text-sky-300">Re-enter New Password</p>
+        <p className="text-sm text-sky-500">Re-enter New Password</p>
 
         <input
           value={newPassword2}
@@ -60,7 +60,7 @@ export default function ChangePassword({
         />
 
         <div
-          className="mx-auto mt-2  text-white flex items-center gap-2 py-2 px-5 rounded-md select-none font-bold duration-100 bg-sky-500 hover:bg-sky-400 cursor-pointer"
+          className="mx-auto mt-2  text-white flex items-center gap-2 py-2 px-5 rounded-md select-none duration-100 bg-sky-500 hover:bg-sky-400 cursor-pointer"
           onClick={submit}
         >
           Save

components/Modal/Collection/CollectionInfo.tsx

@@ -47,7 +47,7 @@ export default function CollectionInfo({
 
       <div className="flex flex-col sm:flex-row gap-3">
         <div className="w-full">
-          <p className="text-sm font-bold text-sky-300 mb-2">
+          <p className="text-sm text-sky-500 mb-2">
             Name
             <RequiredBadge />
           </p>
@@ -63,9 +63,7 @@ export default function CollectionInfo({
             />
             <div className="color-picker flex justify-between">
               <div className="flex flex-col justify-between items-center w-32">
-                <p className="text-sm w-full font-bold text-sky-300 mb-2">
-                  Icon Color
-                </p>
+                <p className="text-sm w-full text-sky-500 mb-2">Icon Color</p>
                 <div style={{ color: collection.color }}>
                   <FontAwesomeIcon
                     icon={faFolder}
@@ -73,9 +71,9 @@ export default function CollectionInfo({
                   />
                 </div>
                 <div
-                  className="py-1 px-2 rounded-md text-xs font-semibold cursor-pointer text-gray-500 hover:bg-slate-200 duration-100"
+                  className="py-1 px-2 rounded-md text-xs font-semibold cursor-pointer text-sky-500 hover:bg-slate-200 duration-100"
                   onClick={() =>
-                    setCollection({ ...collection, color: "#7dd3fc" })
+                    setCollection({ ...collection, color: "#0ea5e9" })
                   }
                 >
                   Reset
@@ -90,7 +88,7 @@ export default function CollectionInfo({
         </div>
 
         <div className="w-full">
-          <p className="text-sm font-bold text-sky-300 mb-2">Description</p>
+          <p className="text-sm text-sky-500 mb-2">Description</p>
           <textarea
             className="w-full h-[11.4rem] resize-none border rounded-md duration-100 bg-white p-3 outline-none border-sky-100 focus:border-sky-500"
             placeholder="The purpose of this Collection..."

components/Modal/Collection/TeamManagement.tsx

@@ -77,7 +77,7 @@ export default function TeamManagement({
         Sharing & Collaboration
       </p>
 
-      <p className="text-sm font-bold text-sky-300">Make Public</p>
+      <p className="text-sm text-sky-500">Make Public</p>
 
       <Checkbox
         label="Make this a public collection."
@@ -93,7 +93,9 @@ export default function TeamManagement({
 
       {collection.isPublic ? (
         <div>
-          <p className="mb-2 text-gray-500">Public Link (Click to copy)</p>
+          <p className="text-sm text-sky-500 mb-2">
+            Public Link (Click to copy)
+          </p>
           <div
             onClick={() => {
               try {
@@ -113,7 +115,7 @@ export default function TeamManagement({
 
       <hr />
 
-      <p className="text-sm font-bold text-sky-300">Member Management</p>
+      <p className="text-sm text-sky-500">Member Management</p>
 
       <div className="flex items-center gap-2">
         <input
@@ -202,10 +204,10 @@ export default function TeamManagement({
                     </div>
                     <div className="flex sm:block items-center gap-5">
                       <div>
-                        <p className="font-bold text-sm text-gray-500">
+                        <p className="font-bold text-sm text-sky-500">
                           Permissions
                         </p>
-                        <p className="text-xs text-gray-400 mb-2">
+                        <p className="text-xs text-gray-500 mb-2">
                           (Click to toggle.)
                         </p>
                       </div>

components/Modal/LinkModal.tsx

@@ -115,7 +115,7 @@ export default function EditLink({
 
       <div className="grid sm:grid-cols-2 gap-3">
         <div>
-          <p className="text-sm font-bold text-sky-300 mb-2">
+          <p className="text-sm text-sky-500 mb-2">
             Name
             <RequiredBadge />
           </p>
@@ -130,7 +130,7 @@ export default function EditLink({
 
         {method === "CREATE" ? (
           <div>
-            <p className="text-sm font-bold text-sky-300 mb-2">
+            <p className="text-sm text-sky-500 mb-2">
               URL
               <RequiredBadge />
             </p>
@@ -145,7 +145,7 @@ export default function EditLink({
         ) : null}
 
         <div>
-          <p className="text-sm font-bold text-sky-300 mb-2">
+          <p className="text-sm text-sky-500 mb-2">
             Collection
             <RequiredBadge />
           </p>
@@ -167,7 +167,7 @@ export default function EditLink({
         </div>
 
         <div className={method === "UPDATE" ? "sm:col-span-2" : ""}>
-          <p className="text-sm font-bold text-sky-300 mb-2">Tags</p>
+          <p className="text-sm text-sky-500 mb-2">Tags</p>
           <TagSelection
             onChange={setTags}
             defaultValue={link.tags.map((e) => {

components/Modal/UserSettings.tsx

@@ -95,12 +95,10 @@ export default function UserSettings({ toggleSettingsModal }: Props) {
     <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
       <p className="text-xl text-sky-500 mb-2 text-center">Settings</p>
 
-      <p className="text-sky-600">Profile Settings</p>
-
       <div className="grid sm:grid-cols-2 gap-3 auto-rows-auto">
         <div className="flex flex-col gap-3">
           <div>
-            <p className="text-sm font-bold text-sky-300 mb-2">Display Name</p>
+            <p className="text-sm text-sky-500 mb-2">Display Name</p>
             <input
               type="text"
               value={user.name}
@@ -110,7 +108,7 @@ export default function UserSettings({ toggleSettingsModal }: Props) {
           </div>
 
           <div>
-            <p className="text-sm font-bold text-sky-300 mb-2">Email</p>
+            <p className="text-sm text-sky-500 mb-2">Email</p>
             <input
               type="text"
               value={user.email}
@@ -120,7 +118,7 @@ export default function UserSettings({ toggleSettingsModal }: Props) {
           </div>
 
           <div>
-            <p className="text-sm font-bold text-sky-300 mb-2">Password</p>
+            <p className="text-sm text-sky-500 mb-2">Password</p>
 
             <div className="w-fit" onClick={togglePasswordFormModal}>
               <div className="border border-sky-100 rounded-md bg-white px-2 py-1 text-center select-none cursor-pointer text-sky-900 duration-100 hover:border-sky-500">
@@ -139,7 +137,7 @@ export default function UserSettings({ toggleSettingsModal }: Props) {
         </div>
 
         <div className="sm:row-span-2 sm:justify-self-center mb-3">
-          <p className="text-sm font-bold text-sky-300 mb-2 sm:text-center">
+          <p className="text-sm text-sky-500 mb-2 sm:text-center">
             Profile Photo
           </p>
           <div className="w-28 h-28 flex items-center justify-center border border-sky-100 rounded-full relative">
@@ -202,7 +200,7 @@ export default function UserSettings({ toggleSettingsModal }: Props) {
 
       <hr />
 
-      <p className="text-sky-600">Privacy Settings</p>
+      <p className="text-sm text-sky-500 mb-2">Profile Visibility</p>
 
       <Checkbox
         label="Make profile private"
@@ -211,19 +209,16 @@ export default function UserSettings({ toggleSettingsModal }: Props) {
         onClick={() => setUser({ ...user, isPrivate: !user.isPrivate })}
       />
 
-      <p className="text-gray-500 text-sm mb-3">
+      <p className="text-gray-500 text-sm">
         This will limit who can find and add you to other Collections.
       </p>
 
       {user.isPrivate ? (
         <div>
-          <p className="text-sm font-bold text-sky-300 mb-2">
-            Whitelisted Users
-          </p>
+          <p className="text-sm text-sky-500 mb-2">Whitelisted Users</p>
           <p className="text-gray-500 text-sm mb-3">
             Please provide the Email addresses of the users you wish to grant
-            visibility to your profile. Separate by comma. Users not included
-            will be unable to view your profile.
+            visibility to your profile. Separated by comma.
           </p>
           <textarea
             className="w-full resize-none border rounded-md duration-100 bg-white p-2 outline-none border-sky-100 focus:border-sky-500"