some fixes

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

@@ -38,7 +38,7 @@ export const BranchSelect = (props: BranchySelectProps) => {
   return (<>{branchOptions && branchOptions.length ?
     <Select
       options={branchOptions}
-      className="mt-1"
+      className="mt-2"
       id="branch-select"
       onChange={(e: any) => selectRemoteBranch(e)}
       theme={selectTheme}

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

@@ -108,14 +108,16 @@ export const GetDeviceCode = () => {
         (context.gitHubUser && context.gitHubUser.login) ?
           <div className="pt-2">
             <Card>
-              <Card.Body>
-                <Card.Title data-id={`connected-as-${context.gitHubUser.login}`}>Connected as {context.gitHubUser.login}</Card.Title>
+              <Card.Body className="p-2">
+              <div className="mb-1" data-id={`connected-as-${context.gitHubUser.login}`}>Connected as {context.gitHubUser.login}</div>
                 <Card.Text>
-                  <img data-id={`connected-img-${context.gitHubUser.login}`} src={context.gitHubUser.avatar_url} className="w-100" />
-                  <a data-id={`connected-link-${context.gitHubUser.login}`} href={context.gitHubUser.html_url}>{context.gitHubUser.html_url}</a>
-                  {context.userEmails && context.userEmails.filter((email: any) => email.primary).map((email: any) => {
-                    return <span key={email.email}><br></br>{email.email}</span>
-                  })}
+                  <img data-id={`connected-img-${context.gitHubUser.login}`} src={context.gitHubUser.avatar_url} className="w-25" />
+                  <br></br>
+                  
+                    <a data-id={`connected-link-${context.gitHubUser.login}`} href={context.gitHubUser.html_url}>{context.gitHubUser.html_url}</a>
+                    {context.userEmails && context.userEmails.filter((email: any) => email.primary).map((email: any) => {
+                      return <span key={email.email}><br></br>{email.email}</span>
+                    })}
                 </Card.Text>
               </Card.Body>
             </Card>

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

@@ -43,7 +43,7 @@ export const SelectAndCloneRepositories = (props: RepositoriesProps) => {
 
   return (
     <>
-      <RepositorySelect title="Clone from GitHub" select={selectRepo} />
+      <RepositorySelect title="Load from GitHub" select={selectRepo} />
       <TokenWarning />
 
       { repo && <BranchSelect select={selectRemoteBranch} /> }

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

@@ -21,12 +21,22 @@ export const Branches = () => {
       <div data-id='branches-panel-content' className="pt-2">
         {context.branches && context.branches.length ?
           <div>
+            <label className="text-uppercase">local branches</label>
             {context.branches && context.branches.filter((branch, index) => !branch.remote).map((branch, index) => {
               return (
                 <LocalBranchDetails key={index} branch={branch}></LocalBranchDetails>
               );
             })}
             <hr />
+            {context.upstream ?
+              <>
+                <label className="text-uppercase">remote branches on {context.upstream ? context.upstream.name : null}</label>
+                {context.branches && context.branches.filter((branch, index) => branch.remote && branch.remote.name === context.upstream.name ).map((branch, index) => {
+                  return (
+                    <RemoteBranchDetails key={index} branch={branch}></RemoteBranchDetails>
+                  );
+                })}
+                <hr /></> : null}
 
           </div> : null}
         {context.currentBranch

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

@@ -64,9 +64,11 @@ export const Clone = () => {
   return (
     <>
       <div data-id="clone-panel-content">
+        <label className="text-uppercase">Clone from GitHub</label>
         <SelectAndCloneRepositories cloneAllBranches={cloneAllBranches} cloneDepth={cloneDepth} />
         <hr />
-        <InputGroup className="mb-2 pb-1">
+        <label className="text-uppercase">Clone from URL</label>
+        <InputGroup className="mb-2">
           <FormControl data-id="clone-url" id="cloneulr" placeholder="url" name='cloneurl' value={cloneUrl} onChange={e => onGitHubCloneUrlChange(e.target.value)} aria-describedby="urlprepend" />
         </InputGroup>
 

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

@@ -19,7 +19,7 @@ export const GitHubCredentials = () => {
 
   useEffect(() => {
     refresh()
-    if (context.gitHubUser){
+    if (context.gitHubUser) {
       setScopeWarning(!(context.gitHubScopes && context.gitHubScopes.length > 0))
     } else {
       setScopeWarning(false)
@@ -67,14 +67,15 @@ export const GitHubCredentials = () => {
 
   return (
     <>
+      <label className="text-uppercase">Enter GitHub credentials manually</label>
       <div className="input-group text-secondary mb-3 h6">
-        <input data-id='githubToken' type="password" value={githubToken} placeholder="GitHub token" className="form-control" name='githubToken' onChange={e => handleChangeTokenState(e.target.value)} />
+        <input data-id='githubToken' type="password" autoComplete="off" value={githubToken} placeholder="GitHub token" className="form-control" name='githubToken' onChange={e => handleChangeTokenState(e.target.value)} />
         <div className="input-group-append">
           <CopyToClipboard content={githubToken} data-id='copyToClipboardCopyIcon' className='far fa-copy ml-1 p-2 mt-1' direction={"top"} />
         </div>
       </div>
-      <input data-id='gitubUsername' name='githubUsername' onChange={e => handleChangeUserNameState(e.target.value)} value={githubUsername} className="form-control mb-3" placeholder="Git username" type="text" id="githubUsername" />
-      <input data-id='githubEmail' name='githubEmail' onChange={e => handleChangeEmailState(e.target.value)} value={githubEmail} className="form-control mb-3" placeholder="Git email" type="text" id="githubEmail" />
+      <input data-id='gitubUsername' name='githubUsername' onChange={e => handleChangeUserNameState(e.target.value)} value={githubUsername} className="form-control mb-3" placeholder="* Git username" type="text" id="githubUsername" />
+      <input data-id='githubEmail' name='githubEmail' onChange={e => handleChangeEmailState(e.target.value)} value={githubEmail} className="form-control mb-3" placeholder="* Git email" type="text" id="githubEmail" />
       <div className="d-flex justify-content-between">
         <button data-id='saveGitHubCredentials' className="btn btn-primary w-100" onClick={saveGithubToken}>
           <FormattedMessage id="save" defaultMessage="Save" />
@@ -82,8 +83,8 @@ export const GitHubCredentials = () => {
         <button className="btn btn-danger far fa-trash-alt" onClick={removeToken}>
         </button>
       </div>
-      {scopeWarning?
-        <div className="text-warning">Your GitHub token may not have the correct permissions. Please use the login with GitHub feature.</div>:null}
+      {scopeWarning ?
+        <div className="text-warning">Your GitHub token may not have the correct permissions. Please use the login with GitHub feature.</div> : null}
       <hr />
     </>
   );

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

@@ -27,23 +27,25 @@ export const Remotes = () => {
   return (
     <>
       <div data-id="remotes-panel-content" className="d-flex flex-column">
-        <RemotesImport />
-        <hr className="mt-0 border border-2" />
         {context.remotes && context.remotes.length ?
           <div>
 
             {context.remotes && context.remotes.map((remote, index) => {
 
               return (
-                <Remoteselect key={index} remote={remote}></Remoteselect>
+                <Remoteselect key={index} openDefault={index===0} remote={remote}></Remoteselect>
               );
             })}
           </div> : <div>
             <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-3" type="text" id="remotename" />
-        <input placeholder="remote url" name='remoteurl' onChange={e => onUrlChange(e.target.value)} value={url} className="form-control mb-3" type="text" id="remoteurl" />
+        <hr></hr>
+        <label className="text-uppercase">Add remote from GitHub</label>
+        <RemotesImport />
+        <hr></hr>
+        <label className="text-uppercase">Add remote manually</label>
+        <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 url" name='remoteurl' onChange={e => onUrlChange(e.target.value)} value={url} className="form-control mb-2" type="text" id="remoteurl" />
 
         <button disabled={(remoteName && url) ? false : true} className='btn btn-primary mt-1 w-100' onClick={async () => {
           addRemote();

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

@@ -7,9 +7,13 @@ import { RemotesDetailsNavigation } from "../navigation/remotesdetails";
 import { Accordion } from "react-bootstrap";
 import { remote } from "../../types";
 import { RemoteBranchDetails } from "./branches/remotebranchedetails";
+import GitUIButton from "../buttons/gituibutton";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faSync } from "@fortawesome/free-solid-svg-icons";
 
 export interface RemoteSelectProps {
   remote: remote
+  openDefault: boolean
 }
 
 export const Remoteselect = (props: RemoteSelectProps) => {
@@ -20,15 +24,21 @@ export const Remoteselect = (props: RemoteSelectProps) => {
 
   return (
     <>
-      <Accordion activeKey={activePanel} defaultActiveKey="">
+      <Accordion activeKey={activePanel ? activePanel : props.openDefault ? '0' : ''} defaultActiveKey=''>
         <RemotesDetailsNavigation callback={setActivePanel} eventKey="0" activePanel={activePanel} remote={remote} />
         <Accordion.Collapse className="pl-2 border-left ml-1" eventKey="0">
           <>
-            {context.branches && context.branches.filter((branch, index) => branch.remote && branch.remote.name === remote.name ).map((branch, index) => {
+            {context.branches && context.branches.filter((branch, index) => branch.remote && branch.remote.name === remote.name).map((branch, index) => {
               return (
                 <RemoteBranchDetails key={index} branch={branch}></RemoteBranchDetails>
               );
-            })}</>
+            })}
+            <GitUIButton data-id={`remote-sync-${remote.name}`} className="btn btn-sm" onClick={async () => {
+              await actions.fetch({
+                remote
+              })
+            }}><FontAwesomeIcon icon={faSync} ></FontAwesomeIcon><label className="pl-1">Fetch more from remote</label></GitUIButton>
+          </>
 
         </Accordion.Collapse>
       </Accordion>

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

@@ -64,10 +64,10 @@ export const RemotesImport = () => {
 
   return (
     <>
-      <RepositorySelect title="Add from GitHub" select={selectRepo} />
+      <RepositorySelect title="Load from GitHub" select={selectRepo} />
       <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" />
+        <input data-id='remote-panel-remotename' placeholder="remote name" name='remotename' onChange={e => onRemoteNameChange(e.target.value)} value={remoteName} className="form-control mb-2 mt-2" type="text" id="remotename" />
         : null}
 
       {repo && remoteName ?