From 84cc259a8b79e95316e8d1ba5be618c8c10d9f54 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Fri, 1 Apr 2022 22:55:00 +0200
Subject: [PATCH] styles
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/components/sidebar_menu.js  | Bin 9590 -> 10012 bytes
 app/styles/chats.scss                   |  27 +++++-------------------
 app/styles/components/columns.scss      |   4 ++--
 app/styles/components/emoji-reacts.scss |  10 +++------
 app/styles/components/sidebar-menu.scss |   6 +++++-
 app/styles/components/status.scss       |  14 +-----------
 app/styles/polls.scss                   |  17 ++++-----------
 app/styles/ui.scss                      |   1 +
 8 files changed, 21 insertions(+), 58 deletions(-)

diff --git a/app/soapbox/components/sidebar_menu.js b/app/soapbox/components/sidebar_menu.js
index 418665470efedbe379cdc87cbfa9a94dbbd0e372..4a3f96a772e441ff5711a66dc019eb37e04d40f0 100644
GIT binary patch
delta 217
zcmez7HOFs*D2H@GQD$ypQKhb_fkH}RQMOf5x^8h!Vo9p5xxr*<j<akK(aGmI#2Ae>
zKjS#f$zGk4pPsK^KY4<z=;ZZ6DXa<#npO&6UWS+)XJSr?t-23T#biZsiOG|Ml~^+J
zb5ke3my(*CAj%?~oRe5w?3b9EYO9{1Yo<^R#FH6C6qO*>l%!Ua=%yDXR_YoV7$_u{
z78U0g=@#T?=9Q!t0nHPete_}7IY&ZtGP|hcW*uQW!O7>O<k&#&DJ=n7VKaHT%6R}?
CJV!79

delta 53
zcmV-50LuTIPWDQ$6$l1ra$$KbHIpz1&9fW{$qADK6JnE!78$dz6h09ICv0zLlhGv?
LlZ+f9lT9Yi{Jj#e

diff --git a/app/styles/chats.scss b/app/styles/chats.scss
index aefb0cc98a..5099f03172 100644
--- a/app/styles/chats.scss
+++ b/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;
     }
   }
 
diff --git a/app/styles/components/columns.scss b/app/styles/components/columns.scss
index 9509b0f377..98f9a55841 100644
--- a/app/styles/components/columns.scss
+++ b/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 {
diff --git a/app/styles/components/emoji-reacts.scss b/app/styles/components/emoji-reacts.scss
index a423a22eba..dd2981fca6 100644
--- a/app/styles/components/emoji-reacts.scss
+++ b/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 {
diff --git a/app/styles/components/sidebar-menu.scss b/app/styles/components/sidebar-menu.scss
index 0b67c4d46f..88faf7addd 100644
--- a/app/styles/components/sidebar-menu.scss
+++ b/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 {
diff --git a/app/styles/components/status.scss b/app/styles/components/status.scss
index f2d2e89517..331217824a 100644
--- a/app/styles/components/status.scss
+++ b/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 {
diff --git a/app/styles/polls.scss b/app/styles/polls.scss
index 3a74e33954..1217128149 100644
--- a/app/styles/polls.scss
+++ b/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 {
diff --git a/app/styles/ui.scss b/app/styles/ui.scss
index 4accc54b58..99d1972b64 100644
--- a/app/styles/ui.scss
+++ b/app/styles/ui.scss
@@ -1,4 +1,5 @@
 .icon-button {
+  @apply text-black dark:text-white;
   display: inline-flex;
   align-items: center;
   padding: 0;