back to good

apps/fantalytic-public/src/app/app.config.ts

@@ -1,9 +1,9 @@
 import { HttpClientModule } from '@angular/common/http';
 import { ApplicationConfig, importProvidersFrom } from '@angular/core';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { Route, RouterModule, provideRouter } from '@angular/router';
-import { EffectsModule, provideEffects } from '@ngrx/effects';
-import { StoreModule, provideStore } from '@ngrx/store';
+import { Route, RouterModule } from '@angular/router';
+import { EffectsModule } from '@ngrx/effects';
+import { StoreModule } from '@ngrx/store';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 import { FantasyFootballEffects } from './fantasy-football/ngrx/effects/fantasy-football.effects';
 import { fantasyFootballReducer } from './fantasy-football/ngrx/reducer/fantasy-football.reducer';

apps/fantalytic-public/src/app/topics/topics.component.html

@@ -1,12 +1,12 @@
-<main class="topics-container">
-    <section class="topics-text-container">
+<main class="w-[100vw]">
+    <section class="flex flex-col m-2">
         <h3>RSS Feeds:</h3>
-        <select (change)="updateRssFeed($event)">
+        <select class="w-[25%]" (change)="updateRssFeed($event)">
             <option *ngFor="let rss of rssFeeds | keyvalue" [value]="rss.value">{{rss.value}}</option>
         </select>
     </section>
-    <section class="topics-card-container">
-        <mat-card *ngFor="let topic of topics$ | async">
+    <section class="w-full flex flex-wrap">
+        <mat-card class="lg:w-[30%] sm:w-full m-2" *ngFor="let topic of topics$ | async">
             <mat-card-header>
                 <mat-card-title>{{topic.title}}</mat-card-title>
             </mat-card-header>

apps/fantalytic-public/src/app/topics/topics.component.scss

@@ -1,54 +1,6 @@
-@media screen and (max-width: 800px) {
-    .topics-container {
-        h3 {
-            margin: .5rem;
-            text-align: justify;
-        }
+mat-card-actions {
+    a {
+        position: absolute;
+        bottom: 0;
     }
-    .topics-card-container {
-        grid-template-columns: 1fr;
-    }
-
-}
-
-@media screen and (min-width: 801px) {
-    .topics-container h3 {
-        margin: 2rem;
-    }
-    .topics-card-container {
-        grid-template-columns: repeat(3, 1fr);
-    }
-}
-
-.topics-container {
-    width: 100vw;
-    select {
-        height: 2rem;
-        width: 15rem;
-        font-size: 1rem;
-        color: rgb(3,41,42);
-    }
-    .topics-text-container {
-       display: flex;
-       align-items: center;
-
-    }
-    .topics-card-container {
-        display: grid;
-        row-gap: 2rem;
-        column-gap: 2rem;
-        margin: 0 2rem;
-
-    }
-
-    .mat-card {
-        .mat-card-actions {
-            a {
-                position: absolute;
-                bottom: 0;
-            }
-        }
-
-    }
-
 }

apps/fantalytic-public/src/styles.scss

@@ -1,33 +1,47 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 /* You can add global styles to this file, and also import other style files */
 @import url('./styles/dark-theme.scss');
 @import url('./styles/light-theme.scss');
 @import '~ag-grid-community/styles/ag-grid.css';
 @import '~ag-grid-community/styles/ag-theme-alpine.css';
 
+html,
+body {
+  height: 100%;
+}
+body {
+  margin: 0;
+  font-family: Roboto, 'Helvetica Neue', sans-serif;
+}
 
-html, body { height: 100%; }
-body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
-
-div, span, p, h3, section, main {
-    background-color: var(--background-color);
-    color: var(--font-color);
+div,
+span,
+p,
+h3,
+section,
+main {
+  background-color: var(--background-color);
+  color: var(--font-color);
 }
 
 h1 {
-    font-size: 2.5rem;
-    font-weight: 500;
+  font-size: 2.5rem;
+  font-weight: 500;
 }
 
 h2 {
-    font-size: 2rem;
-    font-weight: 400;
+  font-size: 2rem;
+  font-weight: 400;
 }
 
 h3 {
-    font-size: 1.5rem;
-    font-weight: 200;
+  font-size: 1.5rem;
+  font-weight: 200;
 }
 
 .mat-button-wrapper {
-    color: unset;
-}
+  color: unset;
+}

apps/fantalytic-public/tailwind.config.js

@@ -0,0 +1,14 @@
+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),
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};