Modify UI to support username and email on settings tab

libs/remix-ui/settings/src/lib/github-settings.tsx

@@ -0,0 +1,67 @@
+import { CopyToClipboard } from '@remix-ui/clipboard'
+import React, { useState } from 'react'
+import { GithubSettingsProps } from '../types'
+
+export function GithubSettings (props: GithubSettingsProps) {
+  const [githubToken, setGithubToken] = useState<string>("")
+  const [githubUserName, setGithubUsername] = useState<string>("")
+  const [githubEmail, setGithubEmail] = useState<string>("")
+
+  const handleChangeTokenState = (event) => {
+    setGithubToken(event.target.value)
+  }
+
+  const handleChangeUserNameState = (event) => {
+    setGithubUsername(event.target.value)
+  }
+
+  const handleChangeEmailState = (event) => {
+    setGithubEmail(event.target.value)
+  }
+
+  // api key settings
+  const saveGithubToken = () => {
+    props.saveTokenToast(githubToken)
+  }
+
+  const removeToken = () => {
+    setGithubToken('')
+    props.removeTokenToast()
+  }
+  
+  return (
+    <div className="border-top">
+      <div className="card-body pt-3 pb-2">
+        <h6 className="card-title">GitHub Access Token</h6>
+        <p className="mb-1">Manage the access token used to publish to Gist and retrieve GitHub contents.</p>
+        <p className="">Go to github token page (link below) to create a new token and save it in Remix. Make sure this token has only \'create gist\' permission.</p>
+        <p className="mb-1"><a className="text-primary" target="_blank" href="https://github.com/settings/tokens">https://github.com/settings/tokens</a></p>
+        <div>
+          <label>TOKEN:</label>
+          <div className="input-group text-secondary mb-0 h6">
+            <input id="gistaccesstoken" data-id="settingsTabGistAccessToken" type="password" className="form-control" onChange={(e) => handleChangeTokenState(e)} value={ githubToken } />
+            <div className="input-group-append">
+              <CopyToClipboard content={githubToken} data-id='copyToClipboardCopyIcon' className='input-group-text far fa-copy ml-1 p-2 h-100' direction={"top"} />
+            </div>
+          </div>
+        </div>
+        <div>
+          <label>USERNAME:</label>
+          <div className="text-secondary mb-0 h6">
+            <input id="githubusername" data-id="settingsTabGithubUsername" type="password" className="form-control" onChange={(e) => handleChangeUserNameState(e)} value={ githubUserName } />
+          </div>
+        </div>
+        <div>
+          <label>EMAIL:</label>
+          <div className="text-secondary mb-0 h6">
+            <input id="githubemail" data-id="settingsTabGithubEmail" type="password" className="form-control" onChange={(e) => handleChangeEmailState(e)} value={ githubEmail } />
+            <div className="d-flex justify-content-end pt-2">
+              <input className="btn btn-sm btn-primary ml-2" id="savegisttoken" data-id="settingsTabSaveGistToken" onClick={saveGithubToken} value="Save" type="button" disabled={githubToken === ''}></input>
+              <button className="btn btn-sm btn-secondary ml-2" id="removegisttoken" data-id="settingsTabRemoveGistToken" title="Delete GitHub Credentials" onClick={removeToken}>Remove</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -8,6 +8,7 @@ import { ethereumVM, generateContractMetadat, personal, textWrapEventAction, use
 import { initialState, toastInitialState, toastReducer, settingReducer } from './settingsReducer'
 import { Toaster } from '@remix-ui/toaster'// eslint-disable-line
 import { RemixUiThemeModule, ThemeModule} from '@remix-ui/theme-module'
+import { GithubSettings } from './github-settings'
 
 /* eslint-disable-next-line */
 export interface RemixUiSettingsProps {
@@ -347,7 +348,10 @@ export const RemixUiSettings = (props: RemixUiSettingsProps) => {
     <div>
       {state.message ? <Toaster message= {state.message}/> : null}
       {generalConfig()}     
-      {token('gist')}
+      <GithubSettings
+        saveTokenToast={(githubToken: string) => { saveTokenToast(props.config, dispatchToast, githubToken, "gist-access-token") }}
+        removeTokenToast={() => { removeTokenToast(props.config, dispatchToast, "gist-access-token") }}
+      />
       {token('etherscan')}
       {swarmSettings()}
       {ipfsSettings()}

libs/remix-ui/settings/src/types/index.ts

@@ -0,0 +1,4 @@
+export interface GithubSettingsProps {
+  saveTokenToast: (githubToken: string) => void,
+  removeTokenToast: () => void
+}

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

@@ -2,7 +2,7 @@ import React from 'react'
 import { OverlayTrigger, Popover } from 'react-bootstrap';
 
 const popover = (
-  <Popover id="popover-basic" className='bg-light'>
+  <Popover id="popover-basic" className='bg-light border-secondary'>
     <Popover.Title as="h3" className='bg-dark border-0'>Clone workspace</Popover.Title>
       <Popover.Content>
         <div className="remixui_cloneContainer">
@@ -17,7 +17,7 @@ const popover = (
 )
 
 export const CloneWorkspace = () => (
-  <OverlayTrigger trigger="click" placement="bottom" overlay={popover}>
+  <OverlayTrigger trigger="click" placement={"bottom-end"} overlay={popover}>
     <i className="fas fa-cloud-download remixui_menuicon pr-0"></i>
   </OverlayTrigger>
 )

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

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