feat(platform): Updates to Profile and Settings page (#8694)

autogpt_platform/frontend/src/components/agptui/ProfileInfoForm.tsx

@@ -14,7 +14,7 @@ export interface ProfileInfoFormProps {
   selectedCategories: string[];
 }
 
-export const AVAILABLE_CATEGORIES = [
+export const AVAILABLE_CATEGORIES = [ 
   "Entertainment",
   "Blog",
   "Business",
@@ -65,69 +65,45 @@ export const ProfileInfoForm = ({
         </div>
 
         <div className="space-y-4 sm:space-y-6">
-          <div className="flex flex-col items-start justify-between gap-4 sm:flex-row sm:gap-0">
-            <div className="w-full sm:w-[638px]">
-              <label className="mb-1.5 block font-['Geist'] text-base font-medium leading-tight text-slate-950">
-                Display name
-              </label>
-              <div className="rounded-[55px] border border-slate-200 px-4 py-2.5">
-                <input
-                  type="text"
-                  defaultValue={displayName}
-                  placeholder="Enter your display name"
-                  className="w-full border-none bg-transparent font-['Inter'] text-base font-normal text-[#666666] focus:outline-none"
-                />
-              </div>
+          <div className="w-full">
+            <label className="mb-1.5 block font-['Geist'] text-base font-medium leading-tight text-slate-950">
+              Display name
+            </label>
+            <div className="rounded-[55px] border border-slate-200 px-4 py-2.5">
+              <input
+                type="text"
+                defaultValue={displayName}
+                placeholder="Enter your display name"
+                className="w-full border-none bg-transparent font-['Inter'] text-base font-normal text-[#666666] focus:outline-none"
+              />
             </div>
-            <Button
-              variant="default"
-              className="h-[43px] rounded-[22px] border border-slate-900 bg-slate-900 px-4 py-2 font-['Inter'] text-sm font-medium text-slate-50 transition-colors hover:bg-white hover:text-slate-900"
-            >
-              Edit
-            </Button>
           </div>
 
-          <div className="flex flex-col items-start justify-between gap-4 sm:flex-row sm:gap-0">
-            <div className="w-full sm:w-[638px]">
-              <label className="mb-1.5 block font-['Geist'] text-base font-medium leading-tight text-slate-950">
-                Handle
-              </label>
-              <div className="rounded-[55px] border border-slate-200 px-4 py-2.5">
-                <input
-                  type="text"
-                  defaultValue={handle}
-                  placeholder="@username"
-                  className="w-full border-none bg-transparent font-['Inter'] text-base font-normal text-[#666666] focus:outline-none"
-                />
-              </div>
+          <div className="w-full">
+            <label className="mb-1.5 block font-['Geist'] text-base font-medium leading-tight text-slate-950">
+              Handle
+            </label>
+            <div className="rounded-[55px] border border-slate-200 px-4 py-2.5">
+              <input
+                type="text"
+                defaultValue={handle}
+                placeholder="@username"
+                className="w-full border-none bg-transparent font-['Inter'] text-base font-normal text-[#666666] focus:outline-none"
+              />
             </div>
-            <Button
-              variant="default"
-              className="h-[43px] rounded-[22px] border border-slate-900 bg-slate-900 px-4 py-2 font-['Inter'] text-sm font-medium text-slate-50 transition-colors hover:bg-white hover:text-slate-900"
-            >
-              Edit
-            </Button>
           </div>
 
-          <div className="flex flex-col items-start justify-between gap-4 sm:flex-row sm:gap-0">
-            <div className="w-full sm:w-[638px]">
-              <label className="mb-1.5 block font-['Geist'] text-base font-medium leading-tight text-slate-950">
-                Bio
-              </label>
-              <div className="h-[220px] rounded-2xl border border-slate-200 py-2.5 pl-4 pr-4">
-                <textarea
-                  defaultValue={bio}
-                  placeholder="Tell us about yourself..."
-                  className="h-full w-full resize-none border-none bg-transparent font-['Geist'] text-base font-normal text-[#666666] focus:outline-none"
-                />
-              </div>
+          <div className="w-full">
+            <label className="mb-1.5 block font-['Geist'] text-base font-medium leading-tight text-slate-950">
+              Bio
+            </label>
+            <div className="h-[220px] rounded-2xl border border-slate-200 py-2.5 pl-4 pr-4">
+              <textarea
+                defaultValue={bio}
+                placeholder="Tell us about yourself..."
+                className="h-full w-full resize-none border-none bg-transparent font-['Geist'] text-base font-normal text-[#666666] focus:outline-none"
+              />
             </div>
-            <Button
-              variant="default"
-              className="h-[43px] rounded-[22px] border border-slate-900 bg-slate-900 px-4 py-2 font-['Inter'] text-sm font-medium text-slate-50 transition-colors hover:bg-white hover:text-slate-900"
-            >
-              Edit
-            </Button>
           </div>
         </div>
       </div>
@@ -146,33 +122,18 @@ export const ProfileInfoForm = ({
           {[1, 2, 3, 4, 5].map((linkNum) => {
             const link = links.find((l) => l.id === linkNum);
             return (
-              <div
-                key={linkNum}
-                className="flex flex-col items-start justify-between gap-4 sm:flex-row sm:gap-0"
-              >
-                <div className="w-full sm:w-[638px]">
-                  <label className="mb-1.5 block font-['Geist'] text-base font-medium leading-tight text-slate-950">
-                    Link {linkNum}
-                  </label>
-                  <div className="rounded-[55px] border border-slate-200 px-4 py-2.5">
-                    <input
-                      type="text"
-                      placeholder="https://"
-                      defaultValue={link?.url || ""}
-                      className="w-full border-none bg-transparent font-['Inter'] text-base font-normal text-[#666666] focus:outline-none"
-                    />
-                  </div>
+              <div key={linkNum} className="w-full">
+                <label className="mb-1.5 block font-['Geist'] text-base font-medium leading-tight text-slate-950">
+                  Link {linkNum}
+                </label>
+                <div className="rounded-[55px] border border-slate-200 px-4 py-2.5">
+                  <input
+                    type="text"
+                    placeholder="https://"
+                    defaultValue={link?.url || ""}
+                    className="w-full border-none bg-transparent font-['Inter'] text-base font-normal text-[#666666] focus:outline-none"
+                  />
                 </div>
-                <Button
-                  variant="default"
-                  className={`h-[43px] px-4 py-2 ${
-                    link?.url
-                      ? "border border-slate-900 bg-slate-900 text-slate-50 hover:bg-white hover:text-slate-900"
-                      : "bg-gray-500 text-slate-50 hover:bg-gray-600"
-                  } rounded-[22px] font-['Inter'] text-sm font-medium transition-colors`}
-                >
-                  Save
-                </Button>
               </div>
             );
           })}
@@ -181,34 +142,20 @@ export const ProfileInfoForm = ({
 
       <hr className="my-8 border-neutral-300" />
 
-      {/* <section>
-        <div className="relative min-h-[190px] w-full">
-          <div className="absolute left-0 top-0 h-[68px] w-full">
-            <div className="absolute left-0 top-[48px] w-full font-['Geist'] text-base font-medium leading-tight text-slate-950">
-              Pick up to 5 categories for your profile
-            </div>
-            <div className="absolute left-0 top-0 font-['Poppins'] text-lg font-semibold leading-7 text-neutral-500">
-              Categories
-            </div>
-          </div>
-          <div className="absolute left-0 top-[84px] inline-flex w-full flex-wrap items-center justify-start gap-2 sm:gap-2.5">
-            {AVAILABLE_CATEGORIES.map((category, index) => (
-              <Button
-                key={index}
-                variant="outline"
-                onClick={() => onCategoryClick(category)}
-                className={`rounded-[34px] border border-neutral-600 px-5 py-3 transition-colors ${
-                  selectedCategories.includes(category)
-                    ? "bg-slate-900 text-white hover:bg-slate-800"
-                    : "text-neutral-800 hover:border-neutral-800 hover:bg-neutral-100"
-                } font-['Geist'] text-base font-normal leading-normal`}
-              >
-                {category}
-              </Button>
-            ))}
-          </div>
-        </div> */}
-      {/* </section> */}
+      <div className="h-[50px] flex justify-end items-center gap-3">
+        <Button
+          variant="secondary"
+          className="h-[50px] px-6 py-3 rounded-[35px] font-['Geist'] text-base font-medium bg-neutral-200 text-neutral-800 hover:bg-neutral-300 transition-colors"
+        >
+          Cancel
+        </Button>
+        <Button
+          variant="primary"
+          className="h-[50px] px-6 py-3 rounded-[35px] font-['Geist'] text-base font-medium bg-neutral-800 text-white hover:bg-neutral-900 transition-colors"
+        >
+          Save changes
+        </Button>
+      </div>
     </main>
   );
 };

autogpt_platform/frontend/src/components/agptui/SettingsInputForm.tsx

@@ -56,26 +56,14 @@ export const SettingsInputForm = ({
               >
                 Email
               </label>
-              <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
-                <input
-                  id="email-input"
-                  type="email"
-                  value={email}
-                  className="w-full rounded-full border border-neutral-200 bg-transparent px-4 py-2.5 text-base sm:w-[638px]"
-                  readOnly
-                  aria-label="Email address"
-                />
-                <div className="w-full sm:ml-4 sm:w-[88px]">
-                  <Button
-                    variant="default"
-                    size="sm"
-                    className="h-[43px] w-full rounded-full bg-black text-white hover:bg-black/90"
-                    aria-label="Edit email"
-                  >
-                    Edit
-                  </Button>
-                </div>
-              </div>
+              <input
+                id="email-input"
+                type="email"
+                value={email}
+                className="w-full rounded-full border border-neutral-200 bg-transparent px-4 py-2.5 text-base"
+                readOnly
+                aria-label="Email address"
+              />
             </div>
           </div>
 
@@ -87,26 +75,14 @@ export const SettingsInputForm = ({
               >
                 Password
               </label>
-              <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
-                <input
-                  id="password-input"
-                  type="password"
-                  value="************"
-                  className="w-full rounded-full border border-neutral-200 bg-transparent px-4 py-2.5 text-base sm:w-[638px]"
-                  readOnly
-                  aria-label="Password field"
-                />
-                <div className="w-full sm:ml-4 sm:w-[88px]">
-                  <Button
-                    variant="default"
-                    size="sm"
-                    className="h-[43px] w-full rounded-full bg-black text-white hover:bg-black/90"
-                    aria-label="Edit password"
-                  >
-                    Edit
-                  </Button>
-                </div>
-              </div>
+              <input
+                id="password-input"
+                type="password"
+                value="************"
+                className="w-full rounded-full border border-neutral-200 bg-transparent px-4 py-2.5 text-base"
+                readOnly
+                aria-label="Password field"
+              />
             </div>
           </div>
         </div>
@@ -173,6 +149,23 @@ export const SettingsInputForm = ({
           </div>
         </div>
       </section>
+
+      <div className="mt-8 flex justify-end">
+        <div className="flex gap-3">
+          <Button
+            variant="secondary"
+            className="h-[50px] px-6 py-3 rounded-[35px] font-['Geist'] text-base font-medium bg-neutral-200 text-neutral-800 hover:bg-neutral-300 transition-colors"
+          >
+            Cancel
+          </Button>
+          <Button
+            variant="primary"
+            className="h-[50px] px-6 py-3 rounded-[35px] font-['Geist'] text-base font-medium bg-neutral-800 text-white hover:bg-neutral-900 transition-colors"
+          >
+            Save changes
+          </Button>
+        </div>
+      </div>
     </div>
   );
 };