@sumaris-net/ngx-components 18.13.0 → 18.14.0

package/src/app/shared/version/versions.ts

@@ -0,0 +1,89 @@
+const regexp = {
+  POSITIVE_INTEGER: /^\d+$/,
+  VERSION_PART_REGEXP: /^[0-9]+|alpha[0-9]+|beta[0-9]+|rc[0-9]+|[0-9]+-SNAPSHOT$/,
+};
+
+export class VersionUtils {
+  static compare = compareVersionNumbers;
+  static isCompatible = isVersionCompatible;
+  static isSame = isSameVersion;
+}
+
+/**
+ * Compare two software version numbers (e.g. 1.7.1)
+ * Returns:
+ *
+ *  0 if they're identical
+ *  negative if v1 < v2
+ *  positive if v1 > v2
+ *  Nan if they in the wrong format
+ *
+ *  E.g.:
+ *
+ *  assert(version_number_compare("1.7.1", "1.6.10") > 0);
+ *  assert(version_number_compare("1.7.1", "1.7.10") < 0);
+ *
+ *  "Unit tests": http://jsfiddle.net/ripper234/Xv9WL/28/
+ *
+ *  Taken from http://stackoverflow.com/a/6832721/11236
+ */
+export function compareVersionNumbers(v1, v2) {
+  const v1parts = v1.split('.');
+  const v2parts = v2.split('.');
+
+  // First, validate both numbers are true version numbers
+
+  if (!validateParts(v1parts) || !validateParts(v2parts)) {
+    return NaN;
+  }
+
+  for (let i = 0; i < v1parts.length; ++i) {
+    if (v2parts.length === i) {
+      return 1;
+    }
+
+    if (v1parts[i] === v2parts[i]) {
+      continue;
+    }
+    if (v1parts[i] > v2parts[i]) {
+      return 1;
+    }
+    return -1;
+  }
+
+  if (v1parts.length !== v2parts.length) {
+    return -1;
+  }
+
+  return 0;
+}
+
+function validateParts(parts) {
+  for (let i = 0; i < parts.length; i++) {
+    let isNumber = regexp.POSITIVE_INTEGER.test(parts[i]);
+    // First part MUST be an integer
+    if (i === 0 && !isNumber) return false;
+    // If not integer, should be 'alpha', 'beta', etc.
+    if (!isNumber) {
+      if (!regexp.VERSION_PART_REGEXP.test(parts[i])) return false;
+      // Remove '-SNAPSHOT', as it should never be in prod
+      parts[i] = parts[i].replace('-SNAPSHOT', '');
+      // Check again if numeric
+      isNumber = regexp.POSITIVE_INTEGER.test(parts[i]);
+    }
+
+    // Convert string to int (need by compare operators)
+    if (isNumber) parts[i] = parseInt(parts[i]);
+  }
+  return true;
+}
+
+export function isVersionCompatible(minVersion, actualVersion): boolean {
+  // DEV ONLY
+  //console.debug(`[http] Checking actual version {${actualVersion}} is compatible with min expected version {${minVersion}}`);
+  return compareVersionNumbers(minVersion, actualVersion) <= 0;
+}
+
+export function isSameVersion(v1, v2): boolean {
+  return compareVersionNumbers(v1, v2) === 0;
+}

package/src/app/social/config/social.config.ts

@@ -0,0 +1,10 @@
+import { FormFieldDefinition } from '../../shared/form/field.model';
+
+export const SOCIAL_CONFIG_OPTIONS = Object.freeze({
+  ENABLE_NOTIFICATION_ICONS: <FormFieldDefinition>{
+    key: 'sumaris.social.notification.icons.enable',
+    label: 'CONFIGURATION.OPTIONS.SOCIAL.ENABLE_NOTIFICATION_ICONS',
+    type: 'boolean',
+    defaultValue: false,
+  },
+});

package/src/app/social/feed/discourse/discourse-feed.service.ts

