reverting based on comments from @bunsenstraat

libs/remix-ui/git/src/components/gitui.tsx

@@ -208,7 +208,7 @@ export const GitUI = (props: IGitUi) => {
                     <RemotesNavigation eventKey="5" activePanel={activePanel} callback={setActivePanel} />
                     <Accordion.Collapse className='bg-light' eventKey="5">
                       <div className="px-2 py-2">
-                        <Remotes plugin={plugin}></Remotes>
+                        <Remotes></Remotes>
                       </div>
                     </Accordion.Collapse>
                     <hr></hr>

libs/remix-ui/git/src/components/navigation/branches.tsx

@@ -20,7 +20,9 @@ export const BranchesNavigation = ({ eventKey, activePanel, callback }) => {
     <>
       <div className={'d-flex justify-content-between pt-1 ' + (activePanel === eventKey? 'bg-light': '')}>
         <span data-id='branches-panel' onClick={()=>handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-75'>
-          <i className={ activePanel !== eventKey ? "fa fa-caret-right" : "fa fa-caret-down" }></i>
+          {
+            activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
+          }
           <label className="pl-2 nav form-check-label">BRANCHES</label>
           <LoaderIndicator></LoaderIndicator>
         </span>

libs/remix-ui/git/src/components/navigation/clone.tsx

@@ -17,7 +17,9 @@ export const CloneNavigation = ({ eventKey, activePanel, callback }) => {
     <>
       <div className={'d-flex justify-content-between pb-1  pt-1 ' + (activePanel === eventKey? 'bg-light': '')}>
         <span data-id='clone-panel' onClick={()=>handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-75'>
-          <i className={ activePanel !== eventKey ? "fa fa-caret-right" : "fa fa-caret-down" }></i>
+          {
+            activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
+          }
           <label className="pl-2 nav form-check-label ">CLONE</label>
           <LoaderIndicator></LoaderIndicator>
         </span>

libs/remix-ui/git/src/components/navigation/commands.tsx

@@ -22,7 +22,9 @@ export const CommandsNavigation = ({ eventKey, activePanel, callback }) => {
     <>
       <div className={'d-flex justify-content-between ' + (activePanel === eventKey ? 'bg-light' : '')}>
         <span data-id='commands-panel' onClick={() => handleClick()} role={'button'} className="nav d-flex justify-content-start align-items-center w-75">
-          <i className={ activePanel !== eventKey ? "fa fa-caret-right" : "fa fa-caret-down" }></i>
+          {
+            activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
+          }
           <label className="pl-2 nav form-check-label">COMMANDS</label>
         </span>
         <LoaderIndicator></LoaderIndicator>

libs/remix-ui/git/src/components/navigation/commits.tsx

@@ -43,7 +43,9 @@ export const CommitsNavigation = ({ eventKey, activePanel, callback, title, bran
     <>
       <div className={`d-flex justify-content-between ${activePanel === eventKey ? 'bg-light' : ''} ${ahead || behind? 'text-success':''}`}>
         <span data-id={`commits-panel${ahead?'-ahead':''}${behind?'-behind':''}`} onClick={() => handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-100'>
-          <i className={ activePanel !== eventKey ? "fa fa-caret-right" : "fa fa-caret-down" }></i>
+          {
+            activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
+          }
           {ahead? <FontAwesomeIcon className='ml-1' icon={faCloudArrowUp}></FontAwesomeIcon> : null}
           {behind? <FontAwesomeIcon className='ml-1' icon={faCloudArrowDown}></FontAwesomeIcon> : null}
           <label className={`pl-2 nav form-check-label ${ahead || behind? 'text-success':''}`}>{title}</label>

libs/remix-ui/git/src/components/navigation/github.tsx

@@ -18,7 +18,9 @@ export const GitHubNavigation = ({ eventKey, activePanel, callback }) => {
     <>
       <div className={'d-flex justify-content-between pt-1 pb-1 ' + (activePanel === eventKey? 'bg-light': '')}>
         <span data-id='github-panel' onClick={()=>handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-75'>
-          <i className={ activePanel !== eventKey ? "fa fa-caret-right" : "fa fa-caret-down" }></i>
+          {
+            activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
+          }
           <label className="pl-2 nav form-check-label">GITHUB SETUP</label>
         </span>
       </div>

libs/remix-ui/git/src/components/navigation/log.tsx

@@ -47,7 +47,9 @@ export const LogNavigation = ({ eventKey, activePanel, callback }) => {
     <>
       <div className={'d-flex justify-content-between pt-1 pb-1 ' + (activePanel === eventKey ? 'bg-light' : '')}>
         <span onClick={() => handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-75'>
-          <i className={ activePanel !== eventKey ? "fa fa-caret-right" : "fa fa-caret-down" }></i>
+          {
+            activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
+          }
           <label className="pl-2 nav form-check-label mr-2">LOG</label>
           {logState.errorCount > 0 && (
             <div className="text-danger mr-1">

libs/remix-ui/git/src/components/navigation/remotes.tsx

@@ -20,7 +20,9 @@ export const RemotesNavigation = ({ eventKey, activePanel, callback }) => {
     <>
       <div className={'d-flex justify-content-between pt-1 pb-1 ' + (activePanel === eventKey? 'bg-light': '')}>
         <span data-id='remotes-panel' onClick={()=>handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-75'>
-          <i className={ activePanel !== eventKey ? "fa fa-caret-right" : "fa fa-caret-down" }></i>
+          {
+            activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
+          }
           <label className="pl-2 nav form-check-label">REMOTES</label>
           <LoaderIndicator></LoaderIndicator>
         </span>

libs/remix-ui/git/src/components/navigation/settings.tsx

@@ -21,7 +21,9 @@ export const SettingsNavigation = ({ eventKey, activePanel, callback }) => {
     <>
       <div className={'d-flex justify-content-between ' + (activePanel === eventKey ? 'bg-light' : '')}>
         <span onClick={() => handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-75'>
-          <i className={ activePanel !== eventKey ? "fa fa-caret-right" : "fa fa-caret-down" }></i>
+          {
+            activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
+          }
           <label className="nav pl-2 form-check-label">SETTINGS</label>
 
         </span>

libs/remix-ui/git/src/components/navigation/sourcecontrol.tsx

@@ -27,7 +27,9 @@ export const SourceControlNavigation = ({ eventKey, activePanel, callback }) =>
       <div className={'d-flex align-items-center justify-content-between ' + (activePanel === eventKey ? 'bg-light' : '')}>
         <span data-id='sourcecontrol-panel' onClick={() => handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-75'
         >
-          <i className={ activePanel !== eventKey ? "fa fa-caret-right" : "fa fa-caret-down" }></i>
+          {
+            activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
+          }
           <label className="nav pl-2 form-check-label">SOURCE CONTROL</label>
           <LoaderIndicator></LoaderIndicator>
 

libs/remix-ui/git/src/components/navigation/sourcecontrolgroup.tsx

@@ -31,7 +31,9 @@ export const SourceControlGroupNavigation = (props: SourceControlGroupNavigation
     <>
       <div className={'d-flex justify-content-between  pt-1 ' + (activePanel === eventKey? 'bg-light': '')}>
         <span onClick={()=>handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-75'>
-          <i className={ activePanel !== eventKey ? "fa fa-caret-right" : "fa fa-caret-down" }></i>
+          {
+            activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
+          }
           <label className="pl-1 nav form-check-label">{group.name}</label>
         </span>
         {

libs/remix-ui/git/src/components/panels/remotes.tsx

@@ -4,11 +4,7 @@ import { gitPluginContext } from "../gitui"
 import { Remoteselect } from "./remoteselect"
 import { RemotesImport } from "./remotesimport"
 
-export interface RemotesProps {
+export const Remotes = () => {
-  plugin: any
-}
-
-export const Remotes = (props: RemotesProps) => {
   const context = React.useContext(gitPluginContext)
   const actions = React.useContext(gitActionsContext)
   const [remoteName, setRemoteName] = React.useState<string>('')
@@ -31,7 +27,7 @@ export const Remotes = (props: RemotesProps) => {
   return (
     <>
       <div data-id="remotes-panel-content" className="d-flex flex-column">
-        <RemotesImport plugin={props.plugin} />
+        <RemotesImport />
         <hr className="mt-0 border border-2" />
         {context.remotes && context.remotes.length ?
           <div>

libs/remix-ui/git/src/components/panels/remotesimport.tsx

@@ -8,11 +8,7 @@ import { selectStyles, selectTheme } from "../../types/styles"
 import { TokenWarning } from "./tokenWarning"
 import RepositorySelect from "../github/repositoryselect"
 
-export interface RemotesImportProps {
+export const RemotesImport = () => {
-  plugin: any
-}
-
-export const RemotesImport = (props: RemotesImportProps) => {
   const context = React.useContext(gitPluginContext)
   const actions = React.useContext(gitActionsContext)
   const [repo, setRepo] = useState<repository>(null);
@@ -69,7 +65,7 @@ export const RemotesImport = (props: RemotesImportProps) => {
   return (
     <>
       <RepositorySelect select={selectRepo} />
-      <TokenWarning plugin={props.plugin} />
+      <TokenWarning />
       {repo ?
         <input data-id='remote-panel-remotename' placeholder="remote name" name='remotename' onChange={e => onRemoteNameChange(e.target.value)} value={remoteName} className="form-control mb-2" type="text" id="remotename" />
         : null}

libs/remix-ui/git/src/components/panels/tokenWarning.tsx

@@ -1,18 +1,13 @@
 import { gitPluginContext } from "../gitui"
 import React, { useEffect, useState } from "react"
 
-export interface TokenWarningProps {
+export const TokenWarning = () => {
-  plugin: any
-}
-
-export const TokenWarning = (props: TokenWarningProps) => {
   const context = React.useContext(gitPluginContext)
   return (<>
     {(context.gitHubUser && context.gitHubUser.login) ? null :
       <span className="text-warning text-left">
         <span>Generate and add a Git token to use this plugin. Tokens are added in </span><span className=" text-decoration-line-through messageTip" onClick={async () => {
-          await props.plugin.call('menuicons', 'select', 'settings')
+        }}>settings.</span>
-        }}>settings</span><span> of the IDE.</span>
       </span>
     }
   </>