AG-1703: move global popover styles into preset or colocate with targ…

…eted component
Sage-Bionetworks · Mar 7, 2025 · 7fe1728 · 7fe1728
1 parent f733202
commit 7fe1728
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 17 deletions.
diff --git a/apps/agora/app/src/app/myPrimeNGPreset.ts b/apps/agora/app/src/app/myPrimeNGPreset.ts
@@ -1,8 +1,8 @@
 import { ApplicationConfig } from '@angular/core';
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
-import { providePrimeNG } from 'primeng/config';
-import Lara from '@primeng/themes/lara';
 import { definePreset } from '@primeng/themes';
+import Lara from '@primeng/themes/lara';
+import { providePrimeNG } from 'primeng/config';
 
 export const MyPreset = definePreset(Lara, {
   primitive: {
@@ -3757,7 +3757,7 @@ export const MyPreset = definePreset(Lara, {
         background: '{overlay.popover.background}',
         borderColor: '{overlay.popover.border.color}',
         color: '{overlay.popover.color}',
-        borderRadius: '{overlay.popover.border.radius}',
+        borderRadius: '0px',
         shadow: '{overlay.popover.shadow}',
         gutter: '10px',
         arrowOffset: '1.25rem',

diff --git a/libs/agora/genes/src/lib/components/popover-link/popover-link.component.html b/libs/agora/genes/src/lib/components/popover-link/popover-link.component.html
@@ -21,8 +21,10 @@
     }
   </span>
 </p-button>
-<p-popover #popover styleClass="popover">
-  @if (wikiId && hasActived) {
-    <agora-wiki [ownerId]="ownerId" [wikiId]="wikiId"></agora-wiki>
-  }
+<p-popover #popover>
+  <div class="popover-link-content">
+    @if (wikiId && hasActived) {
+      <agora-wiki [ownerId]="ownerId" [wikiId]="wikiId"></agora-wiki>
+    }
+  </div>
 </p-popover>
diff --git a/libs/agora/genes/src/lib/components/popover-link/popover-link.component.scss b/libs/agora/genes/src/lib/components/popover-link/popover-link.component.scss
@@ -6,6 +6,12 @@ agora-popover-link,
   display: inline-block;
 }
 
+.popover-link-content {
+  max-width: 425px;
+  padding: 20px;
+  background: #fff;
+}
+
 .popover-link-inner {
   display: flex;
 }

diff --git a/libs/agora/styles/src/lib/components/_shame.scss b/libs/agora/styles/src/lib/components/_shame.scss
@@ -298,16 +298,6 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch {
   border-color: #e24c4c;
 }
 
-.popover {
-  max-width: 425px;
-  background: #fff;
-  box-shadow: 0 0 10px 0 rgb(0 0 0 / 15%);
-
-  .p-popover-content {
-    padding: 40px;
-  }
-}
-
 /* Remove primeng popover arrow */
 .p-popover::before,
 .p-popover::after {