Style and Disable Button Update (#3337)

dashboard/src/components/ProvisionerSettings.tsx

@@ -807,7 +807,8 @@ const ProvisionerSettings: React.FC<Props> = (props) => {
     <>
       <StyledForm>{renderForm()}</StyledForm>
       <Button
-        disabled={isDisabled()}
+        // disabled={isDisabled()}
+        disabled={currentCluster ? true : isDisabled()}
         onClick={createCluster}
         status={getStatus()}
       >

dashboard/src/main/home/sidebar/ClusterList.tsx

@@ -200,9 +200,8 @@ const ClusterName = styled.div`
   text-overflow: ellipsis;
   display: flex;
   align-items: center;
+  max-width: calc(100% - 50px); // Reserve space for the arrow drop down and some padding
 `;
-
-
 const StyledClusterSection = styled.div`
   position: relative;
   margin-left: 3px;

dashboard/src/main/home/sidebar/ProjectButton.tsx

@@ -174,7 +174,7 @@ const Letter = styled.div`
   width: 100%;
   position: absolute;
   padding-bottom: 2px;
-  font-weight: 600;
+  font-weight: 500;
   top: 0;
   left: 0;
   display: flex;
@@ -188,16 +188,15 @@ const ProjectImage = styled.img`
 `;
 
 const ProjectIcon = styled.div`
-  width: 30px;
+  width: 25px;
   min-width: 25px;
-  height: 30px;
+  height: 25px;
   border-radius: 3px;
   overflow: hidden;
   position: relative;
   margin-right: 10px;
   font-weight: 400;
 `;
-
 const ProjectIconAlt = styled(ProjectIcon)`
   border: 1px solid #ffffff44;
   display: flex;
@@ -243,7 +242,6 @@ const ProjectName = styled.div`
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  font-size: 17px;
   flex-grow: 1; // <-- Add flex-grow here
   padding-right: 20px; // <-- Add padding-right here
 `;

dashboard/src/main/home/sidebar/ProjectSelectionModal.tsx

@@ -155,7 +155,7 @@ const ProjectSelectionModal: React.FC<Props> = ({
   };
 
   return (
-    <Modal closeModal={closeModal} width="60vw">
+    <Modal closeModal={closeModal} width="1000px">
       <Text size={16} style={{ marginRight: '10px' }}>
         Switch Project
       </Text>