Move the pin for realms (#610)

Closes #559

Currently, for some realms the user pin is incorrectly displayed. It
overmasks the realm logo + name. Let's move it and find the correct
position for them.

Changing the pin position is only on the map. The user pin in the modal
header or in the congratulations modal will be displayed in the same way
as before.

**UI**

<img width="348" alt="Screenshot 2023-11-01 at 11 41 16"
src="https://github.com/tahowallet/dapp/assets/23117945/3c0a48c3-1973-453f-b12b-fa462128c403">

<img width="447" alt="Screenshot 2023-11-01 at 11 41 00"
src="https://github.com/tahowallet/dapp/assets/23117945/435aa586-6e18-4d15-b363-73d0ca3a1812">

<img width="432" alt="Screenshot 2023-11-01 at 11 40 36"
src="https://github.com/tahowallet/dapp/assets/23117945/ba5a71bd-0d19-473b-9703-c423dccae6c6">

<img width="356" alt="Screenshot 2023-11-01 at 11 40 10"
src="https://github.com/tahowallet/dapp/assets/23117945/5512ebcc-9d56-46c4-9b3b-f130f2a6e220">

<img width="342" alt="Screenshot 2023-11-01 at 11 39 48"
src="https://github.com/tahowallet/dapp/assets/23117945/a066c4e5-3ae7-4f6b-bb1f-4ae39275ca13">

src/ui/Island/RealmPin.tsx

@@ -9,7 +9,22 @@ import {
 } from "redux-state"
 import { FIGMA_FACTOR, getRealmMapData } from "shared/constants"
 
-const PIN_TRANSLATE = 200
+function getPinShift(realmId: string) {
+  switch (realmId) {
+    case "4":
+      return { x: 200, y: 300 }
+    case "7":
+      return { x: 500, y: 300 }
+    case "9":
+      return { x: 500, y: 300 }
+    case "19":
+      return { x: 250, y: 250 }
+    case "22":
+      return { x: 200, y: 250 }
+    default:
+      return { x: 250, y: 250 }
+  }
+}
 
 export default function RealmPin() {
   const stakingRealmId = useDappSelector(selectStakingRealmId)
@@ -22,8 +37,9 @@ export default function RealmPin() {
 
   if (!stakingRealmId || !stakingRealm) return null
 
-  const pinX = stakingRealm.x + stakingRealm.w * 0.75 - PIN_TRANSLATE
-  const pinY = stakingRealm.y + stakingRealm.h / 2 - PIN_TRANSLATE
+  const pinShift = getPinShift(stakingRealmId)
+  const pinX = stakingRealm.x + stakingRealm.w * 0.75 - pinShift.x
+  const pinY = stakingRealm.y + stakingRealm.h / 2 - pinShift.y
 
   return (
     <Group listening={false}>