Explorar el Código

fix up styling on shell modal button

Alexander Belanger hace 4 años
padre
commit
eba44b3672

+ 29 - 8
dashboard/src/main/home/cluster-dashboard/expanded-chart/jobs/TempJobList.tsx

@@ -40,12 +40,15 @@ const TempJobList: React.FC<Props> = (props) => {
       >
       >
         <i className="material-icons">play_arrow</i> Run Job
         <i className="material-icons">play_arrow</i> Run Job
       </SaveButton>
       </SaveButton>
-      <CLIModalIcon
+      <CLIModalIconWrapper
         onClick={(e) => {
         onClick={(e) => {
           e.preventDefault();
           e.preventDefault();
           setShowConnectionModal(true);
           setShowConnectionModal(true);
         }}
         }}
-      />
+      >
+        <CLIModalIcon />
+        Shell Access
+      </CLIModalIconWrapper>
     </ButtonWrapper>
     </ButtonWrapper>
   );
   );
 
 
@@ -75,17 +78,25 @@ export default TempJobList;
 const ButtonWrapper = styled.div`
 const ButtonWrapper = styled.div`
   display: flex;
   display: flex;
   margin: 5px 0 35px;
   margin: 5px 0 35px;
+  justify-content: space-between;
 `;
 `;
 
 
-const CLIModalIcon = styled(CommandLineIcon)`
-  width: 35px;
+const CLIModalIconWrapper = styled.div`
   height: 35px;
   height: 35px;
-  padding: 8px;
-  margin: 0 5px;
+  font-size: 13px;
+  font-weight: 500;
+  font-family: "Work Sans", sans-serif;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 20px 6px 10px;
+  text-align: left;
   border: 1px solid #ffffff55;
   border: 1px solid #ffffff55;
-  border-radius: 100px;
+  border-radius: 8px;
   background: #ffffff11;
   background: #ffffff11;
-  color: white;
+  color: #ffffffdd;
+  cursor: pointer;
+
   :hover {
   :hover {
     cursor: pointer;
     cursor: pointer;
     background: #ffffff22;
     background: #ffffff22;
@@ -98,3 +109,13 @@ const CLIModalIcon = styled(CommandLineIcon)`
     fill: #ffffff99;
     fill: #ffffff99;
   }
   }
 `;
 `;
+
+const CLIModalIcon = styled(CommandLineIcon)`
+  width: 32px;
+  height: 32px;
+  padding: 8px;
+
+  > path {
+    fill: #ffffff99;
+  }
+`;