Adjusted the border-radius and border of quotes to better match the container
This commit is contained in:
Alvaro
GitHub
parent
485bca6be9
commit
164f64fec0
2 changed files with 82 additions and 19 deletions
|
|
@ -5,10 +5,10 @@
|
|||
&__container {
|
||||
.module-message & {
|
||||
margin: {
|
||||
left: -6px;
|
||||
right: -6px;
|
||||
top: 3px;
|
||||
bottom: 5px;
|
||||
left: -4px;
|
||||
right: -4px;
|
||||
top: 0px;
|
||||
bottom: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -17,16 +17,13 @@
|
|||
width: 100%;
|
||||
|
||||
position: relative;
|
||||
border-radius: 4px;
|
||||
border-radius: 8px 8px 4px 4px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
overflow: hidden;
|
||||
|
||||
border-left-width: 4px;
|
||||
border-left-style: solid;
|
||||
|
||||
@include keyboard-mode {
|
||||
&:focus {
|
||||
box-shadow: 0px 0px 0px 2px $color-ultramarine;
|
||||
|
|
@ -63,9 +60,12 @@
|
|||
}
|
||||
|
||||
.module-quote--outgoing {
|
||||
border-left-color: $color-steel;
|
||||
background-color: $color-steel;
|
||||
|
||||
.module-quote__primary {
|
||||
border-left-color: $color-steel;
|
||||
}
|
||||
|
||||
// To preserve contrast
|
||||
@include keyboard-mode {
|
||||
&:focus {
|
||||
|
|
@ -77,7 +77,10 @@
|
|||
@each $color, $value in $conversation-colors {
|
||||
.module-quote--incoming-#{$color} {
|
||||
background-color: scale-color($value, $lightness: 60%);
|
||||
border-left-color: $value;
|
||||
|
||||
.module-quote__primary {
|
||||
border-left-color: $value;
|
||||
}
|
||||
|
||||
@include dark-theme {
|
||||
background-color: scale-color($value, $lightness: -40%);
|
||||
|
|
@ -86,7 +89,10 @@
|
|||
|
||||
.module-quote--outgoing-#{$color} {
|
||||
background-color: scale-color($value, $lightness: 60%);
|
||||
border-left-color: $color-white;
|
||||
|
||||
.module-quote__primary {
|
||||
border-left-color: $color-white;
|
||||
}
|
||||
|
||||
@include dark-theme {
|
||||
background-color: scale-color($value, $lightness: -40%);
|
||||
|
|
@ -96,11 +102,16 @@
|
|||
|
||||
.module-quote--compose-#{$color} {
|
||||
background-color: scale-color($value, $lightness: 60%);
|
||||
border-left-color: $value;
|
||||
|
||||
.module-quote__primary {
|
||||
border-left-color: $value;
|
||||
}
|
||||
|
||||
@include dark-theme {
|
||||
background-color: scale-color($value, $lightness: -40%);
|
||||
border-left-color: $color-white;
|
||||
.module-quote__primary {
|
||||
border-left-color: $color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -114,7 +125,9 @@
|
|||
@each $color, $value in $conversation-colors-gradient {
|
||||
.module-quote--compose-#{$color},
|
||||
.module-quote--incoming-#{$color} {
|
||||
border-left-color: map-get($value, 'start');
|
||||
.module-quote__primary {
|
||||
border-left-color: map-get($value, 'start');
|
||||
}
|
||||
}
|
||||
.module-quote--compose-#{$color},
|
||||
.module-quote--incoming-#{$color},
|
||||
|
|
@ -122,10 +135,11 @@
|
|||
background-attachment: fixed;
|
||||
@include light-theme {
|
||||
background-image: linear-gradient(
|
||||
map-get($value, 'deg'),
|
||||
scale-color(map-get($value, 'start'), $lightness: 60%),
|
||||
scale-color(map-get($value, 'end'), $lightness: 60%)
|
||||
);
|
||||
map-get($value, 'deg'),
|
||||
scale-color(map-get($value, 'start'), $lightness: 60%),
|
||||
scale-color(map-get($value, 'end'), $lightness: 60%)
|
||||
),
|
||||
linear-gradient(red, blue);
|
||||
}
|
||||
@include dark-theme {
|
||||
background-image: linear-gradient(
|
||||
|
|
@ -136,7 +150,9 @@
|
|||
}
|
||||
}
|
||||
.module-quote--outgoing-#{$color} {
|
||||
border-left-color: $color-white;
|
||||
.module-quote__primary {
|
||||
border-left-color: $color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -149,6 +165,8 @@
|
|||
|
||||
// To leave room for image thumbnail
|
||||
min-height: 54px;
|
||||
border-style: solid;
|
||||
border-width: 0 0 0 4px;
|
||||
}
|
||||
|
||||
.module-quote__primary__author {
|
||||
|
|
@ -430,3 +448,23 @@
|
|||
color: $color-gray-05;
|
||||
}
|
||||
}
|
||||
|
||||
.module-message {
|
||||
.module-message__author + .module-quote__container {
|
||||
margin-top: 3px;
|
||||
.module-quote {
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.module-message--incoming.module-message--collapsed-above {
|
||||
.module-quote {
|
||||
border-top-left-radius: 4px;
|
||||
}
|
||||
}
|
||||
.module-message--outgoing.module-message--collapsed-above {
|
||||
.module-quote {
|
||||
border-top-right-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -738,6 +738,31 @@ Sticker.args = {
|
|||
status: 'sent',
|
||||
};
|
||||
|
||||
export const Quote = Template.bind({});
|
||||
Quote.args = {
|
||||
quote: {
|
||||
text: 'hello my good friend',
|
||||
conversationColor: 'ultramarine',
|
||||
conversationTitle: 'Convo',
|
||||
isFromMe: false,
|
||||
sentAt: 0,
|
||||
authorId: '',
|
||||
authorTitle: 'Author',
|
||||
referencedMessageNotFound: false,
|
||||
isViewOnce: false,
|
||||
isGiftBadge: false,
|
||||
},
|
||||
author: {
|
||||
id: '',
|
||||
isMe: false,
|
||||
title: 'Quoter Dude',
|
||||
sharedGroupNames: [],
|
||||
acceptedMessageRequest: true,
|
||||
badges: [],
|
||||
},
|
||||
conversationType: 'group',
|
||||
};
|
||||
|
||||
export function Deleted(): JSX.Element {
|
||||
const propsSent = createProps({
|
||||
conversationType: 'direct',
|
||||
|
|
|
|||
Loading…
Reference in a new issue