Fix environment selector modal (#186)

* fix(ui): fix theme in environment select modal

* feat(ui): add icons for environment names

Author: x1unix

web/src/components/modals/EnvironmentSelectModal/EnvironmentSelectModal.css

@@ -0,0 +1,5 @@
+.EnvironmentSelectButton__icon {
+  color: var(--color-idle);
+  margin-right: 12px;
+  font-size: 2em;
+}

web/src/components/modals/EnvironmentSelectModal/EnvironmentSelectModal.tsx

@@ -2,26 +2,32 @@ import React from 'react';
 import { CompoundButton } from '@fluentui/react/lib/Button';
 import { Modal } from '@fluentui/react/lib/Modal';
 import {
-  Stack, IStackTokens, getTheme, IconButton, mergeStyleSets
+  Stack, IStackTokens, IconButton, mergeStyleSets, useTheme
 } from '@fluentui/react';
+import { VscCloud, VscBeaker } from 'react-icons/vsc';
+import { SiWebassembly } from 'react-icons/si';
 import { getContentStyles, getIconButtonStyles } from '~/styles/modal';
-import {RuntimeType} from "~/services/config";
+import {RuntimeType} from '~/services/config';
+import './EnvironmentSelectModal.css';
 
 const options = [
   {
     label: 'Go Playground',
     description: 'Build and run code on official Go playground server.',
     type: RuntimeType.GoPlayground,
+    icon: <VscCloud />
   },
   {
     label: 'Go Playground (GoTip)',
     description: 'Run on server with a current unstable development build of Go.',
     type: RuntimeType.GoTipPlayground,
+    icon: <VscBeaker />
   },
   {
     label: 'WebAssembly',
     description: 'Run Go code in your web browser with access to JS API.',
     type: RuntimeType.WebAssembly,
+    icon: <SiWebassembly />
   }
 ]
 
@@ -40,7 +46,7 @@ interface Props {
 const EnvironmentSelectModal: React.FC<Props> = ({
   isOpen, onClose, value
 }) => {
-  const theme = getTheme();
+  const theme = useTheme();
   const contentStyles = getContentStyles(theme);
   const iconButtonStyles = getIconButtonStyles(theme);
   const stackTokens: IStackTokens = { childrenGap: 10 };
@@ -64,13 +70,18 @@ const EnvironmentSelectModal: React.FC<Props> = ({
       <div className={contentStyles.body}>
         <Stack tokens={stackTokens}>
           {
-            options.map(({label, description, type}) => (
+            options.map(({label, description, type, icon}) => (
               <CompoundButton
                 key={type}
                 secondaryText={description}
                 checked={type === value}
                 className={buttonStyles.button}
                 onClick={() => onClose?.(type)}
+                onRenderIcon={() => (
+                  <div className="EnvironmentSelectButton__icon">
+                    {icon}
+                  </div>
+                )}
               >
                 {label}
               </CompoundButton>