Skip to content
This repository has been archived by the owner on Jan 15, 2025. It is now read-only.

Fixed styles #1517

Merged
merged 3 commits into from
Nov 22, 2023
Merged

Fixed styles #1517

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d318d64
Fixed alert styles in dark mode
dkildar Nov 21, 2023
0753f0b
Fixed feedback error styles
dkildar Nov 21, 2023
40f480e
Fixed signup dark theme
dkildar Nov 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion src/common/components/entry-votes/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
9 changes: 9 additions & 0 deletions src/common/components/feedback/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
right: 20px;
bottom: 60px;
width: 260px;

&.visible ~ .announcement-container {
bottom: 10rem !important;
}
Expand All @@ -34,6 +35,7 @@
align-items: center;
margin-bottom: 6px;
animation: feedback-anim 0.5s;
overflow: hidden;

@include themify(day) {
@apply bg-light-300;
Expand All @@ -48,24 +50,28 @@
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;
}
margin-right: 2.3rem;
margin-left: 0.5rem;
border-radius: 50%;

&.success-img {
@apply bg-green;
}
}
}

.feedback-close-btn {
position: absolute;
right: 8px;
Expand Down Expand Up @@ -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;
}
Expand Down
12 changes: 8 additions & 4 deletions src/common/features/ui/alert/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%]"
};
18 changes: 9 additions & 9 deletions src/common/pages/sign-up.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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">
Expand All @@ -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")
Expand All @@ -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")}
Expand Down