UX fixes

apps/remix-ide/src/assets/css/themes/remix-dark_tvx1s2.css

@@ -110,7 +110,7 @@
   --bs-link-hover-color: #525765;
   --bs-link-hover-color-rgb: 82, 87, 101;
   --bs-code-color: #e83e8c;
-  --bs-highlight-color: #fff;
+  --bs-highlight-color: #222336;
   --bs-highlight-bg: #fdebd0;
   --bs-border-width: 1px;
   --bs-border-style: solid;
@@ -397,7 +397,7 @@ small, .small {
 }
 
 mark, .mark {
-  padding: 0.1875em;
+  padding: 0.1875em !important;
   color: var(--bs-highlight-color);
   background-color: var(--bs-highlight-bg);
 }
@@ -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);
 }
 

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);
 }
 

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

@@ -68,7 +68,7 @@ export const BrancheDetailsNavigation = (props: BrancheDetailsNavigationProps) =
           {
             activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
           }
-          <i className="fa fa-code-branch ms-1"></i>
+          <i className="fa fa-code-branch ms-2"></i>
           <div className={`ms-1 ${context.currentBranch.name === branch.name && allowCheckout ? 'text-success' : ''}`}>{branch.name} {branch.remote ? `on ${branch.remote.name}` : ''}</div>
 
         </div>

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>
           }

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>
           }

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>
           }

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>
           }

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>
           }

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>
           }

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>
           }

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>
           }

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>

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>
           }

libs/remix-ui/git/src/components/panels/commands/pushpull.tsx

@@ -205,7 +205,7 @@ export const PushPull = () => {
 
       <div className="pt-3 d-flex align-items-center remixui_compilerConfig form-check">
         <input checked={force} onChange={e => onForceChange(e)} className="form-check-input" type="checkbox" data-id="compilerContainerAutoCompile" id="forcepush" title="Force Push" />
-        <label className="form-check-label " htmlFor="forcepush">Force push</label>
+        <label className="form-check-label ms-1" htmlFor="forcepush">Force push</label>
       </div>
 
     </>)

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"

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'>

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

@@ -52,7 +52,7 @@ export const SourceControlItem = (props: SourceControlItemProps) => {
   if (!file.statusNames || file.statusNames.length === 0) return null
 
   return (<>
-    <div data-status={file.statusNames.join('-')} data-file={file.filename} className="d-flex w-100 d-flex flex-row align-items-center">
+    <div data-status={file.statusNames.join('-')} data-file={file.filename} className="d-flex w-100 d-flex flex-row align-items-center mt-2">
       <div className='pointer gitfile long-and-truncated' onClick={async () => await fileClick(file)}>
         <span className='fw-bold long-and-truncated'>{path.basename(file.filename)}</span>
         <div className='text-secondary long-and-truncated'> {file.filename}</div>

libs/remix-ui/git/src/style/index.css

@@ -18,19 +18,19 @@
 }
 
 .commit-navigation:hover {
-    background-color: var(--custom-select);
+    background-color: var(--custom-onsurface-layer-2);
 }
 
 .commitdetailsitem {
     align-items: baseline;
 }
 
 .gitfile:hover              {
-    background-color             : var(--custom-select);
+    background-color             : var(--custom-onsurface-layer-2);
 }
 
 hr {
-    background-color: var(--custom-select);
+    background-color: var(--custom-onsurface-layer-2);
 }
 
 .messageTip {

libs/remix-ui/git/src/types/styles.ts

@@ -3,39 +3,39 @@ export const selectStyles: StylesConfig = {
   option: (baseStyles, state) => {
     return {
       ...baseStyles,
-      color: 'var(--text)',
+      color: 'var(--bs-body-color)',
     }
   },
   input(base, props) {
     return {
       ...base,
-      color: 'var(--text)',
+      color: 'var(--bs-body-color)',
     }
   },
   singleValue: (baseStyles, state) => {
     return {
       ...baseStyles,
-      color: 'var(--text)',
+      color: 'var(--bs-body-color)',
     }
   },
   control: (baseStyles, state) => ({
     ...baseStyles,
-    color: 'var(--text)',
-    backgroundColor: 'var(--custom-select)',
+    color: 'var(--bs-body-color)',
+    backgroundColor: 'var(--custom-onsurface-layer-2)',
     border: 'none',
   }),
   menu: (baseStyles, state) => {
     return {
       ...baseStyles,
-      backgroundColor: 'var(--custom-select)',
-      color: 'var(--text)',
+      backgroundColor: 'var(--custom-onsurface-layer-2)',
+      color: 'var(--bs-body-color)',
     }
   },
   menuList: (baseStyles, props) => {
     return {
       ...baseStyles,
-      backgroundColor: 'var(--custom-select)',
-      color: 'var(--text)',
+      backgroundColor: 'var(--custom-onsurface-layer-2)',
+      color: 'var(--bs-body-color)',
     }
   },
 }

libs/remix-ui/top-bar/src/components/githubLoginSuccess.tsx

@@ -46,7 +46,7 @@ export default function GithubLoginSuccess ({ user, handleLogout, cloneGitReposi
       </Dropdown.Toggle>
       <Dropdown.Menu
         as={CustomTopbarMenu}
-        className="custom-dropdown-items w-75 text-decoration-none"
+        className="custom-dropdown-items w-75 text-decoration-none bg-light"
       >
         <Dropdown.Item
           data-id="github-dropdown-item-clone"