redesigns and bug fixes

src/components/app/EditPanel.vue

@@ -47,12 +47,10 @@ export default {
 .edit-panel {
   padding: 10px;
   color: white;
-  background: rgba(23, 112, 255, 0.877);
+  background: #0f272a;
   display: flex;
   flex-direction: column;
   z-index:1;
-  border-radius: 10px;
-  margin: 10px;
   margin-bottom: 0;
 }
 .top{
@@ -63,16 +61,15 @@ export default {
 }
 .close-button {
   color: white;
-  background: rgba(0, 0, 0, 0.199);
+  background: #304548;
-  padding: 2px;
+  padding: 4px;
-  border-radius: 3px;
   align-self: flex-end;
   transition: 0.3s;
   user-select: none;
   cursor: pointer;
 }
 .close-button:hover {
-  background: rgba(0, 0, 0, 0.431);
+  background: #485b5d;
 }
 .message {
   color: rgb(214, 214, 214);

src/components/app/FriendsList.vue

@@ -7,12 +7,12 @@
           class="tab"
           :class="{notifyAnimation: friendRequestExists, selected: currentTab === 0}"
           @click="currentTab = 0"
-        >Friends</div>
+        ><div class="material-icons">group</div>Friends</div>
         <div
           class="tab"
           :class="{notifyAnimation: DMNotification, selected: currentTab === 1 }"
           @click="currentTab = 1"
-        >Recents</div>
+        ><div class="material-icons">access_time</div>Recents</div>
       </div>
       <div v-if="currentTab === 0" class="list">
         <pending-friends />
@@ -136,15 +136,41 @@ export default {
   height: 50px;
   transition: 0.2s;
   cursor: pointer;
-}
-
-.tab:hover {
-  background: #097279;
-}
-
-.tab.selected {
   background: #075e64;
+  position: relative;
 }
+.tab .material-icons {
+  margin-right: 5px;
+}
+.tab:hover::before {
+  content: '';
+  position: absolute;
+  height: 3px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgb(177, 177, 177);
+}
+.tab::before {
+  content: '';
+  position: absolute;
+  height: 3px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: transparent;
+  transition: 0.2s;
+}
+.tab.selected::before {
+  content: '';
+  position: absolute;
+  height: 3px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgb(255, 255, 255);
+}
+
 /* ------- SCROLL BAR -------*/
 /* width */
 .list::-webkit-scrollbar {

src/components/app/MessagePanel.vue

@@ -816,16 +816,15 @@ export default {
 
 .back-to-bottom-button {
   &:hover {
-    background: rgb(23, 124, 255);
+    background: #748b8e;
     box-shadow: 0px 0px 15px 0px #0000008a;
   }
   transition: 0.2s;
-  background: rgba(23, 124, 255, 0.818);
+  background: #516e72;
   color: white;
   position: absolute;
   bottom: 15px;
   right: 25px;
-  border-radius: 10px;
   height: 50px;
   z-index: 2;
   display: flex;

src/components/app/MessageTemplate.vue

@@ -22,7 +22,7 @@
           <div class="date">{{ getDate }}</div>
         </div>
         <SimpleMarkdown class="content-message" :message="message" />
-        <div class="file-content" v-if="getFile">
+        <div class="file-content" v-if="getFile && !getFile.fileName.endsWith('.mp3')">
           <div class="icon">
             <i class="material-icons">insert_drive_file</i>
           </div>
@@ -33,6 +33,12 @@
             </a>
           </div>
         </div>
+        <div v-if="getFile && getFile.fileName.endsWith('.mp3')" class="file-content music">
+          <div class="info">{{ getFile.fileName }}</div>
+          <audio controls>
+            <source :src="getFile.url" type="audio/mp3">
+          </audio>
+        </div>
 
         <div class="image-content" ref="image" v-if="getImage">
           <img :src="getImage" @click="imageClicked" />
@@ -320,13 +326,12 @@ export default {
 }
 
 .ownMessageLeft .triangle-inner {
-  border-left: 8px solid rgba(184, 184, 184, 0.219);
+  border-left: 8px solid #3a585c;
   border-right: none !important;
 }
 
 .ownMessageLeft .avatar {
   margin-right: 0px;
-  margin-left: 5px;
 }
 .ownMessageLeft .sending-status {
   margin-left: auto !important;
@@ -335,14 +340,16 @@ export default {
 
 .message {
   margin: 10px;
+  margin-top: 5px;
+  margin-bottom: 5px;
   display: flex;
 }
 
 .ownMessage .triangle-inner {
-  border-right: 8px solid rgba(184, 184, 184, 0.219);
+  border-right: 8px solid #3a585c;
 }
 .ownMessage .content {
-  background: rgba(184, 184, 184, 0.219);
+  background: #3a585c;
 }
 
 .ownMessage .date {
@@ -351,24 +358,31 @@ export default {
 
 .file-content {
   display: flex;
-  background: #0a1a1c;
+  background: #5b7377;
   padding: 10px;
   margin-top: 5px;
+  &.music {
+   .info  {
+     margin-bottom: 5px;
+   }
+    flex-direction: column;
+  }
 }
+
+
 .file-content .material-icons {
   font-size: 40px;
 }
 .file-content .download-button {
   font-size: 14px;
   background: rgba(0, 0, 0, 0.158);
-  border-radius: 3px;
   padding: 3px;
   text-align: center;
   display: inline-block;
   margin-top: 3px;
   transition: 0.3s;
   user-select: none;
-  cursor: default;
+  cursor: pointer;
   color: white;
 }
 .file-content .download-button:hover {
@@ -387,7 +401,7 @@ export default {
 }
 
 .avatar {
-  margin: auto 5px 0 0;
+  margin: auto 0 0 0;
 }
 
 .triangle {
@@ -411,20 +425,18 @@ export default {
   display: flex;
   justify-content: center;
   flex-direction: column;
-  border-radius: 10px;
+  // border-radius: 10px;
   border-bottom-left-radius: 0;
   color: rgb(231, 231, 231);
   margin: auto 0;
   overflow: hidden;
 }
 .ownMessageLeft .content {
-  border-bottom-left-radius: 10px;
   border-bottom-right-radius: 0;
 }
 .image-content {
   margin-top: 10px;
   padding: 5px;
-  border-radius: 5px;
   background: #1d2c2e;
   display: -ms-flexbox;
   display: flex;

src/components/app/Popouts/Popouts/DragDropFileUploadDialog.vue

@@ -24,13 +24,14 @@
   margin: auto;
   height: 230px;
   width: 300px;
-  background: rgba(0, 0, 0, 0.466);
-	border: solid 1px white;
-  border-radius: 5px;
 	color: white;
 	display: flex;
 	flex-direction: column;
 	user-select: none;
+  background-image: url("../../../../assets/leftPanelBackground.jpg");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
 }
 .material-icons{
 	font-size: 80px;

src/components/app/Popouts/Popouts/uploadDialog.vue

@@ -24,14 +24,12 @@
           </div>
         </div>
       </div>
-      <div class="message">
-        Add a message
-      </div>
       <div class="message-area">
         <textarea
           v-model="message"
           class="chat-input"
-          placeholder
+          placeholder="Add a message"
+          ref="messageInput"
         />
       </div>
       <div class="bottom-panel">
@@ -93,6 +91,7 @@ export default {
     }
   },
   mounted() {
+    this.$refs['messageInput'].focus();
     (this.name = this.popouts.fileToUpload.name),
       (this.size = filesize(this.popouts.fileToUpload.size)),
       this.loadFileInfo(this.popouts.fileToUpload);
@@ -209,12 +208,15 @@ export default {
   display: flex;
 }
 .inner {
-  background: rgba(47, 47, 47, 0.938);
   display: flex;
   margin: auto;
   width: 500px;
   flex-direction: column;
   position: relative;
+  background-image: url("../../../../assets/leftPanelBackground.jpg");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
 }
 .info {
   display: flex;
@@ -223,7 +225,7 @@ export default {
   margin-bottom: 40px;
 }
 .size {
-  color: grey;
+  color: rgb(221, 221, 221);
   margin-top: 5px;
 }
 .data {
@@ -271,15 +273,14 @@ export default {
   display: flex;
   align-content: center;
   align-items: center;
-  background: rgba(0, 0, 0, 0.267);
+  background: #05353b;
   padding: 5px;
-  border-radius: 3px;
+  cursor: pointer;
-  cursor: default;
   user-select: none;
   transition: 0.3s;
 }
 .button:hover {
-  background: rgba(0, 0, 0, 0.445);
+  background: #0f292c;
 }
 .button .text {
   margin-left: 5px;
@@ -299,7 +300,7 @@ export default {
 }
 .chat-input {
   font-family: "Roboto", sans-serif;
-  background: rgb(26, 26, 26);
+  background: #45939e;
   color: white;
   width: 100%;
   height: 20px;
@@ -311,6 +312,9 @@ export default {
   outline: none;
   transition: 0.3s;
 }
+.chat-input::placeholder {
+  color: rgb(221, 221, 221);
+}
 @media (max-width: 518px) {
   .inner {
     align-content: center;

src/components/app/SimpleMarkdown.vue

@@ -28,7 +28,6 @@
 	.codeblock {
 		background-color: rgba(0, 0, 0, 0.397);
 		padding: 5px;
-		border-radius: 5px;
 		word-wrap: break-word;
 		word-break: break-word;
 		white-space: pre-wrap;

src/components/app/messageEmbedTemplate.vue

@@ -106,7 +106,6 @@ export default {
 <style scoped>
 .embed {
   background: #1d2b2d;
-  border-radius: 10px;
   padding: 5px;
   display: flex;
   max-width: 500px;
@@ -169,14 +168,12 @@ export default {
 .image img {
   width: auto;
   height: 100px;
-  border-radius: 5px;
   align-self: center;
 }
 .image {
   display: flex;
   margin-right: 10px;
   align-self: center;
-  border-radius: 5px;
   cursor: pointer;
   position: relative;
 }

src/components/app/uploadsQueue.vue

@@ -39,12 +39,11 @@ export default {
 }
 .upload {
   color: white;
-  background: rgba(0, 0, 0, 0.513);
+  background: #3a585c;
   margin: 10px;
-  margin-left: 70px;
+  margin-left: 10px;
   display: flex;
   padding: 10px;
-  border-radius: 10px;
 }
 .icon .material-icons {
   font-size: 40px;
@@ -62,7 +61,7 @@ export default {
 }
 .size {
   font-size: 15px;
-  color: grey;
+  color: rgb(207, 207, 207);
 }
 .progress {
   display: flex;

src/utils/changelog.js

@@ -9,12 +9,25 @@ const prototype = {
 };
 
 const config = [
+  {
+    version: 8.4,
+    title: "Redesigns and built in mp3 player!",
+    shortTitle: "",
+    date: "17/11/2019",
+    headColor: "#0c7b7f",
+    new: [
+      "You can now play mp3 files within nertivia! (mp4 coming soon)",
+      "Redesigned some components such as file upload, edit messages and more.",
+    ],
+    fix: [
+      "Some bugs have been fixed."
+    ]
+  },
   {
     version: 8.3,
     title: "Better formatter + better performance.",
     shortTitle: "",
     date: "15/11/2019",
-    headColor: "#0c7b7f",
     new: [
       "Made design more consistent throughout the app"
     ],