fix(ui): fix issue creation popup

frontend/app/components/Session_/Issues/IssueForm.js

@@ -14,8 +14,8 @@ const SelectedValue = ({ icon, text }) => {
     </div>
   )
 }
- 
-class IssueForm extends React.PureComponent {  
+
+class IssueForm extends React.PureComponent {
   componentDidMount() {
     const { projects, issueTypes } = this.props;
 
@@ -58,15 +58,15 @@ class IssueForm extends React.PureComponent {
     const { creating, projects, users, issueTypes, instance, closeHandler, metaLoading } = this.props;
     const projectOptions = projects.map(({name, id}) => ({label: name, value: id })).toArray();
     const userOptions = users.map(({name, id}) => ({label: name, value: id })).toArray();
-    
+
     const issueTypeOptions = issueTypes.map(({name, id, iconUrl, color }) => {
       return { label: name, value: id, iconUrl, color }
     });
 
     const selectedIssueType = issueTypes.filter(issue => issue.id == instance.issueType)[0];
-    
+
     return (
-      <Form onSubmit={ this.onSubmit }>
+      <Form onSubmit={ this.onSubmit } className="text-left">
         <Form.Field className="mb-15-imp">
           <label htmlFor="issueType">
             <span className="mr-2">Project</span>
@@ -121,7 +121,7 @@ class IssueForm extends React.PureComponent {
 
         <Form.Field className="mb-15-imp">
           <label htmlFor="description">
-            Description 
+            Description
             {/* <span className="text-sm text-gray-500">(Optional)</span> */}
           </label>
           <textarea

frontend/app/components/Session_/Issues/Issues.js

@@ -61,8 +61,14 @@ class Issues extends React.Component {
           <div className={ stl.buttonWrapper} onClick={this.handleOpen}>
             <Popup
               open={this.state.showModal}
-              position="top right"
+              position="bottom"
               interactive
+              animation="shift"
+              trigger="click"
+              unmountHTMLWhenHide
+              // @ts-ignore
+              theme='light'
+              arrow
               content={
                 <OutsideClickDetectingDiv onClickOutside={this.closeModal}>
                   <IssuesModal
@@ -72,7 +78,6 @@ class Issues extends React.Component {
                   />
                 </OutsideClickDetectingDiv>
               }
-              theme="tippy-light"
             >
               <div className="flex items-center" onClick={this.handleOpen} disabled={!isModalDisplayed && (metaLoading || fetchIssuesLoading || projectsLoading)}>
                     <Icon name={ `integrations/${ provider === 'jira' ? 'jira' : 'github'}` } size="16" />

frontend/app/components/Session_/Issues/issuesModal.module.css

@@ -3,4 +3,5 @@
   width: 350px;
   border-radius: 3px;
   padding: 10px 8px;
-}
+  color: black;
+}

frontend/app/components/ui/Popup/Popup.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Tooltip, Theme, Trigger, Position } from 'react-tippy';
+import { Tooltip, Theme, Trigger, Position, Animation } from 'react-tippy';
 
 interface Props {
     content?: any;
@@ -16,6 +16,7 @@ interface Props {
     theme?: Theme;
     interactive?: boolean;
     children?: any;
+    animation?: Animation;
     // [x:string]: any;
 }
 export default ({
@@ -32,10 +33,12 @@ export default ({
     style = {},
     interactive = false,
     children,
+    animation = 'fade',
 }: // ...props
 Props) => (
+    // @ts-ignore
     <Tooltip
-        animation="fade"
+        animation={animation}
         position={position}
         className={className}
         trigger={trigger}