Re-style and re-organize

tools/src/app/app.component.html

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

tools/src/app/app.component.scss

@@ -1,4 +1,22 @@
 .main-content {
     display: flex;
     justify-content: center;
+}
+
+::ng-deep {
+    .p-panel {
+      border-radius: unset !important;
+    }
+    
+    .p-panel-header {
+      background: unset !important;
+    }
+
+    .p-fileupload-header {
+      background: unset !important;
+    }
+
+    .p-fileupload {
+        background: unset !important;
+    }
 }

tools/src/app/app.component.ts

@@ -16,6 +16,9 @@ export class AppComponent {
   title = 'tools';
 
   constructor(private config: PrimeNGConfig) {
-    this.config.theme.set({ preset: Lara });
+    this.config.theme.set({ 
+      preset: Lara,
+      darkModeSelector: '.darkmode' 
+    });
   }
 }

tools/src/app/app.routes.ts

@@ -7,7 +7,7 @@ import { TextToCronComponent } from '../tools/client-side/text-to-cron/text-to-c
 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';
-import { ColorPickerComponent } from '../tools/client-side/color-picker/color-picker/color-picker.component';
+import { ColorPickerComponent } from '../tools/client-side/color-picker/color-picker.component';
 
 export const routes: Routes = [
   {

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

@@ -1,5 +1,5 @@
 <p-megamenu [model]="items">
     <ng-template pTemplate="start">
-        <img class="logotype" src="../../assets/logo-full-orange-beta.png" alt="logo" />
+        <img [ngClass]="{'logotype': true, 'darkMode': !isDarkMode}" src="../../assets/logo-full-orange-beta.png" alt="logo" />
     </ng-template>
 </p-megamenu>

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

@@ -1,3 +1,12 @@
 .logotype {
     width: 140px;
+}
+
+.darkMode {
+    filter: invert(1);
+}
+
+::ng-deep .p-megamenu-col-12 {
+    flex-direction: row !important;
+    display: flex !important;
 }

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

@@ -8,27 +8,26 @@ import { AvatarModule } from 'primeng/avatar';
 @Component({
     selector: 'app-header',
     templateUrl: './header.component.html',
-	styleUrls: ['./header.component.scss'],
+		styleUrls: ['./header.component.scss'],
     standalone: true,
     imports: [MegaMenuModule, ButtonModule, CommonModule, AvatarModule]
 })
 export class HeaderComponent implements OnInit {
   items: MegaMenuItem[] | undefined;
+	isDarkMode: boolean = true;
 
   ngOnInit() {
+			this.isDarkMode = window?.matchMedia?.('(prefers-color-scheme:dark)')?.matches;
+
       this.items = [
           {
-						label: 'Text Tools',
+						label: 'Tools',
-						icon: 'pi pi-box',
+						icon: 'pi pi-wrench',
 						items: [
 							[
 								{
+									label: 'Text Tools',
 									items: [
-											{
-													label: 'Ascii to text',
-													routerLink: 'ascii-to-text',
-													routerLinkActiveOptions: { exact: true }
-											},
 											{
 												label: 'Text counter',
 												routerLink: 'text-counter',
@@ -39,11 +38,6 @@ export class HeaderComponent implements OnInit {
 												routerLink: 'guid',
 												routerLinkActiveOptions: { exact: true }
 											},
-											{
-												label: 'Base64 Converter',
-												routerLink: 'base64-converter',
-												routerLinkActiveOptions: { exact: true }
-											},
 											{
 												label: 'Jwt decoder',
 												routerLink: 'jwt-decoder',
@@ -53,14 +47,18 @@ export class HeaderComponent implements OnInit {
 												label: 'Text to Cron Expression',
 												routerLink: 'text-to-cron',
 												routerLinkActiveOptions: { exact: true }
-											},
-											{
-												label: 'Color picker',
-												routerLink: 'color-picker',
-												routerLinkActiveOptions: { exact: true }
 											}
 									],
-									
+								},
+								{
+									label: 'Media Tools',
+									items: [
+										{
+											label: 'Color picker',
+											routerLink: 'color-picker',
+											routerLinkActiveOptions: { exact: true }
+										}
+									]
 								}
 							]
             ]
@@ -71,6 +69,7 @@ export class HeaderComponent implements OnInit {
 						items: [
 							[
 								{
+									label: 'Convert',
 									items: [
 										{
 											label: 'DDS to PNG',
@@ -81,6 +80,16 @@ export class HeaderComponent implements OnInit {
 											label: 'Image Converter',
 											routerLink: 'image-converter',
 											routerLinkActiveOptions: { exact: true }
+										},
+										{
+											label: 'Base64 Converter',
+											routerLink: 'base64-converter',
+											routerLinkActiveOptions: { exact: true }
+										},
+										{
+											label: 'Ascii to text',
+											routerLink: 'ascii-to-text',
+											routerLinkActiveOptions: { exact: true }
 										}
 									]
 								}

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

@@ -1,24 +1,22 @@
-<div class="card flex justify-center">
+<page [header]="title">
-    <p-panel [header]="title">
+  <ng-template pTemplate="header">
-      <ng-template pTemplate="header">
+    <p-tag *ngIf="isBeta" severity="warn" value="Beta"></p-tag>
-        <p-tag *ngIf="isBeta" severity="warn" value="Beta"></p-tag>
+  </ng-template>
-      </ng-template>
+  <textarea 
-      <textarea 
+    (keyup)="onTopChange($event)"
-        (keyup)="onTopChange($event)"
+    [disabled]="topDisabled"
-        [disabled]="topDisabled"
+    pTextarea
-        pTextarea
+    [value]="topValue"
-        [value]="topValue"
+    [placeholder]="topPlaceholder">
-        [placeholder]="topPlaceholder">
+  </textarea>
-      </textarea>
+  <div class="icon">
-      <div class="icon">
+    <i class="pi pi-arrow-right-arrow-left" style="font-size: 1rem"></i>
-        <i class="pi pi-arrow-right-arrow-left" style="font-size: 1rem"></i>
+  </div>
-      </div>
+  <textarea 
-      <textarea 
+    (keyup)="onBottomChange($event)"
-        (keyup)="onBottomChange($event)"
+    [disabled]="bottomDisabled"
-        [disabled]="bottomDisabled"
+    pTextarea
-        pTextarea
+    [value]="bottomValue"
-        [value]="bottomValue"
+    [placeholder]="bottomPlaceholder">
-        [placeholder]="bottomPlaceholder">
+  </textarea>
-      </textarea>
+</page>
-    </p-panel>
-</div>

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

@@ -1,62 +1,49 @@
-:host {
+
+.icon {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  padding: 5px;
+  background-color: var(--primary-contrast);
+
+  i {
+    transform: rotate(90deg);
+  }
+}
+.wrapper {
     display: flex;
-    justify-content: center;
+    flex-direction: column;
-    margin-top: 20px;
+    width: 1140px;
-    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;
-        width: 1140px;
-    }
-    
-    .wrapper {
-        display: flex;
-        flex-direction: column;
-        width: 1140px;
-      
-      .conversion {
-            justify-content: center;
-            display: flex;
-            align-items: center;
-            height: 70vh;
   
-        p-floatlabel {
+  .conversion {
-            width: 30vw;
+        justify-content: center;
-        }
+        display: flex;
-      }
+        align-items: center;
-    }
+        height: 70vh;
 
-    textarea {
+    p-floatlabel {
-        width: 100%;
+        width: 30vw;
-        height: 175px;
-        padding: 12px 20px;
-        box-sizing: border-box;
-        border-radius: 4px;
-        font-size: 16px;
-        resize: none;
-        background-color: var(--primary-contrast);
-        color: var(--text-color)
-    }
-
-    
-  ::ng-deep .p-panel-header {
-    justify-content: unset !important;
-
-    * {
-      margin-right: 5px;
     }
   }
-}
+}
+
+textarea {
+    width: 100%;
+    height: 175px;
+    padding: 12px 20px;
+    box-sizing: border-box;
+    border-radius: 4px;
+    font-size: 16px;
+    resize: none;
+    background-color: var(--primary-contrast);
+    color: var(--text-color)
+}
+
+
+::ng-deep .p-panel-header {
+justify-content: unset !important;
+
+* {
+  margin-right: 5px;
+}
+}

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

@@ -5,6 +5,7 @@ import { FloatLabelModule } from 'primeng/floatlabel';
 import { InputTextareaModule } from 'primeng/inputtextarea';
 import { PanelModule } from 'primeng/panel';
 import { TagModule } from 'primeng/tag';
+import { PageComponent } from '../page/page.component';
 
 @Component({
   selector: 'app-dual-textarea',
@@ -17,7 +18,8 @@ import { TagModule } from 'primeng/tag';
     FormsModule, 
     PanelModule, 
     CommonModule,
-    TagModule
+    TagModule,
+    PageComponent
   ]
 
 })

tools/src/app/shared/page/page.component.html

@@ -0,0 +1,5 @@
+<div class="card">
+  <p-panel [header]="header">
+    <ng-content></ng-content>
+  </p-panel>
+</div>

tools/src/app/shared/page/page.component.scss

@@ -0,0 +1,20 @@
+:host {
+    display: flex;
+    justify-content: center;
+    margin-top: 20px;
+    width: 96vw;
+    
+    .card {
+        display: flex;
+        flex-direction: column;
+        width: 1140px;
+    }
+
+    ::ng-deep .p-panel-header {
+        justify-content: unset !important;
+
+        * {
+            margin-right: 5px;
+        }
+    }
+}

tools/src/app/shared/page/page.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 { PageComponent } from './page.component';
+
+describe('PageComponent', () => {
+  let component: PageComponent;
+  let fixture: ComponentFixture<PageComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PageComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

tools/src/app/shared/page/page.component.ts

@@ -0,0 +1,13 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { PanelModule } from 'primeng/panel';
+
+@Component({
+  selector: 'page',
+  templateUrl: './page.component.html',
+  styleUrls: ['./page.component.scss'],
+  standalone: true,
+  imports: [PanelModule]
+})
+export class PageComponent {
+  @Input() header: string = '';
+}

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

@@ -1,76 +1,74 @@
-<div class="card flex justify-center">
+<page [header]="title">
-  <p-panel [header]="title">
+  <ng-template pTemplate="header">
-    <ng-template pTemplate="header">
+    <p-tag *ngIf="isBeta" severity="warn" value="Beta"></p-tag>
-      <p-tag *ngIf="isBeta" severity="warn" value="Beta"></p-tag>
+  </ng-template>
-    </ng-template>
 
-    <p-fileUpload 
+  <p-fileUpload 
-      name="file" 
+    name="file" 
-      (onSelect)="onFileSelect($event)" 
+    (onSelect)="onFileSelect($event)" 
-      [auto]="true"
+    [auto]="true"
-      [accept]="accept"
+    [accept]="accept"
-      [previewWidth]="isPreview ? '50px' : '0px'"
+    [previewWidth]="isPreview ? '50px' : '0px'"
-      mode="advanced"
+    mode="advanced"
-      [url]="url"
+    [url]="url"
-      [withCredentials]="true"
+    [withCredentials]="true"
-      [method]="method"
+    [method]="method"
-      [headers]="requestHeaders"
+    [headers]="requestHeaders"
-    >
+  >
-    <ng-template
+  <ng-template
-      *ngIf="fileTypeSelector"
+    *ngIf="fileTypeSelector"
-      pTemplate="header"
+    pTemplate="header"
-      let-files
+    let-files
-      let-chooseCallback="chooseCallback"
+    let-chooseCallback="chooseCallback"
-      let-clearCallback="clearCallback"
+    let-clearCallback="clearCallback"
-      let-uploadCallback="uploadCallback"
+    let-uploadCallback="uploadCallback"
-    >
+  >
-      <p-button
+    <p-button
-        (onClick)="choose($event, chooseCallback)"
+      (onClick)="choose($event, chooseCallback)"
-        icon="pi pi-images"
+      icon="pi pi-images"
-        [rounded]="true"
+      [rounded]="true"
-        [outlined]="true"
+      [outlined]="true"
-      />
-
-      <p-autoComplete
-        *ngIf="fileTypeSelector"
-        (onSelect)="onAutoCompleteDropdownClick($event)"
-        [virtualScroll]="true"
-        [suggestions]="filteredFiles"
-        [virtualScrollItemSize]="34"
-        (completeMethod)="onAutoComplete($event)" 
-        optionLabel="name"
-        [dropdown]="true"
-        placeholder="Select a output format"
-      />
-
-      <p-button
-        (onClick)="onUploadEvent()"
-        icon="pi pi-file-arrow-up"
-        [rounded]="true"
-        [outlined]="true"
     />
-    </ng-template>
 
-    <ng-template *ngIf="fileTypeSelector" pTemplate="empty">
+    <p-autoComplete
-        <div>Drag and drop files to here to upload.</div>
+      *ngIf="fileTypeSelector"
-    </ng-template>
+      (onSelect)="onAutoCompleteDropdownClick($event)"
+      [virtualScroll]="true"
+      [suggestions]="filteredFiles"
+      [virtualScrollItemSize]="34"
+      (completeMethod)="onAutoComplete($event)" 
+      optionLabel="name"
+      [dropdown]="true"
+      placeholder="Select a output format"
+    />
 
-    </p-fileUpload>
+    <p-button
-    <p-table [value]="processedFiles" *ngIf="processedFiles.length != 0">
+      (onClick)="onUploadEvent()"
-      <ng-template pTemplate="header">
+      icon="pi pi-file-arrow-up"
-        <tr>
+      [rounded]="true"
-          <th>Name</th>
+      [outlined]="true"
-          <th>Format</th>
+  />
-          <th>Download</th>
+  </ng-template>
-        </tr>
+
-      </ng-template>
+  <ng-template *ngIf="fileTypeSelector" pTemplate="empty">
-      <ng-template pTemplate="body" let-file>
+      <div>Drag and drop files to here to upload.</div>
-        <tr>
+  </ng-template>
-          <td>{{file.name}}</td>
+
-          <td>{{file.format}}</td>
+  </p-fileUpload>
-          <td><a [href]="file.link" [download]="file.name">{{file.name}}</a></td>
+  <p-table [value]="processedFiles" *ngIf="processedFiles.length != 0">
-        </tr>
+    <ng-template pTemplate="header">
-      </ng-template>
+      <tr>
-    </p-table>
+        <th>Name</th>
-  </p-panel>
+        <th>Format</th>
-</div>
+        <th>Download</th>
+      </tr>
+    </ng-template>
+    <ng-template pTemplate="body" let-file>
+      <tr>
+        <td>{{file.name}}</td>
+        <td>{{file.format}}</td>
+        <td><a [href]="file.link" [download]="file.name">{{file.name}}</a></td>
+      </tr>
+    </ng-template>
+  </p-table>
+</page>

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

@@ -1,26 +1,13 @@
-:host {
+.conversion {
-    display: flex;
+  display: flex;
-    justify-content: center;
+  justify-content: center;
-    margin-top: 20px;
+  margin-top: 1rem;
-    width: 96vw;
+}
-  
-    .card {
-      display: flex;
-      flex-direction: column;
-      width: 1140px;
-    }
-  
-    .conversion {
-      display: flex;
-      justify-content: center;
-      margin-top: 1rem;
-    }
 
-    ::ng-deep .p-panel-header {
+::ng-deep .p-panel-header {
-      justify-content: unset !important;
+  justify-content: unset !important;
 
-      * {
+  * {
-        margin-right: 5px;
+    margin-right: 5px;
-      }
+  }
-    }
 }

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

@@ -9,6 +9,7 @@ import { AutoCompleteCompleteEvent, AutoCompleteModule, AutoCompleteSelectEvent
 import { BadgeModule } from 'primeng/badge';
 import { HttpHeaders } from '@angular/common/http';
 import { TagModule } from 'primeng/tag';
+import { PageComponent } from '../page/page.component';
 
 interface ProcessedFile {
   name: string;
@@ -30,7 +31,8 @@ interface ProcessedFile {
     TableModule,
     AutoCompleteModule,
     BadgeModule,
-    TagModule
+    TagModule,
+    PageComponent
   ]
 })
 export class FileConverterComponent implements OnInit {

tools/src/styles.scss

@@ -8,4 +8,18 @@ body .p-component
   font-optical-sizing: auto;
   font-weight: 304;
   font-style: normal;
+}
+
+* {
+  border-radius: unset !important;
+}
+
+.p-megamenu {
+  background: unset !important;
+}
+
+.p-megamenu-overlay {
+  background: var(--p-surface-800) !important;
+  border: unset !important;
+  border-radius: unset !important;
 }

tools/src/tools/client-side/color-picker/color-picker.component.html

@@ -0,0 +1,7 @@
+<page header="Color Picker">
+    <div class="color-picker">
+        <label for="color-input">Choose Color:</label>
+        <input #colorPicker type="color" id="color-input" [formControl]="colorControl" (input)="onColorChange(colorPicker.value)" />
+        <input #colorText type="text" [formControl]="colorControl" (input)="onColorChange(colorText.value)" />
+    </div>
+</page>

tools/src/tools/client-side/color-picker/color-picker.component.scss

@@ -0,0 +1,19 @@
+.color-picker {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+}
+  
+.color-picker input[type="color"] {
+  width: 50px;
+  height: 50px;
+  border: none;
+  cursor: pointer;
+}
+
+.color-picker input[type="text"] {
+  padding: 5px;
+  font-size: 16px;
+  width: 100px;
+}

tools/src/tools/client-side/color-picker/color-picker.component.ts

@@ -3,6 +3,7 @@ import { Component } from '@angular/core';
 import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { ButtonModule } from 'primeng/button';
 import { InputTextModule } from 'primeng/inputtext';
+import { PageComponent } from '../../../app/shared/page/page.component';
 
 @Component({
   selector: 'app-color-picker',
@@ -12,7 +13,8 @@ import { InputTextModule } from 'primeng/inputtext';
     FormsModule,
     InputTextModule,
     ButtonModule,
-    ReactiveFormsModule
+    ReactiveFormsModule,
+    PageComponent
   ],
   templateUrl: './color-picker.component.html',
   styleUrl: './color-picker.component.scss'

tools/src/tools/client-side/color-picker/color-picker/color-picker.component.html

@@ -1,5 +0,0 @@
-<div class="color-picker">
-    <label for="color-input">Choose Color:</label>
-    <input #colorPicker type="color" id="color-input" [formControl]="colorControl" (input)="onColorChange(colorPicker.value)" />
-    <input #colorText type="text" [formControl]="colorControl" (input)="onColorChange(colorText.value)" />
-</div>

tools/src/tools/client-side/color-picker/color-picker/color-picker.component.scss

@@ -1,18 +0,0 @@
-.color-picker {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-  }
-  
-  .color-picker input[type="color"] {
-    width: 50px;
-    height: 50px;
-    border: none;
-    cursor: pointer;
-  }
-  
-  .color-picker input[type="text"] {
-    padding: 5px;
-    font-size: 16px;
-    width: 100px;
-  }

tools/src/tools/client-side/guid/guid.component.html

@@ -1,3 +1,4 @@
+<!-- Custom design, no page component -->
 <p-panel header="Guid Generator">
   <div>
     <div *ngFor="let setting of settings" class="guid-row">