Improved styling of disabled items over repo list

dashboard/src/components/repo-selector/RepoList.tsx

@@ -192,7 +192,7 @@ const RepoList: React.FC<Props> = ({
       return <LoadingWrapper>No matching Github repos found.</LoadingWrapper>;
     } else {
       return results.map((repo: RepoType, i: number) => {
-        const shouldDisable = !!filteredRepos.find(
+        const shouldDisable = !!filteredRepos?.find(
           (filteredRepo) => repo.FullName === filteredRepo
         );
         return (
@@ -201,7 +201,8 @@ const RepoList: React.FC<Props> = ({
             isSelected={repo.FullName === selectedRepo}
             lastItem={i === repos.length - 1}
             onClick={() => setRepo(repo)}
-            readOnly={readOnly || shouldDisable}
+            readOnly={readOnly}
+            disabled={shouldDisable}
           >
             <img src={github} alt={"github icon"} />
             {repo.FullName}
@@ -242,32 +243,40 @@ const RepoListWrapper = styled.div`
   overflow-y: auto;
 `;
 
-const RepoName = styled.div`
+type RepoNameProps = {
+  lastItem: boolean;
+  isSelected: boolean;
+  readOnly: boolean;
+  disabled: boolean;
+};
+
+const RepoName = styled.div<RepoNameProps>`
   display: flex;
   width: 100%;
   font-size: 13px;
   border-bottom: 1px solid
-    ${(props: { lastItem: boolean; isSelected: boolean; readOnly: boolean }) =>
-      props.lastItem ? "#00000000" : "#606166"};
-  color: #ffffff;
+    ${(props) => (props.lastItem ? "#00000000" : "#606166")};
+  color: ${(props) => (props.disabled ? "#ffffff88" : "#ffffff")};
   user-select: none;
   align-items: center;
   padding: 10px 0px;
-  cursor: ${(props: {
-    lastItem: boolean;
-    isSelected: boolean;
-    readOnly: boolean;
-  }) => (props.readOnly ? "default" : "pointer")};
-  pointer-events: ${(props: {
-    lastItem: boolean;
-    isSelected: boolean;
-    readOnly: boolean;
-  }) => (props.readOnly ? "none" : "auto")};
-  background: ${(props: {
-    lastItem: boolean;
-    isSelected: boolean;
-    readOnly: boolean;
-  }) => (props.isSelected ? "#ffffff22" : "#ffffff11")};
+  cursor: ${(props) =>
+    props.readOnly || props.disabled ? "default" : "pointer"};
+  pointer-events: ${(props) =>
+    props.readOnly || props.disabled ? "none" : "auto"};
+
+  ${(props) => {
+    if (props.disabled) {
+      return "";
+    }
+
+    if (props.isSelected) {
+      return `background: #ffffff22;`;
+    }
+
+    return `background: #ffffff11;`;
+  }}
+
   :hover {
     background: #ffffff22;