LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

Chore: UI fixes and enhancements (#796)

Browse Source 
Co-authored-by: Pranav Raj S <pranavrajs@gmail.com>
This commit is contained in:
Nithin David Thomas
2020-05-02 09:47:36 +05:30
committed by GitHub
parent 8906fd808d
commit a951fb20cb
29 changed files with 335 additions and 250 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/javascript/dashboard/assets/scss/widgets/_conv-header.scss
View File

@@ -45,6 +45,7 @@
.user--name {
@include margin(0);
font-size: $font-size-medium;
line-height: 1.3;
text-transform: capitalize;
}
@@ -65,6 +66,8 @@
}
.button.resolve--button {
width: 13.2rem;
>.icon {
font-size: $font-size-default;
padding-right: $space-small;

4
app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss
View File

@@ -2,11 +2,13 @@
@include flex;
@include flex-shrink;
@include padding($space-normal $zero $zero $space-normal);
border-left: 4px solid transparent;
cursor: pointer;
position: relative;
&.active {
background: $color-background;
border-left-color: $color-woot;
}
.conversation--details {
@@ -64,7 +66,7 @@
background: darken($success-color, 3%);
color: $color-white;
display: none;
font-size: $font-size-mini;
font-size: $font-size-micro;
font-weight: $font-weight-medium;
height: $unread-size;
line-height: $unread-size;

304
app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
View File

@@ -1,10 +1,11 @@
@mixin bubble-with-tyes {
@include padding($space-smaller $space-one);
@mixin bubble-with-types {
@include padding($space-one $space-normal);
@include margin($zero);
background: $color-primary-light;
border-radius: $space-small;
color: $color-heading;
background: $color-woot;
border-radius: $space-one;
color: $color-white;
font-size: $font-size-small;
font-weight: $font-weight-normal;
position: relative;
.icon {
@@ -15,6 +16,17 @@
.message-text__wrap {
position: relative;
.time {
color: $color-primary-light;
display: block;
font-size: $font-size-micro;
line-height: 1.8;
}
.link {
color: $color-white;
}
}
.message-text {
@@ -51,8 +63,7 @@
}
&::before {
$color-black: #000;
background-image: linear-gradient(-180deg, transparent 3%, $color-black 70%);
background-image: linear-gradient(-180deg, transparent 3%, $color-heading 130%);
bottom: 0;
content: '';
height: 20%;
@@ -94,6 +105,7 @@
.load-more-conversations {
font-size: $font-size-small;
margin: 0;
padding: $space-normal;
width: 100%;
}
@@ -122,10 +134,10 @@
.status--filter {
@include padding($zero null $zero $space-normal);
@include border-light;
@include round-corner;
@include margin($space-smaller $space-slab $zero $zero);
background-color: $color-background;
background-color: $color-background-light;
border: 1px solid $color-border;
float: right;
font-size: $font-size-mini;
height: $space-medium;
@@ -192,168 +204,192 @@
height: 100%;
margin-bottom: $space-small;
overflow-y: auto;
}
>li {
@include flex;
@include flex-shrink;
@include margin($zero $zero $space-smaller);
.conversation-panel>li {
@include flex;
@include flex-shrink;
@include margin($zero $zero $space-micro);
&:first-child {
margin-top: auto;
&:first-child {
margin-top: auto;
}
&:last-child {
margin-bottom: $space-small;
}
&.unread--toast {
span {
@include elegant-card;
@include round-corner;
background: $color-woot;
color: $color-white;
font-size: $font-size-mini;
font-weight: $font-weight-medium;
margin: $space-one auto;
padding: $space-smaller $space-two;
}
}
&:last-child {
margin-bottom: $space-small;
.bubble {
@include bubble-with-types;
max-width: 50rem;
text-align: left;
word-wrap: break-word;
.aplayer {
box-shadow: none;
font-family: inherit;
}
}
&.unread--toast {
span {
@include elegant-card;
@include round-corner;
background: $color-woot;
color: $color-white;
font-size: $font-size-mini;
font-weight: $font-weight-medium;
margin: $space-one auto;
padding: $space-smaller $space-two;
&.left {
.bubble {
@include border-normal;
background: $white;
border-bottom-left-radius: $space-smaller;
border-top-left-radius: $space-smaller;
color: $color-body;
margin-right: auto;
.time {
color: $color-light-gray;
}
.image .time {
color: $color-white;
}
.link {
color: $color-primary-dark;
}
.file {
.text-block-title {
color: $color-body;
}
.icon-wrap {
color: $color-woot;
}
.download {
color: $color-primary-dark;
}
}
}
+.right {
margin-top: $space-one;
.bubble {
border-top-right-radius: $space-one;
}
}
}
&.right {
@include flex-align(right, null);
.wrap {
margin-right: $space-normal;
text-align: right;
}
.bubble {
@include bubble-with-tyes;
max-width: 50rem;
text-align: left;
word-wrap: break-word;
border-bottom-right-radius: $space-smaller;
border-top-right-radius: $space-smaller;
margin-left: auto;
.aplayer {
box-shadow: none;
font-family: inherit;
}
}
&.left {
.bubble {
background: $white;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
&.is-private {
background: lighten($warning-color, 32%);
border: 1px solid $color-border;
color: $color-heading;
margin-right: auto;
}
padding-right: $space-large;
position: relative;
+.right {
margin-top: $space-one;
&::before {
bottom: 0;
color: $medium-gray;
position: absolute;
right: $space-one;
top: $space-smaller + $space-micro;
}
.bubble {
border-top-right-radius: $space-small;
.time {
color: $color-light-gray;
}
}
}
&.right {
@include flex-align(right, null);
.wrap {
margin-right: $space-normal;
text-align: right;
}
+.left {
margin-top: $space-one;
.bubble {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
margin-left: auto;
&.is-private {
background: lighten($warning-color, 32%);
color: $color-heading;
padding-right: $space-large;
position: relative;
&::before {
bottom: 0;
color: $medium-gray;
position: absolute;
right: $space-one;
top: $space-smaller + $space-micro;
}
}
}
+.left {
margin-top: $space-one;
.bubble {
border-top-left-radius: $space-small;
}
border-top-left-radius: $space-one;
}
}
}
.wrap {
@include margin($zero $space-normal);
max-width: 69%;
.wrap {
@include margin($zero $space-normal);
max-width: 69%;
.sender--name {
font-size: $font-size-mini;
margin-bottom: $space-smaller;
}
.sender--name {
font-size: $font-size-mini;
margin-bottom: $space-smaller;
}
}
.sender--thumbnail {
@include round-corner();
height: $space-slab;
margin-right: $space-one;
margin-top: $space-micro;
width: $space-slab;
}
.sender--thumbnail {
@include round-corner();
height: $space-slab;
margin-right: $space-one;
margin-top: $space-micro;
width: $space-slab;
}
.activity-wrap {
@include flex;
@include margin($space-small auto);
@include padding($space-smaller $space-normal);
@include flex-align($x: center, $y: null);
background: lighten($warning-color, 32%);
border: 1px solid lighten($warning-color, 26%);
border-radius: $space-smaller;
font-size: $font-size-small;
.activity-wrap {
@include flex;
@include margin($space-small auto);
@include padding($space-small $space-normal);
@include flex-align($x: center, $y: null);
background: lighten($warning-color, 32%);
border: 1px solid lighten($warning-color, 22%);
border-radius: $space-smaller;
font-size: $font-size-small;
p {
color: $color-heading;
margin-bottom: $zero;
p {
color: $color-heading;
margin-bottom: $zero;
.ion-person {
color: $color-body;
font-size: $font-size-default;
margin-right: $space-small;
position: relative;
top: $space-micro;
}
.message-text__wrap {
position: relative;
}
.message-text {
&::after {
content: ' \00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0';
display: inline;
}
}
.ion-person {
color: $color-body;
font-size: $font-size-default;
margin-right: $space-small;
position: relative;
top: $space-micro;
}
.time {
color: $medium-gray;
.message-text__wrap {
position: relative;
}
.message-text {
&::after {
content: ' \00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0';
display: inline;
}
}
}
.time {
bottom: -$space-micro;
color: $color-gray;
float: right;
color: $medium-gray;
font-size: $font-size-micro;
font-style: italic;
margin-left: $space-slab;
right: -$space-micro;
text-align: right;
}
}
}

10
app/javascript/dashboard/assets/scss/widgets/_login.scss
View File

@@ -42,22 +42,26 @@
font-size: $font-size-default;
input {
padding: $space-slab;
height: $space-larger;
font-size: $font-size-default;
height: $space-larger;
padding: $space-slab;
}
.error {
font-size: $font-size-small;
}
}
.button {
height: $space-larger;
}
}
.sigin__footer {
font-size: $font-size-default;
padding: $space-medium;
> a {
>a {
font-weight: $font-weight-bold;
}
}

2
app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss
View File

@@ -48,7 +48,7 @@
margin-bottom: $space-micro;
margin-top: $space-micro;
>.inbox-icon {
.inbox-icon {
display: inline-block;
margin-right: $space-micro;
min-width: $space-normal;

37
app/javascript/dashboard/assets/scss/widgets/_snackbar.scss
View File

@@ -1,33 +1,32 @@
.ui-snackbar-container {
position: absolute;
left: 0;
margin: 0 auto;
max-width: 40rem;
overflow: hidden;
z-index: 9999;
top: $space-normal;
left: $space-normal;
width: 100%;
position: absolute;
right: 0;
text-align: center;
top: $space-normal;
z-index: 9999;
}
.ui-snackbar {
text-align: left;
@include padding($space-slab $space-medium);
@include shadow;
background-color: $woot-snackbar-bg;
border-radius: $space-smaller;
display: inline-block;
min-width: 24rem;
margin-bottom: $space-small;
max-width: 40rem;
min-height: 3rem;
background-color: $woot-snackbar-bg;
@include padding($space-slab $space-medium);
@include border-top-radius($space-micro);
@include border-right-radius($space-micro);
@include border-bottom-radius($space-micro);
@include border-left-radius($space-micro);
margin-bottom: $space-small;
// box-shadow: 0 1px 3px alpha(black, 0.12), 0 1px 2px alpha(black, 0.24);
min-width: 24rem;
text-align: left;
}
.ui-snackbar-text {
font-size: $font-size-small;
color: $color-white;
font-size: $font-size-small;
font-weight: $font-weight-medium;
}
.ui-snackbar-action {
@@ -35,12 +34,12 @@
padding-left: 3rem;
button {
@include margin(0);
@include padding(0);
background: none;
border: 0;
color: $woot-snackbar-button;
font-size: $font-size-small;
text-transform: uppercase;
@include margin(0);
@include padding(0);
}
}