extern/bruno
1
0
Fork 1
mirror of https://github.com/usebruno/bruno.git synced 2024-12-23 07:09:01 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore: added input in creation collection form

Browse Source
This commit is contained in:
Anoop M D 2022-01-13 23:27:27 +05:30
parent 29cd9e4607
commit 4f7b5187be
3 changed files with 52 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
packages/grafnode-components/src/components/Sidebar/CreateCollection/index.js Normal file
View File

@ -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;

16
packages/grafnode-components/src/components/Sidebar/index.js
View File

@ -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 && (
<Modal
size="md"
title='Create Collection'
{modalOpen ? (
<CreateCollection
handleCancel={handleCancel}
handleConfirm={handleConfirm}
>
Hello
</Modal>
)}
actions={actions}
dispatch={dispatch}
/>
) : null}
<Navbar />

21
packages/grafnode-run/src/globalStyles.js
View File

@ -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;