Merge pull request #1578 from rocket-admin/feat/ibm-plex-mono-table-font

Feat/ibm plex mono table font

Author: lyubov-voloshko

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"

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",

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) {

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);
 }
-
-

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;
 }

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;
+}

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;
 }

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