Updating categories using form

client/src/components/Apps/AppForm/AppForm.tsx

@@ -5,6 +5,7 @@ import { App, NewApp } from '../../../interfaces';
 
 import ModalForm from '../../UI/Forms/ModalForm/ModalForm';
 import InputGroup from '../../UI/Forms/InputGroup/InputGroup';
+import Button from '../../UI/Buttons/Button/Button';
 
 interface ComponentProps {
   modalHandler: () => void;
@@ -35,6 +36,12 @@ const AppForm = (props: ComponentProps): JSX.Element => {
         url: props.app.url,
         icon: props.app.icon
       })
+    } else {
+      setFormData({
+        name: '',
+        url: '',
+        icon: ''
+      })
     }
   }, [props.app])
 
@@ -114,8 +121,8 @@ const AppForm = (props: ComponentProps): JSX.Element => {
         </span>
       </InputGroup>
       {!props.app
-        ? <button type="submit">add</button>
-        : <button type="submit">update</button>
+        ? <Button>Add new application</Button>
+        : <Button>Update application</Button>
       }
     </ModalForm>
   )

client/src/components/Apps/AppGrid/AppGrid.module.css

@@ -21,8 +21,11 @@
   }
 }
 
-/* 320px — 480px: Mobile devices.
-481px — 768px: iPads, Tablets.
-769px — 1024px: Small screens, laptops.
-1025px — 1200px: Desktops, large screens.
-1201px and more — Extra large screens, TV. */
+.GridMessage {
+  color: var(--color-primary);
+}
+
+.GridMessage a {
+  color: var(--color-accent);
+  font-weight: 600;
+}

client/src/components/Apps/Apps.tsx

@@ -104,7 +104,7 @@ const Apps = (props: ComponentProps): JSX.Element => {
           : (!isInEdit
               ? props.apps.length > 0
                 ? <AppGrid apps={props.apps} />
-                : <p className={classes.AppsMessage}>You don't have any applications. You can a new one from <Link to='/applications'>/application</Link> menu</p>
+                : <p className={classes.AppsMessage}>You don't have any applications. You can add a new one from <Link to='/applications'>/application</Link> menu</p>
               : <AppTable updateAppHandler={toggleUpdate} />)
         }
       </div>