Merge pull request #1219 from asaadmahmoodspin/ui-improvements

Ui improvements

6 files changed, 78 insertions, 74 deletions

diff --git a/web/sass-files/sass/partials/_base.scss b/web/sass-files/sass/partials/_base.scss
index 6399b8fd8..635928fe3 100644
--- a/web/sass-files/sass/partials/_base.scss
+++ b/web/sass-files/sass/partials/_base.scss
@@ -37,6 +37,9 @@ body {
 img {
   max-width: 100%;
   height: auto;
+  &.rounded {
+    @include border-radius(100%);
+  }
 }
 
 .popover {
@@ -122,6 +125,9 @@ a:focus, a:hover {
   &.no-resize {
     resize: none;
   }
+  &.min-height {
+    min-height: 100px;
+  }
 }
 
 .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
diff --git a/web/sass-files/sass/partials/_modal.scss b/web/sass-files/sass/partials/_modal.scss
index 1dcdbf348..cca57acaa 100644
--- a/web/sass-files/sass/partials/_modal.scss
+++ b/web/sass-files/sass/partials/_modal.scss
@@ -113,11 +113,10 @@
 		text-align: center;
 		padding: 2em 1em;
 		.primary-message {
-			font-size: 1.2em;
+			font-size: 1.25em;
 		}
 		.secondary-message {
-			font-size: 1.25em;
-			color: #888;
+			@include opacity(0.8);
 			margin: 1em 0 0;
 		}
 	}
diff --git a/web/sass-files/sass/partials/_popover.scss b/web/sass-files/sass/partials/_popover.scss
index 4a2ad2748..4f5f1d215 100644
--- a/web/sass-files/sass/partials/_popover.scss
+++ b/web/sass-files/sass/partials/_popover.scss
@@ -28,6 +28,36 @@
     @include single-transition(opacity, 0.3s, ease-in);
     font-size: em(13px);
 
+    &.autocomplete {
+        display: block;
+        .popover-content {
+            padding: 10px;
+            position: relative;
+        }
+    }
+
+    .search-autocomplete__item {
+        cursor: pointer;
+        padding: 6px 8px;
+        margin: 3px 0;
+        @include border-radius(2px);
+
+        &:hover {
+            background: rgba(black, 0.1);
+        }
+
+        &.selected {
+            background: rgba(black, 0.2);
+        }
+
+        .profile-img {
+            margin-top: -1px;
+            height: 16px;
+            margin-right: 6px;
+            width: 16px;
+        }
+    }
+
     &.bottom > .arrow {
         top: -18px;
         border-width: 9px;
diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss
index 2cd5560ef..b85fa638a 100644
--- a/web/sass-files/sass/partials/_responsive.scss
+++ b/web/sass-files/sass/partials/_responsive.scss
@@ -379,7 +379,9 @@
             }
             .btn {
                 &.btn-primary {
-                    margin: 8px 0 0 -10px;
+                    display: block;
+                    margin: 10px 0 6px;
+                    width: 100%;
                     float: none;
                 }
             }
@@ -401,7 +403,13 @@
                     &.minimize-settings {
                         display: block;
                         .section-edit {
-                            text-align: left;
+                            position: absolute;
+                            top: 7px;
+                            right: 0;
+                            width: 50px;
+                            .fa {
+                                display: inline-block;
+                            }
                         }
                     }
                     .no-padding--left {
diff --git a/web/sass-files/sass/partials/_search.scss b/web/sass-files/sass/partials/_search.scss
index ce3563885..e50dc398a 100644
--- a/web/sass-files/sass/partials/_search.scss
+++ b/web/sass-files/sass/partials/_search.scss
@@ -108,44 +108,4 @@
 
 .search-highlight {
 	background-color: #FFF2BB;
-}
-
-.search-autocomplete {
-    background-color: #fff;
-    border: $border-gray;
-    line-height: 36px;
-    overflow-x: hidden;
-    overflow-y: scroll;
-    position: absolute;
-    text-align: left;
-    width: 100%;
-    z-index: 100;
-    @extend %popover-box-shadow;
-}
-
-.search-autocomplete__channel {
-    cursor: pointer;
-    height: 36px;
-    padding: 0px 6px;
-
-    &.selected {
-        background-color:rgba(51, 51, 51, 0.15);
-    }
-}
-
-.search-autocomplete__user {
-    cursor: pointer;
-    height: 36px;
-    padding: 0px;
-
-    .profile-img {
-        height: 32px;
-        margin-right: 6px;
-        width: 32px;
-        @include border-radius(16px);
-    }
-
-    &.selected {
-        background-color:rgba(51, 51, 51, 0.15);
-    }
-}
+}
\ No newline at end of file
diff --git a/web/sass-files/sass/partials/_settings.scss b/web/sass-files/sass/partials/_settings.scss
index c881f9073..fbbd07485 100644
--- a/web/sass-files/sass/partials/_settings.scss
+++ b/web/sass-files/sass/partials/_settings.scss
@@ -33,6 +33,33 @@
     label {
         font-weight: 600;
     }
+    .no-padding--left {
+        padding-left: 0;
+    }
+    .padding-top {
+        padding-top: 7px;
+        &.x2 {
+            padding-top: 14px;
+        }
+        &.x3 {
+            padding-top: 21px;
+        }
+    }
+    .padding-bottom {
+        padding-bottom: 7px;
+        &.x2 {
+            padding-bottom: 14px;
+        }
+        &.x3 {
+            padding-bottom: 21px;
+        }
+        .control-label {
+            font-weight: 600;
+            &.text-left {
+                text-align: left;
+            }
+        }
+    }
     .settings-table {
         display: table;
         table-layout: fixed;
@@ -44,7 +71,7 @@
         .nav {
             position: fixed;
             top: 57px;
-            width: 180px;
+            width: 179px;
         }
         .security-links {
             margin-right: 20px;
@@ -66,6 +93,7 @@
                 padding: 1em 0;
                 margin-bottom: 0;
                 cursor: pointer;
+                position: relative;
                 @include clearfix;
                 &:hover {
                     background: #f9f9f9;
@@ -170,33 +198,6 @@
             .has-error {
                 color: #a94442;
             }
-            .no-padding--left {
-                padding-left: 0;
-            }
-            .padding-top {
-                padding-top: 7px;
-                &.x2 {
-                    padding-top: 14px;
-                }
-                &.x3 {
-                    padding-top: 21px;
-                }
-            }
-            .padding-bottom {
-                padding-bottom: 7px;
-                &.x2 {
-                    padding-bottom: 14px;
-                }
-                &.x3 {
-                    padding-bottom: 21px;
-                }
-                .control-label {
-                    font-weight: 600;
-                    &.text-left {
-                        text-align: left;
-                    }
-                }
-            }
 
             .file-status {
                 font-size: 13px;