From 2abe6b9bc4bf693c4b31313ab39ebe565e5626b4 Mon Sep 17 00:00:00 2001 From: ingawei Date: Wed, 27 Jul 2022 20:20:27 -0700 Subject: [PATCH] noobify welcome demo, still need to add new field so this doesn't appear everytime --- web/components/button.tsx | 6 +- web/components/buttons/pill-button.tsx | 4 +- web/components/title.tsx | 2 +- web/pages/_app.tsx | 4 +- web/pages/group/[...slugs]/index.tsx | 143 ++++++++++++++++++------- web/tailwind.config.js | 13 +++ 6 files changed, 128 insertions(+), 44 deletions(-) diff --git a/web/components/button.tsx b/web/components/button.tsx index 8877c023..7eeca3d2 100644 --- a/web/components/button.tsx +++ b/web/components/button.tsx @@ -39,8 +39,10 @@ export function Button(props: { color === 'yellow' && 'bg-yellow-400 text-white hover:bg-yellow-500', color === 'blue' && 'bg-blue-400 text-white hover:bg-blue-500', color === 'indigo' && 'bg-indigo-500 text-white hover:bg-indigo-600', - color === 'gray' && 'bg-gray-100 text-gray-600 hover:bg-gray-200', - color === 'gray-white' && 'bg-white text-gray-500 hover:bg-gray-200', + color === 'gray' && + 'bg-greyscale-1 text-greyscale-7 hover:bg-greyscale-2', + color === 'gray-white' && + 'text-greyscale-6 hover:bg-greyscale-2 bg-white', className )} disabled={disabled} diff --git a/web/components/buttons/pill-button.tsx b/web/components/buttons/pill-button.tsx index 5b4962b7..8e47c94e 100644 --- a/web/components/buttons/pill-button.tsx +++ b/web/components/buttons/pill-button.tsx @@ -15,8 +15,8 @@ export function PillButton(props: { className={clsx( 'cursor-pointer select-none whitespace-nowrap rounded-full', selected - ? ['text-white', color ?? 'bg-gray-700'] - : 'bg-gray-100 hover:bg-gray-200', + ? ['text-white', color ?? 'bg-greyscale-6'] + : 'bg-greyscale-2 hover:bg-greyscale-3', big ? 'px-8 py-2' : 'px-3 py-1.5 text-sm' )} onClick={onSelect} diff --git a/web/components/title.tsx b/web/components/title.tsx index e58aee39..e0a0be61 100644 --- a/web/components/title.tsx +++ b/web/components/title.tsx @@ -5,7 +5,7 @@ export function Title(props: { text: string; className?: string }) { return (

diff --git a/web/pages/_app.tsx b/web/pages/_app.tsx index 52316eb0..f495986c 100644 --- a/web/pages/_app.tsx +++ b/web/pages/_app.tsx @@ -6,6 +6,8 @@ import Script from 'next/script' import { usePreserveScroll } from 'web/hooks/use-preserve-scroll' import { QueryClient, QueryClientProvider } from 'react-query' import { AuthProvider } from 'web/components/auth-context' +import { useUser } from 'web/hooks/use-user' +import Welcome from 'web/components/onboarding/welcome' function firstLine(msg: string) { return msg.replace(/\r?\n.*/s, '') @@ -78,9 +80,9 @@ function MyApp({ Component, pageProps }: AppProps) { content="width=device-width, initial-scale=1, maximum-scale=1" /> - + diff --git a/web/pages/group/[...slugs]/index.tsx b/web/pages/group/[...slugs]/index.tsx index dd712a36..5437146b 100644 --- a/web/pages/group/[...slugs]/index.tsx +++ b/web/pages/group/[...slugs]/index.tsx @@ -51,6 +51,7 @@ import { ENV_CONFIG } from 'common/envs/constants' import { useSaveReferral } from 'web/hooks/use-save-referral' import { Button } from 'web/components/button' +const manifundGroupNames = ['Cause Exploration Prize'] export const getStaticProps = fromPropz(getStaticPropz) export async function getStaticPropz(props: { params: { slugs: string[] } }) { const { slugs } = props.params @@ -242,48 +243,114 @@ export default function GroupPage(props: { href: groupPath(group.slug, 'about'), }, ] + + const manifundTabs = [ + { + title: 'Chat', + content: chatTab, + href: groupPath(group.slug, GROUP_CHAT_SLUG), + }, + { + title: 'Markets', + content: questionsTab, + href: groupPath(group.slug, 'markets'), + }, + { + title: 'Leaderboards', + content: leaderboard, + href: groupPath(group.slug, 'leaderboards'), + }, + { + title: 'About', + content: aboutTab, + href: groupPath(group.slug, 'about'), + }, + ] const tabIndex = tabs.map((t) => t.title).indexOf(page ?? GROUP_CHAT_SLUG) - return ( - - - - -
-
- {group.name} + if (manifundGroupNames.includes(group.name)) { + return ( + + + + +
+
+ {group.name} +
+
+ +
-
- +
+
-
-
- -
-
- - 0 ? tabIndex : 0} - tabs={tabs} - /> -
- ) + + + 0 ? tabIndex : 0} + tabs={tabs} + /> + + ) + } else { + return ( + + + + +
+
+ {group.name} +
+
+ +
+
+
+ +
+
+ + 0 ? tabIndex : 0} + tabs={tabs} + /> +
+ ) + } } function JoinOrAddQuestionsButtons(props: { diff --git a/web/tailwind.config.js b/web/tailwind.config.js index 3457b7a6..84e94c20 100644 --- a/web/tailwind.config.js +++ b/web/tailwind.config.js @@ -18,6 +18,19 @@ module.exports = { backgroundImage: { 'world-trading': "url('/world-trading-background.webp')", }, + colors: { + // primary: '#4338CA', + // 'primary-dark': '#1F1F6D', + // secondary: '#E97176', + // 'secondary-dark': '#6060C6', + 'greyscale-1': '#FBFBFF', + 'greyscale-2': '#E7E7F4', + 'greyscale-3': '#D8D8EB', + 'greyscale-4': '#B1B1C7', + 'greyscale-5': '#9191A7', + 'greyscale-6': '#66667C', + 'greyscale-7': '#111140', + }, typography: { quoteless: { css: {