frontend: experiment with UI

twenty-frontend/src/css/_layout.scss

@@ -20,4 +20,5 @@
 }
 
 .w-100 { width: 100%; }
+.w-95 { width: 95%; }
 .w-85 { width: 85%; }

twenty-frontend/src/css/_lists.scss

@@ -23,6 +23,15 @@ ul.collection li.item {
   flex-wrap: wrap;
   height: 85px;
 
+  padding: 0px 2.5px 0 2.5px;
+  border-left: 1px solid $primary-color;
+  border-right: 1px solid $primary-color;
+
+  &:hover {
+    border-left: 1px solid $secondary-color;
+    border-right: 1px solid $secondary-color;
+  }
+
   a {
     display: flex;
     flex-direction: column;

twenty-frontend/src/js/components/Tasks.tsx

@@ -68,7 +68,7 @@ export function Tasks() {
                 const editHref = `/tasks/edit#id=${task.id}`;
                 return (
                   <li className={classnames("item", classes)} key={key}>
-                    <div className="w-85">
+                    <div className="w-95">
                       <a className="w-100" href={editHref}>
                         <span className="title">{task.title}</span>
                         <span className="subtitle">