Add logo and icon

tools/src/app/app.component.html

@@ -1,4 +1,5 @@
 <app-header></app-header>
 <div class="main-content">
   <router-outlet></router-outlet>
-</div>
+</div>
+<app-footer></app-footer>

tools/src/app/app.component.scss

@@ -0,0 +1,4 @@
+.main-content {
+    display: flex;
+    justify-content: center;
+}

tools/src/app/app.component.ts

@@ -3,11 +3,12 @@ import { RouterOutlet } from '@angular/router';
 import { HeaderComponent } from './header/header.component';
 import { PrimeNGConfig } from 'primeng/api';
 import { Lara } from 'primeng/themes/lara';
+import { FooterComponent } from './footer/footer.component';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, HeaderComponent],
+  imports: [RouterOutlet, HeaderComponent, FooterComponent],
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })

tools/src/app/app.routes.ts

@@ -6,6 +6,7 @@ import { JwtToJsonComponent } from '../tools/client-side/jwt-to-json/jwt-to-json
 import { TextToCronComponent } from '../tools/client-side/text-to-cron/text-to-cron.component';
 import { DdsToPngComponent } from '../tools/client-side/dds-to-png/dds-to-png.component';
 import { ImageConverterComponent } from '../tools/server-side/image-converter/image-converter.component';
+import { WordCounterComponent } from '../tools/client-side/word-counter/word-counter.component';
 
 export const routes: Routes = [
   {
@@ -42,6 +43,11 @@ export const routes: Routes = [
     path: 'image-converter',
     pathMatch: 'full',
     component: ImageConverterComponent
+  },
+  {
+    path: 'text-counter',
+    pathMatch: 'full',
+    component: WordCounterComponent
   }
 ];
 

tools/src/app/footer/footer.component.html

@@ -0,0 +1,9 @@
+<footer class="footer">
+  <div class="footer-content">
+    <p>&copy; {{year}} Bytefy. All rights reserved.</p>
+    <nav>
+      <a href="/privacy-policy">Privacy Policy</a>
+      <a href="/terms-of-service">Terms of Service</a>
+    </nav>
+  </div>
+</footer>

tools/src/app/footer/footer.component.scss

@@ -0,0 +1,27 @@
+.footer {
+    color: #a5a5a5;
+    padding: 1rem;
+    text-align: center;
+    bottom: 0;
+    width: 100%;
+  
+    .footer-content {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+  
+      nav {
+        margin-top: 0.5rem;
+  
+        a {
+          color: #a5a5a5;
+          margin: 0 0.5rem;
+          text-decoration: none;
+  
+          &:hover {
+            text-decoration: underline;
+          }
+        }
+      }
+    }
+  }

tools/src/app/footer/footer.component.spec.ts

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { FooterComponent } from './footer.component';
+
+describe('FooterComponent', () => {
+  let component: FooterComponent;
+  let fixture: ComponentFixture<FooterComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FooterComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FooterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

tools/src/app/footer/footer.component.ts

@@ -0,0 +1,11 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-footer',
+  templateUrl: './footer.component.html',
+  styleUrls: ['./footer.component.scss'],
+  standalone: true
+})
+export class FooterComponent {
+  year: number = new Date().getFullYear();
+}

tools/src/app/header/header.component.html

@@ -1 +1,5 @@
-<p-megamenu [model]="items" />
+<p-megamenu [model]="items">
+    <ng-template pTemplate="start">
+        <img class="logotype" src="../../assets/logo-full-orange-beta.png" alt="logo" />
+    </ng-template>
+</p-megamenu>

tools/src/app/header/header.component.scss

@@ -0,0 +1,3 @@
+.logotype {
+    width: 140px;
+}

tools/src/app/header/header.component.ts

@@ -8,6 +8,7 @@ import { AvatarModule } from 'primeng/avatar';
 @Component({
     selector: 'app-header',
     templateUrl: './header.component.html',
+	styleUrls: ['./header.component.scss'],
     standalone: true,
     imports: [MegaMenuModule, ButtonModule, CommonModule, AvatarModule]
 })
@@ -28,6 +29,11 @@ export class HeaderComponent implements OnInit {
 													routerLink: 'ascii-to-text',
 													routerLinkActiveOptions: { exact: true }
 											},
+											{
+												label: 'Text counter',
+												routerLink: 'text-counter',
+												routerLinkActiveOptions: { exact: true }
+											},
 											{
 												label: 'Guid Generator',
 												routerLink: 'guid',

tools/src/app/shared/dual-textarea/dual-textarea.component.html

@@ -10,7 +10,7 @@
         [value]="topValue"
         [placeholder]="topPlaceholder">
       </textarea>
-      <div>
+      <div class="icon">
         <i class="pi pi-arrow-right-arrow-left" style="font-size: 1rem"></i>
       </div>
       <textarea 

tools/src/app/shared/dual-textarea/dual-textarea.component.scss

@@ -2,9 +2,20 @@
     display: flex;
     justify-content: center;
     margin-top: 20px;
-    height: 100vh;
-    width: 98vw;
+    width: 96vw;
     
+    .icon {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      padding: 5px;
+      background-color: var(--primary-contrast);
+
+      i {
+        transform: rotate(90deg);
+      }
+    }
+
     .card {
         display: flex;
         flex-direction: column;

tools/src/app/shared/upload/file-converter.component.scss

@@ -2,8 +2,7 @@
     display: flex;
     justify-content: center;
     margin-top: 20px;
-    height: 100vh;
-    width: 98vw;
+    width: 96vw;
   
     .card {
       display: flex;