Merge branch 'next_' into 'next'

next

See merge request soapbox-pub/soapbox-fe!1172

app/soapbox/components/sidebar_menu.js

@@ -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}
                 />

app/styles/chats.scss

@@ -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;
     }
   }
 

app/styles/components/columns.scss

@@ -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 {

app/styles/components/emoji-reacts.scss

@@ -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 {

app/styles/components/sidebar-menu.scss

@@ -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 {

app/styles/components/status.scss

@@ -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 {

app/styles/polls.scss

@@ -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 {

app/styles/ui.scss

@@ -1,4 +1,5 @@
 .icon-button {
+  @apply text-black dark:text-white;
   display: inline-flex;
   align-items: center;
   padding: 0;