form fixes and style fixes

frontend/src/components/forms/Channel.jsx

@@ -23,6 +23,7 @@ import {
   Grid,
   Flex,
 } from '@mantine/core';
+import { SquarePlus } from 'lucide-react';
 
 const Channel = ({ channel = null, isOpen, onClose }) => {
   const channelGroups = useChannelsStore((state) => state.channelGroups);
@@ -250,7 +251,7 @@ const Channel = ({ channel = null, isOpen, onClose }) => {
 
   return (
     <>
-      <Modal opened={isOpen} onClose={onClose} size="70%" title="Channel">
+      <Modal opened={isOpen} onClose={onClose} size={800} title="Channel">
         <form onSubmit={formik.handleSubmit}>
           <Grid gap={2}>
             <Grid.Col span={6}>
@@ -265,35 +266,38 @@ const Channel = ({ channel = null, isOpen, onClose }) => {
                 }
               />
 
-              <Group>
-                <NativeSelect
-                  id="channel_group_id"
-                  name="channel_group_id"
-                  label="Channel Group"
-                  value={formik.values.channel_group_id}
-                  onChange={formik.handleChange}
-                  error={
-                    formik.errors.channel_group_id
-                      ? formik.touched.channel_group_id
-                      : ''
-                  }
-                  data={channelGroups.map((option, index) => ({
-                    value: `${option.id}`,
-                    label: option.name,
-                  }))}
-                />
-                <Center>
+              <Grid>
+                <Grid.Col span={11}>
+                  <NativeSelect
+                    id="channel_group_id"
+                    name="channel_group_id"
+                    label="Channel Group"
+                    value={formik.values.channel_group_id}
+                    onChange={formik.handleChange}
+                    error={
+                      formik.errors.channel_group_id
+                        ? formik.touched.channel_group_id
+                        : ''
+                    }
+                    data={channelGroups.map((option, index) => ({
+                      value: `${option.id}`,
+                      label: option.name,
+                    }))}
+                  />
+                </Grid.Col>
+                <Grid.Col span={1}>
                   <ActionIcon
                     color="green.5"
                     onClick={() => setChannelGroupModalOpen(true)}
                     title="Create new group"
                     size="small"
-                    variant="filled"
+                    variant="light"
+                    style={{ marginTop: '175%' }} // @TODO: I don't like this, figure out better placement
                   >
-                    <AddIcon fontSize="small" />
+                    <SquarePlus />
                   </ActionIcon>
-                </Center>
-              </Group>
+                </Grid.Col>
+              </Grid>
 
               <NativeSelect
                 id="stream_profile_id"

frontend/src/components/forms/Stream.jsx

@@ -10,7 +10,6 @@ const Stream = ({ stream = null, isOpen, onClose }) => {
   const streamProfiles = useStreamProfilesStore((state) => state.profiles);
   const [selectedStreamProfile, setSelectedStreamProfile] = useState('');
 
-  console.log(stream);
   const formik = useFormik({
     initialValues: {
       name: '',

frontend/src/components/forms/StreamProfile.jsx

@@ -4,7 +4,7 @@ import { useFormik } from 'formik';
 import * as Yup from 'yup';
 import API from '../../api';
 import useUserAgentsStore from '../../store/userAgents';
-import { Modal, TextInput, Select, Button } from '@mantine/core';
+import { Modal, TextInput, Select, Button, Flex } from '@mantine/core';
 
 const StreamProfile = ({ profile = null, isOpen, onClose }) => {
   const userAgents = useUserAgentsStore((state) => state.userAgents);
@@ -62,7 +62,7 @@ const StreamProfile = ({ profile = null, isOpen, onClose }) => {
           label="Name"
           value={formik.values.profile_name}
           onChange={formik.handleChange}
-          error={formik.touched.profile_name}
+          error={formik.errors.profile_name}
         />
         <TextInput
           id="command"
@@ -70,7 +70,7 @@ const StreamProfile = ({ profile = null, isOpen, onClose }) => {
           label="Command"
           value={formik.values.command}
           onChange={formik.handleChange}
-          error={formik.touched.command}
+          error={formik.errors.command}
         />
         <TextInput
           id="parameters"
@@ -78,7 +78,7 @@ const StreamProfile = ({ profile = null, isOpen, onClose }) => {
           label="Parameters"
           value={formik.values.parameters}
           onChange={formik.handleChange}
-          error={formik.touched.parameters}
+          error={formik.errors.parameters}
         />
 
         <Select
@@ -87,22 +87,24 @@ const StreamProfile = ({ profile = null, isOpen, onClose }) => {
           label="User-Agent"
           value={formik.values.user_agent}
           onChange={formik.handleChange}
-          error={formik.touched.user_agent}
+          error={formik.errors.user_agent}
           data={userAgents.map((ua) => ({
             label: ua.user_agent_name,
             value: `${ua.id}`,
           }))}
         />
 
-        <Button
-          type="submit"
-          variant="contained"
-          color="primary"
-          disabled={formik.isSubmitting}
-          size="small"
-        >
-          Submit
-        </Button>
+        <Flex mih={50} gap="xs" justify="flex-end" align="flex-end">
+          <Button
+            type="submit"
+            variant="contained"
+            color="primary"
+            disabled={formik.isSubmitting}
+            size="small"
+          >
+            Submit
+          </Button>
+        </Flex>
       </form>
     </Modal>
   );