boooo 🎃

src/components/app/Tabs/Explore.vue

@@ -15,7 +15,7 @@
           </div>
         </div>
         <div class="items">
-          <div class="item"
+          <div class="item halloween"
             v-for="(tab, index) in tabs"
             :key="index"
             :class="{selected: selectedTab === index}"
@@ -24,6 +24,11 @@
             {{tab.name}}
           </div>
 
+          <div class="card halloween" v-if="halloween">
+            <div class="pumpkin">🎃</div>
+            <div class="title">Happy Halloween!</div>
+          </div>
+
           <div class="card self-promo" v-if="nertiviaServerHide !== true && !nertiviaServer">
             <div class="material-icons close-btn" @click="hideSelfPromo">close</div>
             <div class="logo"/>
@@ -77,7 +82,8 @@ export default {
       ],
       nertiviaServerID: '6572915451527958528',
       nertiviaServerHide: localStorage.getItem('exploreTabNertiviaServerPromoHide') === 'true',
-      donateHide: localStorage.getItem('exploreTabDonateHide') === 'true'
+      donateHide: localStorage.getItem('exploreTabDonateHide') === 'true',
+      halloween: new Date().getDate() === 31
 
     };
   },
@@ -159,6 +165,9 @@ export default {
         background: rgba(0, 0, 0, 0.452);
       }
     }
+    .item.halloween.selected {
+      background: rgba(255, 166, 0, 0.692);
+    }
   }
   .header {
     display: flex;
@@ -262,6 +271,14 @@ export default {
     }
 
   }
+  &.halloween {
+    .pumpkin {
+      font-size: 50px;
+      margin-bottom: 10px;
+    }
+    background: orange;
+    font-size: 30px;
+  }
 }
 .coming-soon {
   display: flex;

src/components/app/Tabs/Explore/searchHeader.vue

@@ -5,7 +5,7 @@
         <div class="title">Filter:</div>
         <div class="filter-item">
           <div
-            class="item"
+            class="item halloween"
             v-for="(filter, index) in filters"
             :class="{selected: filterSelected === index}"
             :key="filter.name"
@@ -17,7 +17,7 @@
         <div class="title">Sort By:</div>
         <div class="filter-item">
           <div
-            class="item"
+            class="item halloween"
             v-for="(sortBy, index) in sortBys"
             :class="{selected: sortSelected === index}"
             :key="sortBy.name"
@@ -136,6 +136,9 @@ input {
       opacity: 0.8;
     }
   }
+  .item.halloween.selected {
+    color: orange;
+  }
 }
 
 

src/components/app/Tabs/Explore/serverTemplate.vue

@@ -8,7 +8,7 @@
       <div class="name">
         <div class="name-container">
           <span class="inner-name">{{server.server.name}}</span> 
-          <span class="material-icons"  v-if="server.verified">check</span>
+          <span class="material-icons halloween-icons"  v-if="server.verified">check</span>
        </div>
       </div>
     </div>
@@ -16,7 +16,7 @@
       <div class="description">{{server.description}}</div>
       <div class="buttons">
         <div class="member-count"><div class="material-icons">account_box</div>{{server.total_members}}</div>
-        <div class="button" :class="{selected: joined}" @click="joinButton">
+        <div class="button halloween-button" :class="{selected: joined}" @click="joinButton">
           <span v-if="joined">Joined</span>
           <spinner v-else-if="joinClicked" :size="30"/>
           <span v-else-if="!joinClicked">Join Server</span>
@@ -123,6 +123,9 @@ export default {
             color: #66e0ff;
             margin-left: 5px;
           }
+          .halloween-icons {
+            color: orange;
+          }
         }
       }
       .bottom {
@@ -184,6 +187,15 @@ export default {
 						background: grey;
 					}
         }
+        .halloween-button {
+          background: rgba(255, 166, 0, 0.8);
+          &:hover {
+            background: rgb(255, 166, 0);
+          }
+          &.selected {
+						background: grey;
+					}
+        }
       }
     }
 </style>

src/utils/changelog.js

@@ -14,12 +14,25 @@
 
 const config = [
 
+  {
+    version: 7.6,
+    title: "👻Spooky bug fixes👻",
+    shortTitle: "",
+    date: "16/10/2019",
+    headColor: "rgb(255, 166, 0)", // halloween
+    //headColor: "rgba(25, 130, 255, 0.77)",
+    new: [
+      'Better handled Google Drive linking.',
+      '👻👻👻',
+    ],
+    fix: ['Spooked away a lot of bugs behind the scenes.'],
+    msg: '👻'
+  },
   {
     version: 7.5,
     title: "GUI improvements",
     shortTitle: "",
     date: "09/10/2019",
-    headColor: "rgba(25, 130, 255, 0.77)",
     new: [
       'Design changes to some elements such as the tabs, Window controls and more.',
     ],

src/views/App.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="app" ref="app">
     <vue-headful :title="title" description="Nertivia Chat Client"/>
-    <div class="background-image"></div>
+    <div class="background-image halloween-background"></div>
     <transition name="fade-between-two" appear>
       <ConnectingScreen v-if="!loggedIn"/>
       <div class="box" v-if="loggedIn">
@@ -381,6 +381,12 @@ textarea {
   filter: blur(15px);
   transform: scale(1.1);
 }
+.halloween-background {
+  background: url(./../assets/halloween_background.jpg);
+  filter: blur(10px);
+  
+  background-position: center;
+}
 
 .panel-layout {
   display: flex;