From 2f550fc8c11fe3b7990be4ad80763d35afbbf968 Mon Sep 17 00:00:00 2001
From: Elain T <elain.tsai@graycore.io>
Date: Tue, 16 Jan 2024 17:36:27 -0500
Subject: [PATCH] feat(daffio): clean up footer styles (#2723)

---
 .../simple-footer.component.html              |  2 +-
 .../simple-footer.component.scss              | 25 ++++++-------------
 .../simple-footer/simple-footer.component.ts  |  1 +
 3 files changed, 10 insertions(+), 18 deletions(-)

diff --git a/apps/daffio/src/app/core/footer/simple-footer/simple-footer.component.html b/apps/daffio/src/app/core/footer/simple-footer/simple-footer.component.html
index 5c0825e244..fabc95e3c8 100644
--- a/apps/daffio/src/app/core/footer/simple-footer/simple-footer.component.html
+++ b/apps/daffio/src/app/core/footer/simple-footer/simple-footer.component.html
@@ -2,7 +2,7 @@
   <div class="daffio-simple-footer__grid">
     <div class="daffio-simple-footer__menu">
       <a routerLink="{{ link.path }}" *ngFor="let link of links" class="daffio-simple-footer__link">{{ link.title }}</a>
-      <a class="daffio-simple-footer__link" href="https://github.com/sponsors/graycoreio" target="_blank">Sponsor</a>
+      <a class="daffio-simple-footer__link" href="https://github.com/sponsors/graycoreio" target="_blank" rel="noopener noreferrer">Sponsor</a>
     </div>
     <a class="daffio-simple-footer__logo" routerLink="/">
       <daff-branding-logo type="icon"></daff-branding-logo>
diff --git a/apps/daffio/src/app/core/footer/simple-footer/simple-footer.component.scss b/apps/daffio/src/app/core/footer/simple-footer/simple-footer.component.scss
index 24a6f3820d..c6f0e12b2d 100644
--- a/apps/daffio/src/app/core/footer/simple-footer/simple-footer.component.scss
+++ b/apps/daffio/src/app/core/footer/simple-footer/simple-footer.component.scss
@@ -3,9 +3,9 @@
 :host {
 	display: block;
 	font-size: daff.$small-font-size;
-	padding: 48px 24px;
+	padding: 24px;
 
-	@include daff.breakpoint(tablet) {
+	@include daff.breakpoint(big-tablet) {
 		padding: 64px 48px;
 	}
 
@@ -25,16 +25,8 @@
 			'social';
 		grid-gap: 16px;
 
-		@include daff.breakpoint(tablet) {
-			grid-template-columns: 1fr 1fr;
-			grid-template-areas:
-				'logo  logo'
-				'menu  social';
-			grid-gap: 24px;
-		}
-
 		@include daff.breakpoint(big-tablet) {
-			grid-template-columns: 1fr 1fr 1fr;
+			grid-template-columns: 2fr 1fr 2fr;
 			grid-template-areas: 'menu logo social';
 			grid-gap: 48px;
 		}
@@ -43,9 +35,12 @@
 	&__menu {
 		grid-area: menu;
 		display: flex;
+		flex-wrap: wrap;
+		gap: 8px 16px;
 		justify-content: center;
 
 		@include daff.breakpoint(big-tablet) {
+			gap: 24px;
 			justify-content: flex-start;
 		}
 	}
@@ -61,9 +56,11 @@
 	&__social {
 		grid-area: social;
 		display: flex;
+		gap: 8px 16px;
 		justify-content: center;
 
 		@include daff.breakpoint(big-tablet) {
+			gap: 24px;
 			justify-content: flex-end;
 		}
 	}
@@ -71,17 +68,11 @@
 	&__link {
 		@include daff.embolden();
 		@include daff.uppercase();
-		padding-right: 32px;
 		text-decoration: none;
-
-		&:last-child {
-			padding-right: 0;
-		}
 	}
 
 	&__social-icon {
 		vertical-align: middle;
-
 		margin-right: 8px;
 	}
 
diff --git a/apps/daffio/src/app/core/footer/simple-footer/simple-footer.component.ts b/apps/daffio/src/app/core/footer/simple-footer/simple-footer.component.ts
index f1b4801426..155ba73b0c 100644
--- a/apps/daffio/src/app/core/footer/simple-footer/simple-footer.component.ts
+++ b/apps/daffio/src/app/core/footer/simple-footer/simple-footer.component.ts
@@ -22,6 +22,7 @@ export class DaffioSimpleFooterComponent {
 
   links: any[] = [
     { path: '/why-pwa', title: 'Why PWA' },
+    { path: '/api', title: 'Docs' },
     { path: '/support', title: 'Support' },
   ];