@@ -0,0 +1,216 @@
+import { Inject, inject, Injectable, Optional } from '@angular/core';
+
+import { Promise } from '@rx-angular/cdk/zone-less/browser';
+import { DiscourseUtils } from './discourse.utils';
+import DiscourseAPI from 'discourse2';
+import { JsonFeed, JsonFeedUtils } from '../feed.model';
+import { firstArrayValue, isEmptyArray, isNotEmptyArray, isNotNilOrBlank } from '../../../shared/functions';
+import { from, Observable, switchMap } from 'rxjs';
+import { filter, map, mergeMap } from 'rxjs/operators';
+import { StartableService } from '../../../shared/services/startable-service.class';
+import { NetworkService } from '../../../core/services/network.service';
+import { RxStateProperty, RxStateSelect } from '../../../shared/rx-state/rx-state.decorators';
+import { LocalSettingsService } from '../../../core/services/local-settings.service';
+import { RxState } from '@rx-angular/state';
+import { ENVIRONMENT, Environment } from '../../../../environments/environment.class';
+import { LoadResult } from '../../../shared/services/entity-service.class';
+import { UrlUtils } from '../../../shared/file/url.utils';
+import { IFeedService } from '../feed.service';
+
+export interface DiscourseFeedServiceState {
+  locale: string;
+  feedUrls?: string[];
+}
+
+@Injectable({ providedIn: 'root' })
+export class DiscourseFeedService extends StartableService<DiscourseFeedServiceState> implements IFeedService {
+  private discourseApis = new Map<string, DiscourseAPI>();
+  private _logPrefix = '[discourse-feed-service] ';
+
+  private _state = new RxState<DiscourseFeedServiceState>();
+  private network = inject(NetworkService);
+
+  @RxStateSelect() locale$: Observable<string>;
+  @RxStateSelect() feedUrls$: Observable<string[]>;
+
+  @RxStateProperty() locale: string;
+  @RxStateProperty() feedUrls: string[];
+
+  constructor(
+    private settings: LocalSettingsService,
+    @Optional() @Inject(ENVIRONMENT) protected environment: Environment
+  ) {
+    super(settings);
+
+    this._debug = !environment.production;
+    if (this._debug) console.debug('[discourse-feed-service] Creating service');
+
+    this._state.connect('locale', this.settings.locale$);
+
+    this._state.connect(
+      'feedUrls',
+      this.locale$.pipe(
+        filter(isNotNilOrBlank),
+        map((locale) => (locale && environment.feed?.jsonFeed?.[locale]) ?? [])
+      )
+    );
+  }
+
+  protected async ngOnStart(): Promise<DiscourseFeedServiceState> {
+    await this.settings.ready();
+    console.debug(`${this._logPrefix}Service started`, this.settings.locale, this.feedUrls);
+    return {
+      locale: this.settings.locale,
+      feedUrls: this.feedUrls,
+    };
+  }
+
+  watchAll(opts?: { maxAgeInMonths?: number; maxContentLength?: number }): Observable<LoadResult<JsonFeed>> {
+    if (!this.started) {
+      return from(this.start()).pipe(switchMap(() => this.watchAll(opts)));
+    }
+    return this.feedUrls$.pipe(
+      filter(isNotEmptyArray),
+      mergeMap((urls) => this.loadAll(urls, opts))
+    );
+  }
+
+  getHomeUrl(feed?: JsonFeed) {
+    const feedUrl = feed?.feed_url ?? firstArrayValue(this.feedUrls);
+    return feedUrl ? UrlUtils.getRootUrl(feedUrl) : undefined;
+  }
+
+  getTagUrl(feed: JsonFeed, tag: string): string {
+    if (!feed || !tag) throw new Error("Missing 'feed' or 'tag' argument");
+    const baseUrl = this.getHomeUrl(feed);
+    return feed.tag_template?.replace('{tag}', tag) ?? baseUrl + '/tag/' + tag;
+  }
+
+  async load(
+    url: string,
+    opts?: {
+      locale?: string;
+      maxAgeInMonths?: number;
+      maxContentLength?: number;
+      // Internal options (for recursive calls)
+      closeApis?: boolean;
+      depth?: number;
+    }
+  ): Promise<JsonFeed> {
+    const { data } = await this.loadAll([url], opts);
+    return data?.[0];
+  }
+
+  async loadAll(
+    urls?: string[],
+    opts?: {
+      locale?: string;
+      maxAgeInMonths?: number;
+      maxContentLength?: number;
+      // Internal options (for recursive calls)
+      closeApis?: boolean;
+      depth?: number;
+    }
+  ): Promise<LoadResult<JsonFeed>> {
+    await this.ready();
+    urls = urls ?? this.feedUrls;
+    opts = {
+      maxAgeInMonths: opts?.maxAgeInMonths ?? this.environment.feed?.maxAgeInMonths,
+      maxContentLength: opts?.maxContentLength ?? this.environment.feed?.maxContentLength,
+      locale: this.settings.locale,
+      depth: 0,
+      closeApis: true,
+      ...opts,
+    };
+    const feeds = await Promise.all(
+      (urls || []).map(async (url) => {
+        try {
+          // Get JSON
+          const json = await this.network.fetch(url);
+          console.debug(`${this._logPrefix}Loaded JSON from ${url}`, json);
+          if (JsonFeedUtils.isJsonFeed(json)) {
+            // Migrate old version
+            let feed = JsonFeedUtils.migrateFeed(json);
+
+            // Resolve items (e.g. using feed.next_url)
+            feed = await this.resolveFeedItems(feed, { ...opts, depth: opts?.depth ?? 0 });
+
+            // Truncate html
+            JsonFeedUtils.truncateFeedItemsHtml(feed, opts);
+
+            return isNotEmptyArray(feed?.items) ? [feed] : [];
+          }
+
+          // Get discourse
+          if (DiscourseUtils.isDiscourseObject(json)) {
+            const api = this.getOrCreateDiscourseApi(url);
+            return await DiscourseUtils.getFeedsByUrl(url, { ...opts, api });
+          }
+
+          return undefined;
+        } catch (err) {
+          if (err?.status === 404) {
+            console.error(`${this._logPrefix} Error while fetching feed at ${url}. 404 (Not found)`);
+          } else {
+            console.error(`${this._logPrefix} Error while fetching feed at ${url}`, err);
+          }
+          return Promise.resolve([]);
+        }
+      })
+    );
+
+    if (opts?.closeApis !== false) {
+      this.closeApis();
+    }
+
+    const data = feeds.flat();
+
+    return { data, total: data.length };
+  }
+
+  protected getOrCreateDiscourseApi(url: string) {
+    const baseUrl = DiscourseUtils.getDiscourseBaseUrl(url);
+    let api = this.discourseApis.get(baseUrl);
+    if (!api) {
+      api = new DiscourseAPI(baseUrl);
+      this.discourseApis.set(baseUrl, api);
+    }
+    return api;
+  }
+
+  protected closeApis() {
+    this.discourseApis.clear();
+  }
+
+  protected async resolveFeedItems(json: JsonFeed, opts?: { maxContentLength?: number; depth?: number }): Promise<JsonFeed> {
+    if (!json) return json;
+
+    // Load items
+    if (isEmptyArray(json.items) && isNotNilOrBlank(json.next_url)) {
+      const depth = opts?.depth ?? 0;
+      if (depth >= 3) {
+        console.warn(`${this._logPrefix}Max depth reached (${depth}) for ${json.feed_url}`);
+        return json;
+      }
+
+      // Load items
+      const feed = await this.load(json.next_url, { ...opts, closeApis: false, depth: depth + 1 });
+
+      if (isEmptyArray(feed?.items)) {
+        return json;
+      }
+
+      // Merge with the input json
+      return {
+        ...json,
+        title: json.title ?? feed.title,
+        home_page_url: json.home_page_url ?? feed.home_page_url,
+        authors: isNotEmptyArray(json.authors) ? json.authors : feed.authors,
+        items: feed.items,
+        tag_template: json.tag_template ?? feed.tag_template,
+      };
+    }
+
+    return json;
+  }
+}

