🚧 Configuration du style et de l'onboarding de l'app

mckenziearts · mckenziearts · commit ee4b4978421f · 2022-09-17T21:08:52.000+01:00
diff --git a/src/index.html b/src/index.html
@@ -16,7 +16,7 @@
   <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100;300;400;500;600;700&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
 </head>
-<body class="font-sans text-slate-500 antialiased">
-  <app-root></app-root>
+<body class="font-sans antialiased text-slate-500">
+  <cosna-root></cosna-root>
 </body>
 </html>
diff --git a/src/main.ts b/src/main.ts
@@ -10,7 +10,7 @@ Sentry.init({
   dsn: environment.sentryDsn,
   integrations: [
     new BrowserTracing({
-      tracingOrigins: ['localhost', environment.baseUrl],
+      tracingOrigins: ['localhost', environment.apiUrl],
       routingInstrumentation: Sentry.routingInstrumentation,
     }),
   ],
diff --git a/src/sass/_material.scss b/src/sass/_material.scss
@@ -1,11 +1,32 @@
-/**
- * Material Custom style
- * @see https://material.io/guidelines/style/color.html#color-color-palette
-*/
-.mat-tab-labels {
-  background-color: theme('colors.slate.50') !important;
-}
-
-.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar {
-  background-color: theme('colors.green.600') !important;
-}
+// Custom Theming for Angular Material
+// For more information: https://material.angular.io/guide/theming
+@use '@angular/material' as mat;
+
+// 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/
+$cosna-admin-primary: mat.define-palette(mat.$green-palette);
+$cosna-admin-accent: mat.define-palette(mat.$orange-palette);
+
+// The warn palette is optional (defaults to orange).
+$cosna-admin-warn: mat.define-palette(mat.$amber-palette);
+
+// Create the theme object. A theme consists of configurations for individual
+// theming systems such as "color" or "typography".
+$cosna-admin-theme: mat.define-light-theme((
+  color: (
+    primary: $cosna-admin-primary,
+    accent: $cosna-admin-accent,
+    warn: $cosna-admin-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($cosna-admin-theme);
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -5,7 +5,7 @@ module.exports = {
   important: true,
   darkMode: 'class',
   content: [
-    "./src/**/*.{html,ts}",
+    './src/**/*.{html,ts}',
   ],
   theme: {
     extend: {
@@ -40,6 +40,12 @@ module.exports = {
       fontFamily: {
         sans: ['Inter var', ...fontFamily.sans],
         mono: ['Roboto Mono', ...fontFamily.mono],
+      },
+      maxWidth: {
+        '8xl': '90rem',
+      },
+      screens: {
+        '2xl': '1536px',
       }
     },
   },
