Enable 'enter' key in login form + theming

src/frontend/index.tsx

@@ -50,9 +50,22 @@ function App() {
           // "#21494E",
           // "#223F42",
           // "#213639"
-        ]
-
-        // ["0096a9"],
+        ],
+        grey: [
+          "#CECBD0",
+          "#B2ADB6",
+          "#9A949E",
+          "#857D8A",
+          "#726C78",
+          "#635D67",
+          "#555059",
+          "#47434B",
+          "#3C383F",
+          "#322F35",
+          // "#2A282C",
+          // "#242125",
+          // "#1E1C1F"
+        ],
       },
       primaryColor: "flandersmake",
     }} withGlobalStyles withNormalizeCSS>
@@ -78,7 +91,6 @@ function App() {
           </Tabs.List>
           <Tabs.Panel value="login" style={{padding:20}}>
             <LoginForm onLogin={(c: ConnectionProps) => {
-              console.log("login");
                 setConnections(prevConnections => prevConnections.filter(conn => conn.user !== c.user).concat(c));
                 setCurrentTab("conn-" + c.user);
             }}/>

src/frontend/loginform.tsx

@@ -20,7 +20,10 @@ export function LoginForm(props: LoginProps) {
   const [user, setUser] = React.useState<string>("");
   const [pass, setPass] = React.useState<string>("");
 
-  return <form>
+  return <form onSubmit={event => {
+      event.preventDefault();
+      props.onLogin({server, user, pass});
+  }}>
     <SimpleGrid cols={2} style={{maxWidth: 1000}}>
     <div>
       <Title order={5}>Credentials</Title>
@@ -48,6 +51,6 @@ export function LoginForm(props: LoginProps) {
     </div>
     </SimpleGrid>
     <Space h="xl"/>
-    <Button disabled={user.length === 0} onClick={() => props.onLogin({server, user, pass})}>Login</Button>
+    <Button type="submit" disabled={user.length === 0}>Login</Button>
   </form>;
 }

src/frontend/videowallcontrol.tsx

@@ -6,6 +6,7 @@ import {
   Space,
   Title,
   Center,
+  Box,
 } from '@mantine/core';
 
 import {
@@ -68,7 +69,7 @@ export function VideoWallControl(props: VideoWallControlProps) {
       <Space h="md"/>
       <Droppable droppableId="videowall" direction="horizontal">
         {(provided, snapshot) => (
-          <div ref={provided.innerRef} {...provided.droppableProps} style={{height: 160, backgroundColor: '#0096a9', position:"relative"}}>
+          <Box sx={theme => ({backgroundColor: theme.colors.flandersmake[theme.colorScheme === 'dark' ? 8 : 4]})} ref={provided.innerRef} {...provided.droppableProps} style={{height: 160, position:"relative"}}>
             <Group spacing={0} style={{height: '100%'}}>
               {props.items.videowall.map((item, index) => (
                 <Draggable key={item} draggableId={item} index={index} style={{height: '100%'}}>
@@ -82,7 +83,7 @@ export function VideoWallControl(props: VideoWallControlProps) {
               <div/>
             </Group>
             {provided.placeholder}
-          </div>
+          </Box>
         )}
       </Droppable>
       <Space h="xl"/>
@@ -90,7 +91,7 @@ export function VideoWallControl(props: VideoWallControlProps) {
       <Space h="md"/>
       <Droppable droppableId="hidden" direction="horizontal">
         {(provided, snapshot) => (
-          <div ref={provided.innerRef} {...provided.droppableProps} style={{height: 160, backgroundColor: '#555059', position:"relative"}}>
+          <Box sx={theme => ({backgroundColor: theme.colors.grey[theme.colorScheme === 'dark' ? 8 : 3]})} ref={provided.innerRef} {...provided.droppableProps} style={{height: 160, position:"relative"}}>
             <Group spacing={0} style={{height: '100%'}}>
               {props.items.hidden.map((item, index) => (
                 <Draggable key={item} draggableId={item} index={index}>
@@ -104,7 +105,7 @@ export function VideoWallControl(props: VideoWallControlProps) {
               <div/>
             </Group>
             {provided.placeholder}
-          </div>
+          </Box>
         )}
       </Droppable>
       </div>