OZG-4856 use tailwind config, admin add test layout

560c225a · OZGCloud · 943f2172 · 560c225a · 560c225a · 560c225a
Commit 560c225a authored Jan 30, 2024 by OZGCloud
--- a/alfa-client/apps/admin/src/app/app.component.html
+++ b/alfa-client/apps/admin/src/app/app.component.html
-<div>Admin</div>
+<header class="flex items-center justify-between bg-white p-6">
+  <div class="text-ozgblue font-extrabold">OZG-Cloud Administration</div>
+  <div>Profil</div>
+</header>
+<div class="relative flex w-full flex-auto justify-center">
+  <div class="w-96 bg-slate-300 p-6"><nav>NAV</nav></div>
+  <main class="flex-auto bg-slate-200 p-6">
+    <h2>MAIN</h2>
+    <div><ozg-testbtn /></div>
+  </main>
+</div>
 <router-outlet></router-outlet>
--- a/alfa-client/apps/admin/src/index.html
+++ b/alfa-client/apps/admin/src/index.html
 <!doctype html>
-<html lang="en">
+<html lang="en" class="h-full bg-white antialiased">
  <head>
    <meta charset="utf-8" />
    <title>admin</title>
@@ -7,7 +7,7 @@
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
  </head>
-	<body>
-		<app-root></app-root>
+  <body class="flex min-h-full bg-white text-black dark:bg-slate-100 dark:bg-slate-900">
+    <app-root class="flex w-full flex-col"></app-root>
  </body>
 </html>
--- a/alfa-client/apps/admin/tailwind.config.js
+++ b/alfa-client/apps/admin/tailwind.config.js
-const { createGlobPatternsForDependencies } = require('@nx/angular/tailwind')
-const { join } = require('path')
+const { createGlobPatternsForDependencies } = require('@nx/angular/tailwind');
+const { join } = require('path');
+const sharedTailwindConfig = require('../../libs/design-system/tailwind.config');

 /** @type {import('tailwindcss').Config} */
 module.exports = {
-	content: [join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'), ...createGlobPatternsForDependencies(__dirname)],
+  presets: [sharedTailwindConfig],
+  content: [
+    join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'),
+    ...createGlobPatternsForDependencies(__dirname),
+  ],
  theme: {
-		extend: {}
+    extend: {},
  },
-	plugins: []
-}
+  plugins: [],
+};
--- a/alfa-client/libs/design-system/src/index.ts
+++ b/alfa-client/libs/design-system/src/index.ts
-export * from './lib/anhang/anhang.component'
-export * from './lib/testbtn/testbtn.component'
+export * from './lib/testbtn/testbtn.component';
--- a/alfa-client/libs/design-system/src/lib/testbtn/testbtn.component.ts
+++ b/alfa-client/libs/design-system/src/lib/testbtn/testbtn.component.ts
-import { CommonModule } from '@angular/common'
-import { Component } from '@angular/core'
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';

 @Component({
-	selector: 'lib-testbtn',
+  selector: 'ozg-testbtn',
  standalone: true,
  imports: [CommonModule],
-	template: `<p>testbtn works!</p>`,
-	styles: []
+  template: `<button
+    type="button"
+    class="bg-ozgblue-700 hover:bg-ozgblue-600 focus-visible:outline-ozgblue-800 rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
+  >
+    Design-System Test Button
+  </button>`,
 })
 export class TestbtnComponent {}
--- a/alfa-client/libs/design-system/tailwind.config.js
+++ b/alfa-client/libs/design-system/tailwind.config.js
-const { createGlobPatternsForDependencies } = require('@nx/angular/tailwind')
-const { join } = require('path')
+const { createGlobPatternsForDependencies } = require('@nx/angular/tailwind');
+const { join } = require('path');

 /** @type {import('tailwindcss').Config} */
 module.exports = {
-	content: [join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'), ...createGlobPatternsForDependencies(__dirname)],
+  content: [
+    join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'),
+    ...createGlobPatternsForDependencies(__dirname),
+  ],
  theme: {
-		extend: {}
+    extend: {
+      colors: {
+        ozgblue: {
+          50: 'hsl(200, 100%, 96%)',
+          100: 'hsl(200, 100%, 92%)',
+          200: 'hsl(199, 100%, 85%)',
+          300: 'hsl(197, 100%, 76%)',
+          400: 'hsl(199, 100%, 64%)',
+          500: 'hsl(204, 100%, 56%)',
+          600: 'hsl(209, 100%, 51%)',
+          700: 'hsl(213, 100%, 48%)',
+          800: 'hsl(215, 92%, 40%)',
+          900: 'hsl(213, 85%, 33%)',
+          DEFAULT: 'hsl(215, 75%, 22%)',
        },
-	plugins: []
-}
+      },
+    },
+  },
+  plugins: [],
+};