Feature/notification UI

src/app/features/settings/notifications/notifications.component.html

@@ -0,0 +1,76 @@
+<osf-sub-header
+  [showButton]="false"
+  [title]="'Notifications'"
+  [icon]="'settings'"
+/>
+
+<section class="flex flex-column xl:p-4 md:p-3 p-2 bg-white flex-1 gap-4">
+  <section class="notification-item flex flex-column gap-4">
+    <h2>Configure Email Preferences</h2>
+
+    <div class="flex flex-column gap-3">
+      <div class="flex gap-2">
+        <p-checkbox inputId="v1"> </p-checkbox>
+
+        <div class="flex flex-column gap-1">
+          <label for="v1" class="mb-0 font-bold notification-item-label">
+            Open Science Framework General
+          </label>
+
+          <div class="notification-item-description">
+            Receive general notifications about the OSF every 2-3 weeks.
+          </div>
+        </div>
+      </div>
+
+      <div class="flex gap-2">
+        <p-checkbox inputId="v2"> </p-checkbox>
+
+        <div class="flex flex-column gap-1">
+          <label for="v2" class="mb-0 font-bold notification-item-label">
+            Open Science Framework Help
+          </label>
+
+          <div class="notification-item-description">
+            Receive helpful tips on how to make the most of the OSF, up to once
+            per week.
+          </div>
+        </div>
+      </div>
+
+      <div class="flex justify-content-end">
+        <p-button [disabled]="true" label="Save" size="large"> </p-button>
+      </div>
+    </div>
+  </section>
+
+  <section class="notification-item flex flex-column gap-4">
+    <h2>Configure Notification Preferences</h2>
+
+    <div>
+      Note: Transactional and administrative service emails will still be sent.
+    </div>
+
+    <section class="notification-configuration">
+      <div>Replies to your comments</div>
+
+      <p-dropdown class="dropdown"> </p-dropdown>
+
+      <div>Comments added</div>
+
+      <p-dropdown class="dropdown"> </p-dropdown>
+
+      <div>Files updated</div>
+
+      <p-dropdown class="dropdown"> </p-dropdown>
+
+      <div>Mentions added</div>
+
+      <p-dropdown class="dropdown"> </p-dropdown>
+
+      <div>Preprint submissions updated</div>
+
+      <p-dropdown class="dropdown"> </p-dropdown>
+    </section>
+  </section>
+</section>

src/app/features/settings/notifications/notifications.component.scss

@@ -0,0 +1,45 @@
+@use "assets/styles/variables" as var;
+
+:host {
+  color: var.$dark-blue-1;
+}
+
+.notification-item {
+  padding: 24px;
+  border: 1px solid var.$grey-2;
+  border-radius: 8px;
+
+  &-label {
+    color: var.$dark-blue-1;
+  }
+
+  &-description {
+    color: var.$dark-blue-1;
+  }
+
+  @media (max-width: 599.99px) {
+    padding: 12px;
+  }
+}
+
+.notification-configuration {
+  display: grid;
+  grid-gap: 12px;
+  align-items: center;
+  grid-template-columns: 0.5fr 2fr;
+  grid-template-rows: repeat(5, 1fr);
+
+  .dropdown {
+    width: 50%;
+  }
+
+  @media (max-width: 599.99px) {
+    grid-template-columns: 1fr;
+    grid-template-rows: repeat(10, 1fr);
+    grid-row-gap: 0;
+
+    .dropdown {
+      width: 100%;
+    }
+  }
+}

src/app/features/settings/notifications/notifications.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NotificationsComponent } from './notifications.component';
+
+describe('NotificationsComponent', () => {
+  let component: NotificationsComponent;
+  let fixture: ComponentFixture<NotificationsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [NotificationsComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(NotificationsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/features/settings/notifications/notifications.component.ts

@@ -0,0 +1,16 @@
+import { ChangeDetectionStrategy, Component, HostBinding } from '@angular/core';
+import { SubHeaderComponent } from '@shared/components/sub-header/sub-header.component';
+import { Checkbox } from 'primeng/checkbox';
+import { Button } from 'primeng/button';
+import { DropdownModule } from 'primeng/dropdown';
+
+@Component({
+  selector: 'osf-notifications',
+  imports: [SubHeaderComponent, Checkbox, Button, DropdownModule],
+  templateUrl: './notifications.component.html',
+  styleUrl: './notifications.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NotificationsComponent {
+  @HostBinding('class') classes = 'flex flex-1 flex-column';
+}

src/app/features/settings/settings.routes.ts

@@ -43,6 +43,13 @@ export const settingsRoutes: Routes = [
         ],
       },
       tokensAppsRoute,
+      {
+        path: 'notifications',
+        loadComponent: () =>
+          import('./notifications/notifications.component').then(
+            (mod) => mod.NotificationsComponent,
+          ),
+      },
     ],
   },
 ];