Feat/Terms of Use and Privacy Policy

src/app/app.routes.ts

@@ -29,6 +29,20 @@ export const routes: Routes = [
             (mod) => mod.SupportComponent,
           ),
       },
+      {
+        path: 'terms-of-use',
+        loadComponent: () =>
+          import('./features/terms-of-use/terms-of-use.component').then(
+            (mod) => mod.TermsOfUseComponent,
+          ),
+      },
+      {
+        path: 'privacy-policy',
+        loadComponent: () =>
+          import('./features/privacy-policy/privacy-policy.component').then(
+            (mod) => mod.PrivacyPolicyComponent,
+          ),
+      },
     ],
   },
 ];

src/app/core/components/footer/footer.component.html

@@ -25,9 +25,9 @@
 
     <div class="footer-secondary-nav">
       <div class="footer-links">
-        <a href="#">Terms of Use</a>
+        <a routerLink="/terms-of-use">Terms of Use</a>
         <span class="separator">|</span>
-        <a href="#">Privacy Policy</a>
+        <a routerLink="/privacy-policy">Privacy Policy</a>
         <span class="separator">|</span>
         <a href="#">Status</a>
         <span class="separator">|</span>

src/app/core/components/footer/footer.component.scss

@@ -19,14 +19,6 @@
     .separator {
       margin: 0 0.5rem;
     }
-
-    a {
-      text-decoration: none;
-
-      &:hover {
-        text-decoration: underline;
-      }
-    }
   }
 
   .footer-nav {

src/app/core/components/footer/footer.component.ts

@@ -1,11 +1,12 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { NgOptimizedImage } from '@angular/common';
 import { SocialIcon } from '@osf/shared/entities/social-icon.interface';
+import { RouterLink } from '@angular/router';
 
 @Component({
   standalone: true,
   selector: 'osf-footer',
-  imports: [NgOptimizedImage],
+  imports: [NgOptimizedImage, RouterLink],
   templateUrl: './footer.component.html',
   styleUrl: './footer.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,

src/app/core/components/sidenav/sidenav.component.scss

@@ -19,6 +19,8 @@
         width: 100%;
         height: 3.4rem;
         gap: 0.5rem;
+        color: var.$white;
+        text-decoration: none;
       }
 
       .active {

src/app/core/components/topnav/topnav.component.scss

@@ -1,5 +1,7 @@
+@use "assets/styles/variables" as var;
+
 :host {
-  background: #24384a;
+  background: var.$dark-blue-1;
   height: 96px;
   color: white;
 }

src/app/features/privacy-policy/privacy-policy.component.scss

@@ -0,0 +1,29 @@
+@use "assets/styles/variables" as var;
+
+.container {
+  padding: 1.7rem;
+  color: var.$dark-blue-1;
+
+  h1 {
+    margin-bottom: 3.4rem;
+  }
+
+  h2 {
+    margin-bottom: 0.9rem;
+  }
+
+  h4 {
+    font-size: 1rem;
+    font-weight: 400;
+  }
+
+  ul,
+  p {
+    margin-bottom: 1.7rem;
+  }
+
+  li {
+    margin-left: 1.7rem;
+    list-style: initial;
+  }
+}

src/app/features/privacy-policy/privacy-policy.component.spec.ts

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

src/app/features/privacy-policy/privacy-policy.component.ts

@@ -0,0 +1,10 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'osf-privacy-policy',
+  imports: [],
+  templateUrl: './privacy-policy.component.html',
+  styleUrl: './privacy-policy.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PrivacyPolicyComponent {}