fix spacing in github setup

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

@@ -72,7 +72,7 @@ export const GetDeviceCode = () => {
   return (
     <>
       {(context.gitHubUser && context.gitHubUser.login) ? null :
-        <button className='btn btn-primary mt-1 w-100' onClick={async () => {
+        <button className='btn btn-secondary mt-1 w-100' onClick={async () => {
           getDeviceCodeFromGitHub();
         }}><i className="fab fa-github mr-1"></i>Login in with github</button>
       }
@@ -124,4 +124,4 @@ export const GetDeviceCode = () => {
       }
 
     </>)
-}
+}

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

@@ -200,38 +200,38 @@ export const GitUI = (props: IGitUi) => {
                     <hr></hr>
                     <BranchesNavigation eventKey="2" activePanel={activePanel} callback={setActivePanel} />
                     <Accordion.Collapse className='bg-light' eventKey="2">
-                      <div className="px-2">
+                      <div className="px-2 py-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">
+                      <div className="px-2 py-2">
                         <Remotes plugin={plugin}></Remotes>
                       </div>
                     </Accordion.Collapse>
                     <hr></hr>
                     <CloneNavigation eventKey="4" activePanel={activePanel} callback={setActivePanel} />
                     <Accordion.Collapse className='bg-light' eventKey="4">
-                      <>
-                        <Clone plugin={plugin} /></>
+                      <div className="px-2 py-2">
+                        <Clone plugin={plugin} /></div>
                     </Accordion.Collapse>
                     <hr></hr>
                     <GitHubNavigation eventKey="7" activePanel={activePanel} callback={setActivePanel} />
                     <Accordion.Collapse className='bg-light' eventKey="7">
-                      <>
+                      <div className="px-2 py-2">
                         <GetDeviceCode></GetDeviceCode>
                         <hr></hr>
                         <GitHubCredentials></GitHubCredentials>
-                      </>
+                      </div>
                     </Accordion.Collapse>
                     <hr></hr>
                     <LogNavigation eventKey="6" activePanel={activePanel} callback={setActivePanel} />
                     <Accordion.Collapse className='bg-light' eventKey="6">
-                      <>
+                      <div className="px-2 py-2">
                         <LogViewer />
-                      </>
+                      </div>
                     </Accordion.Collapse>
 
                   </Accordion>

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

@@ -67,7 +67,7 @@ export const Clone = ({ plugin }: CloneProps) => {
 
   return (
     <>
-      <div data-id="clone-panel-content" className="px-3 py-2">
+      <div data-id="clone-panel-content">
         <SelectAndCloneRepositories cloneAllBranches={cloneAllBranches} cloneDepth={cloneDepth} plugin={plugin} />
         <hr />
         <InputGroup className="mb-2 pb-1">

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

@@ -67,14 +67,14 @@ export const GitHubCredentials = () => {
 
   return (
     <>
-      <div className="input-group text-secondary mb-1 h6">
+      <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)} />
         <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-1" 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-1" 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" />
@@ -87,4 +87,4 @@ export const GitHubCredentials = () => {
       <hr />
     </>
   );
-}
+}