various ui updates

nym-connect/src/components/AppWindowFrame.tsx

@@ -5,7 +5,7 @@ import { NymWordmark } from '@nymproject/react/logo/NymWordmark';
 export const AppWindowFrame: React.FC = ({ children }) => (
   <Box
     sx={{
-      background: '#121726',
+      background: '#1D2125',
       borderRadius: '12px',
       padding: '12px 16px',
       display: 'grid',

nym-connect/src/components/ConnectionButton.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 import { ConnectionStatusKind } from '../types';
 
 const getBusyFillColor = (color: string): string => {
-  if (color === '#60D6EF') {
+  if (color === '#F4B02D') {
     return '#21D072';
   }
-  return '#60D6EF';
+  return '#F4B02D';
 };
 
 const getStatusFillColor = (status: ConnectionStatusKind, hover: boolean, isError: boolean): string => {
@@ -21,10 +21,10 @@ const getStatusFillColor = (status: ConnectionStatusKind, hover: boolean, isErro
       if (hover) {
         return '#21D072';
       }
-      return '#60D6EF';
+      return '#F4B02D';
     case ConnectionStatusKind.connecting:
     case ConnectionStatusKind.disconnecting:
-      return '#60D6EF';
+      return '#F4B02D';
     default:
       // connected
       if (hover) {

nym-connect/src/components/ServiceProviderSelector.tsx

@@ -2,8 +2,10 @@ import React, { useEffect, useMemo } from 'react';
 import IconButton from '@mui/material/IconButton';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
-import ArrowDropDownCircleIcon from '@mui/icons-material/ArrowDropDownCircle';
-import { Box, CircularProgress, Stack, Tooltip, Typography } from '@mui/material';
+import KeyboardArrowDownRoundedIcon from '@mui/icons-material/KeyboardArrowDownRounded';
+import KeyboardArrowUpRoundedIcon from '@mui/icons-material/KeyboardArrowUpRounded';
+import { Box, CircularProgress, Stack, Tooltip, Typography, ListItemIcon } from '@mui/material';
+import Check from '@mui/icons-material/Check';
 import { ServiceProvider, Service, Services } from '../types/directory';
 
 type ServiceWithRandomSp = {
@@ -62,7 +64,7 @@ export const ServiceProviderSelector: React.FC<{
           Loading services...
         </Typography>
         <IconButton id="service-provider-button" disabled>
-          <ArrowDropDownCircleIcon />
+          {open ? <KeyboardArrowUpRoundedIcon /> : <KeyboardArrowDownRoundedIcon />}
         </IconButton>
       </Box>
     );
@@ -80,14 +82,14 @@ export const ServiceProviderSelector: React.FC<{
 
   return (
     <>
-      <Box display="flex" alignItems="center" justifyContent="space-between" sx={{ mt: 3 }}>
-        <Typography
-          ref={textEl}
-          fontSize={14}
-          fontWeight={700}
-          color={(theme) => (serviceProvider ? undefined : theme.palette.primary.main)}
-        >
-          {service ? service.description : 'Select a service'}
+      <Box
+        display="flex"
+        alignItems="center"
+        justifyContent="space-between"
+        sx={{ mt: 3, borderBottom: (theme) => `1px solid ${theme.palette.info.main}` }}
+      >
+        <Typography ref={textEl} fontSize={14} fontWeight={700} color={(theme) => theme.palette.info.main}>
+          {!service ? 'Select a service' : service.description}
         </Typography>
         <IconButton
           id="service-provider-button"
@@ -95,8 +97,11 @@ export const ServiceProviderSelector: React.FC<{
           aria-haspopup="true"
           aria-expanded={open ? 'true' : undefined}
           onClick={handleClick}
+          color="info"
+          size="small"
+          sx={{ padding: 0 }}
         >
-          <ArrowDropDownCircleIcon />
+          {open ? <KeyboardArrowUpRoundedIcon /> : <KeyboardArrowDownRoundedIcon />}
         </IconButton>
       </Box>
       <Menu
@@ -112,6 +117,11 @@ export const ServiceProviderSelector: React.FC<{
           vertical: 'top',
           horizontal: 'left',
         }}
+        PaperProps={{
+          sx: {
+            border: '1px solid rgba(96, 214, 239, 0.4)',
+          },
+        }}
         MenuListProps={{
           'aria-labelledby': 'service-provider-button',
           sx: {
@@ -120,7 +130,18 @@ export const ServiceProviderSelector: React.FC<{
         }}
       >
         {servicesWithRandomSp.map(({ id, description, sp }) => (
-          <MenuItem dense key={id} sx={{ fontSize: 'small', fontWeight: 'bold' }} onClick={() => handleClose(sp)}>
+          <MenuItem
+            dense
+            autoFocus={id === service?.id}
+            key={id}
+            sx={{
+              fontSize: 'small',
+              fontWeight: 'bold',
+              minWidth: '208px',
+              '&.Mui-focusVisible': { bgcolor: 'transparent' },
+            }}
+            onClick={() => handleClose(sp)}
+          >
             <Tooltip
               title={
                 <Stack direction="column">
@@ -143,6 +164,16 @@ export const ServiceProviderSelector: React.FC<{
             >
               <Typography>{description}</Typography>
             </Tooltip>
+            {id === service?.id && (
+              <ListItemIcon
+                sx={{
+                  position: 'absolute',
+                  right: '0',
+                }}
+              >
+                <Check sx={{ padding: 0 }} />
+              </ListItemIcon>
+            )}
           </MenuItem>
         ))}
       </Menu>

nym-connect/src/theme/theme.tsx

@@ -24,17 +24,17 @@ const nymPalette: NymPalette = {
   success: '#21D073',
   info: '#60D7EF',
   fee: '#967FF0',
-  background: { light: '#F4F6F8', dark: '#121726' },
+  background: { light: '#F4F6F8', dark: '#1D2125' },
   text: {
     light: '#F2F2F2',
-    dark: '#121726',
+    dark: '#1D2125',
   },
 };
 
 const darkMode: NymPaletteVariant = {
   mode: 'dark',
   background: {
-    main: '#121726',
+    main: '#1D2125',
     paper: '#242C3D',
   },
   text: {
@@ -52,7 +52,7 @@ const lightMode: NymPaletteVariant = {
     paper: '#FFFFFF',
   },
   text: {
-    main: '#121726',
+    main: '#1D2125',
   },
   topNav: {
     background: '#111826',