From d318d64602cc53417528ed3b0a31e42e642a42b5 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Tue, 21 Nov 2023 21:13:24 +0600
Subject: [PATCH 1/3] Fixed alert styles in dark mode

---
 src/common/components/entry-votes/index.tsx |  4 +++-
 src/common/features/ui/alert/styles.ts      | 12 ++++++++----
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/common/components/entry-votes/index.tsx b/src/common/components/entry-votes/index.tsx
index 1b54aec9f2f..184abb0aa29 100644
--- a/src/common/components/entry-votes/index.tsx
+++ b/src/common/components/entry-votes/index.tsx
@@ -159,7 +159,9 @@ export class EntryVotesDetail extends BaseComponent<DetailProps, DetailState> {
     return (
       <>
         {totalVotes !== votes.length && (
-          <Alert appearance="warning">{_t("entry-votes.pending-message")}</Alert>
+          <Alert className="mb-4" appearance="warning">
+            {_t("entry-votes.pending-message")}
+          </Alert>
         )}
         <div className="voters-list">
           <div className="list-body">
diff --git a/src/common/features/ui/alert/styles.ts b/src/common/features/ui/alert/styles.ts
index 4af12bb442a..f8340e4e1b7 100644
--- a/src/common/features/ui/alert/styles.ts
+++ b/src/common/features/ui/alert/styles.ts
@@ -3,8 +3,12 @@ import { Appearance } from "./types";
 export const ALERT_STYLES: Record<Appearance, string> = {
   primary:
     "bg-blue-dark-sky-040 border border-blue-dark-sky-030 text-blue-dark-sky dark:bg-dark-400 dark:border-dark-300 dark:text-white",
-  secondary: "bg-gray-100 border border-gray-200 text-gray-600",
-  success: "bg-green-040 border border-green-030 text-green",
-  warning: "bg-warning-040 border border-warning-030 text-warning-default",
-  danger: "bg-red-040 border border-red-030 text-red"
+  secondary:
+    "bg-gray-100 border border-gray-200 text-gray-600 dark:bg-opacity-[20%] dark:border-opacity-[20%]",
+  success:
+    "bg-green-040 border border-green-030 text-green dark:bg-opacity-[20%] dark:border-opacity-[20%]",
+  warning:
+    "bg-warning-040 border border-warning-030 text-orange dark:bg-opacity-[20%] dark:border-opacity-[20%] dark:text-warning-default",
+  danger:
+    "bg-red-040 border border-red-030 text-red dark:bg-opacity-[20%] dark:border-opacity-[20%]"
 };

From 0753f0b9ee76cf63ecaf1532921880dca2e92229 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Tue, 21 Nov 2023 21:15:53 +0600
Subject: [PATCH 2/3] Fixed feedback error styles

---
 src/common/components/feedback/_index.scss | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/common/components/feedback/_index.scss b/src/common/components/feedback/_index.scss
index 7c668e04cf8..086d9b43b62 100644
--- a/src/common/components/feedback/_index.scss
+++ b/src/common/components/feedback/_index.scss
@@ -18,6 +18,7 @@
   right: 20px;
   bottom: 60px;
   width: 260px;
+
   &.visible ~ .announcement-container {
     bottom: 10rem !important;
   }
@@ -34,6 +35,7 @@
     align-items: center;
     margin-bottom: 6px;
     animation: feedback-anim 0.5s;
+    overflow: hidden;
 
     @include themify(day) {
       @apply bg-light-300;
@@ -48,12 +50,14 @@
     svg {
       height: 20px;
     }
+
     .feedback-body {
       padding: 30px 6px 0px 6px;
     }
 
     .feedback-content {
       display: flex;
+
       .feedback-img {
         @media (max-width: $md-break) {
           margin-right: 0.8rem;
@@ -61,11 +65,13 @@
         margin-right: 2.3rem;
         margin-left: 0.5rem;
         border-radius: 50%;
+
         &.success-img {
           @apply bg-green;
         }
       }
     }
+
     .feedback-close-btn {
       position: absolute;
       right: 8px;
@@ -109,12 +115,15 @@
       .filler {
         height: 100%;
         transition: width 0.125s linear;
+
         &.success {
           @apply bg-green;
         }
+
         &.error {
           @apply bg-red-020;
         }
+
         &.info {
           @apply bg-blue-dark-sky;
         }

From 40f480ea952964f8b8016ddf3b921d2cc0e78a4a Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Wed, 22 Nov 2023 20:44:01 +0600
Subject: [PATCH 3/3] Fixed signup dark theme

---
 src/common/pages/sign-up.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/common/pages/sign-up.tsx b/src/common/pages/sign-up.tsx
index 347c01978d6..004a9f5c722 100644
--- a/src/common/pages/sign-up.tsx
+++ b/src/common/pages/sign-up.tsx
@@ -360,14 +360,14 @@ export const SignUp = (props: PageProps) => {
 
             {stage === Stage.REGISTER_TYPE ? (
               <div className="form-content">
-                <div className="card border bg-white rounded mb-3 mt-5">
-                  <div className="bg-gray-100 border-b p-3">
+                <div className="card border border-[--border-color] bg-white rounded mb-3 mt-5">
+                  <div className="bg-gray-100 dark:bg-gray-800 border-b border-[--border-color] p-3">
                     <b>{_t("sign-up.free-account")}</b>
                   </div>
                   <div className="p-3">
                     <div>{_t("sign-up.free-account-desc")}</div>
                   </div>
-                  <div className="bg-gray-100 border-t py-2 px-3">
+                  <div className="bg-gray-100 dark:bg-gray-800 border-t border-[--border-color] py-2 px-3">
                     <Button className="w-full" onClick={regularRegister}>
                       {_t("sign-up.register-free")}
                     </Button>
@@ -378,8 +378,8 @@ export const SignUp = (props: PageProps) => {
                     </div>
                   )}
                 </div>
-                <div className="card border bg-white rounded mb-3">
-                  <div className="bg-gray-100 border-b p-3">
+                <div className="card border bg-white border-[--border-color] rounded mb-3">
+                  <div className="bg-gray-100 dark:bg-gray-800 border-b border-[--border-color] p-3">
                     <b>{_t("sign-up.buy-account")}</b>
                   </div>
                   <div className="p-3">
@@ -390,15 +390,15 @@ export const SignUp = (props: PageProps) => {
                       <li>{_t("sign-up.buy-account-li-3")}</li>
                     </ul>
                   </div>
-                  <div className="bg-gray-100 border-t py-2 px-3">
+                  <div className="bg-gray-100 dark:bg-gray-800 border-t border-[--border-color] py-2 px-3">
                     <Button className="w-full" onClick={() => setStage(Stage.BUY_ACCOUNT)}>
                       {_t("sign-up.buy-account")} – $2.99
                     </Button>
                   </div>
                 </div>
 
-                <div className="card border bg-white rounded mb-3">
-                  <div className="bg-gray-100 border-b p-3">
+                <div className="card border bg-white border-[--border-color] rounded mb-3">
+                  <div className="bg-gray-100 dark:bg-gray-800 border-b border-[--border-color] p-3">
                     <b>
                       {props.activeUser
                         ? _t("onboard.title-active-user")
@@ -416,7 +416,7 @@ export const SignUp = (props: PageProps) => {
                       {!props.activeUser && <li>{_t("onboard.asking-description")}</li>}
                     </ul>
                   </div>
-                  <div className="bg-gray-100 border-t py-2 px-3">
+                  <div className="bg-gray-100 dark:bg-gray-800 border-t border-[--border-color] py-2 px-3">
                     <Link to={`/onboard-friend/asking/${urlHash}`}>
                       <Button className="w-full">
                         {props.activeUser ? _t("onboard.creating") : _t("onboard.asking")}