feat(daffio): clean up docs and marketing header styles (#2715)

graycoreio · Jan 12, 2024 · 9792701 · 9792701
1 parent 80ef6ef
commit 9792701
Show file tree

Hide file tree

Showing 13 changed files with 59 additions and 47 deletions.
diff --git a/apps/daffio/src/app/core/header/components/header/header.component.html b/apps/daffio/src/app/core/header/components/header/header.component.html
@@ -1,21 +1,21 @@
 <nav daff-navbar color="theme" class="daffio-header__navbar">
-  <daff-container size="md">
+  <div class="daffio-header__left">
     <div class="daffio-header__logo">
       <ng-content select="[daffio-logo]"></ng-content>
     </div>
-    <div class="daffio-header__menu-container">
-      <div class="daffio-header__menu">
-        <div class="daffio-header__theme-toggle">
-          <ng-content select="[theme-toggle]"></ng-content>
-        </div>
-        <ng-content select="[daffioHeaderItem]"></ng-content>
-        <div class="daffio-header__button">
-          <ng-content select="[quickstart-button]"></ng-content>
-        </div>
-      </div>
-      <div class="daffio-header__bars">
-        <ng-content select="[sidebar-button]"></ng-content>
-      </div>
+    <div class="daffio-header__menu">
+      <ng-content select="[daffioHeaderItem]"></ng-content>
     </div>
-  </daff-container>
+  </div>
+  <div class="daffio-header__right">
+    <div class="daffio-header__theme-toggle">
+      <ng-content select="[theme-toggle]"></ng-content>
+    </div>
+    <div class="daffio-header__button">
+      <ng-content select="[quickstart-button]"></ng-content>
+    </div>
+    <div class="daffio-header__bars">
+      <ng-content select="[sidebar-button]"></ng-content>
+    </div>
+  </div>
 </nav>
diff --git a/apps/daffio/src/app/core/header/components/header/header.component.scss b/apps/daffio/src/app/core/header/components/header/header.component.scss
@@ -10,7 +10,7 @@
       display: none;
       color: currentColor;
       font-size: daff.$normal-font-size;
-      padding: 0.75rem 1.25rem;
+      padding: 0.25rem 1rem;
       text-decoration: none;
 
       @include daff.breakpoint(tablet) {
@@ -24,35 +24,34 @@
   &__navbar {
     justify-content: space-between;
     padding: 0 24px;
+  }
 
-    @include daff.breakpoint(mobile) {
-      padding: 0 48px;
-    }
-
-    @include daff.breakpoint(small-laptop) {
-      padding: 0;
-    }  
+  &__left,
+  &__right {
+    display: flex;
+    align-items: center;
+  }
+
+  &__left {
+    gap: 32px;
   }
 
   &__theme-toggle {
     margin-right: 0.25rem;
 
     @include daff.breakpoint(tablet) {
-      margin-right: 1rem;
+      margin-right: 0;
     }
   }
 
-  &__menu-container {
-    display: flex;
-  }
-
   &__menu {
     margin: 0;
     padding: 0;
 
     @include daff.breakpoint(tablet) {
       display: flex;
       align-items: center;
+      gap: 16px;
     }
   }
 

diff --git a/apps/daffio/src/app/core/header/components/header/header.component.spec.ts b/apps/daffio/src/app/core/header/components/header/header.component.spec.ts
@@ -3,9 +3,7 @@ import {
   TestBed,
   waitForAsync,
 } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
 
-import { DaffContainerModule } from '@daffodil/design/container';
 import { DaffNavbarModule } from '@daffodil/design/navbar';
 
 import { DaffioHeaderComponent } from './header.component';
@@ -17,7 +15,6 @@ describe('DaffioHeaderComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
-        DaffContainerModule,
         DaffNavbarModule,
       ],
       declarations: [
@@ -36,12 +33,4 @@ describe('DaffioHeaderComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
-
-  describe('on <daff-container>', () => {
-    it('should set size="md"', () => {
-      const container = fixture.debugElement.query(By.css('daff-container'));
-
-      expect(container.componentInstance.size).toEqual('md');
-    });
-  });
 });
diff --git a/apps/daffio/src/app/core/header/containers/docs-header/docs-header.component.html b/apps/daffio/src/app/core/header/containers/docs-header/docs-header.component.html
@@ -1,10 +1,10 @@
-<daffio-header>
+<daffio-header class="daffio-docs-header">
   <a routerLink="/" daffio-logo>
     <daff-branding-logo type="full"></daff-branding-logo>
   </a>
   <daff-theme-switch-button theme-toggle></daff-theme-switch-button>
   <a daffioHeaderItem routerLink="{{ link.path }}" *ngFor="let link of links">{{ link.title }}</a>
-  <a daff-button color="theme-contrast" href="https://github.com/graycoreio/daffodil" rel="noopener noreferrer" target="_blank" quickstart-button>Get Started</a>
+  <a daff-button color="theme-contrast" size="sm" href="https://github.com/graycoreio/daffodil" rel="noopener noreferrer" target="_blank" quickstart-button>Get Started</a>
   <button daff-icon-button color="theme-contrast" aria-label="Open Docs Sidebar"
     sidebar-button
     (click)="openDocsSidebar()">

diff --git a/apps/daffio/src/app/core/header/containers/docs-header/docs-header.component.scss b/apps/daffio/src/app/core/header/containers/docs-header/docs-header.component.scss
@@ -0,0 +1,5 @@
+// @use 'utilities' as daff;
+
+// .daffio-docs-header {
+// 	padding: 0 24px;
+// }
diff --git a/apps/daffio/src/app/core/header/containers/docs-header/docs-header.component.ts b/apps/daffio/src/app/core/header/containers/docs-header/docs-header.component.ts
@@ -10,6 +10,7 @@ import { ToggleSidebar } from '../../../../core/sidebar/actions/sidebar.actions'
 @Component({
   selector: 'daffio-docs-header-container',
   templateUrl: './docs-header.component.html',
+  styleUrls: ['./docs-header.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DaffioDocsHeaderContainer {

diff --git a/apps/daffio/src/app/core/header/containers/docs-header/docs-header.module.ts b/apps/daffio/src/app/core/header/containers/docs-header/docs-header.module.ts
@@ -5,6 +5,7 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
 import { DaffLogoModule } from '@daffodil/branding';
 import { DaffButtonModule } from '@daffodil/design/button';
+import { DaffContainerModule } from '@daffodil/design/container';
 import { DaffThemeSwitchButtonModule } from '@daffodil/theme-switch';
 
 import { DaffioDocsHeaderContainer } from './docs-header.component';
@@ -19,6 +20,7 @@ import { DaffioHeaderComponentModule } from '../../components/header.module';
     DaffLogoModule,
     DaffButtonModule,
     DaffThemeSwitchButtonModule,
+    DaffContainerModule,
 
     FontAwesomeModule,
   ],

diff --git a/apps/daffio/src/app/core/header/containers/marketing-header/marketing-header.component.html b/apps/daffio/src/app/core/header/containers/marketing-header/marketing-header.component.html
@@ -1,14 +1,14 @@
-<daffio-header>
+<daffio-header class="daffio-marketing-header">
   <a routerLink="/" daffio-logo>
     <daff-branding-logo type="full"></daff-branding-logo>
   </a>
   <daff-theme-switch-button theme-toggle></daff-theme-switch-button>
   <a daffioHeaderItem routerLink="{{ link.path }}" *ngFor="let link of links">{{ link.title }}</a>
   <a daffioHeaderItem href="https://github.com/sponsors/graycoreio" target="_blank">Sponsor</a>
-  <a daff-button color="theme-contrast" href="https://github.com/graycoreio/daffodil" rel="noopener noreferrer" target="_blank" quickstart-button>Get Started</a>
+  <a daff-button color="theme-contrast" size="sm" href="https://github.com/graycoreio/daffodil" rel="noopener noreferrer" target="_blank" quickstart-button>Get Started</a>
   <button daff-icon-button color="theme-contrast" aria-label="Open Main Navigation Sidebar"
     sidebar-button
     (click)="openSidebar()">
     <fa-icon [icon]="faBars"></fa-icon>
   </button>
-</daffio-header>
+</daffio-header>
diff --git a/apps/daffio/src/app/core/header/containers/marketing-header/marketing-header.component.scss b/apps/daffio/src/app/core/header/containers/marketing-header/marketing-header.component.scss
@@ -0,0 +1,13 @@
+// @use 'utilities' as daff;
+
+// .daffio-marketing-header {
+// 	padding: 0 24px;
+
+// 	@include daff.breakpoint(mobile) {
+// 		padding: 0 48px;
+// 	}
+
+// 	@include daff.breakpoint(small-laptop) {
+// 		padding: 0;
+// 	}
+// }
diff --git a/apps/daffio/src/app/core/header/containers/marketing-header/marketing-header.component.ts b/apps/daffio/src/app/core/header/containers/marketing-header/marketing-header.component.ts
@@ -10,14 +10,15 @@ import { ToggleSidebar } from '../../../../core/sidebar/actions/sidebar.actions'
 @Component({
   selector: 'daffio-marketing-header-container',
   templateUrl: './marketing-header.component.html',
+  styleUrls: ['./marketing-header.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DaffioMarketingHeaderContainer {
   faBars = faBars;
 
   links: any[] = [
-    { path: '/api', title: 'Docs' },
     { path: '/why-pwa', title: 'Why PWA' },
+    { path: '/api', title: 'Docs' },
   ];
 
   constructor(private store: Store<any>) { }

diff --git a/apps/daffio/src/app/core/header/containers/marketing-header/marketing-header.module.ts b/apps/daffio/src/app/core/header/containers/marketing-header/marketing-header.module.ts
@@ -5,6 +5,7 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
 import { DaffLogoModule } from '@daffodil/branding';
 import { DaffButtonModule } from '@daffodil/design/button';
+import { DaffContainerModule } from '@daffodil/design/container';
 import { DaffThemeSwitchButtonModule } from '@daffodil/theme-switch';
 
 import { DaffioMarketingHeaderContainer } from './marketing-header.component';
@@ -19,6 +20,7 @@ import { DaffioHeaderComponentModule } from '../../components/header.module';
     DaffLogoModule,
     DaffButtonModule,
     DaffThemeSwitchButtonModule,
+    DaffContainerModule,
 
     FontAwesomeModule,
   ],

diff --git a/apps/daffio/src/app/core/sidebar/components/marketing-sidebar/marketing-sidebar.component.ts b/apps/daffio/src/app/core/sidebar/components/marketing-sidebar/marketing-sidebar.component.ts
@@ -11,7 +11,7 @@ import {
 })
 export class DaffioMarketingSidebarComponent {
   links: any[] = [
-    { path: '/api', title: 'Docs' },
     { path: '/why-pwa', title: 'Why PWA' },
+    { path: '/api', title: 'Docs' },
   ];
 }
diff --git a/libs/branding/src/lib/logo/logo.component.scss b/libs/branding/src/lib/logo/logo.component.scss
@@ -1,4 +1,4 @@
 :host {
-	display: block;
+	display: flex;
 	width: 100%;
 }