fix annoying horizontal scroll bar in repos in dabshboard (#131)

* fix annoying horizontal scroll bar in repos in dabshboard

* minor UI changes

* formatting; remove unused interface

Co-authored-by: forrest <[email protected]>

Author: lihebi

ui/src/pages/repos/CreateRepoForm.tsx

@@ -17,11 +17,7 @@ import { nolookalikes } from "nanoid-dictionary";
 import { customAlphabet } from "nanoid";
 const nanoid = customAlphabet(nolookalikes, 10);
 
-interface form {
-  button?: any;
-}
-
-export default function CreateRepoForm(props: form = {}) {
+export default function CreateRepoForm(props) {
   const [isPrivate, setIsPrivate] = useState(true);
   const [error, setError] = useState("");
   const [createRepo] = useMutation(
@@ -51,12 +47,8 @@ export default function CreateRepoForm(props: form = {}) {
   };
   return (
     <div>
-      <Button
-        variant="contained"
-        sx={props.button ? props.button : {}}
-        onClick={handleClickOpen}
-      >
-        Create new repo
+      <Button variant={props.variant} onClick={handleClickOpen}>
+        Create a repo
       </Button>
       <Dialog open={open} onClose={handleClose} fullWidth={true} maxWidth="sm">
         <DialogTitle
@@ -65,7 +57,7 @@ export default function CreateRepoForm(props: form = {}) {
             fontWeight: 500,
           }}
         >
-          New {isPrivate ? " Private " : " Public "} Repo
+          Create a {isPrivate ? " Private " : " Public "} Repo
         </DialogTitle>
         <DialogContent>
           <Formik

ui/src/pages/repos/index.tsx

@@ -31,9 +31,9 @@ enum RepoTypes {
   repo = "myRepos",
   collab = "myCollabRepos",
 }
-enum RepoHint {
+enum RepoHintTemplate {
   myRepos = "Please create a new repo",
-  myCollabRepos = "Shared repos is empty",
+  myCollabRepos = "No shared repo yet. Invite your friend! ",
 }
 enum RepoTitleHint {
   myRepos = "Your repos",
@@ -188,6 +188,25 @@ function RepoLine({ repo, deletable, sharable }) {
   );
 }
 
+function RepoHintText({ type = RepoTypes.repo }) {
+  return (
+    <Box
+      sx={{
+        padding: "20px",
+        color: "#6B87A2",
+        fontSize: "18px",
+        fontWeight: 600,
+        display: "flex",
+        // width: "100%",
+        justifyContent: "center",
+        alignContent: "center",
+      }}
+    >
+      {RepoHintTemplate[type]}
+    </Box>
+  );
+}
+
 function Repos({ url = FETCH_REPOS, type = RepoTypes.repo }) {
   const { loading, error, data } = useQuery(url);
   if (loading) {
@@ -215,11 +234,11 @@ function Repos({ url = FETCH_REPOS, type = RepoTypes.repo }) {
         >
           {RepoTitleHint[type]} ({repos.length})
         </Box>
-        {type === RepoTypes.repo && <CreateRepoForm />}
+        {type === RepoTypes.repo && <CreateRepoForm variant="contained" />}
       </Box>
 
       <TableContainer component={Paper}>
-        <Table sx={{ minWidth: 650 }}>
+        <Table>
           <TableHead>
             <TableRow>
               <TableCell align="left">Name</TableCell>
@@ -239,20 +258,8 @@ function Repos({ url = FETCH_REPOS, type = RepoTypes.repo }) {
             ))}
           </TableBody>
         </Table>
-        {repos.length === 0 ? (
-          <Box
-            sx={{
-              padding: "20px",
-              color: "#6B87A2",
-              fontSize: "18px",
-              fontWeight: 600,
-              display: "flex",
-              width: "100%",
-              justifyContent: "center",
-            }}
-          >
-            {RepoHint[type]}
-          </Box>
+        {repos.length === 0 ? ( // If no repos
+          <RepoHintText type={type} />
         ) : null}
       </TableContainer>
     </Box>