add spacing and moved fetch repo button

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

@@ -200,16 +200,16 @@ export const GitUI = (props: IGitUi) => {
                     <hr></hr>
                     <BranchesNavigation eventKey="2" activePanel={activePanel} callback={setActivePanel} />
                     <Accordion.Collapse className='bg-light' eventKey="2">
-                      <div className="px-3">
+                      <div className="px-2">
                         <Branches />
                       </div>
                     </Accordion.Collapse>
                     <hr></hr>
                     <RemotesNavigation eventKey="5" activePanel={activePanel} callback={setActivePanel} />
                     <Accordion.Collapse className='bg-light' eventKey="5">
-                      <>
+                      <div className="px-2">
                         <Remotes plugin={plugin}></Remotes>
-                      </>
+                      </div>
                     </Accordion.Collapse>
                     <hr></hr>
                     <CloneNavigation eventKey="4" activePanel={activePanel} callback={setActivePanel} />

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

@@ -30,9 +30,11 @@ export const Remotes = (props: RemotesProps) => {
 
   return (
     <>
-      <div data-id="remotes-panel-content">
+      <div data-id="remotes-panel-content" className="d-flex flex-column">
+        <RemotesImport plugin={props.plugin} />
+        <hr className="mt-0 border border-2" />
         {context.remotes && context.remotes.length ?
-          <>
+          <div>
 
             {context.remotes && context.remotes.map((remote, index) => {
 
@@ -40,18 +42,17 @@ export const Remotes = (props: RemotesProps) => {
                 <Remoteselect key={index} remote={remote}></Remoteselect>
               );
             })}
-          </> : <>No remotes</>}
+          </div> : <div>
-        <hr></hr>
+            <label className="text-uppercase">No remotes</label>
+          </div>}
 
-        <input placeholder="remote name" name='remotename' onChange={e => onRemoteNameChange(e.target.value)} value={remoteName} className="form-control mb-2" type="text" id="remotename" />
+        <input placeholder="remote name" name='remotename' onChange={e => onRemoteNameChange(e.target.value)} value={remoteName} className="form-control mb-3" type="text" id="remotename" />
-        <input placeholder="remote url" name='remoteurl' onChange={e => onUrlChange(e.target.value)} value={url} className="form-control" type="text" id="remoteurl" />
+        <input placeholder="remote url" name='remoteurl' onChange={e => onUrlChange(e.target.value)} value={url} className="form-control mb-3" type="text" id="remoteurl" />
 
         <button disabled={(remoteName && url) ? false : true} className='btn btn-primary mt-1 w-100' onClick={async () => {
           addRemote();
         }}>add remote</button>
-        <hr />
+        <hr className="mt-0 border border-2" />
-        <RemotesImport plugin={props.plugin} />
-        <hr />
       </div>
     </>)
 }

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

@@ -68,9 +68,8 @@ export const RemotesImport = (props: RemotesImportProps) => {
 
   return (
     <>
-      <TokenWarning plugin={props.plugin} />
       <RepositorySelect select={selectRepo} />
-
+      <TokenWarning plugin={props.plugin} />
       {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}