const addColumn = props.addColumn; const setAddColumnDialogOpen = props.setAddColumnDialogOpen; const functionLoader = props.functionLoader; const onChangeColumnName = props.onChangeColumnName; const columnName = props.columnName; const componentOwnerId = props.componentOwnerId; const addColumnNameMissing = props.addColumnNameMissing; const setColumnName = props.setColumnName; const OverlayContainer = styled.div` left: 12px; right: 12px; bottom: 0px; top: 40px; position: absolute; z-index: 20; display: flex; background-color: rgba(0, 0, 0, 0.5); justify-content: center; padding-top: 100px; `; const PopupContainer = styled.div` position: relative; background-color: #1d1d21; padding: 1rem; width: 489px; height: fit-content; `; const Title = styled.input` color: #fff; font-family: Helvetica Neue; font-size: 20px; font-weight: 500; line-height: 24px; letter-spacing: 0em; text-align: left; width: 100%; height: 40px; padding: 8px 60px 8px 16px; margin-top: 1rem; margin-bottom: 1rem; border-radius: 4px; background-color: transparent; :focus { outline-color: #d0fc42; outline-style: solid; outline-width: 1px; } ::placeholder { color: #d0fc42; } border: none; `; const CloseButton = styled.div` color: #fff; :hover { color: #d0fc42; } cursor: pointer; `; const Header = styled.div` display: flex; flex-direction: row; justify-content: end; align-items: center; `; const InputContainer = styled.div` display: flex; flex-direction: row; align-items: center; `; const Divider = styled.div` width: 100%; height: 1px; background-color: #282933; margin-top: 16px; margin-bottom: 16; `; const FieldContainer = styled.div` position: relative; width: 100%; `; const MissingTitle = styled.div` position: absolute; left: 14px; top: 75%; font-family: Helvetica Neue; font-size: 16px; font-weight: 400; line-height: 24px; letter-spacing: 0em; color: red; `; const FunctionButton = styled.button` background-color: #d0fc42; :hover { opacity: 0.8; } color: #0e0e10; border-radius: 4px; margin-top: 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem; border: none; width: 100%; `; return ( <OverlayContainer> <PopupContainer> <Header> <CloseButton onClick={() => { setAddColumnDialogOpen(false); setColumnName(''); }} > <i className="bi bi-x-circle"></i> </CloseButton> </Header> <Divider /> <FieldContainer> <Title onChange={onChangeColumnName} value={columnName} placeholder="Add Name" /> {addColumnNameMissing && <MissingTitle>Missing name</MissingTitle>} </FieldContainer> <FunctionButton onClick={addColumn}> {functionLoader ? ( <Widget src={`${componentOwnerId}/widget/Calimero.TaskChain.Loader.Loader`} props={{ size: 16 }} /> ) : ( 'Add' )} </FunctionButton> </PopupContainer> </OverlayContainer> );