Give interactive elements more space

KatharinaSimma · May 2, 2023 · 1c0ee46 · 1c0ee46
1 parent 65483f7
commit 1c0ee46
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 14 deletions.
diff --git a/app/[listsId]/SingleViewList.tsx b/app/[listsId]/SingleViewList.tsx
@@ -184,13 +184,13 @@ export default function SingleViewList(props: Props) {
 
       <div className="divider">
         <button
-          className="flex items-center justify-center gap-2"
+          className="flex items-center justify-center gap-2 p-1 border border-transparent sm-p-3 tooltip hover:border hover:border-primary hover:rounded-md"
           aria-label="Show list actions"
           onClick={() => {
             setShowActions(!showActions);
           }}
         >
-          <WrenchIcon className="transition-all w-7 h-7 fill-primary hover:w-10 hover:h-10" />{' '}
+          <WrenchIcon className="transition-all w-7 h-7 fill-primary" />{' '}
           {showActions ? 'Hide' : 'Show'} list actions
         </button>
       </div>

diff --git a/app/components/ListComponent.tsx b/app/components/ListComponent.tsx
@@ -30,6 +30,7 @@ export default function ListComponent(props: Props) {
         <div className="flex items-center gap-2 ">
           {list.title}
           <button
+            className="p-1 border border-transparent sm:p-2 tooltip hover:border hover:border-primary hover:rounded-md"
             aria-label={
               listOpen ? `Close list ${list.title}` : `Open list ${list.title}`
             }
@@ -66,7 +67,10 @@ export default function ListComponent(props: Props) {
           </div>
           <LocationButton location={list.title} />
 
-          <div className="tooltip" data-tip="Edit list">
+          <div
+            className="p-0 border border-transparent sm:p-2 tooltip hover:border hover:border-primary hover:rounded-md"
+            data-tip="Edit list"
+          >
             <Link href={`/${list.id}`} aria-label="Edit list">
               <EllipsisVerticalIcon className="w-7 h-7 hover:fill-primary" />
             </Link>

diff --git a/app/components/LocationButton.tsx b/app/components/LocationButton.tsx
@@ -12,7 +12,10 @@ export default function LocationButton(props: Props) {
   );
 
   return (
-    <div className="ml-2 tooltip" data-tip="Show Location in maps">
+    <div
+      className="p-1 border border-transparent sm:p-3 tooltip hover:border hover:border-primary hover:rounded-md"
+      data-tip="Show Location in maps"
+    >
       <a
         href={locationLink}
         rel="noreferrer noopener"

diff --git a/app/components/TaskComponent.tsx b/app/components/TaskComponent.tsx
@@ -69,16 +69,20 @@ export default function TaskComponent(props: Props) {
 
   return (
     <div
-      className={`flex items-center justify-between gap-5 my-2 border border-transparent  ${
-        !editTitle ? 'hover:border hover:border-primary hover:rounded-md' : ''
-      }`}
+      className="flex items-center justify-between gap-5 my-2"
       key={`task-${task.id}`}
     >
-      <div className="flex items-center gap-1">
+      <div
+        className={`flex items-center border border-transparent  ${
+          !editTitle
+            ? 'p-l hover:border hover:border-primary hover:rounded-md'
+            : ''
+        }`}
+      >
         <input
           type="checkbox"
           id={`task-title-${task.id}`}
-          className="checkbox checkbox-primary"
+          className="mx-2 checkbox checkbox-primary"
           checked={done}
           onKeyUp={async (event) => {
             if (event.key === 'Enter') {
@@ -125,7 +129,7 @@ export default function TaskComponent(props: Props) {
       <div className="flex flex-row items-center justify-between">
         {editTitle ? (
           <button
-            className="flex justify-center"
+            className="flex justify-center p-1 border border-transparent sm:p-3 tooltip hover:border hover:border-primary hover:rounded-md"
             aria-label={`Save task ${task.title}`}
             onClick={async () => {
               setEditTitle(!editTitle);
@@ -144,7 +148,7 @@ export default function TaskComponent(props: Props) {
           </button>
         ) : (
           <button
-            className="flex justify-center"
+            className="flex justify-center p-1 border border-transparent sm:p-3 tooltip hover:border hover:border-primary hover:rounded-md"
             onClick={() => setEditTitle(!editTitle)}
             aria-label={`Edit task ${task.title}`}
           >
@@ -155,7 +159,7 @@ export default function TaskComponent(props: Props) {
         )}
         <LocationButton location={task.title} />
         <button
-          className="flex justify-center ml-2"
+          className="flex justify-center p-1 border border-transparent sm:p-3 hover:border hover:border-primary hover:rounded-md"
           aria-label={`Delete task ${task.title}`}
           onClick={async () => {
             await handleDeleteTask({

diff --git a/app/components/TaskContainer.tsx b/app/components/TaskContainer.tsx
@@ -23,12 +23,12 @@ export default function TaskContainer(props: Props) {
       ))}
       <div className="divider">
         <button
-          className="flex items-center justify-center gap-2"
+          className="flex items-center justify-center gap-2 p-1 border border-transparent sm:p-3 tooltip hover:border hover:border-primary hover:rounded-md"
           onClick={() => {
             setShowDone(!showDone);
           }}
         >
-          <CheckIcon className="w-8 h-8 transition-all fill-primary hover:w-10 hover:h-10" />{' '}
+          <CheckIcon className="w-8 h-8 transition-all fill-primary " />{' '}
           {showDone ? 'Hide' : 'Show'} done items
         </button>
       </div>