update flags

src/routes/portfolio/+page.svelte

@@ -286,6 +286,10 @@
 		result = result.map((stock) => (stock.code === code ? { ...stock, quantity } : stock));
 		hasChanges = true;
 	}
+
+	function openStock(code) {
+		goto(`/stocks/${code}`);
+	}
 </script>
 
 <svelte:head>
@@ -387,9 +391,9 @@
 			{#each result as stock}
 				<tr>
 					<td class="code">
-						<div class="col-code" title="{stock.code}">
+						<div class="col-code" title="{stock.code}" on:click={openStock(stock.code)}>
 							<img
-								src={`https://flagcdn.com/16x12/${getFlag(stock.code)}.png`}
+								src={`https://flagcdn.com/w20/${getFlag(stock.code)}.png`}
 								alt="{getFlag(stock.code)} flag"
 								class="flag-icon"
 							/>
@@ -517,6 +521,11 @@
         cursor: default;
     }
 
+		.col-code:hover {
+        background-color: #035f8c;
+				color: #ffffff;
+		}
+
     .name {
         color: #7f8c8d;
     }

src/routes/stocks/[code]/+page.svelte

@@ -67,7 +67,7 @@
 	<div class="stock-page">
 		<div class="stock-header">
 			<img
-				src={`https://flagcdn.com/16x12/${getFlag(code)}.png`}
+				src={`https://flagcdn.com/w20/${getFlag(stockInfo.code)}.png`}
 				alt="{getFlag(code)} flag"
 				class="flag-icon"
 			/>