diff --git a/frontend/angular.json b/frontend/angular.json index 852ec8243..9799792b3 100644 --- a/frontend/angular.json +++ b/frontend/angular.json @@ -33,6 +33,8 @@ "node_modules/@fontsource/noto-sans/300.css", "node_modules/@fontsource/noto-sans/400.css", "node_modules/@fontsource/noto-sans/500.css", + "node_modules/@fontsource/ibm-plex-mono/400.css", + "node_modules/@fontsource/ibm-plex-mono/500.css", "node_modules/@material-symbols/font-400/outlined.css", "src/custom-theme.scss", "src/styles.scss" diff --git a/frontend/package.json b/frontend/package.json index e153a92c1..25aa239c3 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -26,6 +26,7 @@ "@angular/platform-browser-dynamic": "~20.3.16", "@angular/router": "~20.3.16", "@brumeilde/ngx-theme": "^1.2.1", + "@fontsource/ibm-plex-mono": "^5.2.7", "@fontsource/noto-sans": "^5.2.10", "@jsonurl/jsonurl": "^1.1.8", "@material-symbols/font-400": "^0.40.2", diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css b/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css index 4bbc72d47..5999140f5 100644 --- a/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css +++ b/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css @@ -315,6 +315,10 @@ .db-table { display: grid; width: 100%; + font-family: "IBM Plex Mono", monospace; + --mat-table-header-headline-font: "IBM Plex Mono", monospace; + --mat-table-row-item-label-text-font: "IBM Plex Mono", monospace; + --mat-table-footer-supporting-text-font: "IBM Plex Mono", monospace; } @media (width <= 600px) { diff --git a/frontend/src/app/components/ui-components/table-display-fields/foreign-key/foreign-key.component.css b/frontend/src/app/components/ui-components/table-display-fields/foreign-key/foreign-key.component.css index e534da063..5cd9a01db 100644 --- a/frontend/src/app/components/ui-components/table-display-fields/foreign-key/foreign-key.component.css +++ b/frontend/src/app/components/ui-components/table-display-fields/foreign-key/foreign-key.component.css @@ -1,36 +1,37 @@ .foreign-key-button { - background: transparent; - border: 1px solid transparent; - border-radius: 12px; - color: var(--color-accentedPalette-500); - cursor: pointer; - font-size: inherit; - padding: 2px 8px; - overflow: hidden; - text-overflow: ellipsis; - text-align: left; - max-width: 100%; - transition: background 100ms, border-color 100ms; + background: transparent; + border: 1px solid transparent; + border-radius: 12px; + color: var(--color-accentedPalette-500); + cursor: pointer; + font-family: inherit; + font-size: inherit; + padding: 2px 8px; + overflow: hidden; + text-overflow: ellipsis; + text-align: left; + max-width: 100%; + transition: + background 100ms, + border-color 100ms; } @media (prefers-color-scheme: dark) { - .foreign-key-button:hover{ - background-color: var(--color-accentedPalette-900); - border: 1px solid var(--color-accentedPalette-700); - } + .foreign-key-button:hover { + background-color: var(--color-accentedPalette-900); + border: 1px solid var(--color-accentedPalette-700); + } } @media (prefers-color-scheme: light) { - .foreign-key-button:hover{ - background-color: var(--color-accentedPalette-100); - border: 1px solid var(--color-accentedPalette-300); - } + .foreign-key-button:hover { + background-color: var(--color-accentedPalette-100); + border: 1px solid var(--color-accentedPalette-300); + } } .foreign-key-button_selected { - background-color: var(--color-accentedPalette-100); - border-radius: 12px; - border: 1px solid var(--color-accentedPalette-300); + background-color: var(--color-accentedPalette-100); + border-radius: 12px; + border: 1px solid var(--color-accentedPalette-300); } - - diff --git a/frontend/src/app/components/ui-components/table-display-fields/id/id.component.css b/frontend/src/app/components/ui-components/table-display-fields/id/id.component.css index 277f14993..1e1b6b2d1 100644 --- a/frontend/src/app/components/ui-components/table-display-fields/id/id.component.css +++ b/frontend/src/app/components/ui-components/table-display-fields/id/id.component.css @@ -1,9 +1,19 @@ +:host { + text-align: right; +} + .field-display-id { - display: flex; - align-items: center; + display: flex; + align-items: center; + justify-content: flex-end; } .field-value-id { - font-weight: 500; - flex-grow: 1; + font-weight: 500; + flex-grow: 1; +} + +.field-copy-button { + right: auto; + left: 0; } diff --git a/frontend/src/app/components/ui-components/table-display-fields/money/money.component.css b/frontend/src/app/components/ui-components/table-display-fields/money/money.component.css index 8b1378917..8732bf81b 100644 --- a/frontend/src/app/components/ui-components/table-display-fields/money/money.component.css +++ b/frontend/src/app/components/ui-components/table-display-fields/money/money.component.css @@ -1 +1,12 @@ +:host { + text-align: right; +} +.field-display { + justify-content: flex-end; +} + +.field-copy-button { + right: auto; + left: 0; +} diff --git a/frontend/src/app/components/ui-components/table-display-fields/number/number.component.css b/frontend/src/app/components/ui-components/table-display-fields/number/number.component.css index bc463bdea..11777f1f0 100644 --- a/frontend/src/app/components/ui-components/table-display-fields/number/number.component.css +++ b/frontend/src/app/components/ui-components/table-display-fields/number/number.component.css @@ -1,11 +1,24 @@ +:host { + text-align: right; +} + +.field-display { + justify-content: flex-end; +} + +.field-copy-button { + right: auto; + left: 0; +} + .out-of-threshold { - display: flex; - align-items: center; - gap: 2px; + display: flex; + align-items: center; + gap: 2px; } .out-of-threshold__icon { - font-size: 16px; - width: 16px; - height: 16px; + font-size: 16px; + width: 16px; + height: 16px; } diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 2810aedae..ec60dbc05 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -2750,6 +2750,13 @@ __metadata: languageName: node linkType: hard +"@fontsource/ibm-plex-mono@npm:^5.2.7": + version: 5.2.7 + resolution: "@fontsource/ibm-plex-mono@npm:5.2.7" + checksum: e9f3c3825cebc5f4829cc4f48c7fba9f8c18fb837338ec9b81bab778bd3e69a4e632580df5647831ca3fd782ff7baecd0e2d38585d9a3a6c6db1eb45102afe19 + languageName: node + linkType: hard + "@fontsource/noto-sans@npm:^5.2.10": version: 5.2.10 resolution: "@fontsource/noto-sans@npm:5.2.10" @@ -12046,6 +12053,7 @@ __metadata: "@angular/platform-browser-dynamic": ~20.3.16 "@angular/router": ~20.3.16 "@brumeilde/ngx-theme": ^1.2.1 + "@fontsource/ibm-plex-mono": ^5.2.7 "@fontsource/noto-sans": ^5.2.10 "@jsonurl/jsonurl": ^1.1.8 "@material-symbols/font-400": ^0.40.2