sforkowany z mirror/soapbox
Merge branch 'next_' into 'next'
next See merge request soapbox-pub/soapbox-fe!1172next-interactions
commit
05bf0a1dba
|
@ -37,11 +37,11 @@ const messages = defineMessages({
|
|||
const SidebarLink = ({ to, icon, text, onClick }) => (
|
||||
<NavLink className='group py-1 rounded-md' to={to} onClick={onClick}>
|
||||
<HStack space={2} alignItems='center'>
|
||||
<div className='bg-gray-50 relative rounded inline-flex p-2'>
|
||||
<div className='bg-primary-50 dark:bg-slate-700 relative rounded inline-flex p-2'>
|
||||
<Icon src={icon} className='text-primary-600 h-5 w-5' />
|
||||
</div>
|
||||
|
||||
<Text tag='span' weight='medium' theme='muted' className='group-hover:text-gray-800'>{text}</Text>
|
||||
<Text tag='span' weight='medium' theme='muted' className='group-hover:text-gray-800 dark:group-hover:text-gray-200'>{text}</Text>
|
||||
</HStack>
|
||||
</NavLink>
|
||||
);
|
||||
|
@ -130,7 +130,15 @@ const SidebarMenu = () => {
|
|||
<Stack space={4}>
|
||||
<HStack alignItems='center' justifyContent='between'>
|
||||
<Link to='/' onClick={onClose}>
|
||||
<img alt='Logo' src={logo} className='h-5 w-auto min-w-[140px] cursor-pointer' />
|
||||
{logo ? (
|
||||
<img alt='Logo' src={logo} className='h-5 w-auto min-w-[140px] cursor-pointer' />
|
||||
): (
|
||||
<Icon
|
||||
alt='Logo'
|
||||
src={require('@tabler/icons/icons/home.svg')}
|
||||
className='h-6 w-6 text-gray-400 hover:text-gray-600 dark:text-gray-200 cursor-pointer'
|
||||
/>
|
||||
)}
|
||||
</Link>
|
||||
|
||||
<IconButton
|
||||
|
@ -255,7 +263,7 @@ const SidebarMenu = () => {
|
|||
|
||||
<SidebarLink
|
||||
to='/auth/sign_out'
|
||||
icon='logout'
|
||||
icon={require('@tabler/icons/icons/logout.svg')}
|
||||
text={intl.formatMessage(messages.logout)}
|
||||
onClick={onClickLogOut}
|
||||
/>
|
||||
|
|
|
@ -1,15 +1,6 @@
|
|||
.pane {
|
||||
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.3);
|
||||
border-radius: 6px 6px 0 0;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 20px;
|
||||
width: 265px;
|
||||
height: 350px;
|
||||
@apply flex flex-col shadow-md rounded-t-md fixed bottom-0 right-5 w-[256px] h-[350px] z-[1000];
|
||||
max-height: calc(100vh - 70px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: 1000; // Above AccountHeader
|
||||
transition: 0.05s;
|
||||
|
||||
&--main {
|
||||
|
@ -39,9 +30,8 @@
|
|||
}
|
||||
|
||||
&__header {
|
||||
@apply bg-primary-900 text-white;
|
||||
box-sizing: border-box;
|
||||
background: var(--brand-color);
|
||||
color: #fff;
|
||||
padding: 0 10px;
|
||||
font-weight: bold;
|
||||
border-radius: 6px 6px 0 0;
|
||||
|
@ -104,21 +94,14 @@
|
|||
}
|
||||
|
||||
&__content {
|
||||
background: var(--foreground-color);
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
@apply flex flex-1 flex-col overflow-hidden bg-white dark:bg-slate-800;
|
||||
|
||||
.chat-box {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
@apply flex flex-1 flex-col overflow-hidden;
|
||||
}
|
||||
|
||||
.chat-list {
|
||||
overflow-y: auto;
|
||||
@apply overflow-y-auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -760,14 +760,14 @@
|
|||
|
||||
.empty-column-indicator,
|
||||
.error-column {
|
||||
@apply bg-primary-50 text-gray-900 text-center p-10 flex flex-1 items-center justify-center min-h-[160px] rounded-lg;
|
||||
@apply bg-primary-50 dark:bg-slate-700 text-gray-900 dark:text-gray-300 text-center p-10 flex flex-1 items-center justify-center min-h-[160px] rounded-lg;
|
||||
|
||||
@supports (display: grid) { // hack to fix Chrome <57
|
||||
contain: strict;
|
||||
}
|
||||
|
||||
& > span {
|
||||
max-width: 400px;
|
||||
@apply max-w-[400px];
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
|
@ -1,19 +1,15 @@
|
|||
.emoji-react {
|
||||
display: inline-block;
|
||||
transition: 0.1s;
|
||||
color: var(--primary-text-color--faint);
|
||||
text-decoration: none;
|
||||
@apply inline-block text-gray-900 dark:text-gray-300 no-underline;
|
||||
|
||||
&__emoji {
|
||||
img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
@apply w-5 h-5;
|
||||
filter: drop-shadow(2px 0 0 var(--foreground-color));
|
||||
}
|
||||
}
|
||||
|
||||
&__count {
|
||||
display: none;
|
||||
@apply hidden;
|
||||
}
|
||||
|
||||
+ .emoji-react {
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
.sidebar-menu {
|
||||
@apply flex inset-0 fixed flex-col w-80 bg-white transition-all ease-linear -translate-x-80 z-1000;
|
||||
@apply flex inset-0 fixed flex-col w-80 bg-white dark:bg-slate-800 transition-all ease-linear -translate-x-80 z-1000;
|
||||
|
||||
&__wrapper {
|
||||
opacity: 0;
|
||||
|
@ -39,6 +39,10 @@
|
|||
width: 90vw;
|
||||
transform: translateX(-90vw);
|
||||
}
|
||||
|
||||
hr {
|
||||
@apply border-gray-200 dark:border-gray-700;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-menu__root--visible {
|
||||
|
|
|
@ -97,19 +97,7 @@
|
|||
}
|
||||
|
||||
.status__content__read-more-button {
|
||||
display: block;
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
color: var(--highlight-text-color);
|
||||
border: 0;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
padding-top: 8px;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
text-decoration: underline;
|
||||
}
|
||||
@apply block text-gray-900 dark:text-gray-300 border-0 bg-transparent p-0 pt-2 hover:underline active:underline;
|
||||
}
|
||||
|
||||
.status__content__spoiler-link {
|
||||
|
|
|
@ -134,9 +134,7 @@
|
|||
}
|
||||
|
||||
&__footer {
|
||||
padding-top: 6px;
|
||||
padding-bottom: 5px;
|
||||
color: var(--primary-text-color);
|
||||
@apply pt-1.5 pb-[5px] text-black dark:text-white;
|
||||
}
|
||||
|
||||
&__link {
|
||||
|
@ -167,11 +165,10 @@
|
|||
}
|
||||
|
||||
&__cancel {
|
||||
height: 20px;
|
||||
@apply h-5;
|
||||
|
||||
.svg-icon {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
@apply h-5 w-5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -196,13 +193,7 @@
|
|||
}
|
||||
|
||||
.button.button-secondary {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
padding: 6px 10px;
|
||||
height: auto;
|
||||
line-height: inherit;
|
||||
color: var(--brand-color);
|
||||
border-color: var(--brand-color);
|
||||
@apply h-auto py-1.5 px-2.5 text-primary-600 border-primary-600;
|
||||
}
|
||||
|
||||
li {
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
.icon-button {
|
||||
@apply text-black dark:text-white;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
|
|
Ładowanie…
Reference in New Issue