chore: added input in creation collection form

packages/grafnode-components/src/components/Sidebar/CreateCollection/index.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import Modal from '../../Modal';
+
+const CreateCollection = ({handleConfirm, handleCancel, actions, dispatch}) => {
+  return (
+    <Modal
+      size="sm"
+      title='Create Collection'
+      handleConfirm={handleConfirm}
+      handleCancel={handleCancel}
+    >
+      <form className="grafnode-form">
+        <label htmlFor="name" className="block font-semibold">Name</label>
+        <input
+          id="collection-name" type="text" name="collection-name"
+          className="block textbox mt-2 w-full"
+          required
+        />
+      </form>
+    </Modal>
+  );
+};
+
+export default CreateCollection;

packages/grafnode-components/src/components/Sidebar/index.js

@@ -1,6 +1,6 @@
 import React, { useState, forwardRef, useRef } from 'react';
 import Collections from './Collections';
-import Modal from '../Modal';
+import CreateCollection from './CreateCollection';
 import Navbar from '../Navbar';
 import Dropdown from '../Dropdown';
 import { IconBox, IconSearch, IconDots } from '@tabler/icons';
@@ -29,16 +29,14 @@ const Sidebar = ({collections, actions, dispatch, activeRequestTabId}) => {
 
   return (
     <StyledWrapper>
-      {modalOpen && (
+      {modalOpen ? (
-        <Modal
+        <CreateCollection
-          size="md"
-          title='Create Collection'
           handleCancel={handleCancel}
           handleConfirm={handleConfirm}
-        >
+          actions={actions}
-          Hello
+          dispatch={dispatch}
-        </Modal>
+        />
-      )}
+      ) : null}
 
       <Navbar />
 

packages/grafnode-run/src/globalStyles.js

@@ -5,6 +5,27 @@ const GlobalStyle = createGlobalStyle`
     background-color: #f6f8fa;
   }
 
+  .grafnode-form {
+    .textbox {
+      line-height: 1.42857143;
+      background-color: #fff;
+      background-image: none;
+      border: 1px solid #ccc;
+      padding: 0.45rem;
+      box-shadow: none;
+      border-radius: 0px;
+      outline: none;
+      box-shadow: none;
+      transition: border-color ease-in-out .1s;
+      border-radius: 3px;
+
+      &:focus {
+        border: solid 1px #8b8b8b !important;
+        outline: none !important;
+      }
+    }
+  }
+
   @keyframes fade-in {
     from {
       opacity: 0;