add material

AlexZhidkov · Dec 13, 2023 · 1d6e578 · 1d6e578
1 parent 3bc3c61
commit 1d6e578
Show file tree

Hide file tree

Showing 6 changed files with 894 additions and 11 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,11 +11,13 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^17.0.0",
+    "@angular/cdk": "^17.0.3",
     "@angular/common": "^17.0.0",
     "@angular/compiler": "^17.0.0",
     "@angular/core": "^17.0.0",
     "@angular/fire": "^17.0.0",
     "@angular/forms": "^17.0.0",
+    "@angular/material": "^17.0.3",
     "@angular/platform-browser": "^17.0.0",
     "@angular/platform-browser-dynamic": "^17.0.0",
     "@angular/router": "^17.0.0",

diff --git a/src/app/app.config.ts b/src/app/app.config.ts
@@ -7,24 +7,26 @@ import { getAuth, provideAuth } from '@angular/fire/auth';
 import { getAnalytics, provideAnalytics, ScreenTrackingService, UserTrackingService } from '@angular/fire/analytics';
 import { getFirestore, provideFirestore } from '@angular/fire/firestore';
 import { getStorage, provideStorage } from '@angular/fire/storage';
+import { provideAnimations } from '@angular/platform-browser/animations';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideRouter(routes),
     importProvidersFrom(provideFirebaseApp(() => initializeApp({
-      "projectId": "reflectalplatform",
-      "appId": "1:558440967425:web:1cda7736bd9a4f6157ff00",
-      "storageBucket": "reflectalplatform.appspot.com",
-      "apiKey": "AIzaSyDRGfqmS0-esFs4ItEZMVmaLUVp4DEZNl0",
-      "authDomain": "reflectalplatform.firebaseapp.com",
-      "messagingSenderId": "558440967425",
-      "measurementId": "G-TKQB97G9Q3"
+        "projectId": "reflectalplatform",
+        "appId": "1:558440967425:web:1cda7736bd9a4f6157ff00",
+        "storageBucket": "reflectalplatform.appspot.com",
+        "apiKey": "AIzaSyDRGfqmS0-esFs4ItEZMVmaLUVp4DEZNl0",
+        "authDomain": "reflectalplatform.firebaseapp.com",
+        "messagingSenderId": "558440967425",
+        "measurementId": "G-TKQB97G9Q3"
     }))),
     importProvidersFrom(provideAuth(() => getAuth())),
     importProvidersFrom(provideAnalytics(() => getAnalytics())),
     importProvidersFrom(provideFirestore(() => getFirestore())),
     importProvidersFrom(provideStorage(() => getStorage())),
     ScreenTrackingService,
     UserTrackingService,
-  ]
+    provideAnimations()
+]
 };
diff --git a/src/favicon.ico b/src/favicon.ico
diff --git a/src/index.html b/src/index.html
@@ -6,8 +6,10 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <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">
 </head>
-<body>
+<body class="mat-typography">
   <app-root></app-root>
 </body>
 </html>
diff --git a/src/styles.scss b/src/styles.scss
@@ -1 +1,39 @@
+
+// Custom Theming for Angular Material
+// For more information: https://material.angular.io/guide/theming
+@use '@angular/material' as mat;
+// Plus imports for other components in your app.
+
+// Include the common styles for Angular Material. We include this here so that you only
+// have to load a single css file for Angular Material in your app.
+// Be sure that you only ever include this mixin once!
+@include mat.core();
+
+// Define the palettes for your theme using the Material Design palettes available in palette.scss
+// (imported above). For each palette, you can optionally specify a default, lighter, and darker
+// hue. Available color palettes: https://material.io/design/color/
+$reflectal-primary: mat.define-palette(mat.$indigo-palette);
+$reflectal-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
+
+// The warn palette is optional (defaults to red).
+$reflectal-warn: mat.define-palette(mat.$red-palette);
+
+// Create the theme object. A theme consists of configurations for individual
+// theming systems such as "color" or "typography".
+$reflectal-theme: mat.define-light-theme((
+  color: (
+    primary: $reflectal-primary,
+    accent: $reflectal-accent,
+    warn: $reflectal-warn,
+  )
+));
+
+// Include theme styles for core and each component used in your app.
+// Alternatively, you can import and @include the theme mixins for each component
+// that you are using.
+@include mat.all-component-themes($reflectal-theme);
+
 /* You can add global styles to this file, and also import other style files */
+
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }