use the primary color (blue) for save buttons instead of the Amazon orange

I replaced moment with luxon.
And I am working on my own date picker.

pdb-js/src/app/dashboard-page/dashboard/add-plot-dialog/add-plot-dialog.component.html

@@ -18,5 +18,5 @@
 
 <div mat-dialog-actions align="end">
   <button mat-button mat-dialog-close >Cancel</button>
-  <button class="save-button" mat-button mat-dialog-close (click)="onSaveClick()">Save</button>
+  <button class="save-button" mat-flat-button mat-dialog-close (click)="onSaveClick()">Save</button>
 </div>

pdb-js/src/app/dashboard-page/dashboard/add-text-dialog/add-text-dialog.component.html

@@ -34,5 +34,5 @@
 </div>
 <div mat-dialog-actions align="end">
   <button mat-button mat-dialog-close (click)="close()">Cancel</button>
-  <button class="save-button" mat-button mat-dialog-close (click)="onSaveClick()">Save</button>
+  <button class="save-button" mat-flat-button mat-dialog-close (click)="onSaveClick()">Save</button>
 </div>

pdb-js/src/app/dashboard-page/dashboard/dashboard.component.html

@@ -85,7 +85,7 @@
   <div class="toolbar">
     <button mat-button  (click)="addText()">Add Text</button>
     <button mat-button (click)="addPlot()">Add Plot</button>
-    <button class="save-button" mat-button (click)="save()" [disabled]="!isDirty()">Save</button>
+    <button class="save-button" mat-flat-button (click)="save()" [disabled]="!isDirty()">Save</button>
     <div id="filter-date-range">
       Date range: <app-date-picker #datePicker (dateValueSelected)="updateDateRange($event)" ></app-date-picker>
     </div>

pdb-js/src/app/visualization-page/visualization-page.component.ts

