Add Highcharts as an allowed CommonJS dependency and update styling i…

…n usage component and index.html
austenstone · Jan 24, 2024 · c547221 · c547221
1 parent 6988801
commit c547221
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 25 deletions.
diff --git a/angular.json b/angular.json
@@ -33,7 +33,10 @@
               "@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.scss"
             ],
-            "scripts": []
+            "scripts": [],
+            "allowedCommonJsDependencies": [
+              "highcharts"
+            ]
           },
           "configurations": {
             "production": {

diff --git a/src/app/components/usage/usage.component.html b/src/app/components/usage/usage.component.html
@@ -1,5 +1,5 @@
 <div *ngIf="!usage" class="flex-center-horizontally full-width">
-  <h1 class="mat-headline-1" style="user-select: none;">Github Usage Report</h1>
+  <h1 class="mat-headline-1" style="user-select: none; font-weight: 800; text-align: center;">Github Usage Report</h1>
 </div>
 <div class="flex-center-horizontally full-width">
   <app-file-upload [text]="status" (fileText)="onFileText($event)"></app-file-upload>
@@ -44,7 +44,7 @@ <h1 class="mat-headline-1" style="user-select: none;">Github Usage Report</h1>
   <div class="flex-center-column full-width" style="text-align: center;">
     <p>This application helps you visualize your <a target="_blank"
         href="https://docs.github.com/en/billing/managing-billing-for-github-actions/viewing-your-github-actions-usage">GitHub
-        Usage Report</a>.<br> All processing is done client side and your usage report never leaves your computer.</p>
+        Usage Report</a>.<br> <i>All processing is done client side and your usage report never leaves your computer.</i></p>
     <p>To get started go get your usage report and then select it by clicking "Choose File" above.</p>
     <button mat-raised-button color="accent" (click)="navigateToBilling()" style="margin-top: 40px;">
       <mat-icon>download</mat-icon>

diff --git a/src/index.html b/src/index.html
@@ -2,16 +2,16 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>GithubActionsUsageReport</title>
+  <title>Github Usage Report</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="icon" type="image/x-icon" href="github-mark-white.svg">
   <link rel="preconnect" href="https://fonts.gstatic.com">
   <!-- <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet"> -->
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
+  <!-- <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet"> -->
 </head>
 <body class="mat-typography mat-app-background">
   <app-root></app-root>

diff --git a/src/material.theme.scss b/src/material.theme.scss
@@ -74,50 +74,55 @@ $github-purple-palette: (
 $typography: mat.define-typography-config(
   $font-family: '"Noto Sans", sans-serif'
 );
+@include mat.typography-hierarchy($typography);
+@include mat.all-component-typographies($typography);
+
+$primary: mat.define-palette($github-palette);
+$accent: mat.define-palette($github-purple-palette);
 
-// Define a dark theme
 $dark-theme: mat.define-dark-theme((
  color: (
-  primary: mat.define-palette($github-palette),
-  accent: mat.define-palette($github-purple-palette),
+  primary: $primary,
+  accent: $accent,
  ),
   typography: $typography,
   density: 0,
 ));
 
-$backgroundColor: #24292f;
+$backgroundColor: #24292f; // Github background color
 $color: map.get($dark-theme, "color");
 $colorBackground: map.get($color, "background");
 $colorBackground: map.set($colorBackground, "background", 
 $backgroundColor);
 $color: map.set($color, "background", $colorBackground);
 $dark-theme: map.set($dark-theme, "color", $color);
 
-// Define a light theme
 $light-theme: mat.define-light-theme((
  color: (
-  primary: mat.define-palette($github-palette),
-  accent: mat.define-palette($github-purple-palette),
+  primary: $primary,
+  accent: $accent,
  ),
 ));
 
-// Apply the dark theme by default
 @include mat.core-theme($dark-theme);
 @include mat.all-component-themes($dark-theme);
 
-// Apply the light theme only when the user prefers light themes.
 @media (prefers-color-scheme: light) {
- // Use the `-color` mixins to only apply color styles without reapplying the same
- // typography and density styles.
  @include mat.core-color($light-theme);
- @include mat.all-component-themes($light-theme);
-}
+ @include mat.all-component-colors($light-theme);
 
-@include mat.typography-hierarchy($typography);
-@include mat.all-component-typographies($typography);
+ :root {
+   color-scheme: light;
+ }
+
+ a {
+   color: mat.get-theme-color($dark-theme, primary, default);
+ }
+}
 
 @media (prefers-color-scheme: dark) {
-  a {
-    color: #238636;
-  }
-}
+ :root {
+   color-scheme: dark;
+ }
+}
+