Merge pull request #27 from jesusantguerrero/fix-modal-footer

improve modal styles
jesusantguerrero · Feb 13, 2021 · da6d8c3 · da6d8c3 · vercel · Feb 13, 2021
2 parents 83e6c1f + efb16d8
commit da6d8c3
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 17 deletions.
diff --git a/src/components/molecules/ModalBase.vue b/src/components/molecules/ModalBase.vue
@@ -15,7 +15,7 @@
                     </button>
                 </div>
             </slot>
-            <div class="modal__body ic-scroller pb-10">
+            <div class="modal__body ic-scroller pb-20">
                 <slot name="body"></slot>
             </div>
             <div class="modal__footer px-5 py-2 text-right absolute bottom-0 w-full bg-white">

diff --git a/src/components/molecules/TaskItem.vue b/src/components/molecules/TaskItem.vue
@@ -1,7 +1,7 @@
 <template>
   <div 
-    class="task-item mb-2 shadow-md bg-white border-gray-200 hover:border-green-200 border-2 px-4 py-3 rounded-md items-center transition-all"
-    :class="{'border-green-400': isSelected, 'cursor-pointer': handleMode || isItemAsHandler }"
+    class="task-item mb-2 shadow-md bg-white border-gray-200 hover:border-green-200 border-2 px-4 py-3 rounded-md items-center transition-all cursor-pointer"
+    :class="{'border-green-400': isSelected}"
     @click="emit('selected', task)"
     @dblclick="emit('edited', task)"
 

diff --git a/src/components/organisms/TimeTrackerModal.vue b/src/components/organisms/TimeTrackerModal.vue
@@ -1,14 +1,13 @@
 <template>
     <modal-base v-model:is-open="isOpenLocal">
         <template #title>
-            <h1 class="pt-5 text-xl font-bold">
+            <h1 class="py-2 px-5 text-xl font-bold text-left">
                 Promodoro Configuration
-
             </h1>
         </template>
 
         <template #body>
-            <form action="" @submit.prevent="save" class="pt-5  px-5 text-left prose mx-auto">
+            <form action="" @submit.prevent="save" class="pt-5  px-5 text-left mx-auto">
                 <!-- <h4>  User preferences </h4> -->
                 <!-- <div class="form-group">
                     <label for="">
@@ -30,7 +29,7 @@
                     </label>
                 </div> -->
 
-                 <h4>  Workflow Template </h4>
+                 <h4 class="font-bold">  Workflow Template </h4>
                  <div class="form-group">
                     <div class="workflow-item capitalize text-sm mb-10 inline-block"
                         v-for="(item, index) in formData.template"
@@ -41,7 +40,7 @@
                     </div>
                  </div>
 
-                 <h4>  Workflow Items </h4>
+                 <h4 class="font-bold">  Workflow Items </h4>
                  <div class="form-group">
                     <div class="workflow-item capitalize text-sm mb-10"
                         v-for="(item, key) in formData.modes"
@@ -52,14 +51,17 @@
                     </div>
                  </div>
 
-                 <h4>  Select sound </h4>
-                 <div class="form-group">
-                    <select name="" class="form-control">
+                 <h4 class="font-bold">  Select sound </h4>
+                 <div class="form-group flex space-x-2">
+                    <select name="" class="form-control w-full">
                         <option value="">Alarm Clock</option>
                     </select>
+                    <button class="bg-gray-700 text-white px-5 py-1 focus:outline-none rounded-md w-40" @click.prevent="playSound()">
+                        Test Audio
+                    </button>
                  </div>
 
-                 <h4>  Set Times </h4>
+                 <h4 class="font-bold">  Set Times </h4>
                  <div class="flex">
                     <div class="form-group">
                         <label for="">
@@ -94,10 +96,6 @@
                         >
                     </div>
                  </div>
-
-                <button class="bg-gray-700 text-white px-5 py-1 focus:outline-none rounded-md" @click.prevent="playSound()">
-                    Test Audio
-                </button>
             </form>
         </template>
 

diff --git a/src/views/Standup.vue b/src/views/Standup.vue
@@ -23,7 +23,6 @@
             :tags="state.selectedTags"
             :tasks="state.committed"
             :show-controls="false"
-            :show-select="true"
             :current-task="currentTask"
             @selected="setCurrentTask"
             color="text-gray-400"