Merge pull request #11 from fga-eps-mds/153-eh08--histórico-de-vídeos

153 eh08  histórico de vídeos

src/app/pages/record/record.component.css

@@ -51,6 +51,7 @@
 
 .checkbox-label {
     display: flex;
+    justify-content: center;
     align-items: center;
     font-size: 1.2rem;
     margin-bottom: 20px;
@@ -60,31 +61,51 @@
 
 
 .checkbox-label input[type="checkbox"] {
-    margin-right: 10px;
+    margin-left: 10px;
     width: 24px;
     height: 24px;
     cursor: pointer;
 }
 
 
-.record-controls {
+.tracking_history {
     text-align: center;
     margin-bottom: 20px;
 }
 
+.record-controls {
+    display: flex;
+    justify-content: center;
+    gap: 10%;
+    text-align: center;
+    margin-bottom: 20px;
+}
 
 .record-controls button {
+    display: flex;
     background-color: #2980b9;
     color: #fff;
     border: none;
     padding: 12px 24px;
     margin: 5px;
-    border-radius:25px;
+    border-radius: 25px;
     cursor: pointer;
     font-size: 1.1rem;
     transition: background-color 0.3s ease, transform 0.2s ease;
 }
 
+.tracking_icons {
+    width: auto;
+    height: auto;
+    margin-right: 10px;
+    margin-top: 3px;
+}
+
+.tracking_icons_history {
+    width: auto;
+    height: auto;
+    margin-right: 10px;
+}
 
 .record-controls button:hover {
     background-color: #1f6395;

src/app/pages/record/record.component.html

@@ -1,27 +1,31 @@
 <div class="record-container">
     <header>
+        <div class="tracking_history my-4">
+            <label class="checkbox-label">
+                <img src="../../../assets/history_icon.svg" alt="history_icon" class="tracking_icons_history">
+                Rastreamento do Histórico
+                <input type="checkbox" [(ngModel)]="trackingEnabled" (change)="toggleTracking(trackingEnabled)" />
+            </label>
+        </div>
         <h1 class="header-title">Histórico de Vídeos</h1>
     </header>
-
     <!-- Controle de Rastreamento com Checkbox -->
     <div class="record-controls my-4">
-        <label class="checkbox-label">
-            <input type="checkbox" [(ngModel)]="trackingEnabled" (change)="toggleTracking(trackingEnabled)" />
-            Rastreamento do Histórico
-        </label>
         <button
-        (click)="sortRecord(true)"
-        class="btn btn-secondary mr-2"
-        [ngClass]="{ 'active': isAscendingActive }"
-    >
-    Ordenar Crescente
+            (click)="sortRecord(true)"
+            class="btn btn-secondary mr-2"
+            [ngClass]="{ 'active': isAscendingActive }"
+            >
+            <img src="../../../assets/up_arrow.svg" alt="up-arrow-icon" class="tracking_icons">
+            Ordenar Crescente
         </button>
         <button
-    (click)="sortRecord(false)"
-    class="btn btn-secondary"
-    [ngClass]="{ 'active': isDescendingActive }"
-    >
-    Ordenar Decrescente
+            (click)="sortRecord(false)"
+            class="btn btn-secondary"
+            [ngClass]="{ 'active': isDescendingActive }"
+            >
+            <img src="../../../assets/down_arrow.svg" alt="down-arrow-icon" class="tracking_icons">
+            Ordenar Decrescente
         </button>
     </div>