Backup

src/app/components/pages/backup-list/backup-list.component.html

@@ -1,4 +1,7 @@
 <div class="container">
+    <div class="title">
+        <h2>Backup List</h2>
+    </div>
     <div class="table">
         <table>
             <thead>
@@ -10,6 +13,7 @@
                         backup volume
                     </th>
                     <th>Copy Name</th>
+                    <th><button (click)="onReset()">reset</button></th>
                 </tr>
             </thead>
             <tbody>
@@ -17,6 +21,7 @@
                     <td><a target="_blank" [href]=backup.projectURL>{{backup.projectName}}</a></td>
                     <td><a target="_blank" [href]=backup.volumeURL>{{backup.volumeName}}</a></td>
                     <td class="copyName" #copy (click)="copyName(copy)">{{backup.volumeName}}-{{currentDate | date: 'dd-MM-YYYY'}}-Cloud</td>
+                    <td class="input"><input type="checkbox" name="status" id="status" /></td>
                 </tr>
             </tbody>
         </table>

src/app/components/pages/backup-list/backup-list.component.scss

@@ -1,5 +1,26 @@
 @import './../../../shared/scss/colors.scss';
 
+.container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    
+}
+
+.title {
+    padding: 2rem 0;
+    margin: 1rem 2rem 0 2rem;
+}
+
+h2{
+    color: $title;
+}
+
+.table{
+    padding: 0rem 2rem;
+}
+
 table {
     margin-left: 1rem;
 }
@@ -12,6 +33,7 @@ table, tr, td {
 th{
     color: $txt-heading-color;
     font-size: 1.5rem;
+    padding-bottom: 3rem;
 }
 
 tbody tr {
@@ -20,26 +42,43 @@ tbody tr {
 
 tbody tr:hover {
     transform: scale(1.03);
-    background-color: $hover-color;
+    background-color: rgba($hover-color,0.5);
     border-collapse: collapse;
     border: none;
 }
 
 td:first-child{
     border-radius: 1rem 0rem 0rem 1rem;
+    padding-left: 2rem;
 }
 
+td:nth-child(3){
+    transition: color 0.09s ease-in-out;
+}
 td:last-child{
     border-radius: 0rem 1rem 1rem 0rem;
+    padding-right: 2rem;
 }
 
+td:nth-child(3):active {
+    color: rgb(168, 168, 168);
+}
 
 td {
-    padding: 1rem;
+    padding: 0.7rem 0.5rem;
+    -webkit-user-select: none; /* Safari */
+    -ms-user-select: none; /* IE 10 and IE 11 */
+    user-select: none; /* Standard syntax */
 }
 
 a{
     text-decoration: none;
+    color: black;
+}
+
+a:active {
+    color: rgb(168, 168, 168);
+
 }
 
 .copyName:hover {

src/app/components/pages/backup-list/backup-list.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, OnInit, QueryList, ViewChild, ViewChildren, viewChildren } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { BackupService } from './backup-list.service';
 import { Backup } from '../../../shared/model/backup.model';
 import { CommonModule } from '@angular/common';
@@ -27,4 +27,7 @@ export class BackupListComponent implements OnInit{
       console.log("Copied")
     }).catch(err=>console.log(err))
   }
+  onReset() {
+
+  }
 }

src/app/shared/scss/colors.scss

@@ -1,4 +1,5 @@
 $bg-color: #FEF9F2;
 $txt-heading-color: #72BF78;
 $txt-color: #1E201E;
-$hover-color: #B6FFA1;
+$hover-color: #B6FFA1;
+$title: #62825D;