Add: header logo link to home

src/app/app.component.css

@@ -1,173 +0,0 @@
-.container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 20px;
-  font-family: Arial, sans-serif;
-}
-
-.controls {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 20px;
-  flex-wrap: wrap;
-  gap: 10px;
-}
-
-.form-group {
-  margin-bottom: 10px;
-  flex: 1;
-  min-width: 200px;
-}
-
-label {
-  display: block;
-  margin-bottom: 5px;
-  font-weight: bold;
-}
-
-/* Fixed height for input/select elements */
-select, input {
-  width: 100%;
-  padding: 8px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  box-sizing: border-box;
-  height: 40px; /* Set a fixed height for both */
-  line-height: 24px; /* Consistent line height */
-  font-size: 14px; /* Consistent font size */
-  appearance: auto; /* Preserve native appearance but ensure consistent sizing */
-}
-
-.date-input {
-  width: 100%;
-  max-width: 100%;
-}
-
-.chart-container {
-  background-color: #f9f9f9;
-  border-radius: 8px;
-  padding: 20px;
-  min-height: 400px;
-  margin-bottom: 20px;
-}
-
-.loading, .error {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 400px;
-}
-
-.error {
-  color: #d9534f;
-}
-
-.price-list {
-  margin-top: 30px;
-}
-
-table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-th, td {
-  padding: 10px;
-  text-align: left;
-  border-bottom: 1px solid #ddd;
-}
-
-th {
-  background-color: #f2f2f2;
-}
-
-tr:hover {
-  background-color: #f5f5f5;
-}
-
-/* Price summary styles - similar to the image */
-.price-summary {
-  background-color: #f9f9f9;
-  border-radius: 8px;
-  padding: 20px;
-  margin-bottom: 20px;
-  border: 1px solid #e0e0e0;
-}
-
-.price-heading {
-  margin-bottom: 10px;
-}
-
-.price-heading h2 {
-  font-size: 1.2rem;
-  margin: 0;
-  color: #1d5631;
-}
-
-.price-subheading {
-  font-size: 0.8rem;
-  color: #666;
-  margin: 5px 0 15px 0;
-  font-style: italic;
-}
-
-.current-price {
-  display: flex;
-  align-items: baseline;
-  margin-bottom: 15px;
-}
-
-.price-label {
-  font-size: 1rem;
-  color: #1d5631;
-  margin-right: 15px;
-}
-
-.price-value {
-  font-size: 2rem;
-  font-weight: bold;
-  color: #1d5631;
-  margin-right: 15px;
-}
-
-.price-unit {
-  font-size: 1rem;
-  font-weight: normal;
-}
-
-.price-change {
-  font-size: 1rem;
-  font-weight: bold;
-  padding: 2px 8px;
-  border-radius: 4px;
-}
-
-.price-increase {
-  background-color: #ff6b6b;
-  color: white;
-}
-
-.price-decrease {
-  background-color: #51cf66;
-  color: white;
-}
-
-.price-extremes {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 20px;
-  font-size: 0.9rem;
-  color: #555;
-}
-
-.price-high {
-  color: #e03131;
-}
-
-.price-low {
-  color: #2b8a3e;
-}
-
-.price-average {
-  color: #555;
-}

src/app/components/header/header.component.html

@@ -1,12 +1,12 @@
 <header class="bg-gradient-to-r from-green-700 via-green-600 to-green-500 shadow-md">
   <div class="container mx-auto px-4 py-4">
     <div class="flex justify-between items-center">
-      <div class="flex items-center">
+      <a class="flex items-center" routerLink="/" routerLinkActive="text-green-100">
         <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
         </svg>
         <h1 class="text-2xl font-bold text-white">Energy Price Dashboard</h1>
-      </div>
+      </a>
 
       <nav class="hidden md:flex space-x-6">
         <a routerLink="/" routerLinkActive="text-green-100" [routerLinkActiveOptions]="{exact: true}" class="text-white hover:text-green-100 transition-colors font-medium">Home</a>