...

3 files changed, 34 insertions, 7 deletions

diff --git a/FrontEnd/src/app/index.sass b/FrontEnd/src/app/index.sass
index 1a833174..f1ccf50b 100644
--- a/FrontEnd/src/app/index.sass
+++ b/FrontEnd/src/app/index.sass
@@ -35,10 +35,17 @@ small
     width: 40px

 

 .icon-button

-  font-size: 1.4em

+  font-size: 1.4rem

   cursor: pointer

   &.large

-    font-size: 1.6em

+    font-size: 1.6rem

+

+.flat-button

+  cursor: pointer

+  padding: 0.2em 0.5em

+  border-radius: 0.2em

+  &:hover

+    background-color: $gray-200

 

 .cursor-pointer

   cursor: pointer

diff --git a/FrontEnd/src/app/views/home/TimelineBoard.tsx b/FrontEnd/src/app/views/home/TimelineBoard.tsx
index 0195f1b5..a83095d4 100644
--- a/FrontEnd/src/app/views/home/TimelineBoard.tsx
+++ b/FrontEnd/src/app/views/home/TimelineBoard.tsx
@@ -14,7 +14,7 @@ interface TimelineBoardItemProps {
   // If not null, will disable navigation on click.
   actions?: {
     onDelete: () => void;
-    onMove: (e: React.MouseEvent) => void;
+    onMove: (e: React.PointerEvent) => void;
   };
 }
 
@@ -41,8 +41,8 @@ const TimelineBoardItem: React.FC<TimelineBoardItemProps> = ({
       </div>
       {actions != null ? (
         <div>
-          <i className="bi-trash icon-button text-danger" />
-          <i className="bi-grip-vertical icon-button text-danger" />
+          <i className="bi-trash icon-button text-danger px-2" />
+          <i className="bi-grip-vertical icon-button text-gray px-2" />
         </div>
       ) : null}
     </>
@@ -82,6 +82,7 @@ const TimelineBoardUI: React.FC<TimelineBoardUIProps> = (props) => {
           editable &&
             (editing ? (
               <div
+                className="flat-button text-primary"
                 onClick={() => {
                   setEditing(false);
                 }}
@@ -90,6 +91,7 @@ const TimelineBoardUI: React.FC<TimelineBoardUIProps> = (props) => {
               </div>
             ) : (
               <div
+                className="flat-button text-primary"
                 onClick={() => {
                   setEditing(true);
                 }}
@@ -127,7 +129,22 @@ const TimelineBoardUI: React.FC<TimelineBoardUIProps> = (props) => {
         } else {
           return timelines.map((timeline) => {
             return (
-              <TimelineBoardItem key={timeline.name} timeline={timeline} />
+              <TimelineBoardItem
+                key={timeline.name}
+                timeline={timeline}
+                actions={
+                  editHandler != null && editing
+                    ? {
+                        onDelete: () => {
+                          //TODO: Implement this.
+                        },
+                        onMove: () => {
+                          //TODO: Implement this.
+                        },
+                      }
+                    : undefined
+                }
+              />
             );
           });
         }
diff --git a/FrontEnd/src/app/views/home/home.sass b/FrontEnd/src/app/views/home/home.sass
index e15441bc..7694b50c 100644
--- a/FrontEnd/src/app/views/home/home.sass
+++ b/FrontEnd/src/app/views/home/home.sass
@@ -3,18 +3,21 @@
   @extend .d-flex

   @extend .flex-column

   @extend .py-3

-  @extend .px-3

   min-height: 200px

 

 .timeline-board-header

+  @extend .px-3

   display: flex

+  align-items: center

   justify-content: space-between

 

 .timeline-board-item

   font-size: 1.1em

+  @extend .px-3

   @extend .py-2

   transition: background 0.3s

   display: flex

+  align-items: center

   justify-content: space-between

   .icon

     height: 1.3em