Merge pull request #22 from layer5io/ui/sistent/externallink

UI: Sistent ExternalLink; Shift to off white

Author: winkletinkle

ui/src/components/ExtensionComponent/AuthedDashboard.js

@@ -94,10 +94,10 @@ const LaunchKanvasSection = ({ isDarkTheme }) => (
     sx={{ backgroundColor: isDarkTheme ? "#393F49" : "#D7DADE" }}
   >
     <AccountDiv>
-      <KanvasGreen height={70} width={72} />
-      <LinkButton onClick={() => (window.location.href = proxyUrl)}>
+      <KanvasGreen height={70} width={72} style={{ marginBottom: "1rem" }} />
+      <StyledButton variant="contained" component="span" onClick={() => (window.location.href = proxyUrl)}>
         <StyledLink style={{ color: "white" }}>Launch Kanvas</StyledLink>
-      </LinkButton>
+      </StyledButton>
     </AccountDiv>
   </ExtensionWrapper>
 );
@@ -151,7 +151,7 @@ const ImportDesignSection = ({ isDarkTheme }) => {
           mb={2}
         >
           <Typography whiteSpace="nowrap">Import Design File</Typography>
-          <CustomTooltip title="Supported formats: Helm, K8s, Kustomize, Docker Compose">
+          <CustomTooltip title="Supported formats: Helm chart, Kubernetes manifest, Kustomize, and Docker Compose. Learn more at https://docs.layer5.io/kanvas/getting-started/">
             <div>
               <InfoCircleIcon height={24} width={24} />
             </div>

ui/src/components/ExtensionComponent/RecentDesigns.js

@@ -112,8 +112,8 @@ export default function RecentDesignsCard({ isDarkTheme }) {
                 <ListItemIcon>
                   <DesignIcon />
                 </ListItemIcon>
-                <ListItemText primary={design.name} />
-                <ListItemText
+                <ListItemText primary={design.name} style={{ textOverflow: "ellipsis", overflow: "hidden", whiteSpace: "nowrap", marginRight: "1rem" }} />
+                <ListItemText style={{ color: "#ccc", textAlign: "right" }}
                   primary={`Updated ${getFormatDate(design.updated_at)}`}
                 />
               </ListItem>

ui/src/components/ExtensionComponent/styledComponents.js

@@ -98,6 +98,7 @@ export const StyledButton = styled(ButtonBase)(({ style }) => ({
   whiteSpace: "nowrap",
   backgroundColor: "#00B39F",
   borderRadius: "5px",
+  fontSize: "1rem",
   color: "white",
   padding: "10px 20px",
   "&:hover": {