package/src/app/social/feed/discourse/discourse.model.ts

@@ -0,0 +1,9 @@
+import type { operations } from 'discourse2/esm/schema';
+
+export type DiscourseCategory = operations['listCategoryTopics']['responses']['200']['content']['application/json'];
+export type DiscourseCategoryTopic = DiscourseCategory['topic_list']['topics'][0];
+export type DiscourseTopic = operations['getTopic']['responses']['200']['content']['application/json'];
+
+export type DiscoursePost = operations['getTopic']['responses']['200']['content']['application/json']['post_stream']['posts'][0] & {
+  post_url?: string;
+};

package/src/app/social/feed/discourse/discourse.utils.ts

@@ -0,0 +1,210 @@
+import DiscourseAPI from 'discourse2';
+import { Promise } from '@rx-angular/cdk/zone-less/browser';
+import { JsonFeed, JsonFeedItem, JsonFeedUtils } from '../feed.model';
+import { DiscourseCategory, DiscourseCategoryTopic, DiscoursePost, DiscourseTopic } from './discourse.model';
+import { UrlUtils } from '../../../shared/file/url.utils';
+import { isEmptyArray, isNotNil } from '../../../shared/functions';
+import { DateUtils } from '../../../shared/dates';
+
+export abstract class DiscourseUtils {
+  static _logPrefix = '[discourse-utils]';
+
+  static removeJsonExtension = JsonFeedUtils.removeJsonExtension;
+
+  static isDiscourseObject(json: any): json is DiscourseTopic | DiscourseCategory {
+    return this.isDiscourseTopic(json) || this.isDiscourseCategory(json);
+  }
+
+  static isDiscourseTopic(json: any | Partial<DiscourseTopic>): json is DiscourseTopic {
+    return (json && !!json.post_stream?.posts && json.fancy_title && json.slug && json.details?.created_by && true) || false;
+  }
+
+  static isDiscourseCategory(json: any | Partial<DiscourseCategory>): json is DiscourseCategory {
+    return (json && json.topic_list?.topics && json.posters && true) || false;
+  }
+
+  static getDiscourseBaseUrl(url: string) {
+    return UrlUtils.getRootUrl(url);
+  }
+
+  static isDiscourseCategoryUrl(url: string) {
+    const baseUrl = this.getDiscourseBaseUrl(url);
+    return baseUrl && url.substring(baseUrl.length).match(/^\/c\//);
+  }
+
+  static extractCategoryIdFromUrl(url: string) {
+    const match = this.removeJsonExtension(url).match(/\/(\d+)$/);
+    return match ? parseInt(match[1], 10) : null;
+  }
+
+  static extractCategorySlugFromUrl(url: string) {
+    const match = this.removeJsonExtension(url).match(/\/c\/([\w/-]+)\/\d+$/);
+    return match ? match[1] : null;
+  }
+
+  static extractTopicIdFromUrl(url: string) {
+    const match = url.match(/\/(\d+)(?:$|\/)/) || url.match(/\/(\d+)\.json$/);
+    return match ? parseInt(match[1], 10) : null;
+  }
+
+  static getLanguageFromTitle(title: string) {
+    if (!title) return '';
+
+    const match = title.match('\\s\\(([a-z]{2}(?:-[A-Z]{2})?)\\)$');
+    return match && match[1];
+  }
+
+  static async getFeedsByUrl(
+    url: string,
+    opts?: { api?: DiscourseAPI; locale?: string; maxAgeInMonths?: number; maxContentLength?: number }
+  ): Promise<JsonFeed[]> {
+    try {
+      // Check a category
+      if (DiscourseUtils.isDiscourseCategoryUrl(url)) {
+        console.debug(`${this._logPrefix}Detected a Discourse category at: ${url}`);
+        return this.getFeedsByCategoryUrl(url, opts);
+      }
+
+      // Or a topic
+      else {
+        const post = await this.getFeedByTopicUrl(url, opts);
+        return post ? [post] : [];
+      }
+    } catch (err) {
+      console.error(`${this._logPrefix}`, err);
+      return [];
+    }
+  }
+
+  static async getFeedsByCategoryUrl(
+    url: string,
+    opts?: { api?: DiscourseAPI; locale?: string; maxAgeInMonths?: number; maxContentLength?: number }
+  ): Promise<JsonFeed[]> {
+    const categoryId = this.extractCategoryIdFromUrl(url);
+    const categorySlug = this.extractCategorySlugFromUrl(url);
+    const baseUrl = this.getDiscourseBaseUrl(url);
+    const api = opts?.api ?? new DiscourseAPI(baseUrl);
+    const category: DiscourseCategory = await api.listCategoryTopics({ id: categoryId, slug: categorySlug });
+
+    const topics = (category?.topic_list?.topics || []).filter((topic: DiscourseCategoryTopic) => {
+      const topicLocale = this.getLanguageFromTitle(topic.fancy_title);
+      return (
+        topic.pinned &&
+        topic.visible &&
+        // Keep same locale, if exists
+        (!topicLocale || !opts?.locale || topicLocale === opts.locale)
+      );
+    });
+
+    const posts = (
+      await Promise.all(
+        topics.map(async (t) => {
+          const topic: DiscourseTopic = await api.getTopic({ id: t.id.toString() });
+
+          // Ignore 'About' topics
+          if (topic.tags.includes('about-category')) return undefined;
+
+          const posts = this.filterRecentPosts(topic.post_stream.posts, opts);
+          if (isEmptyArray(posts)) return undefined;
+          return this.toFeed(posts, topic, url, opts);
+        })
+      )
+    ).filter(isNotNil);
+
+    if (isEmptyArray(posts)) {
+      console.warn(`${this._logPrefix}No recent post found on category #${categoryId}`);
+    }
+
+    return posts;
+  }
+
+  static async getFeedByTopicUrl(
+    url: string,
+    opts?: { locale?: string; maxAgeInMonths?: number; maxContentLength?: number;
+      // Internal usage
+      api?: DiscourseAPI;
+    }
+  ): Promise<JsonFeed> {
+    const topicId = this.extractTopicIdFromUrl(url);
+    if (!topicId) {
+      console.error(`${this._logPrefix}Invalid URL`);
+      return undefined;
+    }
+    const api = opts?.api ?? new DiscourseAPI(this.getDiscourseBaseUrl(url));
+    const topic = await api.getTopic({ id: topicId.toString() });
+
+    // Ignore about category
+    if (topic.tags?.includes('about-category')) return undefined;
+
+    const posts = this.filterRecentPosts(topic.post_stream.posts, opts);
+
+    if (isEmptyArray(posts)) {
+      console.warn(`${this._logPrefix}No recent posts found in topic #${topicId}`);
+      return undefined;
+    }
+
+    return this.toFeed(posts, topic, url, opts);
+  }
+
+  static filterRecentPosts(posts: DiscoursePost[], opts?: { maxAgeInMonths?: number }): DiscoursePost[] {
+    const maxAgeInMonths = opts?.maxAgeInMonths ?? JsonFeedUtils.DEFAULT_MAX_POST_AGE_IN_MONTHS;
+    if (maxAgeInMonths <= 0) return posts; // Accept all
+
+    const minDate = maxAgeInMonths > 0 ? DateUtils.moment().subtract(maxAgeInMonths, 'month').startOf('day').utc() : undefined;
+    return (posts || []).filter((post) => post && DateUtils.moment(post.created_at).isSameOrAfter(minDate));
+  }
+
+  static toFeed(posts: DiscoursePost[], topic: DiscourseTopic, url: string, opts?: { maxContentLength?: number }): JsonFeed {
+    const baseUrl = this.getDiscourseBaseUrl(url);
+    const title = this.cleanTitle(topic.fancy_title ?? topic.title);
+    const items = (posts || []).map((post) => this.toFeedItem(post, topic, url, opts));
+    const firstItem = items?.[0];
+    if (firstItem) firstItem.title = title;
+    const authorName = topic?.details?.created_by && (topic.details.created_by.name || topic.details.created_by.username);
+    const authorAvatar = baseUrl + topic.details.created_by.avatar_template.replace('{size}', '48');
+    return <JsonFeed>{
+      version: JsonFeedUtils.VERSION_1_1,
+      feed_url: url,
+      title: this.cleanTitle(topic.fancy_title),
+      expired: topic.archived,
+      authors: [
+        {
+          name: authorName,
+          avatar: authorAvatar,
+        },
+      ],
+      items,
+      tag_template: baseUrl + '/tag/{tag}',
+    };
+  }
+
+  static toFeedItem(post: DiscoursePost, topic: DiscourseTopic, url: string, opts?: { maxContentLength?: number }): JsonFeedItem {
+    const baseUrl = this.getDiscourseBaseUrl(url);
+    url = post.post_url ? baseUrl + post.post_url : url;
+    const id = post.post_url ? baseUrl + post.post_url : post.id;
+    const html = JsonFeedUtils.truncateHtml(post.cooked, opts);
+    const truncated = html?.length !== post.cooked?.length;
+    const authorName = post.name || post.username;
+    const authorAvatar =
+      baseUrl + (post.avatar_template.replace('{size}', '48') ?? topic.details.last_poster.avatar_template.replace('{size}', '48'));
+    return <JsonFeedItem>{
+      id,
+      url,
+      authors: [
+        {
+          name: authorName,
+          avatar: authorAvatar,
+        },
+      ],
+      content_html: html,
+      date_published: post.created_at,
+      tags: topic.tags,
+      truncated,
+    };
+  }
+
+  static cleanTitle(title: string) {
+    if (!title) return undefined;
+    return title.replace(/\s\([a-z]{2}(:?-[A-Z]{2})?\)$/, '');
+  }
+}

package/src/app/social/feed/feed.component.html

@@ -0,0 +1,85 @@
+@if (feeds | isNotEmptyArray) {
+  <div class="feed ion-padding-horizontal ion-no-padding ion-padding-top">
+
+    <!-- feeds -->
+    @for (feed of feeds$ | push; track feed.feed_url) {
+
+      <!-- top header -->
+      @if (showHeader) {
+        <ion-item lines="none" color="secondary">
+          <ion-icon slot="start" name="megaphone"></ion-icon>
+          <ion-label>
+            <b>{{ feed.title || ('SOCIAL.FEED.NEWS'|translate) }}</b>
+          </ion-label>
+          <ion-button slot="end" fill="clear" (click)="openFeedHome()">
+            <ion-label translate>SOCIAL.FEED.SHOW_ALL_FEED</ion-label>
+            <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
+          </ion-button>
+        </ion-item>
+      }
+
+
+      <!-- items -->
+      @for (item of feed.items; track item.id) {
+        <ion-card>
+          <ion-card-header>
+            <ion-card-subtitle style="vertical-align: middle">
+
+              <!-- Authors -->
+              @for (author of (item.authors || feed.authors); track author) {
+                @if (author.name || author.avatar) {
+                  <ion-chip (click)="openUrl(author.url)" tappable>
+                    @if (author.avatar) {
+                      <ion-avatar>
+                        <ion-img [src]="author.avatar" [alt]="author.name"></ion-img>
+                      </ion-avatar>
+                    }
+                    @if (author.name) {
+                      <ion-label color="medium">{{ author.name }}</ion-label>
+                    }
+                  </ion-chip>
+                }
+              }
+              <ion-note class="ion-float-end">
+                <small>{{ item.date_published | dateFromNow }}</small>
+              </ion-note>
+            </ion-card-subtitle>
+
+            <!-- title -->
+            <ion-card-title (click)="openUrl(item.url || feed.feed_url)" tappable>{{ item?.title }}</ion-card-title>
+
+            <!-- tags -->
+            @let tags = item | map: getTags;
+            @if (tags | isNotEmptyArray) {
+              <div class="tags">
+                @for (tag of tags; track tag; let last = $last) {
+                  <a (click)="openTag(feed, tag)" tappable>
+                    <ion-text>#{{ tag }}</ion-text>
+                  </a>@if (!last) {
+                    &nbsp;
+                  }
+                }
+              </div>
+            }
+          </ion-card-header>
+
+          <!-- Feed content -->
+          <ion-card-content>
+            <ion-text [feed]="item.url || feed.feed_url">
+              @if (item.content_html) {
+                <p [innerHTML]="item.content_html"></p>
+              } @else if (item.content_text) {
+                <p [innerText]="item.content_text"></p>
+              }
+            </ion-text>
+          </ion-card-content>
+
+          <ion-button (click)="openUrl(item.url)" class="ion-float-end" fill="clear">
+            <ion-label>{{ (item.truncated ? 'SOCIAL.FEED.READ_MORE' : 'COMMON.BTN_SHOW') | translate }}</ion-label>
+            <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
+          </ion-button>
+        </ion-card>
+      }
+    }
+  </div>
+}

package/src/app/social/feed/feed.component.scss

@@ -0,0 +1,59 @@
+
+.feed {
+
+  ion-item {
+    border-radius: 12px 12px 0 0;
+    backdrop-filter: blur(4px);
+    -webkit-backdrop-filter: blur(4px);
+
+    ion-icon[slot=start] {
+      -webkit-margin-end: 8px;
+      margin-inline-end: 8px;
+    }
+  }
+
+  .tags {
+    display: inline;
+    a {
+      color: var(--ion-color-step-600, #666666) !important;
+    }
+  }
+
+  ion-card {
+    --ion-card-background: rgba(var(--ion-background-color-rgb), 0.6);
+    --ion-card-color: var(--ion-text-color);
+    backdrop-filter: blur(4px);
+    -webkit-backdrop-filter: blur(4px);
+    margin: 0 0 16px 0 ;
+
+    ion-card-header {
+      ion-card-title {
+        --color: var(--ion-text-color);
+      }
+      ion-card-subtitle {
+        --color: var(--ion-color-step-50);
+      }
+      ion-chip {
+        --background: transparent;
+        --border-color: transparent;
+        --border-width: 0;
+
+        ion-avatar {
+          border: 1px solid var(--ion-color-primary);
+        }
+        ion-label {
+          color: var(--color);
+        }
+      }
+    }
+  }
+
+  ion-button {
+    text-transform: unset;
+    color: var(--ion-color-step-400);
+  }
+
+  a:hover {
+    color: var(--ion-color-medium);
+  }
+}