git UI and commit button border

Aniket-Engg · Aniket-Engg · commit a50e9950581e · 2025-08-27T16:19:13.000+05:30
diff --git a/apps/remix-ide/src/assets/css/themes/remix-dark_tvx1s2.css b/apps/remix-ide/src/assets/css/themes/remix-dark_tvx1s2.css
@@ -3119,7 +3119,7 @@ textarea.form-control-lg {
   color: var(--bs-btn-disabled-color);
   pointer-events: none;
   background-color: var(--bs-btn-disabled-bg);
-  border-color: var(--bs-btn-disabled-border-color);
+  /* border-color: var(--bs-btn-disabled-border-color); */
   opacity: var(--bs-btn-disabled-opacity);
 }
 
diff --git a/apps/remix-ide/src/assets/css/themes/remix-light_powaqg.css b/apps/remix-ide/src/assets/css/themes/remix-light_powaqg.css
@@ -3104,7 +3104,7 @@ textarea.form-control-lg {
   color: var(--bs-btn-disabled-color);
   pointer-events: none;
   background-color: var(--bs-btn-disabled-bg);
-  border-color: var(--bs-btn-disabled-border-color);
+  /* border-color: var(--bs-btn-disabled-border-color); */
   opacity: var(--bs-btn-disabled-opacity);
 }
 
