Merge pull request #165 from crupest/timeline

Redesign timeline ui.

4 files changed, 27 insertions, 26 deletions

diff --git a/FrontEnd/src/app/views/home/BoardWithUser.tsx b/FrontEnd/src/app/views/home/BoardWithUser.tsx
index dcd39cbe..fbe1dd89 100644
--- a/FrontEnd/src/app/views/home/BoardWithUser.tsx
+++ b/FrontEnd/src/app/views/home/BoardWithUser.tsx
@@ -62,9 +62,9 @@ const BoardWithUser: React.FC<{ user: UserWithToken }> = ({ user }) => {
   }, [user, joinTimelines]);
 
   return (
-    <Row className="my-2 justify-content-center">
+    <Row className="my-3 justify-content-center">
       {ownTimelines === "offline" && joinTimelines === "offline" ? (
-        <Col className="py-2" sm="8" lg="6">
+        <Col sm="8" lg="6">
           <OfflineBoard
             onReload={() => {
               setOwnTimelines("loading");
@@ -74,7 +74,7 @@ const BoardWithUser: React.FC<{ user: UserWithToken }> = ({ user }) => {
         </Col>
       ) : (
         <>
-          <Col sm="6" lg="5" className="py-2">
+          <Col sm="6" lg="5" className="mb-3 mb-sm-0">
             <TimelineBoard
               title={t("home.ownTimeline")}
               timelines={ownTimelines}
@@ -83,7 +83,7 @@ const BoardWithUser: React.FC<{ user: UserWithToken }> = ({ user }) => {
               }}
             />
           </Col>
-          <Col sm="6" lg="5" className="py-2">
+          <Col sm="6" lg="5">
             <TimelineBoard
               title={t("home.joinTimeline")}
               timelines={joinTimelines}
diff --git a/FrontEnd/src/app/views/home/BoardWithoutUser.tsx b/FrontEnd/src/app/views/home/BoardWithoutUser.tsx
index ebfddb50..7e30f799 100644
--- a/FrontEnd/src/app/views/home/BoardWithoutUser.tsx
+++ b/FrontEnd/src/app/views/home/BoardWithoutUser.tsx
@@ -34,7 +34,7 @@ const BoardWithoutUser: React.FC = () => {
   }, [publicTimelines]);
 
   return (
-    <Row className="my-2 justify-content-center">
+    <Row className="my-3 justify-content-center">
       {publicTimelines === "offline" ? (
         <Col sm="8" lg="6">
           <OfflineBoard
diff --git a/FrontEnd/src/app/views/home/TimelineCreateDialog.tsx b/FrontEnd/src/app/views/home/TimelineCreateDialog.tsx
index d9467719..786ebb5d 100644
--- a/FrontEnd/src/app/views/home/TimelineCreateDialog.tsx
+++ b/FrontEnd/src/app/views/home/TimelineCreateDialog.tsx
@@ -20,27 +20,28 @@ const TimelineCreateDialog: React.FC<TimelineCreateDialogProps> = (props) => {
       close={props.close}
       titleColor="success"
       title="home.createDialog.title"
-      inputScheme={[
-        {
-          type: "text",
-          label: "home.createDialog.name",
-          helperText: "home.createDialog.nameFormat",
-          validator: (name) => {
-            if (name.length === 0) {
-              return "home.createDialog.noEmpty";
-            } else if (name.length > 26) {
-              return "home.createDialog.tooLong";
-            } else if (!validateTimelineName(name)) {
-              return "home.createDialog.badFormat";
-            } else {
-              return null;
-            }
+      inputScheme={
+        [
+          {
+            type: "text",
+            label: "home.createDialog.name",
+            helperText: "home.createDialog.nameFormat",
           },
-        },
-      ]}
+        ] as const
+      }
+      inputValidator={([name]) => {
+        if (name.length === 0) {
+          return { 0: "home.createDialog.noEmpty" };
+        } else if (name.length > 26) {
+          return { 0: "home.createDialog.tooLong" };
+        } else if (!validateTimelineName(name)) {
+          return { 0: "home.createDialog.badFormat" };
+        } else {
+          return null;
+        }
+      }}
       onProcess={([name]) => {
-        nameSaved = name as string;
-        return timelineService.createTimeline(nameSaved).toPromise();
+        return timelineService.createTimeline(name).toPromise();
       }}
       onSuccessAndClose={() => {
         history.push(`timelines/${nameSaved}`);
diff --git a/FrontEnd/src/app/views/home/index.tsx b/FrontEnd/src/app/views/home/index.tsx
index 760adcea..0c36545c 100644
--- a/FrontEnd/src/app/views/home/index.tsx
+++ b/FrontEnd/src/app/views/home/index.tsx
@@ -34,8 +34,8 @@ const HomePage: React.FC = () => {
   return (
     <>
       <Container fluid>
-        <Row className="justify-content-center">
-          <Col xs={12} sm={10} md={8} lg={6}>
+        <Row className="my-3 justify-content-center">
+          <Col xs={12} sm={8} lg={6}>
             <SearchInput
               className="justify-content-center"
               value={navText}