From b100d06cdada1192b2ed78203426c3592b03836a Mon Sep 17 00:00:00 2001
From: nizune <9-nizune@users.noreply.gitlab.insrt.uk>
Date: Sat, 3 Jul 2021 00:46:19 +0200
Subject: [PATCH] Update: Age gate view
---
external/lang | 2 +-
src/pages/channels/Channel.tsx | 45 ++++++++++++++++++++++++----
src/pages/friends/Friend.module.scss | 2 +-
3 files changed, 41 insertions(+), 8 deletions(-)
diff --git a/external/lang b/external/lang
index 5cad406..ec907eb 160000
--- a/external/lang
+++ b/external/lang
@@ -1 +1 @@
-Subproject commit 5cad406a2fb09d90803c5604d6f27701c3bf140b
+Subproject commit ec907eb606a3e1d5046bef503caa0585f6bcbc22
diff --git a/src/pages/channels/Channel.tsx b/src/pages/channels/Channel.tsx
index c6119eb..6daf109 100644
--- a/src/pages/channels/Channel.tsx
+++ b/src/pages/channels/Channel.tsx
@@ -1,7 +1,7 @@
import styled from "styled-components";
import { useEffect, useState } from "preact/hooks";
import ChannelHeader from "./ChannelHeader";
-import { useParams } from "react-router-dom";
+import { useParams, useHistory } from "react-router-dom";
import { MessageArea } from "./messaging/MessageArea";
import Checkbox from "../../components/ui/Checkbox";
import Button from "../../components/ui/Button";
@@ -30,6 +30,32 @@ const ChannelContent = styled.div`
flex-direction: column;
`;
+const AgeGate = styled.div`
+ display: flex;
+ flex-grow: 1;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ user-select: none;
+ padding: 12px;
+
+ img {
+ height: 150px;
+ }
+
+ .subtext {
+ color: var(--secondary-foreground);
+ margin-bottom: 12px;
+ font-size: 14px;
+ }
+
+ .actions {
+ margin-top: 20px;
+ display: flex;
+ gap: 12px;
+ }
+`;
+
export function Channel({ id }: { id: string }) {
const ctx = useForceUpdate();
const channel = useChannel(id, ctx);
@@ -47,15 +73,22 @@ function TextChannel({ channel }: { channel: Channel }) {
const [ showMembers, setMembers ] = useState(true);
if ((channel.channel_type === 'TextChannel' || channel.channel_type === 'Group') && channel.name.includes('nsfw')) {
+ const goBack = useHistory();
const [ consent, setConsent ] = useState(false);
const [ ageGate, setAgeGate ] = useState(false);
if (!ageGate) {
return (
- <div style={{ maxWidth: '480px' }}>
- <h3>this channel is marked as nsfw</h3>
- <Checkbox checked={consent} onChange={v => setConsent(v)}>I am at least 18 years old</Checkbox>
- <Button onClick={() => consent && setAgeGate(true)}>view content</Button>
- </div>
+ <AgeGate>
+ <img src={"https://static.revolt.chat/emoji/mutant/26a0.svg"} draggable={false}/>
+ <h2>{channel.name}</h2>
+ <span className="subtext">This channel is marked as NSFW. <a href="#">Learn more</a></span>
+
+ <Checkbox checked={consent} onChange={v => setConsent(v)}>I confirm that I am at least 18 years old.</Checkbox>
+ <div className="actions">
+ <Button contrast onClick={() => goBack}>Go back</Button>
+ <Button contrast onClick={() => consent && setAgeGate(true)}>Enter Channel</Button>
+ </div>
+ </AgeGate>
)
}
}
diff --git a/src/pages/friends/Friend.module.scss b/src/pages/friends/Friend.module.scss
index 5d1b5ae..d712967 100644
--- a/src/pages/friends/Friend.module.scss
+++ b/src/pages/friends/Friend.module.scss
@@ -185,7 +185,7 @@
width: 1.5em;
height: 1.5em;
font-size: 12px;
-
+ color: white;
border-radius: 50%;
align-items: center;
display: inline-flex;
--
GitLab