UI tweaks

Author: Alan Smith

package-lock.json

@@ -11,6 +11,7 @@
     "@chenfengyuan/vue-countdown": "^1.1.2",
     "directory-named-webpack-plugin": "^4.0.1",
     "luxon": "^1.16.0",
+    "v-click-outside": "^2.1.3",
     "vue": "^2.6.10",
     "vue-datetime": "^1.0.0-beta.10",
     "vue-global-events": "^1.1.2",

package.json

@@ -1,13 +1,15 @@
 import EventList from '@sections/EventList/EventList.vue';
 import AddEvent from '@modals/AddEvent/AddEvent.vue';
 import { get } from '@/utils/storage';
+import PlusIcon from '@/assets/icons/plus.svg';
 
 export default {
   name: 'App',
 
   components: {
     EventList,
     AddEvent,
+    PlusIcon,
   },
 
   methods: {

src/assets/icons/plus.svg

@@ -20,16 +20,28 @@ body {
     flex-direction: column;
 }
 
-.c-app__add-event-button {
+.c-app__add-event {
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 100px;
-    height: 30px;
-    background: #fff;
-    border-radius: 2px;
+    width: 35px;
+    height: 35px;
+    background: #474747;
+    border-radius: 50%;
     position: absolute;
     bottom: 30px;
     right: 30px;
     cursor: pointer;
+
+    &:hover {
+        .c-app__add-event-icon {
+            fill: rgba(#fff, 0.7);
+        }
+    }
+
+    .c-app__add-event-icon {
+        width: 20px;
+        height: 20px;
+        fill: #fff;
+    }
 }

src/components/App/App.js

@@ -2,8 +2,10 @@
   <div class="c-app">
     <event-list/>
     <div
-      class="c-app__add-event-button"
-      @click="openAddEvent">Add Event</div>
+      class="c-app__add-event"
+      @click="openAddEvent">
+      <plus-icon class="c-app__add-event-icon"/>
+    </div>
     <add-event ref="addEvent"/>
   </div>
 </template>

src/components/App/App.scss

@@ -39,7 +39,10 @@ export default {
     },
 
     onClickAdd() {
-      if (!this.validateInput()) return;
+      if (!this.validateInput()) {
+        console.log('invalid input');
+        return;
+      }
 
       const date = new Date(this.eventDate);
       const eventId = this.generateEventId();
@@ -62,10 +65,11 @@ export default {
       if (this.eventName === '') return false;
       if (this.eventDate === '') return false;
 
-      if (this.eventBackgroundImage !== '' && (!this.eventBackgroundImage.endsWith('.png')
-        || !this.eventBackgroundImage.endsWith('.jpg')
-        || !this.eventBackgroundImage.endsWith('.jpeg')
-        || !this.eventBackgroundImage.endsWith('.gif'))) return false;
+      if (this.eventBackgroundImage.endsWith('.png')
+        || this.eventBackgroundImage.endsWith('.jpg')
+        || this.eventBackgroundImage.endsWith('.jpeg')
+        || this.eventBackgroundImage.endsWith('.gif')
+      ) return true;
 
       if (this.eventBackgroundImage === '') {
         this.eventBackgroundImage = 'https://picsum.photos/1200/800';

src/components/App/App.vue

@@ -6,12 +6,15 @@
       <div
         class="c-add-event"
         style="animation-duration: 0.5s"
+        v-click-outside="close"
         v-if="isVisible">
         <div class="c-add-event__header">
           <div class="c-add-event__header-title">
             Add New Event
           </div>
-          <div class="c-add-event__header-close">
+          <div
+            class="c-add-event__header-close"
+            @click="close">
             <close-icon class="c-add-event__header-close-icon"/>
           </div>
         </div>

src/components/modals/AddEvent/AddEvent.js

@@ -68,7 +68,6 @@ export default {
     },
 
     getTimeString(value, type) {
-      if (value === 0 && type !== 'second') return '';
       return `${value} ${type}${value !== 1 ? 's' : ''}`;
     },
 

src/components/modals/AddEvent/AddEvent.vue

@@ -41,6 +41,12 @@
     padding: 4px;
     cursor: pointer;
 
+    &:hover {
+        .c-event__info-delete-icon {
+            fill: rgba(#fff, 0.7);
+        }
+    }
+
     .c-event__info-delete-icon {
         fill: #fff;
         width: 15px;
@@ -81,6 +87,5 @@
 }
 
 .c-event__countdown-time {
-    margin-right: 5px;
-    width: 82px;
+    margin-top: 5px;
 }