Update dashboard styling to be more RMI-like (#177)

MonikaFu · web-flow · commit efda2fedad92 · 2025-01-16T14:44:46.000+01:00
* Update dashboard layout colours

* Style

* Use Roboto font

* Update plot colours

* Style

* Update warning styles
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -70,6 +70,7 @@
 	"type": "module",
 	"dependencies": {
 		"@floating-ui/dom": "^1.6.7",
+		"@fontsource/roboto": "^5.1.1",
 		"@fortawesome/fontawesome-free": "^6.7.1",
 		"d3": "^5.16.0",
 		"d3-array": "^3.2.4",
diff --git a/src/app.postcss b/src/app.postcss
@@ -18,3 +18,8 @@ body {
 	width: 100%;
 	background-color: rgb(var(--color-surface-100));
 }
+
+:root [data-theme='rmi_theme'] {
+	--theme-font-family-base: 'Roboto', sans-serif;
+	--theme-font-family-heading: 'Roboto', sans-serif;
+}
diff --git a/src/css/plot_styles.css b/src/css/plot_styles.css
@@ -1,5 +1,9 @@
 /* src/css/plot_styles.css */
 
+strong {
+	font-weight: 700;
+}
+
 .d3chart > style {
 	display: none;
 }
@@ -94,7 +98,7 @@
 /* styles for interactive charts ****************/
 
 div.d3chart {
-	font-family: sans-serif;
+	font-family: 'Roboto', sans-serif;
 	font-size: 0.9em;
 	width: 100%;
 	max-width: 1400px;
@@ -103,34 +107,34 @@ div.d3chart {
 }
 
 div.d3chart .chart_title {
-	font-family: sans-serif;
+	font-family: 'Roboto', sans-serif;
 	font-size: 1em;
 	text-align: center;
 }
 
 div.d3chart .chart_filters {
-	font-family: sans-serif;
+	font-family: 'Roboto', sans-serif;
 	font-size: 0.9em;
 	text-align: center;
 	margin: 10px;
 }
 
 div.d3chart .chart_caption {
-	font-family: sans-serif;
+	font-family: 'Roboto', sans-serif;
 	font-size: 0.8em;
 	text-align: center;
 }
 
 div.d3chart .chart_source {
-	font-family: sans-serif;
+	font-family: 'Roboto', sans-serif;
 	font-size: 0.7em;
 	font-style: italic;
 	padding-top: 5px;
 }
 
 div.d3chart svg {
 	/*   border: 1px dashed; */
-	background-color: #d9e2e8;
+	background-color: #ffffff;
 }
 
 div.d3chart > * {
@@ -140,18 +144,18 @@ div.d3chart > * {
 
 div.d3chart div.d3tooltip {
 	opacity: 0.9;
-	background-color: #d9e2e8;
+	background-color: #ffffff;
 	color: black;
 	border-radius: 4px;
 	padding: 10px;
 	border: 1px solid;
-	font-family: sans-serif;
+	font-family: 'Roboto', sans-serif;
 	/* position: absolute; */
 	position: fixed; /* position must be fixed to work in Gitbook */
 }
 
 div.d3chart svg text {
-	font-family: sans-serif;
+	font-family: 'Roboto', sans-serif;
 }
 
 div.d3chart.tech_exposure {
@@ -176,11 +180,11 @@ div.d3chart .axis {
 
 /* axis color */
 div.d3chart path.domain {
-	stroke: #99b1c1;
+	stroke: #93aec6;
 }
 
 div.d3chart .tick line {
-	stroke: #99b1c1;
+	stroke: #93aec6;
 }
 
 /* d3 data_table styling */
@@ -190,7 +194,7 @@ div.d3chart.data_table th,
 div.d3chart.data_table td {
 	border-collapse: collapse;
 	padding: 8px;
-	border-bottom: 1px solid #aaa;
+	border-bottom: 1px solid #93aec6;
 	border-bottom: none !important;
 	text-align: center;
 	font-size: 1em;
@@ -210,7 +214,7 @@ div.d3chart.included_table {
 
 div.d3chart.included_table table thead tr {
 	border-top: none !important;
-	border-bottom: 2px solid #99b1c1 !important;
+	border-bottom: 1px solid #93aec6 !important;
 }
 
 div.d3chart.included_table table,
@@ -225,13 +229,13 @@ div.d3chart.included_table tr {
 }
 
 div.d3chart.included_table table tr.summary_row {
-	border-top: 1px solid #99b1c1 !important;
+	border-top: 1px solid #93aec6 !important;
 	border-bottom: none !important;
 }
 
 div.d3chart.included_table table td.column_left_border,
 div.d3chart.included_table table th.column_left_border {
-	border-left: 1px solid #99b1c1 !important;
+	border-left: 1px solid #93aec6 !important;
 }
 
 /* sectors color palette */
diff --git a/src/js/createErrorMessageDiv.js b/src/js/createErrorMessageDiv.js
@@ -2,11 +2,11 @@ export function createErrorMessageDiv() {
 	let errorMessageDiv = document.createElement('div');
 	errorMessageDiv.setAttribute('role', 'alert');
 	let errorTitle = document.createElement('div');
-	errorTitle.classList = 'bg-red-500 text-white font-bold rounded-t px-4 py-2';
+	errorTitle.classList = 'bg-error-500 text-white font-bold rounded-t px-4 py-2';
 	errorTitle.appendChild(document.createTextNode('Something went wrong'));
 	let errorMessage = document.createElement('div');
 	errorMessage.classList =
-		'border border-t-0 border-red-400 rounded-b bg-red-100 px-4 py-3 text-red-700';
+		'border border-t-0 border-error-400 rounded-b bg-error-100 px-4 py-3 text-error-700';
 	errorMessage.appendChild(
 		document.createTextNode('An error occurred while generating this plot.')
 	);
diff --git a/src/js/pie_exploded.js b/src/js/pie_exploded.js
@@ -139,7 +139,7 @@ export class PieExploded {
 			.attr('class', (d) => (d.data.exploded ? d.data.key : 'non-PACTA'))
 			.attr('d', arc)
 			.attr('fill', (d) => (d.data.exploded ? color(d.data.key) : greys(d.data.key)))
-			.attr('stroke', '#d9e2e8')
+			.attr('stroke', '#ffffff')
 			.style('stroke-width', '2px')
 			.style('opacity', 1)
 			.on('mouseover', mouseover)
diff --git a/src/rmi_theme.ts b/src/rmi_theme.ts
@@ -13,11 +13,11 @@ export const rmi_theme: CustomThemeConfig = {
 		'--theme-border-base': '1px',
 		// =~= Theme On-X Colors =~=
 		'--on-primary': '0 0 0',
-		'--on-secondary': '255 255 255',
-		'--on-tertiary': '255 255 255',
+		'--on-secondary': '0 0 0',
+		'--on-tertiary': '0 0 0',
 		'--on-success': '0 0 0',
 		'--on-warning': '0 0 0',
-		'--on-error': '0 0 0',
+		'--on-error': '255 255 255',
 		'--on-surface': '255 255 255',
 		// =~= Theme Colors  =~=
 		// primary | #45CFCC
@@ -31,39 +31,39 @@ export const rmi_theme: CustomThemeConfig = {
 		'--color-primary-700': '52 155 153', // #349b99
 		'--color-primary-800': '41 124 122', // #297c7a
 		'--color-primary-900': '34 101 100', // #226564
-		// secondary | #58595B
-		'--color-secondary-50': '230 230 230', // #e6e6e6
-		'--color-secondary-100': '222 222 222', // #dedede
-		'--color-secondary-200': '213 214 214', // #d5d6d6
-		'--color-secondary-300': '188 189 189', // #bcbdbd
-		'--color-secondary-400': '138 139 140', // #8a8b8c
-		'--color-secondary-500': '88 89 91', // #58595B
-		'--color-secondary-600': '79 80 82', // #4f5052
-		'--color-secondary-700': '66 67 68', // #424344
-		'--color-secondary-800': '53 53 55', // #353537
-		'--color-secondary-900': '43 44 45', // #2b2c2d
-		// tertiary | #FFFFFF
-		'--color-tertiary-50': '255 255 255', // #ffffff
-		'--color-tertiary-100': '255 255 255', // #ffffff
-		'--color-tertiary-200': '255 255 255', // #ffffff
-		'--color-tertiary-300': '255 255 255', // #ffffff
-		'--color-tertiary-400': '255 255 255', // #ffffff
-		'--color-tertiary-500': '255 255 255', // #FFFFFF
-		'--color-tertiary-600': '230 230 230', // #e6e6e6
-		'--color-tertiary-700': '191 191 191', // #bfbfbf
-		'--color-tertiary-800': '153 153 153', // #999999
-		'--color-tertiary-900': '125 125 125', // #7d7d7d
-		// success | #99b083
-		'--color-success-50': '240 243 236', // #f0f3ec
-		'--color-success-100': '235 239 230', // #ebefe6
-		'--color-success-200': '230 235 224', // #e6ebe0
-		'--color-success-300': '214 223 205', // #d6dfcd
-		'--color-success-400': '184 200 168', // #b8c8a8
-		'--color-success-500': '153 176 131', // #99b083
-		'--color-success-600': '138 158 118', // #8a9e76
-		'--color-success-700': '115 132 98', // #738462
-		'--color-success-800': '92 106 79', // #5c6a4f
-		'--color-success-900': '75 86 64', // #4b5640
+		// secondary | #93aec6
+		'--color-secondary-50': '239 243 246', // #eff3f6
+		'--color-secondary-100': '233 239 244', // #e9eff4
+		'--color-secondary-200': '228 235 241', // #e4ebf1
+		'--color-secondary-300': '212 223 232', // #d4dfe8
+		'--color-secondary-400': '179 198 215', // #b3c6d7
+		'--color-secondary-500': '147 174 198', // #93aec6
+		'--color-secondary-600': '132 157 178', // #849db2
+		'--color-secondary-700': '110 131 149', // #6e8395
+		'--color-secondary-800': '88 104 119', // #586877
+		'--color-secondary-900': '72 85 97', // #485561
+		// tertiary | #768B9E
+		'--color-tertiary-50': '234 238 240', // #eaeef0
+		'--color-tertiary-100': '228 232 236', // #e4e8ec
+		'--color-tertiary-200': '221 226 231', // #dde2e7
+		'--color-tertiary-300': '200 209 216', // #c8d1d8
+		'--color-tertiary-400': '159 174 187', // #9faebb
+		'--color-tertiary-500': '118 139 158', // #768B9E
+		'--color-tertiary-600': '106 125 142', // #6a7d8e
+		'--color-tertiary-700': '89 104 119', // #596877
+		'--color-tertiary-800': '71 83 95', // #47535f
+		'--color-tertiary-900': '58 68 77', // #3a444d
+		// success | #00994D
+		'--color-success-50': '217 240 228', // #d9f0e4
+		'--color-success-100': '204 235 219', // #ccebdb
+		'--color-success-200': '191 230 211', // #bfe6d3
+		'--color-success-300': '153 214 184', // #99d6b8
+		'--color-success-400': '77 184 130', // #4db882
+		'--color-success-500': '0 153 77', // #00994D
+		'--color-success-600': '0 138 69', // #008a45
+		'--color-success-700': '0 115 58', // #00733a
+		'--color-success-800': '0 92 46', // #005c2e
+		'--color-success-900': '0 75 38', // #004b26
 		// warning | #ffe480
 		'--color-warning-50': '255 251 236', // #fffbec
 		'--color-warning-100': '255 250 230', // #fffae6
@@ -75,23 +75,23 @@ export const rmi_theme: CustomThemeConfig = {
 		'--color-warning-700': '191 171 96', // #bfab60
 		'--color-warning-800': '153 137 77', // #99894d
 		'--color-warning-900': '125 112 63', // #7d703f
-		// error | #df897b
-		'--color-error-50': '250 237 235', // #faedeb
-		'--color-error-100': '249 231 229', // #f9e7e5
-		'--color-error-200': '247 226 222', // #f7e2de
-		'--color-error-300': '242 208 202', // #f2d0ca
-		'--color-error-400': '233 172 163', // #e9aca3
-		'--color-error-500': '223 137 123', // #df897b
-		'--color-error-600': '201 123 111', // #c97b6f
-		'--color-error-700': '167 103 92', // #a7675c
-		'--color-error-800': '134 82 74', // #86524a
-		'--color-error-900': '109 67 60', // #6d433c
+		// error | #AB3C2C
+		'--color-error-50': '242 226 223', // #f2e2df
+		'--color-error-100': '238 216 213', // #eed8d5
+		'--color-error-200': '234 206 202', // #eaceca
+		'--color-error-300': '221 177 171', // #ddb1ab
+		'--color-error-400': '196 119 107', // #c4776b
+		'--color-error-500': '171 60 44', // #AB3C2C
+		'--color-error-600': '154 54 40', // #9a3628
+		'--color-error-700': '128 45 33', // #802d21
+		'--color-error-800': '103 36 26', // #67241a
+		'--color-error-900': '84 29 22', // #541d16
 		// surface | #003B63
-		'--color-surface-50': '217 226 232', // #d9e2e8
-		'--color-surface-100': '204 216 224', // #ccd8e0
-		'--color-surface-200': '191 206 216', // #bfced8
-		'--color-surface-300': '153 177 193', // #99b1c1
-		'--color-surface-400': '77 118 146', // #4d7692
+		'--color-surface-50': '255 255 255', // #ffffff
+		'--color-surface-100': '255 255 255', // #ffffff
+		'--color-surface-200': '244 247 249', // #f4f7f9
+		'--color-surface-300': '153 177 193', // #e9eff4
+		'--color-surface-400': '77 118 146', // #dfe7ee
 		'--color-surface-500': '0 59 99', // #003B63
 		'--color-surface-600': '0 53 89', // #003559
 		'--color-surface-700': '0 44 74', // #002c4a
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -22,6 +22,10 @@
 	import { storePopup } from '@skeletonlabs/skeleton';
 	storePopup.set({ computePosition, autoUpdate, flip, shift, offset, arrow });
 
+	//fonts
+	import '@fontsource/roboto/400.css';
+	import '@fontsource/roboto/700.css';
+
 	async function downloadArchive() {
 		try {
 			const response = await fetch('data/archive.zip');
diff --git a/src/routes/company_view.svelte b/src/routes/company_view.svelte
@@ -365,7 +365,7 @@
 			<select class="select max-w-48 variant-outline-surface" id="asset_class_selector_landing">
 				<option value="Not_selected">Please select</option>
 			</select>
-			<button class="btn variant-filled-surface" id="go_button_landing">Go!</button>
+			<button class="btn variant-filled-secondary" id="go_button_landing">Go!</button>
 		</div>
 	</div>
 </div>
@@ -473,7 +473,7 @@
 				</div>
 			</div>
 			<div
-				class="alert-message sm:col-span-10 bg-blue-100 border-t border-b border-blue-500 text-blue-700 px-4 py-3 hidden"
+				class="alert-message sm:col-span-10 bg-warning-300 border-t border-b border-warning-700 text-warning-900 px-4 py-3 hidden"
 				role="alert"
 				id="alert-message-parameters"
 			>
@@ -512,7 +512,7 @@
 </div>
 
 <div
-	class="alert-message bg-blue-100 border-t border-b border-blue-500 text-blue-700 px-4 py-3 hidden"
+	class="alert-message bg-warning-300 border-t border-b border-warning-700 text-warning-900 px-4 py-3 hidden"
 	role="alert"
 	id="alert-message"
 >
diff --git a/src/routes/sector_view.svelte b/src/routes/sector_view.svelte
@@ -435,7 +435,7 @@
 			<select class="select max-w-48 variant-outline-surface" id="asset_class_selector_landing">
 				<option value="Not_selected">Please select</option>
 			</select>
-			<button class="btn variant-filled-surface" id="go_button_landing">Go!</button>
+			<button class="btn variant-filled-secondary" id="go_button_landing">Go!</button>
 		</div>
 	</div>
 </div>
@@ -580,7 +580,7 @@
 				</div>
 			</div>
 			<div
-				class="alert-message sm:col-span-10 bg-blue-100 border-t border-b border-blue-500 text-blue-700 px-4 py-3 hidden"
+				class="alert-message sm:col-span-10 bg-warning-300 border-t border-b border-warning-700 text-warning-900 px-4 py-3 hidden"
 				role="alert"
 				id="alert-message-parameters"
 			>
@@ -646,7 +646,7 @@
 </div>
 
 <div
-	class="alert-message bg-blue-100 border-t border-b border-blue-500 text-blue-700 px-4 py-3 hidden"
+	class="alert-message bg-warning-300 border-t border-b border-warning-700 text-warning-900 px-4 py-3 hidden"
 	role="alert"
 	id="alert-message"
 >

Original file line number	Diff line number	Diff line change
`@@ -18,3 +18,8 @@ body {`
`18`	`18`	`width: 100%;`
`19`	`19`	`background-color: rgb(var(--color-surface-100));`
`20`	`20`	`}`
	`21`	`+`
	`22`	`+:root [data-theme='rmi_theme'] {`
	`23`	`+ --theme-font-family-base: 'Roboto', sans-serif;`
	`24`	`+ --theme-font-family-heading: 'Roboto', sans-serif;`
	`25`	`+}`