chore(profile-settings): name tab design

src/app/features/home/logged-out/home-logged-out.component.html

@@ -11,12 +11,14 @@ <h3>
         OSF is a free, open platform to support your research and enable
         collaboration
       </h3>
-      <p-button
-        label="Sign Up"
-        severity="success"
-        class="wide-button"
-        [class.btn-full-width]="isXSmall() || isSmall() || isMedium()"
-      />
+      <div class="mt-5">
+        <p-button
+          label="Sign Up"
+          severity="success"
+          class="wide-button"
+          [class.btn-full-width]="isXSmall() || isSmall() || isMedium()"
+        />
+      </div>
     </div>
     <div class="image-container">
       <img

src/app/features/settings/profile-settings/profile-settings.component.html

@@ -3,3 +3,108 @@
   [title]="'Profile Settings'"
   [icon]="'settings'"
 />
+
+<div class="flex-column flex flex-1 w-full">
+  <p-tabs [value]="defaultTabValue" class="flex-1">
+    <p-tablist class="pr-5 pl-5">
+      <p-tab [value]="0">Name</p-tab>
+      <p-tab [value]="1">Social</p-tab>
+      <p-tab [value]="2">Employment</p-tab>
+      <p-tab [value]="3">Education</p-tab>
+    </p-tablist>
+
+    <p-tabpanels class="p-5 flex-1">
+      <p-tabpanel [value]="0" class="flex flex-column gap-4">
+        <div class="border-1 border-round-lg p-4 name-container">
+          <h3 class="font-normal">
+            Your full name is the name that will be displayed in your profile.
+            To control the way your name will appear in citations, you can use
+            the "Auto-fill" button to automatically infer your first name, last
+            name, etc., or edit the fields directly below.
+          </h3>
+          <div class="flex flex-column row-gap-4 mt-4">
+            <div class="flex flex-row column-gap-3 w-full align-items-end">
+              <div class="w-6">
+                <label for="full-name" class="font-light">Full Name</label>
+                <input pInputText id="full-name" class="name-input" />
+              </div>
+              <div class="w-6">
+                <p-button label="Auto-Fill" severity="secondary" />
+              </div>
+            </div>
+
+            <div class="flex flex-row column-gap-3 w-full align-items-end">
+              <div class="w-6">
+                <label for="given-name" class="font-light">Given Name</label>
+                <input pInputText id="given-name" class="name-input" />
+              </div>
+              <div class="w-6">
+                <label for="middle-name" class="font-light"
+                  >Middle Name(S) (Optional)</label
+                >
+                <input pInputText id="middle-name" class="name-input" />
+              </div>
+            </div>
+
+            <div class="flex flex-row column-gap-3 w-full align-items-end">
+              <div class="w-6">
+                <label for="family-name" class="font-light">Family Name</label>
+                <input pInputText id="family-name" class="name-input" />
+              </div>
+              <div class="w-6">
+                <label for="suffix" class="font-light">Suffix (Optional)</label>
+                <input pInputText id="suffix" class="name-input" />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="border-1 border-round-lg p-4 name-container">
+          <div class="flex flex-column row-gap-5">
+            <h2>Citation Preview</h2>
+            <div class="flex flex-row styles-container">
+              <div class="flex flex-row column-gap-5">
+                <div class="flex flex-column style-wrapper">
+                  <h3>Style:</h3>
+                  <h3>Citation format:</h3>
+                </div>
+                <div class="flex flex-column style-wrapper">
+                  <h3 class="font-bold">APA</h3>
+                  <h3>Doe, J. T.</h3>
+                </div>
+              </div>
+
+              <div class="flex flex-row column-gap-5">
+                <div class="flex flex-column style-wrapper">
+                  <h3>Style:</h3>
+                  <h3>Citation format:</h3>
+                </div>
+                <div class="flex flex-column style-wrapper">
+                  <h3 class="font-bold">MLA</h3>
+                  <h3>Doe, John T.</h3>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div
+          class="flex flex-row align-items-end column-gap-2 ml-auto h-3rem mt-2"
+        >
+          <p-button label="Discard Changes" severity="info" />
+          <div class="wide-m-button">
+            <p-button label="Save" />
+          </div>
+        </div>
+      </p-tabpanel>
+      <p-tabpanel [value]="1" class="flex flex-column gap-5"> </p-tabpanel>
+
+      <p-tabpanel [value]="2" class="flex flex-column gap-5">
+        employment
+      </p-tabpanel>
+
+      <p-tabpanel [value]="3" class="flex flex-column gap-5">
+        education
+      </p-tabpanel>
+    </p-tabpanels>
+  </p-tabs>
+</div>

src/app/features/settings/profile-settings/profile-settings.component.scss

@@ -0,0 +1,36 @@
+@use "assets/styles/variables" as var;
+
+:host {
+  .name-container {
+    border: 1px solid var.$grey-2;
+    border-radius: 8px;
+
+    h3 {
+      text-transform: none;
+    }
+
+    label {
+      font-weight: 300;
+      color: var.$dark-blue-1;
+    }
+
+    .name-input {
+      width: 100%;
+      height: 2.77rem;
+      border: 1px solid var.$grey-2;
+      border-radius: 8px;
+    }
+
+    .styles-container {
+      column-gap: 8.5rem;
+
+      h3 {
+        font-weight: 400;
+      }
+
+      .style-wrapper {
+        row-gap: 0.85rem;
+      }
+    }
+  }
+}

src/app/features/settings/profile-settings/profile-settings.component.ts

@@ -1,10 +1,22 @@
 import { Component } from '@angular/core';
 import { SubHeaderComponent } from '@shared/components/sub-header/sub-header.component';
+import { Tab, TabList, TabPanel, TabPanels, Tabs } from 'primeng/tabs';
+import { Button } from 'primeng/button';
 
 @Component({
   selector: 'osf-profile-settings',
-  imports: [SubHeaderComponent],
+  imports: [
+    SubHeaderComponent,
+    TabList,
+    Tabs,
+    Tab,
+    TabPanel,
+    TabPanels,
+    Button,
+  ],
   templateUrl: './profile-settings.component.html',
   styleUrl: './profile-settings.component.scss',
 })
-export class ProfileSettingsComponent {}
+export class ProfileSettingsComponent {
+  defaultTabValue = 0;
+}

src/assets/styles/overrides/button.scss

@@ -166,12 +166,17 @@
 
 .wide-button {
   button {
-    margin-top: 1.7rem;
     padding: 0.71rem 2.39rem 0.71rem 2.39rem;
     line-height: 1.71rem;
   }
 }
 
+.wide-m-button {
+  button {
+    padding: 0.71rem 3.9rem 0.71rem 3.9rem;
+  }
+}
+
 .learn-more {
   button {
     padding: 0.71rem 1.39rem;

src/assets/styles/overrides/tabs.scss

@@ -0,0 +1,22 @@
+@use "assets/styles/variables" as var;
+
+.p-tablist-tab-list {
+  background: transparent;
+  border: none;
+
+  .p-tab {
+    color: var.$dark-blue-1;
+    border: none;
+  }
+
+  .p-tab-active {
+    background: white;
+    border-top-left-radius: 0.7rem;
+    border-top-right-radius: 0.7rem;
+    border-color: transparent;
+  }
+
+  .p-tablist-active-bar {
+    display: none;
+  }
+}

src/assets/styles/styles.scss

@@ -11,6 +11,7 @@
 @use "./overrides/card";
 @use "./overrides/carousel";
 @use "./overrides/confirmation-dialog";
+@use "./overrides/tabs";
 
 @layer base, primeng, reset;