diff --git a/libs/remix-ui/git/src/components/navigation/branches.tsx b/libs/remix-ui/git/src/components/navigation/branches.tsx
@@ -22,7 +22,7 @@ export const BranchesNavigation = ({ eventKey, activePanel, callback }) => {
   return (
     <>
       <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'>
+        <span data-id='branches-panel' onClick={()=>handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-75 ms-1'>
           {
             activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
           }
diff --git a/libs/remix-ui/git/src/components/navigation/clone.tsx b/libs/remix-ui/git/src/components/navigation/clone.tsx
@@ -16,7 +16,7 @@ export const CloneNavigation = ({ eventKey, activePanel, callback }) => {
   return (
     <>
       <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'>
+        <span data-id='clone-panel' onClick={()=>handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-75 ms-1'>
           {
             activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
           }
diff --git a/libs/remix-ui/git/src/components/navigation/commands.tsx b/libs/remix-ui/git/src/components/navigation/commands.tsx
@@ -21,7 +21,7 @@ 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">
+        <span data-id='commands-panel' onClick={() => handleClick()} role={'button'} className="nav d-flex justify-content-start align-items-center w-75 ms-1">
           {
             activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
           }
diff --git a/libs/remix-ui/git/src/components/navigation/commits.tsx b/libs/remix-ui/git/src/components/navigation/commits.tsx
@@ -43,7 +43,7 @@ export const CommitsNavigation = ({ eventKey, activePanel, callback, title, bran
   return (
     <>
       <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'>
+        <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 ms-1'>
           {
             activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
           }
diff --git a/libs/remix-ui/git/src/components/navigation/github.tsx b/libs/remix-ui/git/src/components/navigation/github.tsx
@@ -17,7 +17,7 @@ export const GitHubNavigation = ({ eventKey, activePanel, callback }) => {
   return (
     <>
       <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'>
+        <span data-id='github-panel' onClick={()=>handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-75 ms-1'>
           {
             activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
           }
diff --git a/libs/remix-ui/git/src/components/navigation/log.tsx b/libs/remix-ui/git/src/components/navigation/log.tsx
@@ -46,7 +46,7 @@ export const LogNavigation = ({ eventKey, activePanel, callback }) => {
   return (
     <>
       <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'>
+        <span onClick={() => handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-75 ms-1'>
           {
             activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
           }
diff --git a/libs/remix-ui/git/src/components/navigation/remotes.tsx b/libs/remix-ui/git/src/components/navigation/remotes.tsx
@@ -19,7 +19,7 @@ export const RemotesNavigation = ({ eventKey, activePanel, callback }) => {
   return (
     <>
       <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'>
+        <span data-id='remotes-panel' onClick={()=>handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-75 ms-1'>
           {
             activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
           }
diff --git a/libs/remix-ui/git/src/components/navigation/settings.tsx b/libs/remix-ui/git/src/components/navigation/settings.tsx
@@ -20,7 +20,7 @@ export const SettingsNavigation = ({ eventKey, activePanel, callback }) => {
   return (
     <>
       <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'>
+        <span onClick={() => handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-75 ms-1'>
           {
             activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
           }
diff --git a/libs/remix-ui/git/src/components/navigation/sourcecontrol.tsx b/libs/remix-ui/git/src/components/navigation/sourcecontrol.tsx
@@ -26,7 +26,7 @@ export const SourceControlNavigation = ({ eventKey, activePanel, callback }) =>
   return (
     <>
       <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'
+        <span data-id='sourcecontrol-panel' onClick={() => handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-75 ms-1'
         >
           {
             activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
diff --git a/libs/remix-ui/git/src/components/navigation/sourcecontrolgroup.tsx b/libs/remix-ui/git/src/components/navigation/sourcecontrolgroup.tsx
@@ -30,7 +30,7 @@ export const SourceControlGroupNavigation = (props: SourceControlGroupNavigation
   return (
     <>
       <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'>
+        <span onClick={()=>handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-75 ms-1'>
           {
             activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
           }
diff --git a/libs/remix-ui/git/src/components/panels/init.tsx b/libs/remix-ui/git/src/components/panels/init.tsx
@@ -19,7 +19,7 @@ export const Init = () => {
 
       <div>
         <div className='mt-1 mb-2'>
-          <h5>INITIALIZE</h5>
+          <h6>INITIALIZE</h6>
           <GitUIButton
             onClick={init}
             className="btn w-md-25 w-100 btn-primary"
diff --git a/libs/remix-ui/git/src/components/panels/setup.tsx b/libs/remix-ui/git/src/components/panels/setup.tsx
@@ -11,10 +11,10 @@ export const Setup = ({ callback }) => {
 
   return (
     <>
-      <h5>SETUP REQUIRED</h5>
+      <h6>SETUP REQUIRED</h6>
       <div>
         <div className='mt-1 mb-2'>
-          To ensure that your commits are properly attributed in Git, you need to <a href='#' onClick={startSettingUp} className='cursor-pointer me-1'>configure a username and email address or connect to GitHub.</a>
+          To ensure that your commits are properly attributed in Git, you need to <a href='#' onClick={startSettingUp} className='cursor-pointer me-1'>configure a username and email OR connect to GitHub.</a>
           These credentials will be used to identify the author of the commit.
 
           <a href='#' onClick={startSettingUp} className='ms-1 cursor-pointer'>

Original file line number	Diff line number	Diff line change
`@@ -3119,7 +3119,7 @@ textarea.form-control-lg {`
`3119`	`3119`	`color: var(--bs-btn-disabled-color);`
`3120`	`3120`	`pointer-events: none;`
`3121`	`3121`	`background-color: var(--bs-btn-disabled-bg);`
`3122`		`- border-color: var(--bs-btn-disabled-border-color);`
	`3122`	`+ /* border-color: var(--bs-btn-disabled-border-color); */`
`3123`	`3123`	`opacity: var(--bs-btn-disabled-opacity);`
`3124`	`3124`	`}`
`3125`	`3125`
Original file line number	Diff line number	Diff line change
`@@ -3104,7 +3104,7 @@ textarea.form-control-lg {`
`3104`	`3104`	`color: var(--bs-btn-disabled-color);`
`3105`	`3105`	`pointer-events: none;`
`3106`	`3106`	`background-color: var(--bs-btn-disabled-bg);`
`3107`		`- border-color: var(--bs-btn-disabled-border-color);`
	`3107`	`+ /* border-color: var(--bs-btn-disabled-border-color); */`
`3108`	`3108`	`opacity: var(--bs-btn-disabled-opacity);`
`3109`	`3109`	`}`
`3110`	`3110`
Original file line number	Diff line number	Diff line change
`@@ -22,7 +22,7 @@ export const BranchesNavigation = ({ eventKey, activePanel, callback }) => {`
`22`	`22`	`return (`
`23`	`23`	`<>`
`24`	`24`	`<div className={'d-flex justify-content-between pt-1 ' + (activePanel === eventKey? 'bg-light': '')}>`
`25`		`- <span data-id='branches-panel' onClick={()=>handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-75'>`
	`25`	`+ <span data-id='branches-panel' onClick={()=>handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-75 ms-1'>`
`26`	`26`	`{`
`27`	`27`	`activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>`
`28`	`28`	`}`
Original file line number	Diff line number	Diff line change
`@@ -16,7 +16,7 @@ export const CloneNavigation = ({ eventKey, activePanel, callback }) => {`
`16`	`16`	`return (`
`17`	`17`	`<>`
`18`	`18`	`<div className={'d-flex justify-content-between pb-1 pt-1 ' + (activePanel === eventKey? 'bg-light': '')}>`
`19`		`- <span data-id='clone-panel' onClick={()=>handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-75'>`
	`19`	`+ <span data-id='clone-panel' onClick={()=>handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-75 ms-1'>`
`20`	`20`	`{`
`21`	`21`	`activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>`
`22`	`22`	`}`
Original file line number	Diff line number	Diff line change
`@@ -21,7 +21,7 @@ export const CommandsNavigation = ({ eventKey, activePanel, callback }) => {`
`21`	`21`	`return (`
`22`	`22`	`<>`
`23`	`23`	`<div className={'d-flex justify-content-between ' + (activePanel === eventKey ? 'bg-light' : '')}>`
`24`		`- <span data-id='commands-panel' onClick={() => handleClick()} role={'button'} className="nav d-flex justify-content-start align-items-center w-75">`
	`24`	`+ <span data-id='commands-panel' onClick={() => handleClick()} role={'button'} className="nav d-flex justify-content-start align-items-center w-75 ms-1">`
`25`	`25`	`{`
`26`	`26`	`activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>`
`27`	`27`	`}`
Original file line number	Diff line number	Diff line change
`@@ -43,7 +43,7 @@ export const CommitsNavigation = ({ eventKey, activePanel, callback, title, bran`
`43`	`43`	`return (`
`44`	`44`	`<>`
`45`	`45`	<div className={`d-flex justify-content-between ${activePanel === eventKey ? 'bg-light' : ''} ${ahead \|\| behind? 'text-success':''}`}>
`46`		- <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'>
	`46`	+ <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 ms-1'>
`47`	`47`	`{`
`48`	`48`	`activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>`
`49`	`49`	`}`
Original file line number	Diff line number	Diff line change
`@@ -17,7 +17,7 @@ export const GitHubNavigation = ({ eventKey, activePanel, callback }) => {`
`17`	`17`	`return (`
`18`	`18`	`<>`
`19`	`19`	`<div className={'d-flex justify-content-between pt-1 pb-1 ' + (activePanel === eventKey? 'bg-light': '')}>`
`20`		`- <span data-id='github-panel' onClick={()=>handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-75'>`
	`20`	`+ <span data-id='github-panel' onClick={()=>handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-75 ms-1'>`
`21`	`21`	`{`
`22`	`22`	`activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>`
`23`	`23`	`}`
Original file line number	Diff line number	Diff line change
`@@ -46,7 +46,7 @@ export const LogNavigation = ({ eventKey, activePanel, callback }) => {`
`46`	`46`	`return (`
`47`	`47`	`<>`
`48`	`48`	`<div className={'d-flex justify-content-between pt-1 pb-1 ' + (activePanel === eventKey ? 'bg-light' : '')}>`
`49`		`- <span onClick={() => handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-75'>`
	`49`	`+ <span onClick={() => handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-75 ms-1'>`
`50`	`50`	`{`
`51`	`51`	`activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>`
`52`	`52`	`}`
Original file line number	Diff line number	Diff line change
`@@ -19,7 +19,7 @@ export const RemotesNavigation = ({ eventKey, activePanel, callback }) => {`
`19`	`19`	`return (`
`20`	`20`	`<>`
`21`	`21`	`<div className={'d-flex justify-content-between pt-1 pb-1 ' + (activePanel === eventKey? 'bg-light': '')}>`
`22`		`- <span data-id='remotes-panel' onClick={()=>handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-75'>`
	`22`	`+ <span data-id='remotes-panel' onClick={()=>handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-75 ms-1'>`
`23`	`23`	`{`
`24`	`24`	`activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>`
`25`	`25`	`}`
Original file line number	Diff line number	Diff line change
`@@ -20,7 +20,7 @@ export const SettingsNavigation = ({ eventKey, activePanel, callback }) => {`
`20`	`20`	`return (`
`21`	`21`	`<>`
`22`	`22`	`<div className={'d-flex justify-content-between ' + (activePanel === eventKey ? 'bg-light' : '')}>`
`23`		`- <span onClick={() => handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-75'>`
	`23`	`+ <span onClick={() => handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-75 ms-1'>`
`24`	`24`	`{`
`25`	`25`	`activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>`
`26`	`26`	`}`