@@ -137,8 +137,6 @@ export class VisualizationPageComponent implements OnInit, AfterViewInit {
   }
 
   ngOnInit() {
-    (<any> window).initDatePicker();
-
     this.plotTypes = this.plotService.getPlotTypes();
     this.selectedPlotType.push(this.plotTypes[0]);
 

pdb-js/src/assets/css/daterangepicker-3.1.css

@@ -1,410 +0,0 @@
-.daterangepicker {
-  position: absolute;
-  color: inherit;
-  background-color: #fff;
-  border-radius: 4px;
-  border: 1px solid #ddd;
-  width: 278px;
-  max-width: none;
-  padding: 0;
-  margin-top: 7px;
-  top: 100px;
-  left: 20px;
-  z-index: 3001;
-  display: none;
-  font-family: arial;
-  font-size: 15px;
-  line-height: 1em;
-}
-
-.daterangepicker:before, .daterangepicker:after {
-  position: absolute;
-  display: inline-block;
-  border-bottom-color: rgba(0, 0, 0, 0.2);
-  content: '';
-}
-
-.daterangepicker:before {
-  top: -7px;
-  border-right: 7px solid transparent;
-  border-left: 7px solid transparent;
-  border-bottom: 7px solid #ccc;
-}
-
-.daterangepicker:after {
-  top: -6px;
-  border-right: 6px solid transparent;
-  border-bottom: 6px solid #fff;
-  border-left: 6px solid transparent;
-}
-
-.daterangepicker.opensleft:before {
-  right: 9px;
-}
-
-.daterangepicker.opensleft:after {
-  right: 10px;
-}
-
-.daterangepicker.openscenter:before {
-  left: 0;
-  right: 0;
-  width: 0;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.daterangepicker.openscenter:after {
-  left: 0;
-  right: 0;
-  width: 0;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.daterangepicker.opensright:before {
-  left: 9px;
-}
-
-.daterangepicker.opensright:after {
-  left: 10px;
-}
-
-.daterangepicker.drop-up {
-  margin-top: -7px;
-}
-
-.daterangepicker.drop-up:before {
-  top: initial;
-  bottom: -7px;
-  border-bottom: initial;
-  border-top: 7px solid #ccc;
-}
-
-.daterangepicker.drop-up:after {
-  top: initial;
-  bottom: -6px;
-  border-bottom: initial;
-  border-top: 6px solid #fff;
-}
-
-.daterangepicker.single .daterangepicker .ranges, .daterangepicker.single .drp-calendar {
-  float: none;
-}
-
-.daterangepicker.single .drp-selected {
-  display: none;
-}
-
-.daterangepicker.show-calendar .drp-calendar {
-  display: block;
-}
-
-.daterangepicker.show-calendar .drp-buttons {
-  display: block;
-}
-
-.daterangepicker.auto-apply .drp-buttons {
-  display: none;
-}
-
-.daterangepicker .drp-calendar {
-  display: none;
-  max-width: 270px;
-}
-
-.daterangepicker .drp-calendar.left {
-  padding: 8px 0 8px 8px;
-}
-
-.daterangepicker .drp-calendar.right {
-  padding: 8px;
-}
-
-.daterangepicker .drp-calendar.single .calendar-table {
-  border: none;
-}
-
-.daterangepicker .calendar-table .next span, .daterangepicker .calendar-table .prev span {
-  color: #fff;
-  border: solid black;
-  border-width: 0 2px 2px 0;
-  border-radius: 0;
-  display: inline-block;
-  padding: 3px;
-}
-
-.daterangepicker .calendar-table .next span {
-  transform: rotate(-45deg);
-  -webkit-transform: rotate(-45deg);
-}
-
-.daterangepicker .calendar-table .prev span {
-  transform: rotate(135deg);
-  -webkit-transform: rotate(135deg);
-}
-
-.daterangepicker .calendar-table th, .daterangepicker .calendar-table td {
-  white-space: nowrap;
-  text-align: center;
-  vertical-align: middle;
-  min-width: 32px;
-  width: 32px;
-  height: 24px;
-  line-height: 24px;
-  font-size: 12px;
-  border-radius: 4px;
-  border: 1px solid transparent;
-  white-space: nowrap;
-  cursor: pointer;
-}
-
-.daterangepicker .calendar-table {
-  border: 1px solid #fff;
-  border-radius: 4px;
-  background-color: #fff;
-}
-
-.daterangepicker .calendar-table table {
-  width: 100%;
-  margin: 0;
-  border-spacing: 0;
-  border-collapse: collapse;
-}
-
-.daterangepicker td.available:hover, .daterangepicker th.available:hover {
-  background-color: #eee;
-  border-color: transparent;
-  color: inherit;
-}
-
-.daterangepicker td.week, .daterangepicker th.week {
-  font-size: 80%;
-  color: #ccc;
-}
-
-.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
-  background-color: #fff;
-  border-color: transparent;
-  color: #999;
-}
-
-.daterangepicker td.in-range {
-  background-color: #ebf4f8;
-  border-color: transparent;
-  color: #000;
-  border-radius: 0;
-}
-
-.daterangepicker td.start-date {
-  border-radius: 4px 0 0 4px;
-}
-
-.daterangepicker td.end-date {
-  border-radius: 0 4px 4px 0;
-}
-
-.daterangepicker td.start-date.end-date {
-  border-radius: 4px;
-}
-
-.daterangepicker td.active, .daterangepicker td.active:hover {
-  background-color: #357ebd;
-  border-color: transparent;
-  color: #fff;
-}
-
-.daterangepicker th.month {
-  width: auto;
-}
-
-.daterangepicker td.disabled, .daterangepicker option.disabled {
-  color: #999;
-  cursor: not-allowed;
-  text-decoration: line-through;
-}
-
-.daterangepicker select.monthselect, .daterangepicker select.yearselect {
-  font-size: 12px;
-  padding: 1px;
-  height: auto;
-  margin: 0;
-  cursor: default;
-}
-
-.daterangepicker select.monthselect {
-  margin-right: 2%;
-  width: 56%;
-}
-
-.daterangepicker select.yearselect {
-  width: 40%;
-}
-
-.daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {
-  width: 50px;
-  margin: 0 auto;
-  background: #eee;
-  border: 1px solid #eee;
-  padding: 2px;
-  outline: 0;
-  font-size: 12px;
-}
-
-.daterangepicker .calendar-time {
-  text-align: center;
-  margin: 4px auto 0 auto;
-  line-height: 30px;
-  position: relative;
-}
-
-.daterangepicker .calendar-time select.disabled {
-  color: #ccc;
-  cursor: not-allowed;
-}
-
-.daterangepicker .drp-buttons {
-  clear: both;
-  text-align: right;
-  padding: 8px;
-  border-top: 1px solid #ddd;
-  display: none;
-  line-height: 12px;
-  vertical-align: middle;
-}
-
-.daterangepicker .drp-selected {
-  display: inline-block;
-  font-size: 12px;
-  padding-right: 8px;
-}
-
-.daterangepicker .drp-buttons .btn {
-  margin-left: 8px;
-  font-size: 12px;
-  font-weight: bold;
-  padding: 4px 8px;
-}
-
-.daterangepicker.show-ranges.single.rtl .drp-calendar.left {
-  border-right: 1px solid #ddd;
-}
-
-.daterangepicker.show-ranges.single.ltr .drp-calendar.left {
-  border-left: 1px solid #ddd;
-}
-
-.daterangepicker.show-ranges.rtl .drp-calendar.right {
-  border-right: 1px solid #ddd;
-}
-
-.daterangepicker.show-ranges.ltr .drp-calendar.left {
-  border-left: 1px solid #ddd;
-}
-
-.daterangepicker .ranges {
-  float: none;
-  text-align: left;
-  margin: 0;
-}
-
-.daterangepicker.show-calendar .ranges {
-  margin-top: 8px;
-}
-
-.daterangepicker .ranges ul {
-  list-style: none;
-  margin: 0 auto;
-  padding: 0;
-  width: 100%;
-}
-
-.daterangepicker .ranges li {
-  font-size: 12px;
-  padding: 8px 12px;
-  cursor: pointer;
-}
-
-.daterangepicker .ranges li:hover {
-  background-color: #eee;
-}
-
-.daterangepicker .ranges li.active {
-  background-color: #08c;
-  color: #fff;
-}
-
-/*  Larger Screen Styling */
-@media (min-width: 564px) {
-  .daterangepicker {
-    width: auto;
-  }
-
-  .daterangepicker .ranges ul {
-    width: 140px;
-  }
-
-  .daterangepicker.single .ranges ul {
-    width: 100%;
-  }
-
-  .daterangepicker.single .drp-calendar.left {
-    clear: none;
-  }
-
-  .daterangepicker.single .ranges, .daterangepicker.single .drp-calendar {
-    float: left;
-  }
-
-  .daterangepicker {
-    direction: ltr;
-    text-align: left;
-  }
-
-  .daterangepicker .drp-calendar.left {
-    clear: left;
-    margin-right: 0;
-  }
-
-  .daterangepicker .drp-calendar.left .calendar-table {
-    border-right: none;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
-  .daterangepicker .drp-calendar.right {
-    margin-left: 0;
-  }
-
-  .daterangepicker .drp-calendar.right .calendar-table {
-    border-left: none;
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-
-  .daterangepicker .drp-calendar.left .calendar-table {
-    padding-right: 8px;
-  }
-
-  .daterangepicker .ranges, .daterangepicker .drp-calendar {
-    float: left;
-  }
-}
-
-@media (min-width: 730px) {
-  .daterangepicker .ranges {
-    width: auto;
-  }
-
-  .daterangepicker .ranges {
-    float: left;
-  }
-
-  .daterangepicker.rtl .ranges {
-    float: right;
-  }
-
-  .daterangepicker .drp-calendar.left {
-    clear: none !important;
-  }
-}

pdb-js/src/index.html

@@ -8,61 +8,13 @@
   <link rel="icon" type="image/x-icon" href="/assets/img/favicon.png">
   
   <script type="text/javascript" src="/assets/js/jquery-3.6.0.min.js"></script>
-  <script type="text/javascript" src="/assets/js/moment-2.29.1.min.js"></script>
-  <script type="text/javascript" src="/assets/js/daterangepicker-3.1.js"></script>
   <script type="text/javascript" src="/assets/js/invaders.js"></script>
-  <link rel="stylesheet" type="text/css" href="/assets/css/daterangepicker-3.1.css" />
   <link rel="stylesheet" type="text/css" href="/assets/css/invaders.css" />
 </head>
 <body>
   <app-root></app-root>
   <script>
 
-    function initDatePicker() {
-      $('input[name="dates"]').daterangepicker({
-          timePicker: true,
-          minDate: "2017-01-01",
-          maxDate: "2029-12-31",
-          maxYear: parseInt(moment().format('YYYY'),10),
-          timePicker24Hour: true,
-          timePickerSeconds: true,
-          showDropdowns: true, // drop downs for selecting year and month
-          locale: {
-            format: 'YYYY-MM-DD HH:mm:ss',
-            "firstDay": 1 // monday is the first day of the week
-          },
-          ranges: {
-              'Today': [moment().startOf('day'), moment().endOf('day')],
-              'Yesterday': [moment().subtract(1, 'days').startOf('day'), moment().subtract(1, 'days').endOf('day')],
-              'Last 7 Days': [moment().subtract(6, 'days').startOf('day'), moment().endOf('day')],
-              'This Week': [moment().startOf('week'), moment().endOf('day')],
-              'Last Week': [moment().subtract(7, 'days').startOf('week'), moment().subtract(7, 'days').endOf('week')],
-              'Last 30 Days': [moment().subtract(29, 'days').startOf('day'), moment().endOf('day')],
-              'This Month': [moment().startOf('month'), moment().endOf('month').endOf('day')],
-              'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
-              'Last 3 Months': [moment().subtract(3, 'month').startOf('month'),moment().subtract(1, 'month').endOf('month').endOf('day')],
-              'This Year': [moment().startOf('year'),moment().endOf('month').endOf('day')],
-              'Last Year': [moment().subtract(1, 'year').startOf('year'),moment().subtract(1, 'year').endOf('year')],
-          },
-        });
-    }
-
-    function initSimpleDatePicker() {
-      $('input[name="dates"]').daterangepicker({
-          timePicker: true,
-          minDate: "2017-01-01",
-          maxDate: "2029-12-31",
-          maxYear: parseInt(moment().format('YYYY'),10),
-          timePicker24Hour: true,
-          timePickerSeconds: true,
-          showDropdowns: true, // drop downs for selecting year and month
-          locale: {
-            format: 'YYYY-MM-DD HH:mm:ss',
-            "firstDay": 1 // monday is the first day of the week
-          },
-        });
-    }
-
     $( document ).ready(function() {
         initInvaders('results');
         document.addEventListener("invadersPause", function(event) {

pdb-js/src/main.ts

@@ -2,30 +2,11 @@ import { enableProdMode, importProvidersFrom } from '@angular/core';
 
 
 import { environment } from './environments/environment';
-import { MAT_DIALOG_DEFAULT_OPTIONS, MatDialogModule } from '@angular/material/dialog';
+import { MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material/dialog';
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { MarkdownModule } from 'ngx-markdown';
-import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { DragDropModule } from '@angular/cdk/drag-drop';
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import { MatBadgeModule } from '@angular/material/badge';
-import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatGridListModule } from '@angular/material/grid-list';
-import { MatInputModule } from '@angular/material/input';
-import { MatRadioModule } from '@angular/material/radio';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { MatSelectModule } from '@angular/material/select';
-import { MatSnackBarModule } from '@angular/material/snack-bar';
-import { MatTabsModule } from '@angular/material/tabs';
-import { MatTableModule } from '@angular/material/table';
-import { MatTooltipModule } from '@angular/material/tooltip';
+import {  bootstrapApplication } from '@angular/platform-browser';
 import { provideAnimations } from '@angular/platform-browser/animations';
-import { OverlayModule } from '@angular/cdk/overlay';
 import { AppComponent } from './app/app.component';
 import { provideRouter, Routes, withDebugTracing } from '@angular/router';
 
@@ -55,32 +36,12 @@ bootstrapApplication(AppComponent, {
         provideRouter(routes, withDebugTracing()),
         importProvidersFrom(
           MarkdownModule.forRoot(), 
-          BrowserModule,
-          FormsModule, 
-          ReactiveFormsModule, 
-          DragDropModule, 
-          MatAutocompleteModule, 
-          MatBadgeModule, 
-          MatButtonModule, 
-          MatCardModule, 
-          MatCheckboxModule, 
-          MatDialogModule, 
-          MatFormFieldModule, 
-          MatGridListModule, 
-          MatInputModule, 
-          MatRadioModule, 
-          MatProgressBarModule, 
-          MatProgressSpinnerModule, 
-          MatSelectModule, 
-          MatSnackBarModule, 
-          MatTabsModule, 
-          MatTableModule, 
-          MatTooltipModule, 
-          OverlayModule),
+          ),
         {
             provide: MAT_DIALOG_DEFAULT_OPTIONS,
             useValue: { hasBackdrop: true },
-        }, provideHttpClient(withInterceptorsFromDi()),
+        }, 
+        provideHttpClient(withInterceptorsFromDi()),
         provideAnimations()
     ]
 })

pdb-js/src/styles.scss

@@ -65,6 +65,8 @@ grey
 */
 $background-color: #CBD7F4;
 
+
+
 .mat-mdc-option span.mdc-list-item__primary-text,
 .mdc-list-item__primary-text {
   font-size: 1rem;
@@ -78,6 +80,12 @@ mat-form-field .mat-mdc-option span.mdc-list-item__primary-text{
   font-size: 14px;
   margin: 0;
   box-sizing: border-box;
+
+  // set colors for flat buttons (directive mat-flat-button)
+  // make them blue with white text when active and transparent with the default text color of light grey when disabled
+  --mdc-filled-button-label-text-color: white;
+  --mdc-filled-button-container-color: #005cbb;
+  --mdc-filled-button-disabled-container-color: none;
 }
 
 h1 {
@@ -105,13 +113,6 @@ button[disabled] .icon-inline {
   opacity: 0.5;
 }
 
-button.save-button {
-  background-color: #ff9900;
-}
-button.save-button:disabled {
-  background-color: inherit;
-}
-
 .icon-tiny {
   width: 1em;
   height: 1em;