geonetwork-ui 2.1.0-initial → 2.2.0-dev.0f95f702

package/src/libs/ui/search/src/lib/record-table/record-table.component.html

@@ -1,24 +1,76 @@
 <div>
   <div *ngIf="totalHits" class="">
+    <div class="flex records-information">
+      <div
+        translate
+        class="my-8 ml-4 block text-gray-800"
+        [translateParams]="{
+          displayed: records.length,
+          hits: totalHits
+        }"
+      >
+        results.records.hits.displayedOn
+      </div>
+      <div
+        *ngIf="selectedRecords.length > 0"
+        class="my-8 ml-6 block text-gray-400 selected-records"
+        translate
+        [translateParams]="{ amount: selectedRecords.length }"
+      >
+        results.records.hits.selected
+      </div>
+    </div>
+
     <div
-      translate
-      class="my-8 ml-4 block text-gray-500"
-      [translateParams]="{
-        displayed: records.length,
-        hits: totalHits
-      }"
+      class="grid grid-cols-[repeat(3,minmax(0,max-content))] gap-x-4 gap-y-1"
+      *ngIf="records[0].name"
     >
-      results.records.hits.displayedOn
+      <div class="contents text-sm">
+        <div class="record-table-header text-gray-400 flex gap-1">
+          <span translate>dashboard.records.userDetail</span>
+        </div>
+        <div class="record-table-header text-gray-400 flex gap-1">
+          <span translate>dashboard.records.username</span>
+        </div>
+        <div class="record-table-header text-gray-400 flex gap-1">
+          <span translate>dashboard.records.userEmail</span>
+        </div>
+      </div>
+      <div
+        class="contents hover:text-gray-900 text-gray-800 cursor-pointer"
+        (click)="recordSelect.emit(record)"
+        *ngFor="let record of records"
+      >
+        <div class="record-table-col text-16">
+          {{ record.name }}
+        </div>
+        <div class="record-table-col text-16">
+          {{ record.username }}
+        </div>
+        <div class="record-table-col text-16">
+          {{ record.emailAddresses[0] }}
+        </div>
+      </div>
     </div>
 
     <div
-      class="grid grid-cols-[repeat(5,minmax(0,max-content))] gap-x-4 gap-y-1"
+      class="grid grid-cols-[repeat(6,minmax(0,max-content))] gap-x-4 gap-y-1"
+      *ngIf="!records[0].name"
     >
       <div class="contents text-sm">
+        <div class="flex justify-center items-center">
+          <gn-ui-checkbox
+            [checked]="isAllSelected()"
+            [indeterminate]="isSomeSelected()"
+            (changed)="selectAll()"
+            type="default"
+          >
+          </gn-ui-checkbox>
+        </div>
         <div class="record-table-header text-gray-400 flex gap-1">
           <gn-ui-button
             type="light"
-            extraClass="px-3 py-2 space-x-1"
+            extraClass="px-3 pl-0 space-x-1 text-left"
             (buttonClick)="setSortBy('resourceTitleObject.default.keyword')"
           >
             <span translate>record.metadata.title</span>
@@ -42,7 +94,7 @@
         <div class="record-table-header text-gray-400 flex gap-1">
           <gn-ui-button
             type="light"
-            extraClass="px-3 py-2 space-x-1"
+            extraClass="px-3 pl-0 space-x-1"
             (buttonClick)="setSortBy('recordOwner')"
           >
             <span translate>record.metadata.author</span>
@@ -63,7 +115,7 @@
         <div class="record-table-header text-gray-400 flex gap-1">
           <gn-ui-button
             type="light"
-            extraClass="px-3 py-2 space-x-1"
+            extraClass="px-3 pl-0 space-x-1"
             (buttonClick)="setSortBy('changeDate')"
           >
             <span translate>record.metadata.updatedOn</span>
@@ -84,7 +136,7 @@
         <div class="record-table-header text-gray-400 flex gap-1">
           <gn-ui-button
             type="light"
-            extraClass="px-3 py-2 space-x-1"
+            extraClass="px-3 pl-0 space-x-1"
             (buttonClick)="setSortBy('createDate')"
           >
             <span translate>record.metadata.createdOn</span>
