Cleanup clone tooltip UI

libs/remix-ui/workspace/src/lib/components/clone.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { OverlayTrigger, Popover } from 'react-bootstrap';
+
+const popover = (
+  <Popover id="popover-basic" className='bg-light'>
+    <Popover.Title as="h3" className='bg-dark border-0'>Clone workspace</Popover.Title>
+      <Popover.Content>
+        <div className="remixui_cloneContainer">
+          <input
+            className="form-control"
+            placeholder="Enter clone url"
+            title="Enter clone url"
+          />
+        </div>
+      </Popover.Content>
+  </Popover>
+)
+
+export const CloneWorkspace = () => (
+  <OverlayTrigger trigger="click" placement="bottom" overlay={popover}>
+    <i className="fas fa-cloud-download remixui_menuicon pr-0"></i>
+  </OverlayTrigger>
+)

libs/remix-ui/workspace/src/lib/components/tooltipInput.tsx

@@ -1,50 +0,0 @@
-import React, { ReactNode, Ref } from 'react'
-import { Dropdown, FormControl } from 'react-bootstrap'
-
-// The forwardRef is important!!
-// Dropdown needs access to the DOM node in order to position the Menu
-const CustomToggle = React.forwardRef(({ children, onClick }: { children?: ReactNode, onClick: (e) => void }, ref: Ref<HTMLAnchorElement>) => (
-  <a
-    href=""
-    ref={ref}
-    onClick={(e) => {
-      e.preventDefault()
-      onClick(e)
-    }}
-  >
-    { children }
-  </a>
-))
-
-export const CloneWorkspace = () => {
-
-  return (
-    <Dropdown>
-      <Dropdown.Toggle as={CustomToggle} id="dropdown-custom-components">
-        <i className="fas fa-cloud-download remixui_menuicon" data-toggle="dropdown"></i>
-      </Dropdown.Toggle>
-
-      <Dropdown.Menu renderOnMount={true}>
-        {/* <Dropdown.Item eventKey="1">
-          <FormControl
-              autoFocus
-              className="mx-3 my-2 w-auto"
-              placeholder="Type to filter..."
-              onChange={(e) => setValue(e.target.value)}
-              value={value}
-            />
-        </Dropdown.Item> */}
-      <div role="tabpanel">
-        <FormControl
-          autoFocus
-          className="mx-3 my-2 w-auto"
-          placeholder="Type to filter..."
-          onChange={() => {}}
-          value=''
-        />
-      </div>
-
-      </Dropdown.Menu>
-    </Dropdown>
-  )
-}

libs/remix-ui/workspace/src/lib/css/remix-ui-workspace.css

@@ -62,4 +62,25 @@
   .remixui_menuicon:hover {
     transform: scale(1.3);
   }
-  
+  .remixui_cloneContainer {
+    display: flex;
+    align-items: center;
+    height: 32px;
+  }
+  
+  .remixui_cloneContainer input {
+    height: 32px;
+    border-top-left-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
+    width: 250px;
+    font-size: 10px !important;
+    padding: .25rem;
+  }
+
+  .remixui_menuicon .bs-popover-auto[x-placement^="bottom"] .popover-header::before, .bs-popover-bottom .popover-header::before {
+    border-bottom-color: var(--dark) !important
+  }
+
+  .remixui_menuicon .bs-popover-auto[x-placement^="bottom"] > .arrow::after, .bs-popover-bottom > .arrow::after {
+    border-bottom-color: var(--dark) !important
+  }

libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef, useContext } from 'react' // eslint
 import { FileExplorer } from './components/file-explorer' // eslint-disable-line
 import './css/remix-ui-workspace.css'
 import { FileSystemContext } from './contexts'
-import { CloneWorkspace } from './components/tooltipInput'
+import { CloneWorkspace } from './components/clone'
 
 const canUpload = window.File || window.FileReader || window.FileList || window.Blob
 
@@ -218,7 +218,7 @@ export function Workspace () {
                   </span>
                 </span>
                 <span className="remixui_menu">
-                  <CloneWorkspace />
+                    <CloneWorkspace />
                 </span>
               </div>
               <select id="workspacesSelect" value={currentWorkspace} data-id="workspacesSelect" onChange={(e) => switchWorkspace(e.target.value)} className="form-control custom-select">