basic table and some theming

sancsoft · Apr 24, 2024 · 7129bc7 · 7129bc7
1 parent 0c047e1
commit 7129bc7
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 141 deletions.
diff --git a/src/angular/hq/src/app/clients/clients.component.html b/src/angular/hq/src/app/clients/clients.component.html
@@ -1 +1,57 @@
-<router-outlet></router-outlet>
+<router-outlet></router-outlet>
+
+<table class="min-w-full border-collapse border">
+  <thead class="border">
+    <tr>
+      <th class="">Client Name</th>
+      <th class="">Rate</th>
+      <th class="">Billing Email</th>
+      <th class="">Official Name</th>
+      <th class=""><button>Client</button></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td class="">48HrBooks</td>
+      <td class="">$105.00</td>
+      <td class="">billiningEmail&#64;48HrBooks.com</td>
+      <td class="">Official Name - Probably longer than the Name</td>
+      <td><a>VIEW</a></td>
+    </tr>
+    <tr>
+      <td class="">ABB</td>
+      <td class="">$115.00</td>
+      <td class="">billiningEmail&#64;abb.com</td>
+      <td class="">Official Name - Probably longer than the Name</td>
+      <td><a>VIEW</a></td>
+    </tr>
+    <tr>
+      <td class="">JDM</td>
+      <td class="">$100.00</td>
+      <td class="">billiningEmail&#64;jdm.com</td>
+      <td class="">Official Name - Probably longer than the Name</td>
+      <td><a>VIEW</a></td>
+    </tr>
+    <tr>
+      <td class="">Milliken</td>
+      <td class="">$100.00</td>
+      <td class="">billiningEmail&#64;milliken.com</td>
+      <td class="">Official Name - Probably longer than the Name</td>
+      <td><a>VIEW</a></td>
+    </tr>
+    <tr>
+      <td class="">XB</td>
+      <td class="">$100.00</td>
+      <td class="">billiningEmail&#64;xb.com</td>
+      <td class="">Official Name - Probably longer than the Name</td>
+      <td><a>VIEW</a></td>
+    </tr>
+    <tr>
+      <td class="">Zomedica</td>
+      <td class="">$100.00</td>
+      <td class="">billiningEmail&#64;zomedica.com</td>
+      <td class="">Official Name - Probably longer than the Name</td>
+      <td><a>VIEW</a></td>
+    </tr>
+  </tbody>
+</table>
diff --git a/src/angular/hq/src/index.html b/src/angular/hq/src/index.html
@@ -1,15 +1,13 @@
 <!doctype html>
-<html class="h-full bg-gray-100" lang="en">
+<html class="h-full" lang="en">
 <head>
   <meta charset="utf-8">
   <title>HQ</title>
   <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 class="mat-typography h-full">
+<body class="h-full">
   <app-root></app-root>
 </body>
 </html>
diff --git a/src/angular/hq/src/styles.scss b/src/angular/hq/src/styles.scss
@@ -1,110 +1,7 @@
-
-// 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();
-
-$md-gold: (
-    50 : #fff5e6,
-    100 : #ffe7c1,
-    200 : #ffd798,
-    300 : #ffc76e,
-    400 : #ffbb4f,
-    500 : #ffaf30,
-    600 : #ffa82b,
-    700 : #ff9f24,
-    800 : #ff961e,
-    900 : #ff8613,
-    A100 : #ffffff,
-    A200 : #fffcfa,
-    A400 : #ffe0c7,
-    A700 : #ffd2ad,
-    contrast: (
-        50 : #000000,
-        100 : #000000,
-        200 : #000000,
-        300 : #000000,
-        400 : #000000,
-        500 : #000000,
-        600 : #000000,
-        700 : #000000,
-        800 : #000000,
-        900 : #000000,
-        A100 : #000000,
-        A200 : #000000,
-        A400 : #000000,
-        A700 : #000000,
-    )
-);
-
-$md-orange: (
-    50 : #fdefe3,
-    100 : #fbd8b9,
-    200 : #f8be8a,
-    300 : #f5a45b,
-    400 : #f39138,
-    500 : #f17d15,
-    600 : #ef7512,
-    700 : #ed6a0f,
-    800 : #eb600c,
-    900 : #e74d06,
-    A100 : #ffffff,
-    A200 : #ffe5db,
-    A400 : #ffbfa8,
-    A700 : #ffad8f,
-    contrast: (
-        50 : #000000,
-        100 : #000000,
-        200 : #000000,
-        300 : #000000,
-        400 : #000000,
-        500 : #000000,
-        600 : #000000,
-        700 : #000000,
-        800 : #ffffff,
-        900 : #ffffff,
-        A100 : #000000,
-        A200 : #000000,
-        A400 : #000000,
-        A700 : #000000,
-    )
-);
-
-// 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/
-$HQ-primary: mat.define-palette($md-orange);
-$HQ-accent: mat.define-palette(mat.$blue-grey-palette, A200, A100, A400);
-
-// The warn palette is optional (defaults to red).
-$HQ-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".
-$HQ-theme: mat.define-light-theme((
-  color: (
-    primary: $HQ-primary,
-    accent: $HQ-accent,
-    warn: $HQ-warn,
-  ),
-  typography: mat.define-typography-config(),
-  density: 0
-));
-
-// 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($HQ-theme);
+/* Import Google fonts */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wdth,wght@0,75..100,300..800;1,75..100,300..800&family=Rajdhani&display=swap");
 
 /* You can add global styles to this file, and also import other style files */
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-html, body { height: 100%; }
-body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
diff --git a/src/angular/hq/tailwind.config.js b/src/angular/hq/tailwind.config.js
@@ -1,40 +1,35 @@
 /** @type {import('tailwindcss').Config} */
+const defaultTheme = require("tailwindcss/defaultTheme");
+
 module.exports = {
-  content: [
-    "./src/**/*.{html,ts}",
-  ],
+  content: ["./src/**/*.{html,ts}"],
   theme: {
     extend: {
       colors: {
-        orange: {
-          50: '#fef8ee',
-          100: '#fef0d6',
-          200: '#fbdcad',
-          300: '#f8c279',
-          400: '#f59e42',
-          500: '#f17d15',
-          600: '#e36713',
-          700: '#bc4f12',
-          800: '#963e16',
-          900: '#793515',
-          950: '#411909',  
+        transparent: "transparent",
+        current: "currentColor",
+        orange: "#F17D15",
+        "lt-blue": "#537BB5",
+        "dk-blue": "#28313E",
+        accent: "#B2EDF1",
+        black: "#000",
+        white: "#fff",
+        green: "#33B578",
+        red: "#852420",
+        yellow: "#CBC34E",
+        gray: {
+          100: "#E9E9E9",
+          200: "#B3B3B3",
+          300: "#707070",
+          400: "#3E3E3E",
+          500: "#313131",
+          600: "#242424",
         },
-        gold: {
-          50: '#fff9eb',
-          100: '#ffeec6',
-          200: '#ffda88',
-          300: '#ffc24a',
-          400: '#ffaf30',
-          500: '#f98507',
-          600: '#dd5f02',
-          700: '#b74006',
-          800: '#94300c',
-          900: '#7a280d',
-          950: '#461302',
-        }
-      }
+      },
+      fontFamily: {
+        sans: ['"Open Sans"', ...defaultTheme.fontFamily.sans],
+      },
     },
   },
   plugins: [],
-}
-
+};