Remove unused styles
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak
parent
25b2f167f2
commit
d299512694
|
|
@ -1,31 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
|
|
||||||
import { normalizeAccount } from 'soapbox/normalizers';
|
|
||||||
|
|
||||||
import { render, screen } from '../../jest/test-helpers';
|
|
||||||
import AvatarOverlay from '../avatar-overlay';
|
|
||||||
|
|
||||||
import type { ReducerAccount } from 'soapbox/reducers/accounts';
|
|
||||||
|
|
||||||
describe('<AvatarOverlay', () => {
|
|
||||||
const account = normalizeAccount({
|
|
||||||
username: 'alice',
|
|
||||||
acct: 'alice',
|
|
||||||
display_name: 'Alice',
|
|
||||||
avatar: '/animated/alice.gif',
|
|
||||||
avatar_static: '/static/alice.jpg',
|
|
||||||
}) as ReducerAccount;
|
|
||||||
|
|
||||||
const friend = normalizeAccount({
|
|
||||||
username: 'eve',
|
|
||||||
acct: 'eve@blackhat.lair',
|
|
||||||
display_name: 'Evelyn',
|
|
||||||
avatar: '/animated/eve.gif',
|
|
||||||
avatar_static: '/static/eve.jpg',
|
|
||||||
}) as ReducerAccount;
|
|
||||||
|
|
||||||
it('renders a overlay avatar', () => {
|
|
||||||
render(<AvatarOverlay account={account} friend={friend} />);
|
|
||||||
expect(screen.queryAllByRole('img')).toHaveLength(2);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
@ -1,19 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
|
|
||||||
import StillImage from 'soapbox/components/still-image';
|
|
||||||
|
|
||||||
import type { Account as AccountEntity } from 'soapbox/types/entities';
|
|
||||||
|
|
||||||
interface IAvatarOverlay {
|
|
||||||
account: AccountEntity,
|
|
||||||
friend: AccountEntity,
|
|
||||||
}
|
|
||||||
|
|
||||||
const AvatarOverlay: React.FC<IAvatarOverlay> = ({ account, friend }) => (
|
|
||||||
<div className='account__avatar-overlay'>
|
|
||||||
<StillImage src={account.avatar} className='account__avatar-overlay-base' />
|
|
||||||
<StillImage src={friend.avatar} className='account__avatar-overlay-overlay' />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
export default AvatarOverlay;
|
|
||||||
|
|
@ -25,7 +25,7 @@ export const AccountRecord = ImmutableRecord({
|
||||||
acct: '',
|
acct: '',
|
||||||
avatar: '',
|
avatar: '',
|
||||||
avatar_static: '',
|
avatar_static: '',
|
||||||
birthday: '2001-02-12',
|
birthday: '',
|
||||||
bot: false,
|
bot: false,
|
||||||
chats_onboarded: true,
|
chats_onboarded: true,
|
||||||
created_at: '',
|
created_at: '',
|
||||||
|
|
|
||||||
|
|
@ -43,38 +43,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.account__wrapper {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.account__avatar-wrapper {
|
|
||||||
float: left;
|
|
||||||
margin-right: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
a .account__avatar {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.account__avatar-overlay {
|
|
||||||
@include avatar-size(48px);
|
|
||||||
|
|
||||||
&-base {
|
|
||||||
@include avatar-radius;
|
|
||||||
@include avatar-size(36px);
|
|
||||||
}
|
|
||||||
|
|
||||||
&-overlay {
|
|
||||||
@include avatar-radius;
|
|
||||||
@include avatar-size(24px);
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
right: 0;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.account-authorize__avatar {
|
.account-authorize__avatar {
|
||||||
float: left;
|
float: left;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
|
|
|
||||||
|
|
@ -22,7 +22,6 @@
|
||||||
@import 'rtl';
|
@import 'rtl';
|
||||||
@import 'accessibility';
|
@import 'accessibility';
|
||||||
@import 'dyslexic';
|
@import 'dyslexic';
|
||||||
@import 'chats';
|
|
||||||
@import 'navigation';
|
@import 'navigation';
|
||||||
@import 'placeholder';
|
@import 'placeholder';
|
||||||
@import 'autosuggest';
|
@import 'autosuggest';
|
||||||
|
|
|
||||||
|
|
@ -1,318 +0,0 @@
|
||||||
.pane {
|
|
||||||
@apply flex flex-col shadow-md rounded-t-md fixed bottom-0 right-5 w-96 h-[350px] z-[1000];
|
|
||||||
max-height: calc(100vh - 70px);
|
|
||||||
transition: 0.05s;
|
|
||||||
|
|
||||||
&--main {
|
|
||||||
height: calc(100vh - 70px);
|
|
||||||
|
|
||||||
.pane__header .pane__title {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.search--account {
|
|
||||||
border-top: 1px solid hsla(var(--primary-text-color_hsl), 0.2);
|
|
||||||
padding: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__header {
|
|
||||||
@apply flex items-center py-0 px-2.5 h-14 box-border rounded-t-md font-bold bg-primary-600 text-white;
|
|
||||||
|
|
||||||
.account__avatar {
|
|
||||||
margin-right: 7px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pane__title {
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
flex: 1;
|
|
||||||
height: 100%;
|
|
||||||
background: transparent;
|
|
||||||
border: 0;
|
|
||||||
padding: 0;
|
|
||||||
color: #fff;
|
|
||||||
font-weight: bold;
|
|
||||||
text-align: left;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-button {
|
|
||||||
opacity: 0.7;
|
|
||||||
color: #fff;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
> div {
|
|
||||||
margin-right: -6px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.pane__close {
|
|
||||||
margin-left: auto;
|
|
||||||
|
|
||||||
.svg-icon {
|
|
||||||
width: 18px;
|
|
||||||
height: 18px;
|
|
||||||
transform: translateY(2px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__content {
|
|
||||||
@apply flex flex-1 flex-col overflow-hidden bg-white dark:bg-gray-900;
|
|
||||||
|
|
||||||
> div {
|
|
||||||
@apply max-h-full;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-box {
|
|
||||||
@apply flex flex-1 flex-col overflow-hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-list {
|
|
||||||
@apply overflow-y-auto max-h-full;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.audio-toggle .react-toggle-thumb {
|
|
||||||
@apply w-3.5 h-3.5 border border-solid border-primary-400;
|
|
||||||
}
|
|
||||||
|
|
||||||
.audio-toggle .react-toggle {
|
|
||||||
@apply top-1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.audio-toggle .react-toggle-track {
|
|
||||||
@apply h-4 w-8 bg-accent-500 dark:bg-accent-500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.audio-toggle .react-toggle-track-check {
|
|
||||||
left: 4px;
|
|
||||||
bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.react-toggle--checked .react-toggle-thumb {
|
|
||||||
left: 19px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.audio-toggle .react-toggle-track-x {
|
|
||||||
right: 5px;
|
|
||||||
bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fa {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-message--me .chat-message__bubble {
|
|
||||||
@apply dark:bg-primary-900;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-messages {
|
|
||||||
overflow-y: scroll;
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-message {
|
|
||||||
margin: 14px 10px;
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
&__bubble {
|
|
||||||
@apply px-2.5 py-1 rounded-lg bg-primary-50 dark:bg-gray-700;
|
|
||||||
max-width: 70%;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
overflow-wrap: break-word;
|
|
||||||
white-space: break-spaces;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: var(--brand-color--hicontrast);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus,
|
|
||||||
&:active {
|
|
||||||
.chat-message__menu {
|
|
||||||
opacity: 1;
|
|
||||||
pointer-events: all;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&--me .chat-message__bubble {
|
|
||||||
@apply bg-primary-200 dark:bg-primary-800;
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--pending .chat-message__bubble {
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__menu {
|
|
||||||
position: absolute;
|
|
||||||
top: -8px;
|
|
||||||
right: -8px;
|
|
||||||
height: 20px;
|
|
||||||
padding: 1px;
|
|
||||||
opacity: 0;
|
|
||||||
pointer-events: none;
|
|
||||||
transition: 0.2s;
|
|
||||||
|
|
||||||
button {
|
|
||||||
@apply p-1 bg-gray-100 dark:bg-gray-800;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
@apply h-4 w-4;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-list {
|
|
||||||
flex: 1;
|
|
||||||
|
|
||||||
&__content {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.empty-column-indicator {
|
|
||||||
height: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
background: transparent;
|
|
||||||
align-items: start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.account {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.account__display-name {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.display-name {
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
.hover-ref-wrapper {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
bdi {
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
.display-name__account {
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
flex: 1;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-box {
|
|
||||||
&__attachment {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
font-size: 13px;
|
|
||||||
padding: 0 10px;
|
|
||||||
height: 25px;
|
|
||||||
|
|
||||||
.chat-box__remove-attachment {
|
|
||||||
margin-left: auto;
|
|
||||||
|
|
||||||
.icon-button > div {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__actions {
|
|
||||||
background: var(--foreground-color);
|
|
||||||
margin-top: auto;
|
|
||||||
padding: 6px;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
textarea {
|
|
||||||
@apply pr-6;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__send {
|
|
||||||
.icon-button,
|
|
||||||
button {
|
|
||||||
@apply absolute right-2.5 w-auto h-auto border-0 p-0 m-0 bg-transparent text-black dark:text-white;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
|
|
||||||
svg {
|
|
||||||
@apply w-[18px] h-[18px];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 630px) {
|
|
||||||
.chat-panes {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.chatroom__header {
|
|
||||||
display: flex;
|
|
||||||
margin-left: auto;
|
|
||||||
padding-right: 15px;
|
|
||||||
overflow: hidden;
|
|
||||||
text-decoration: none;
|
|
||||||
|
|
||||||
.account__avatar {
|
|
||||||
margin-right: 7px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chatroom__title {
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
flex: 1;
|
|
||||||
height: 100%;
|
|
||||||
background: transparent;
|
|
||||||
border: 0;
|
|
||||||
padding: 0;
|
|
||||||
color: var(--primary-text-color);
|
|
||||||
font-weight: bold;
|
|
||||||
text-align: left;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-message .media-gallery {
|
|
||||||
height: 100% !important;
|
|
||||||
margin: 4px 0 8px;
|
|
||||||
|
|
||||||
.media-gallery__item:not(.media-gallery__item--image) {
|
|
||||||
max-width: 100%;
|
|
||||||
width: 120px !important;
|
|
||||||
height: 100% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__preview {
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-messages__divider {
|
|
||||||
@apply pt-3.5 pb-0.5 text-center uppercase text-black dark:text-white;
|
|
||||||
font-size: 13px;
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.floating-link {
|
|
||||||
@apply w-full h-full inset-0 absolute z-10;
|
|
||||||
}
|
|
||||||
|
|
@ -8,10 +8,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.account__avatar {
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.empty-column-indicator {
|
&.empty-column-indicator {
|
||||||
min-height: unset;
|
min-height: unset;
|
||||||
overflow-y: unset;
|
overflow-y: unset;
|
||||||
|
|
|
||||||
|
|
@ -35,10 +35,6 @@ body.rtl {
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.account__avatar-wrapper {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.setting-toggle__label {
|
.setting-toggle__label {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
|
|
@ -49,11 +45,6 @@ body.rtl {
|
||||||
padding-right: 68px;
|
padding-right: 68px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.account__avatar-overlay-overlay {
|
|
||||||
right: auto;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.privacy-dropdown__dropdown {
|
.privacy-dropdown__dropdown {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
margin-right: 40px;
|
margin-right: 40px;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue