padding and spacing

libs/remix-ui/git/src/components/buttons/commitmessage.tsx

@@ -126,7 +126,7 @@ export const CommitMessage = () => {
 
   return (
     <>
-      <div className="form-group">
+      <div className="form-group pt-3">
         <input placeholder={commitMessagePlaceholder()} data-id='commitMessage' disabled={!messageEnabled()} className="form-control" type="text" onChange={handleChange} value={message.value} />
       </div>
       <button data-id='commitButton' className={`btn btn-primary w-100 ${buttonState === buttonStateValues.Commit ? '' : 'd-none'}`} disabled={commitNotAllowed()} onClick={async () => await commit()} >

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

@@ -178,10 +178,10 @@ export const GitUI = (props: IGitUi) => {
                     <SourceControlNavigation eventKey="0" activePanel={activePanel} callback={setActivePanel} />
 
                     <Accordion.Collapse className='bg-light' eventKey="0">
-                      <>
+                      <div className="px-3">
                         <SourceControlBase><CommitMessage /></SourceControlBase>
                         <SourceControl />
-                      </>
+                      </div>
                     </Accordion.Collapse>
                     <hr></hr>
                     <CommandsNavigation eventKey="1" activePanel={activePanel} callback={setActivePanel} />

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

@@ -31,17 +31,15 @@ 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'>
-          {
-            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>
           <label className="pl-1 nav form-check-label">{group.name}</label>
         </span>
         {
           activePanel === eventKey ?
-            <span className='d-flex justify-content-end align-items-center w-25'>
+            <span className='d-flex justify-content-end align-items-center w-25 py-2'>
               {group.name === 'Changes' ?
                 <CustomTooltip tooltipText={<FormattedMessage id="git.stageall" />}>
-                  <button data-id='sourcecontrol-add-all' onClick={async () => { await actions.addall(context.allchangesnotstaged) }} className='btn btn-sm'><FontAwesomeIcon icon={faPlus} className="" /></button>
+                  <button data-id='sourcecontrol-add-all' onClick={async () => { await actions.addall(context.allchangesnotstaged) }} className='btn btn-sm' style={{ marginLeft: '1rem', marginRight: '1.9rem' }}><FontAwesomeIcon icon={faPlus} className="" /></button>
                 </CustomTooltip>: null}
 
             </span> : null

libs/remix-ui/git/src/components/panels/sourcecontrol/sourcecontrolitem.tsx

@@ -41,10 +41,10 @@ export const SourceControlItem = (props: SourceControlItemProps) => {
 
     return (<>
 
-      {status && status.indexOf("modified") === -1 ? <></> : <div>M</div>}
-      {status && status.indexOf("deleted") === -1 ? <></> : <span>D</span>}
-      {status && status.indexOf("added") === -1 ? <></> : <span>A</span>}
-      {status && status.indexOf("untracked") === -1 ? <></> : <span>U</span>}
+      {status && status.indexOf("modified") === -1 ? <></> : <span className="pl-2">M</span>}
+      {status && status.indexOf("deleted") === -1 ? <></> : <span className="pl-2">D</span>}
+      {status && status.indexOf("added") === -1 ? <></> : <span className="pl-2">A</span>}
+      {status && status.indexOf("untracked") === -1 ? <></> : <span className="pl-2">U</span>}
     </>)
   }
 
@@ -56,7 +56,7 @@ export const SourceControlItem = (props: SourceControlItemProps) => {
         <span className='font-weight-bold long-and-truncated'>{path.basename(file.filename)}</span>
         <div className='text-secondary long-and-truncated'> {file.filename}</div>
       </div>
-      <div className="d-flex align-items-center ml-1">
+      <div className="d-flex align-items-center ml-1 px-2">
         <SourceControlItemButtons group={group} file={file}></SourceControlItemButtons>
         <FunctionStatusIcons></FunctionStatusIcons>
       </div>

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

@@ -37,7 +37,7 @@ export const SourceControl = () => {
     <>
       {show ?
         <>
-          <div>
+          <div className="mb-3">
             <RenderGroups></RenderGroups>
           </div></>
         : <>