-
+
diff --git a/src/app/shared/components/copy-button/copy-button.component.scss b/src/app/shared/components/copy-button/copy-button.component.scss
index 3a6d12984..bd2d523ab 100644
--- a/src/app/shared/components/copy-button/copy-button.component.scss
+++ b/src/app/shared/components/copy-button/copy-button.component.scss
@@ -1,13 +1,16 @@
-@use "assets/styles/variables" as var;
-
:host {
display: flex;
}
-.icon-copy-btn {
- cursor: pointer;
+.copy-icon-btn {
+ --p-button-padding-y: 0.125rem;
+ --p-button-text-contrast-color: var(--dark-blue-1);
+ --p-button-contrast-focus-ring-color: var(--dark-blue-1);
+ --p-button-text-contrast-active-background: transparent;
+ --p-button-text-contrast-hover-background: transparent;
+ --p-button-icon-only-width: 1.5rem;
&:hover {
- color: var.$dark-blue-2;
+ --p-button-text-contrast-color: var(--dark-blue-2);
}
}
diff --git a/src/app/shared/components/sub-header/sub-header.component.html b/src/app/shared/components/sub-header/sub-header.component.html
index 7263e0272..e2cc778eb 100644
--- a/src/app/shared/components/sub-header/sub-header.component.html
+++ b/src/app/shared/components/sub-header/sub-header.component.html
@@ -8,10 +8,14 @@
@if (isLoading()) {
} @else {
-
+
{{ title() }}
@if (tooltip()) {
-
+
}
}
diff --git a/src/app/shared/components/view-only-table/view-only-table.component.html b/src/app/shared/components/view-only-table/view-only-table.component.html
index b256a7a46..01e7f5a65 100644
--- a/src/app/shared/components/view-only-table/view-only-table.component.html
+++ b/src/app/shared/components/view-only-table/view-only-table.component.html
@@ -52,9 +52,10 @@
{{ item.anonymous ? 'Yes' : 'No' }} |
diff --git a/src/app/shared/components/view-only-table/view-only-table.component.scss b/src/app/shared/components/view-only-table/view-only-table.component.scss
index da65d756c..1925187ea 100644
--- a/src/app/shared/components/view-only-table/view-only-table.component.scss
+++ b/src/app/shared/components/view-only-table/view-only-table.component.scss
@@ -1,9 +1,8 @@
-@use "assets/styles/variables" as var;
@use "assets/styles/mixins" as mix;
.icon-copy-btn {
top: 50%;
- right: mix.rem(16px);
+ right: mix.rem(6px);
transform: translateY(-50%);
width: mix.rem(24px);
z-index: 1;
diff --git a/src/app/shared/pipes/decode-html.pipe.ts b/src/app/shared/pipes/decode-html.pipe.ts
index abcfdd5dc..30fb4d942 100644
--- a/src/app/shared/pipes/decode-html.pipe.ts
+++ b/src/app/shared/pipes/decode-html.pipe.ts
@@ -2,7 +2,6 @@ import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'decodeHtml',
- standalone: true,
})
export class DecodeHtmlPipe implements PipeTransform {
transform(value: string): string {
diff --git a/src/assets/styles/_common.scss b/src/assets/styles/_common.scss
index 3d64ceb06..d5954d37d 100644
--- a/src/assets/styles/_common.scss
+++ b/src/assets/styles/_common.scss
@@ -42,7 +42,7 @@
transition: opacity 0.3s ease;
white-space: nowrap;
border-radius: 8px;
- box-shadow: 0 0 4px 0 #00000029;
+ box-shadow: 0 0 4px 0 var(--grey-outline);
background: var.$white;
&.visible {
@@ -61,15 +61,6 @@
}
}
-// ------------------------- Red icon -------------------------
-.red-icon {
- color: var.$red-1;
-
- &:hover {
- color: var.$red-3;
- }
-}
-
// ------------------------- Blue icon -------------------------
.blue-icon {
color: var.$pr-blue-1;
diff --git a/src/assets/styles/overrides/button.scss b/src/assets/styles/overrides/button.scss
index e512db382..47dfaaf65 100644
--- a/src/assets/styles/overrides/button.scss
+++ b/src/assets/styles/overrides/button.scss
@@ -1,9 +1,20 @@
@use "../variables" as var;
@use "../mixins" as mix;
+:root {
+ --p-button-padding-x: 1rem;
+ --p-button-padding-y: 0.5625rem;
+
+ --p-button-label-font-weight: 700;
+
+ --p-button-raised-shadow: 0 0 4px 0 var(--grey-outline);
+}
+
.p-button {
- font-size: 0.875rem;
- line-height: 1.5rem;
+ &:not(.p-button-icon-only) {
+ font-size: 0.875rem;
+ line-height: 1.5rem;
+ }
&.p-button-info {
--p-button-label-font-weight: 400;
@@ -20,44 +31,8 @@
}
}
-.p-button-icon-only,
.btn-icon-only .p-button {
- padding: mix.rem(15px) mix.rem(22px);
-}
-
-.btn-icon-text,
-.btn-icon {
- .p-button {
- background-color: transparent;
- color: var.$pr-blue-1;
- font-weight: 600;
- @include mix.flex-center;
- box-shadow: 0 0 4px 0 var.$grey-outline;
- border: none;
-
- &:hover {
- color: var.$pr-blue-3;
- }
-
- &:disabled {
- color: var.$grey-1;
- }
- }
-}
-
-.btn-icon {
- .p-button {
- color: var.$dark-blue-1;
- padding: 0.7rem;
-
- &:hover {
- color: var.$pr-blue-1;
- }
-
- &:disabled {
- color: var.$grey-1;
- }
- }
+ padding: mix.rem(13px) mix.rem(20px);
}
.btn-full-width {
@@ -68,11 +43,11 @@
}
}
-:root {
- --p-button-padding-x: 1rem;
- --p-button-padding-y: 0.5625rem;
+.danger-icon-btn {
+ --p-button-text-danger-hover-background: transparent;
+ --p-button-text-danger-active-background: transparent;
- --p-button-label-font-weight: 700;
-
- --p-button-raised-shadow: 0 0 4px 0 var(--grey-outline);
+ &:hover {
+ --p-button-text-danger-color: var(--red-3);
+ }
}
diff --git a/src/assets/styles/overrides/tooltip.scss b/src/assets/styles/overrides/tooltip.scss
index e01a506d2..9f0ecc950 100644
--- a/src/assets/styles/overrides/tooltip.scss
+++ b/src/assets/styles/overrides/tooltip.scss
@@ -1,24 +1,14 @@
-@use "assets/styles/variables" as var;
+:root {
+ --p-tooltip-max-width: 20rem;
+}
.p-tooltip-text {
- display: flex !important;
- background: var.$white;
- color: var.$dark-blue-1;
- border: 1px solid var.$grey-3;
- padding: 1rem;
+ --p-tooltip-background: var(--white);
+ --p-tooltip-color: var(--dark-blue-1);
+ --p-tooltip-padding: 1rem;
+ --p-overlay-popover-shadow: 0px 0px 4px 0px var(--grey-outline);
}
.p-tooltip-arrow {
- border-right-color: var.$white;
- border: 1px solid var.$grey-3;
-}
-
-.p-tooltip.p-tooltip-bottom {
- .p-tooltip-text {
- min-width: auto;
- }
-
- .p-tooltip-arrow {
- border: none;
- }
+ border: none;
}
|