@@ -108,7 +160,17 @@
         (click)="recordSelect.emit(record)"
         *ngFor="let record of records"
       >
-        <div [title]="record.title" class="record-table-col text-16">
+        <div class="record-table-col">
+          <gn-ui-checkbox
+            [checked]="isChecked(record)"
+            (changed)="handleRecordSelectedChange($event, record)"
+            type="default"
+          ></gn-ui-checkbox>
+        </div>
+        <div
+          [title]="record.title"
+          class="record-table-col text-16 self-center"
+        >
           {{ record.title }}
         </div>
         <div
@@ -130,7 +192,10 @@
           >
             {{ formats[1] }}
           </span>
-          <div class="flex-shrink-0" *ngIf="formats.slice(2).length > 0">
+          <div
+            class="flex-shrink-0"
+            *ngIf="!record.name && formats.slice(2).length > 0"
+          >
             <span>+{{ formats.slice(2).length }}</span>
           </div>
         </div>
@@ -138,10 +203,10 @@
           <mat-icon class="material-symbols-outlined"> person </mat-icon>
           <span class="">{{ formatUserInfo(record.extras?.ownerInfo) }}</span>
         </div>
-        <div class="record-table-col text-16">
+        <div class="record-table-col text-16 self-center">
           {{ dateToString(record.recordUpdated) }}
         </div>
-        <div class="record-table-col text-16">
+        <div class="record-table-col text-16 self-center">
           {{ dateToString(record.recordCreated) }}
         </div>
       </div>

package/src/libs/ui/search/src/lib/record-table/record-table.component.ts

@@ -1,12 +1,12 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core'
-import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/record'
+import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 import {
   FileFormat,
   getBadgeColor,
   getFileFormat,
   getFormatPriority,
 } from '../../../../../../libs/util/shared/src'
