Improve TimeInput icons

digitalservicebund · Mar 4, 2024 · a531319 · a531319
1 parent ef29846
commit a531319
Showing 1 changed file with 6 additions and 6 deletions.
diff --git a/app/components/common/TimeInput.tsx b/app/components/common/TimeInput.tsx
@@ -20,14 +20,14 @@ export function TimeInput({
   }
 
   return (
-    <div>
-      <label className="inline-block mb-1 ml-7" htmlFor={name}>
+    <div className="w-44">
+      <label className="inline-block mb-1 ml-9" htmlFor={name}>
         {label}
       </label>
-      <div className="flex items-center">
+      <div className="flex items-center justify-around">
         {!readOnly && (
           <span
-            className="material-symbols-outlined cursor-pointer select-none"
+            className="material-symbols-outlined cursor-pointer select-none border rounded-full border-gray-800"
             onClick={() => {
               onChange(addMinutesToTime(-15, time));
             }}
@@ -36,7 +36,7 @@ export function TimeInput({
           </span>
         )}
         <input
-          className="mx-1 read-only:bg-gray-200 read-only:cursor-not-allowed read-only:border-gray-200 read-only:mx-7"
+          className="read-only:bg-gray-200 read-only:cursor-not-allowed read-only:border-gray-200"
           id={name}
           name={name}
           type="time"
@@ -50,7 +50,7 @@ export function TimeInput({
         />
         {!readOnly && (
           <span
-            className="material-symbols-outlined cursor-pointer select-none"
+            className="material-symbols-outlined cursor-pointer select-none border rounded-full border-gray-800"
             onClick={() => {
               onChange(addMinutesToTime(15, time));
             }}