replace svg carets with i tags and css classes. fix padding

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

@@ -185,7 +185,7 @@ export const GitUI = (props: IGitUi) => {
                     </Accordion.Collapse>
                     <hr></hr>
                     <CommandsNavigation eventKey="1" activePanel={activePanel} callback={setActivePanel} />
-                    <Accordion.Collapse className='bg-light' eventKey="1">
+                    <Accordion.Collapse className="bg-light" eventKey="1">
                       <>
                         <Commands></Commands>
                       </>

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

@@ -20,13 +20,11 @@ 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'>
-          {
-            activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
-          }
-          <label className="pl-1 nav form-check-label">BRANCHES</label>
+          <i className={ activePanel !== eventKey ? "fa fa-caret-right" : "fa fa-caret-down" }></i>
+          <label className="pl-2 nav form-check-label">BRANCHES</label>
           <LoaderIndicator></LoaderIndicator>
         </span>
       </div>
     </>
   );
-}
+}

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

@@ -17,13 +17,11 @@ 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'>
-          {
-            activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
-          }
-          <label className="pl-1 nav form-check-label">CLONE</label>
+          <i className={ activePanel !== eventKey ? "fa fa-caret-right" : "fa fa-caret-down" }></i>
+          <label className="pl-2 nav form-check-label ">CLONE</label>
           <LoaderIndicator></LoaderIndicator>
         </span>
       </div>
     </>
   );
-}
+}

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

@@ -21,15 +21,12 @@ export const CommandsNavigation = ({ eventKey, activePanel, callback }) => {
   return (
     <>
       <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'>
-          {
-            activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
-          }
-          <label className="pl-1 nav form-check-label">COMMANDS</label>
-          <LoaderIndicator></LoaderIndicator>
-
+        <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>
+          <label className="pl-2 nav form-check-label">COMMANDS</label>
         </span>
+        <LoaderIndicator></LoaderIndicator>
       </div>
     </>
   );
-}
+}

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

@@ -43,14 +43,11 @@ 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'>
-          {
-            activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
-          }
+          <i className={ activePanel !== eventKey ? "fa fa-caret-right" : "fa fa-caret-down" }></i>
           {ahead? <FontAwesomeIcon className='ml-1' icon={faCloudArrowUp}></FontAwesomeIcon> : null}
           {behind? <FontAwesomeIcon className='ml-1' icon={faCloudArrowDown}></FontAwesomeIcon> : null}
-          <label className={`pl-1 nav form-check-label ${ahead || behind? 'text-success':''}`}>{title}</label>
+          <label className={`pl-2 nav form-check-label ${ahead || behind? 'text-success':''}`}>{title}</label>
           <LoaderIndicator></LoaderIndicator>
-
         </span>
         {showButtons ?
           <SourceControlBase branch={branch} remote={remote}>
@@ -60,4 +57,4 @@ export const CommitsNavigation = ({ eventKey, activePanel, callback, title, bran
       </div>
     </>
   );
-}
+}

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

@@ -1,7 +1,7 @@
-import { faCaretDown, faCaretRight } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import React, { } from "react";
-import { pluginActionsContext } from "../../state/context";
+import { faCaretDown, faCaretRight } from "@fortawesome/free-solid-svg-icons"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import React, { } from "react"
+import { pluginActionsContext } from "../../state/context"
 
 export const GitHubNavigation = ({ eventKey, activePanel, callback }) => {
   const pluginactions = React.useContext(pluginActionsContext)
@@ -18,12 +18,10 @@ 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'>
-          {
-            activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
-          }
-          <label className="pl-1 nav form-check-label">GITHUB SETUP</label>
+          <i className={ activePanel !== eventKey ? "fa fa-caret-right" : "fa fa-caret-down" }></i>
+          <label className="pl-2 nav form-check-label">GITHUB SETUP</label>
         </span>
       </div>
     </>
-  );
-}
+  )
+}

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

@@ -47,10 +47,8 @@ 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'>
-          {
-            activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
-          }
-          <label className="pl-1 nav form-check-label mr-2">LOG</label>
+          <i className={ activePanel !== eventKey ? "fa fa-caret-right" : "fa fa-caret-down" }></i>
+          <label className="pl-2 nav form-check-label mr-2">LOG</label>
           {logState.errorCount > 0 && (
             <div className="text-danger mr-1">
               {logState.errorCount}
@@ -84,4 +82,4 @@ export const LogNavigation = ({ eventKey, activePanel, callback }) => {
       </div>
     </>
   );
-}
+}

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

@@ -20,13 +20,11 @@ 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'>
-          {
-            activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
-          }
-          <label className="pl-1 nav form-check-label">REMOTES</label>
+          <i className={ activePanel !== eventKey ? "fa fa-caret-right" : "fa fa-caret-down" }></i>
+          <label className="pl-2 nav form-check-label">REMOTES</label>
           <LoaderIndicator></LoaderIndicator>
         </span>
       </div>
     </>
   );
-}
+}

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

@@ -21,10 +21,8 @@ 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'>
-          {
-            activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
-          }
-          <label className="nav pl-1 form-check-label">SETTINGS</label>
+          <i className={ activePanel !== eventKey ? "fa fa-caret-right" : "fa fa-caret-down" }></i>
+          <label className="nav pl-2 form-check-label">SETTINGS</label>
 
         </span>
 
@@ -38,4 +36,4 @@ export const SettingsNavigation = ({ eventKey, activePanel, callback }) => {
       </div>
     </>
   );
-}
+}

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

@@ -24,12 +24,11 @@ export const SourceControlNavigation = ({ eventKey, activePanel, callback }) =>
 
   return (
     <>
-      <div className={'d-flex 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'>
-          {
-            activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
-          }
-          <label className="nav pl-1 form-check-label">SOURCE CONTROL</label>
+      <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>
+          <label className="nav pl-2 form-check-label">SOURCE CONTROL</label>
           <LoaderIndicator></LoaderIndicator>
 
         </span>
@@ -39,4 +38,4 @@ export const SourceControlNavigation = ({ eventKey, activePanel, callback }) =>
       </div>
     </>
   );
-}
+}