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: '',
|
||||
avatar: '',
|
||||
avatar_static: '',
|
||||
birthday: '2001-02-12',
|
||||
birthday: '',
|
||||
bot: false,
|
||||
chats_onboarded: true,
|
||||
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 {
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
|
|
|
|||
|
|
@ -22,7 +22,6 @@
|
|||
@import 'rtl';
|
||||
@import 'accessibility';
|
||||
@import 'dyslexic';
|
||||
@import 'chats';
|
||||
@import 'navigation';
|
||||
@import 'placeholder';
|
||||
@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 {
|
||||
min-height: unset;
|
||||
overflow-y: unset;
|
||||
|
|
|
|||
|
|
@ -35,10 +35,6 @@ body.rtl {
|
|||
margin-right: 0;
|
||||
}
|
||||
|
||||
.account__avatar-wrapper {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.setting-toggle__label {
|
||||
margin-left: 0;
|
||||
margin-right: 8px;
|
||||
|
|
@ -49,11 +45,6 @@ body.rtl {
|
|||
padding-right: 68px;
|
||||
}
|
||||
|
||||
.account__avatar-overlay-overlay {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.privacy-dropdown__dropdown {
|
||||
margin-left: 0;
|
||||
margin-right: 40px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue