Several UI fixes

app/src/main/res/css/modules/bottom_bar.sass

@@ -1,4 +1,5 @@
 .bottom_bar_container
+  user-select: none
   font-size: 1.5rem
   display: flex
   align-items: center

app/src/main/res/css/modules/column.sass

@@ -31,7 +31,7 @@
 .column
   height: 100vh
   overflow: hidden
-  margin: 0 1rem
+  margin: 0 0.5rem
   width: 100%
   display: flex
   flex-direction: column
@@ -52,7 +52,7 @@
     transform: translateZ(0)
     -webkit-transform: translateZ(0)
     padding: 0rem 0rem 1rem 0rem
-    height: calc(100vh - 2.8rem - 1.5rem)
+    height: calc(100vh - 2.8rem)
   .column_topbar
     height: 30px
     overflow: hidden

app/src/main/res/css/modules/common.sass

@@ -160,6 +160,13 @@ body
     display: flex
     justify-content: center
     height: 100%
+    &:after
+      content: ''
+      position: absolute
+      left: 0
+      bottom: 0
+      width: 100%
+      background: linear-gradient(to top,#54556e 0%,rgba(0,0,0,0) 100%)
 
   .fade-enter
     opacity: 0.01

app/src/main/res/css/modules/compact_user_card.sass

@@ -2,14 +2,15 @@
 
 .user_compact
   //background: url(./../images/empty_avatar.png)
-  background-size: 100% 100% !important
+  background-size: cover !important
   background-repeat: no-repeat !important
   position: relative
   display: flex
   align-items: center
   justify-content: center
   flex-direction: column
   padding: 1rem
+  padding-bottom: 2rem
   .user_bg_tint
     position: absolute
     top: 0px
@@ -51,8 +52,8 @@
       cursor: pointer
   .logout
     position: absolute
-    bottom: 5px
-    left: 10px
+    bottom: 0.25rem
+    left: 0.5rem
     font-size: 1.5rem
     z-index: 300
     display: flex
@@ -63,12 +64,12 @@
     i
       text-shadow: 0px 0px 4px rgba(0,0,0,0.4)
     &:hover::after
-      margin-left: 0.2rem
+      margin-left: 0.4rem
       opacity: 1
       text-shadow: 0px 0px 4px rgba(0,0,0,0.4)
     &::after
       content: attr(data-text)
-      font-size: 1rem
-      margin-left: -1.4rem
+      font-size: 1.1rem
+      margin-left: -0.6rem
       opacity: 0
-      transition: opacity 0.2s, margin-left 0.2s
+      transition: opacity 0.2s, margin-left 0.2s

app/src/main/res/css/modules/item_card.sass

@@ -2,8 +2,8 @@
   margin-bottom: 1rem
   border-radius: 3px
   transition: all 0.2s ease
-  margin-right: 0.5rem
   position: relative
+  margin-right: 0.5rem
   .body_container
     .top_container
       font-family: 'Roboto', sans-serif

app/src/main/res/css/modules/user_card.sass

@@ -1,16 +1,17 @@
 .user_card
   position: absolute
-  width: 25rem
+  width: calc(100% - 2rem)
   background-size: cover !important
   background-repeat: no-repeat !important
-  padding: 1rem 1rem 0rem 1rem
+  box-shadow: 0 2px 0px rgba(0, 0, 0, 0.19), 0 3px 4px rgba(0, 0, 0, 0.23)
+  padding: 1rem 1rem 2rem 1rem
   transform: translate(-1rem, -1rem)
   z-index: 199
   button
     box-shadow: none
     &:hover
       box-shadow: none
-  &::before
+  &:before
     content: " "
     background: rgba(64, 65, 90, 0.9)
     position: absolute
@@ -21,7 +22,8 @@
   .close
     position: absolute
     width: 1.2rem
-    height: 1.3rem
+    height: 1.2rem
+    line-height: 1.3rem
     right: 5px
     top: 5px
     border-radius: 100%
@@ -39,7 +41,8 @@
       i
         color: black
   .user_openprofile
-    width: 27rem
+    position: absolute;
+    width: calc(100%)
     transform: translateX(-1rem)
     margin: 0px
     text-shadow: 0px 0px 2px rgba(0,0,0,0.3)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "devrantron",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "main": "./app/build/app.js",
   "description": "An open source cross platform desktop application for devRant",
   "scripts": {