add Spree(local) to netowrk list popover

client/src/components/molecules/NetworkSwitcher.module.scss

@@ -59,11 +59,14 @@ $localSpacer: $spacer / 7;
 .networkSwitchButton span {
     display: inline-block;
     color: $brand-grey-light;
-    text-transform: capitalize;
     min-width: 80px;
     text-align: left;
 }
 
+.networkSwitchButton span:first-letter {
+    text-transform: capitalize;
+}
+
 .networkList {
     position: absolute;
     border-radius: 0 0 $border-radius $border-radius;
@@ -91,7 +94,6 @@ $localSpacer: $spacer / 7;
     color: $brand-black;
     text-align: left;
     display: block;
-    text-transform: capitalize;
     border: none;
     width: 100%;
     background: none;
@@ -99,6 +101,10 @@ $localSpacer: $spacer / 7;
     padding: $localSpacer $localSpacer * 2;
 }
 
+.listButton:first-letter {
+    text-transform: capitalize;
+}
+
 .selected .listButton,
 .networkList li:hover {
     font-weight: $font-weight-bold;

client/src/components/molecules/NetworkSwitcher.tsx

@@ -75,7 +75,9 @@ export function NetworkSwitcher() {
                                 className={styles.listButton}
                                 onClick={() => switchNetwork(networkName)}
                             >
-                                {networkName}
+                                {networkName === 'spree'
+                                    ? `${networkName} (local)`
+                                    : networkName}
                             </button>
                         </li>
                     ))}