-import { SortByField } from '../../../../../../libs/common/domain/src/lib/search'
+import { SortByField } from '../../../../../../libs/common/domain/src/lib/model/search'
 
 @Component({
   selector: 'gn-ui-record-table',
@@ -14,10 +14,13 @@ import { SortByField } from '../../../../../../libs/common/domain/src/lib/search
   styleUrls: ['./record-table.component.css'],
 })
 export class RecordTableComponent {
-  @Input() records: CatalogRecord[] = []
+  @Input() selectedRecords: string[] = []
+  @Input() records: any[] = []
   @Input() totalHits?: number
   @Input() sortBy?: SortByField
-  @Output() recordSelect = new EventEmitter<CatalogRecord>()
+  @Output() recordClick = new EventEmitter<CatalogRecord>()
+  @Output() recordsSelect = new EventEmitter<CatalogRecord[]>()
+  @Output() recordsDeselect = new EventEmitter<CatalogRecord[]>()
   @Output() sortByChange = new EventEmitter<SortByField>()
 
   dateToString(date: Date): string {
@@ -90,4 +93,57 @@ export class RecordTableComponent {
     const sortOrder = this.getOrderForColumn(col)
     return sortOrder === order
   }
+
+  isChecked(record: CatalogRecord) {
+    if (this.selectedRecords.includes(record.uniqueIdentifier)) {
+      return true
+    }
+    return false
+  }
+
+  handleRecordSelectedChange(selected: boolean, record: CatalogRecord) {
+    if (!selected) {
+      this.recordsDeselect.emit([record])
+      this.selectedRecords = this.selectedRecords.filter(
+        (val) => val !== record.uniqueIdentifier
+      )
+    } else {
+      this.recordsSelect.emit([record])
+      this.selectedRecords.push(record.uniqueIdentifier)
+    }
+  }
+
+  selectAll() {
+    if (this.isAllSelected()) {
+      this.recordsDeselect.emit(this.records)
+      this.selectedRecords = []
+    } else {
+      this.recordsSelect.emit(this.records)
+      this.selectedRecords = this.records.map((record) => {
+        return record.uniqueIdentifier
+      })
+    }
+  }
+
+  isAllSelected(): boolean {
+    if (this.selectedRecords.length === this.records.length) {
+      const allRecords = this.records.filter((record) =>
+        this.selectedRecords.includes(record.uniqueIdentifier)
+      )
+      if (allRecords.length === this.records.length) {
+        return true
+      }
+    }
+    return false
+  }
+
+  isSomeSelected(): boolean {
+    if (
+      this.selectedRecords.length > 0 &&
+      this.selectedRecords.length < this.records.length
+    ) {
+      return true
+    }
+    return false
+  }
 }

package/src/libs/ui/search/src/lib/results-list/results-list.component.ts

@@ -3,6 +3,7 @@ import {
   Component,
   EventEmitter,
   Input,
+  OnInit,
   Output,
   TemplateRef,
 } from '@angular/core'
@@ -10,8 +11,7 @@ import {
   DEFAULT_RESULTS_LAYOUT_CONFIG,
   ResultsLayoutConfigItem,
 } from './results-layout.config'
-import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/record'
-import { MetadataQualityDisplay } from '../../../../../../libs/ui/elements/src'
+import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 
 @Component({
   selector: 'gn-ui-results-list',
@@ -25,6 +25,6 @@ export class ResultsListComponent {
     DEFAULT_RESULTS_LAYOUT_CONFIG['CARD']
   @Input() favoriteTemplate: TemplateRef<{ $implicit: CatalogRecord }>
   @Input() recordUrlGetter: (record: CatalogRecord) => string
-  @Input() metadataQualityDisplay: MetadataQualityDisplay
+  @Input() metadataQualityDisplay: boolean
   @Output() mdSelect = new EventEmitter<CatalogRecord>()
 }

package/src/libs/ui/search/src/lib/results-list-item/results-list-item.component.ts

@@ -13,8 +13,7 @@ import {
 } from '@angular/core'
 import { RecordPreviewComponent } from '../record-preview/record-preview.component'
 import { ResultsLayoutConfigItem } from '../results-list/results-layout.config'
-import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/record'
-import { MetadataQualityDisplay } from '../../../../../../libs/ui/elements/src'
+import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 
 @Component({
   selector: 'gn-ui-results-list-item',
@@ -26,7 +25,7 @@ export class ResultsListItemComponent implements OnChanges, AfterViewInit {
   @Input() layoutConfig: ResultsLayoutConfigItem
   @Input() record: CatalogRecord
   @Input() favoriteTemplate: TemplateRef<{ $implicit: CatalogRecord }>
-  @Input() metadataQualityDisplay: MetadataQualityDisplay
+  @Input() metadataQualityDisplay: boolean
   @Input() linkHref: string
   @Output() mdSelect = new EventEmitter<CatalogRecord>()
   initialized = false

package/src/libs/ui/search/src/lib/ui-search.module.ts

@@ -27,6 +27,7 @@ import { RecordPreviewFeedComponent } from './record-preview-feed/record-preview
 import { RecordTableComponent } from './record-table/record-table.component'
 import { CommonModule } from '@angular/common'
 import { UiInputsModule } from '../../../../../libs/ui/inputs/src'
+import { MatCheckboxModule } from '@angular/material/checkbox'
 
 @NgModule({
   declarations: [
@@ -56,6 +57,7 @@ import { UiInputsModule } from '../../../../../libs/ui/inputs/src'
     UiInputsModule,
     UiElementsModule,
     MatIconModule,
+    MatCheckboxModule,
     RouterLink,
   ],
   exports: [

package/src/libs/util/app-config/src/lib/app-config.ts

@@ -11,8 +11,8 @@ import {
   GlobalConfig,
   LayerConfig,
   MapConfig,
-  SearchConfig,
   MetadataQualityConfig,
+  SearchConfig,
   ThemeConfig,
 } from './model'
 import { TranslateCompiler, TranslateLoader } from '@ngx-translate/core'
@@ -94,11 +94,13 @@ export function loadAppConfig() {
         'global',
         ['geonetwork4_api_url'],
         [
+          'datahub_url',
           'proxy_path',
           'metadata_language',
           'login_url',
           'web_component_embedder_url',
           'languages',
+          'contact_email',
         ],
         warnings,
         errors
@@ -114,6 +116,7 @@ export function loadAppConfig() {
           ? null
           : ({
               GN4_API_URL: parsedGlobalSection.geonetwork4_api_url,
+              DATAHUB_URL: parsedGlobalSection.datahub_url,
               PROXY_PATH: parsedGlobalSection.proxy_path,
               METADATA_LANGUAGE: parsedGlobalSection.metadata_language
                 ? (
@@ -124,6 +127,7 @@ export function loadAppConfig() {
               WEB_COMPONENT_EMBEDDER_URL:
                 parsedGlobalSection.web_component_embedder_url,
               LANGUAGES: parsedGlobalSection.languages,
+              CONTACT_EMAIL: parsedGlobalSection.contact_email,
             } as GlobalConfig)
 
       const parsedLayersSections = parseMultiConfigSection(
@@ -183,6 +187,7 @@ export function loadAppConfig() {
           'fonts_stylesheet_url',
           'thumbnail_placeholder',
           'header_background',
+          'favicon',
         ],
         warnings,
         errors
@@ -202,6 +207,7 @@ export function loadAppConfig() {
               TITLE_FONT: parsedThemeSection.title_font,
               MAIN_FONT: parsedThemeSection.main_font,
               FONTS_STYLESHEET_URL: parsedThemeSection.fonts_stylesheet_url,
+              FAVICON: parsedThemeSection.favicon,
             } as ThemeConfig)
 
       const parsedSearchSection = parseConfigSection(
@@ -243,20 +249,7 @@ export function loadAppConfig() {
         parsed,
         'metadata-quality',
         [],
-        [
-          'enabled',
-          'sortable',
-          'display_widget_in_detail',
-          'display_widget_in_search',
-          'display_title',
-          'display_description',
-          'display_topic',
-          'display_keywords',
-          'display_legal_constraints',
-          'display_contact',
-          'display_update_frequency',
-          'display_organisation',
-        ],
+        ['enabled'],
         warnings,
         errors
       )
@@ -266,22 +259,6 @@ export function loadAppConfig() {
           : ({
               ENABLED: parsedMetadataQualitySection.enabled,
               SORTABLE: parsedMetadataQualitySection.sortable,
-              DISPLAY_WIDGET_IN_DETAIL:
-                parsedMetadataQualitySection.display_widget_in_detail,
-              DISPLAY_WIDGET_IN_SEARCH:
-                parsedMetadataQualitySection.display_widget_in_search,
-              DISPLAY_TITLE: parsedMetadataQualitySection.display_title,
-              DISPLAY_DESCRIPTION:
-                parsedMetadataQualitySection.display_description,
-              DISPLAY_TOPIC: parsedMetadataQualitySection.display_topic,
-              DISPLAY_KEYWORDS: parsedMetadataQualitySection.display_keywords,
-              DISPLAY_LEGAL_CONSTRAINTS:
-                parsedMetadataQualitySection.display_legal_constraints,
-              DISPLAY_CONTACT: parsedMetadataQualitySection.display_contact,
-              DISPLAY_UPDATE_FREQUENCY:
-                parsedMetadataQualitySection.display_update_frequency,
-              DISPLAY_ORGANISATION:
-                parsedMetadataQualitySection.display_organisation,
             } as MetadataQualityConfig)
 
       customTranslations = parseTranslationsConfigSection(

package/src/libs/util/app-config/src/lib/fixtures.ts

@@ -82,7 +82,7 @@ export const MAP_CONFIG_FIXTURE: MapConfig = {
   MAX_EXTENT: [-418263.418776, 5251529.591305, 961272.067714, 6706890.609855],
   DO_NOT_USE_DEFAULT_BASEMAP: false,
   EXTERNAL_VIEWER_URL_TEMPLATE:
-    'https://example.com/myviewer?url=${service_url}&name=${layer_name}&type=${service_type}',
+    'https://example.com/myviewer/#/?actions=[{"type":"CATALOG:ADD_LAYERS_FROM_CATALOGS","layers":["${layer_name}"],"sources":[{"url":"${service_url}","type":"${service_type}"}]}]',
   EXTERNAL_VIEWER_OPEN_NEW_TAB: true,
   MAP_LAYERS: [
     {

package/src/libs/util/app-config/src/lib/model.ts

@@ -2,11 +2,13 @@ import { Geometry } from 'geojson'
 
 export interface GlobalConfig {
   GN4_API_URL: string
+  DATAHUB_URL?: string
   PROXY_PATH?: string
   METADATA_LANGUAGE?: string
   LOGIN_URL?: string
   WEB_COMPONENT_EMBEDDER_URL?: string
   LANGUAGES?: string[]
+  CONTACT_EMAIL?: string
 }
 
 export interface LayerConfig {
@@ -36,6 +38,7 @@ export interface ThemeConfig {
   MAIN_FONT?: string
   TITLE_FONT?: string
   FONTS_STYLESHEET_URL?: string
+  FAVICON?: string
 }
 
 export interface SearchPreset {
@@ -53,17 +56,6 @@ export interface SearchConfig {
 
 export interface MetadataQualityConfig {
   ENABLED: boolean
-  SORTABLE: boolean
-  DISPLAY_WIDGET_IN_DETAIL: boolean
-  DISPLAY_WIDGET_IN_SEARCH: boolean
-  DISPLAY_TITLE: boolean
-  DISPLAY_DESCRIPTION: boolean
-  DISPLAY_TOPIC: boolean
-  DISPLAY_KEYWORDS: boolean
-  DISPLAY_LEGAL_CONSTRAINTS: boolean
-  DISPLAY_CONTACT: boolean
-  DISPLAY_UPDATE_FREQUENCY: boolean
-  DISPLAY_ORGANISATION: boolean
 }
 
 export type CustomTranslations = { [translationKey: string]: string }

package/src/libs/util/shared/src/index.ts

@@ -2,5 +2,4 @@ export * from './lib/util-shared.module'
 export * from './lib/services'
 export * from './lib/utils'
 export * from './lib/links'
-export * from './lib/pipes'
 export * from './lib/image-fallback.directive'

package/src/libs/util/shared/src/lib/links/link-classifier.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core'
-import { DatasetDistribution } from '../../../../../../libs/common/domain/src/lib/record'
+import { DatasetDistribution } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { getFileFormat } from './link-utils'
 export enum LinkUsage {
   API = 'api',
@@ -25,6 +25,8 @@ export class LinkClassifierService {
           case 'wms':
           case 'wmts':
             return [LinkUsage.API, LinkUsage.MAP_API]
+          case 'ogcFeatures':
+            return [LinkUsage.API]
           default:
             return [LinkUsage.UNKNOWN]
         }

package/src/libs/util/shared/src/lib/links/link-utils.ts

@@ -1,5 +1,5 @@
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
-import { DatasetDistribution } from '../../../../../../libs/common/domain/src/lib/record'
+import { DatasetDistribution } from '../../../../../../libs/common/domain/src/lib/model/record'
 
 marker('downloads.wfs.featuretype.not.found')
 
@@ -59,10 +59,10 @@ export const FORMATS = {
     mimeTypes: ['application/geopackage+sqlite3'],
   },
   zip: {
-    extensions: ['zip'],
+    extensions: ['zip', 'tar.gz'],
     priority: 7,
     color: '#f2bb3a',
-    mimeTypes: ['application/zip'],
+    mimeTypes: ['application/zip', 'application/x-zip'],
   },
   pdf: {
     extensions: ['pdf'],
@@ -113,7 +113,10 @@ export function extensionToFormat(extension: string): FileFormat {
 
 export function getFileFormat(link: DatasetDistribution): FileFormat {
   if ('mimeType' in link) {
-    return mimeTypeToFormat(link.mimeType)
+    const mimeTypeFormat = mimeTypeToFormat(link.mimeType)
+    if (mimeTypeFormat !== null) {
+      return mimeTypeFormat
+    }
   }
   for (const format in FORMATS) {
     for (const alias of FORMATS[format].extensions) {
@@ -143,7 +146,7 @@ export function mimeTypeToFormat(mimeType: string): FileFormat {
       if (mimeType === mt) return format as FileFormat
     }
   }
-  return undefined
+  return null
 }
 
 export function checkFileFormat(

package/src/libs/util/shared/src/lib/services/theme.service.ts

@@ -140,4 +140,13 @@ export class ThemeService {
     }
     return chroma.hsl(hue % 360, saturation, lightness).css()
   }
+
+  static setFavicon(faviconPath: string): void {
+    const link =
+      document.querySelector("link[rel*='icon']") ||
+      document.createElement('link')
+    link['rel'] = 'icon'
+    link['href'] = faviconPath
+    document.getElementsByTagName('head')[0].appendChild(link)
+  }
 }

package/src/libs/util/shared/src/lib/util-shared.module.ts

@@ -1,11 +1,10 @@
 import { NgModule } from '@angular/core'
-import { SafePipe } from './pipes/SafePipe'
 import { CommonModule } from '@angular/common'
 import { ImageFallbackDirective } from './image-fallback.directive'
 
 @NgModule({
-  declarations: [SafePipe, ImageFallbackDirective],
+  declarations: [ImageFallbackDirective],
   imports: [CommonModule],
-  exports: [SafePipe, ImageFallbackDirective],
+  exports: [ImageFallbackDirective],
 })
 export class UtilSharedModule {}

package/src/libs/util/shared/src/lib/utils/remove-whitespace.ts

@@ -1,3 +1,3 @@
 export const removeWhitespace = function (str: string): string {
-  return str.replace(/\s+/g, ' ').trim()
+  return str?.replace(/\s+/g, ' ').trim()
 }

package/src/libs/util/shared/src/lib/utils/sort-by.ts

@@ -1,4 +1,4 @@
-import { SortByField } from '../../../../../../libs/common/domain/src/lib/search'
+import { SortByField } from '../../../../../../libs/common/domain/src/lib/model/search'
 
 export function sortByToStrings(sortBy: SortByField): string[] {
   const array = Array.isArray(sortBy[0]) ? sortBy : [sortBy]

package/src/libs/util/shared/src/lib/utils/strip-html.ts

@@ -1,4 +1,5 @@
 export const stripHtml = function (html: string): string {
+  if (!html) return undefined
   const doc = new DOMParser().parseFromString(html, 'text/html')
   return doc.body.textContent || ''
 }

package/tailwind.base.css

@@ -7,16 +7,46 @@
     @apply shadow-xl hover:shadow-xl-hover transition-shadow;
   }
 
+  .btn {
+    @apply flex flex-row items-center text-[1em] leading-none p-[1em] rounded-[0.25em] transition-all duration-100 focus:outline-none disabled:opacity-50;
+  }
+
   .btn-default {
-    @apply bg-blue-600 text-white flex gap-3 items-center px-9 py-3 rounded-[50px] hover:scale-[1.02] transition-transform;
+    @apply btn text-white
+      bg-gray-700 hover:bg-gray-800 active:bg-gray-900
+      border border-gray-700 focus:ring-4 focus:ring-gray-200;
+  }
+
+  .btn-primary {
+    @apply btn text-white
+      bg-primary hover:bg-primary-darker focus:bg-primary-darker active:bg-primary-darkest
+      border border-primary focus:ring-4 focus:ring-primary-lightest;
+  }
+
+  .btn-secondary {
+    @apply btn text-white
+      bg-secondary hover:bg-secondary-darker focus:bg-secondary-darker active:bg-secondary-darkest
+      border border-secondary focus:ring-4 focus:ring-secondary-lightest;
+  }
+
+  .btn-outline {
+    @apply btn text-main
+      bg-white hover:text-primary-darker focus:text-primary-darker active:text-primary-black
+      border border-gray-300 hover:border-primary-lighter focus:border-primary-lighter focus:ring-4 focus:ring-primary-lightest active:border-primary-darker;
+  }
+
+  .btn-light {
+    @apply btn text-main
+      bg-white hover:bg-gray-50 focus:bg-gray-50 active:bg-gray-100
+      border border-white focus:ring-4 focus:ring-gray-300;
   }
 
   .badge-btn {
-    @apply flex items-center justify-center px-4 py-1 text-white rounded;
+    @apply flex items-center justify-center px-4 py-1 text-white rounded backdrop-blur;
   }
 
   .card-icon {
-    @apply text-primary opacity-25 group-hover:text-secondary group-hover:opacity-100 transition-colors transition-opacity;
+    @apply text-primary opacity-50 group-hover:text-secondary group-hover:opacity-100 transition-colors transition-opacity;
   }
 }