wassname/Open-Assistant
1
0
Fork 0
mirror of https://github.com/wassname/Open-Assistant.git synced 2026-07-26 13:07:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

Theme implementation which does not rely on the Chakra Container component, which is for contianing width (and buggy). Last commit before pulling in latest to resolve merge confilicts, and continue to fix the survey pages.

Browse Source
This commit is contained in:
Desmond Grealy
2023-01-01 23:12:37 -08:00
parent 6299f3673e
commit 97625a8398
14 changed files with 161 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/components/AuthLayout.tsx
+3 -3
View File
@@ -1,13 +1,13 @@
import { Container } from "@chakra-ui/react";
export function AuthLayout({ children }) {
return (
<Container className="flex items-center justify-center sm:py-4 subpixel-antialiased">
<div className="flex items-center justify-center sm:py-4 subpixel-antialiased">
<div className="flex items-center w-full max-w-2xl flex-col px-4 sm:px-6">
<div className="flex-auto items-center justify-center w-full py-10 px-4 sm:mx-0 sm:flex-none sm:rounded-2xl sm:p-4">
{children}
</div>
</div>
</Container>
</div>
);
}
website/src/components/CallToAction.tsx
+41 -6
View File
@@ -1,16 +1,51 @@
import { CircleBackground } from "./CircleBackground";
import { useId } from "react";
import { useColorMode } from "@chakra-ui/react";
import { Container } from "./Container";
export function CallToAction() {
function CircleBackground({ width = 558, height = 558, ...props }) {
const id = useId();
const { colorMode } = useColorMode();
const baseRingColor = colorMode === "light" ? "#777" : "#000";
const gradStopColor = colorMode === "light" ? "#fff" : "#000";
return (
<section id="join-us" className="relative overflow-hidden bg-gray-900 py-20 sm:py-28">
<svg viewBox="0 0 558 558" width={width} height={height} fill="none" aria-hidden="true" {...props}>
<defs>
<linearGradient id={id} x1="79" y1="16" x2="105" y2="237" gradientUnits="userSpaceOnUse">
<stop stopColor={gradStopColor} />
<stop offset="1" stopColor={baseRingColor} stopOpacity="0" />
</linearGradient>
</defs>
<path
opacity=".2"
d="M1 279C1 125.465 125.465 1 279 1s278 124.465 278 278-124.465 278-278 278S1 432.535 1 279Z"
stroke={baseRingColor}
/>
<path d="M1 279C1 125.465 125.465 1 279 1" stroke={`url(#${id})`} strokeLinecap="round" />
</svg>
);
}
export function CallToAction() {
const { colorMode } = useColorMode();
const bgColorClass = colorMode === "light" ? "bg-gray-900" : "bg-gray-50";
const headingColorClass = colorMode === "light" ? "text-white" : "text-black";
const textColorClass = colorMode === "light" ? "text-gray-300" : "text-black";
const gradStopColor = colorMode === "light" ? "#06b6d4" : "#00f2ff";
return (
<section id="join-us" className={`relative overflow-hidden py-20 sm:py-28 ${bgColorClass} ${textColorClass}`}>
<div className="absolute top-1/2 left-20 -translate-y-1/2 sm:left-1/2 sm:-translate-x-1/2">
<CircleBackground color="#fff" className="animate-spin-slower" />
<CircleBackground className="animate-spin-slower" />
</div>
<Container className="relative">
<div className="mx-auto max-w-md sm:text-center">
<h2 className="text-3xl font-medium tracking-tight text-white sm:text-4xl">Join Us</h2>
<p className="mt-4 text-lg text-gray-300">
<h2 className={`text-3xl font-medium tracking-tight sm:text-4xl ${headingColorClass}`}>Join Us</h2>
<p className="mt-4 text-lg">
All open source projects begin with people like you. Open source is the belief that if we collaborate we can
together gift our knowledge and technology to the world for the benefit of humanity. Are you in? Find us
here:
website/src/components/CircleBackground.tsx
-22
View File
@@ -1,22 +0,0 @@
import { useId } from "react";
export function CircleBackground({ color, width = 558, height = 558, ...props }) {
const id = useId();
return (
<svg viewBox="0 0 558 558" width={width} height={height} fill="none" aria-hidden="true" {...props}>
<defs>
<linearGradient id={id} x1="79" y1="16" x2="105" y2="237" gradientUnits="userSpaceOnUse">
<stop stopColor={color} />
<stop offset="1" stopColor={color} stopOpacity="0" />
</linearGradient>
</defs>
<path
opacity=".2"
d="M1 279C1 125.465 125.465 1 279 1s278 124.465 278 278-124.465 278-278 278S1 432.535 1 279Z"
stroke={color}
/>
<path d="M1 279C1 125.465 125.465 1 279 1" stroke={`url(#${id})`} strokeLinecap="round" />
</svg>
);
}
website/src/components/Faq.tsx
+13 -4
View File
@@ -1,4 +1,4 @@
import Link from "next/link";
import { useColorMode } from "@chakra-ui/react";
import { Container } from "./Container";
@@ -27,11 +27,20 @@ const faqs = [
];
export function Faq() {
const { colorMode } = useColorMode();
const bgColorClass = colorMode === "light" ? "bg-gray-900" : "bg-gray-50";
const gradStopColor = colorMode === "light" ? "#06b6d4" : "#00f2ff";
const headingColorClass = colorMode === "light" ? "text-gray-900" : "text-white";
const textColorClass = colorMode === "light" ? "text-gray-700" : "text-gray-100";
return (
<section id="faq" aria-labelledby="faqs-title" className="border-t border-gray-200 py-20 sm:py-32">
<Container className="">
<div className="mx-auto max-w-2xl lg:mx-0">
<h2 id="faqs-title" className="text-3xl font-medium tracking-tight text-gray-900">
<h2 id="faqs-title" className={`text-3xl font-medium tracking-tight ${headingColorClass}`}>
Frequently Asked Questions
</h2>
{/* <p className="mt-2 text-lg text-gray-600">
@@ -54,8 +63,8 @@ export function Faq() {
<ul role="list" className="space-y-10">
{column.map((faq, faqIndex) => (
<li key={faqIndex}>
<h3 className="text-lg font-semibold leading-6 text-gray-900">{faq.question}</h3>
<p className="mt-4 text-sm text-gray-700">{faq.answer}</p>
<h3 className={`text-lg font-semibold leading-6 ${headingColorClass}`}>{faq.question}</h3>
<p className={`mt-4 text-sm ${textColorClass}`}>{faq.answer}</p>
</li>
))}
</ul>
website/src/components/Footer.tsx
+8 -5
View File
@@ -1,12 +1,15 @@
import Image from "next/image";
import Link from "next/link";
import { Container, Text, useColorModeValue } from "@chakra-ui/react";
import { useColorMode } from "@chakra-ui/react";
export function Footer() {
const { colorMode } = useColorMode();
const bgColorClass = colorMode === "light" ? "bg-transparent" : "bg-gray-800";
const borderClass = colorMode === "light" ? "border-slate-200" : "border-gray-900";
return (
<footer>
<Container className="flex justify-evenly py-10 px-10 border-t">
<footer className={bgColorClass}>
<div className={`flex justify-evenly py-10 px-10 border-t ${borderClass}`}>
<div className="flex items-center pr-8">
<Link href="/" aria-label="Home" className="flex items-center">
<Image src="/images/logos/logo.svg" className="mx-auto object-fill" width="52" height="52" alt="logo" />
@@ -66,7 +69,7 @@ export function Footer() {
</div>
</div>
</nav>
</Container>
</div>
</footer>
);
}
website/src/components/Header/Header.tsx
+2 -4
View File
@@ -1,4 +1,4 @@
import { Button, Container, Box } from "@chakra-ui/react";
import { Button, Box } from "@chakra-ui/react";
import { Popover } from "@headlessui/react";
import { AnimatePresence, motion } from "framer-motion";
import Image from "next/image";
@@ -56,8 +56,7 @@ function AccountButton() {
export function Header(props) {
const borderClass = props.transparent ? "" : props.borderClass ?? "border-b border-gray-100";
return (
<nav>
<Container>
<nav className="oa-basic-theme">
<Box className={`flex mx-auto max-w-7xl justify-between py-8 px-10 ${borderClass}`}>
<div className="relative z-10 flex items-center gap-16">
<Link href="/" aria-label="Home" className="flex items-center">
@@ -118,7 +117,6 @@ export function Header(props) {
<ColorModeIconToggle className="ml-5"/>
</div>
</Box>
</Container>
</nav>
);
}
website/src/components/Header/NavLinks.tsx
+15 -2
View File
@@ -2,8 +2,21 @@ import { useState } from "react";
import Link from "next/link";
import { AnimatePresence, motion } from "framer-motion";
import { useColorMode } from "@chakra-ui/react";
export function NavLinks(): JSX.Element {
const [hoveredIndex, setHoveredIndex] = useState(null);
const { colorMode } = useColorMode();
const linkColor = (colorMode === "light") ?
"text-gray-700 hover:text-gray-900" :
"text-gray-50 hover:text-white";
const hoverBgColor = (colorMode === "light") ?
"bg-gray-100" :
"bg-gray-800";
return (
<>
@@ -14,14 +27,14 @@ export function NavLinks(): JSX.Element {
<Link
key={label}
href={href}
className="relative -my-2 -mx-3 rounded-lg px-3 py-2 text-sm text-gray-700 transition-colors delay-150 hover:text-gray-900 hover:delay-[0ms]"
className={`${linkColor} relative -my-2 -mx-3 rounded-lg px-3 py-2 text-sm transition-colors delay-150 hover:delay-[0ms]`}
onMouseEnter={() => setHoveredIndex(index)}
onMouseLeave={() => setHoveredIndex(null)}
>
<AnimatePresence>
{hoveredIndex === index && (
<motion.span
className="absolute inset-0 rounded-lg bg-gray-100"
className={`${hoverBgColor} absolute inset-0 rounded-lg`}
layoutId="hoverBackground"
initial={{ opacity: 0 }}
animate={{ opacity: 1, transition: { duration: 0.15 } }}
website/src/components/Hero.tsx
+18 -9
View File
@@ -1,11 +1,16 @@
import { useId } from "react";
import Image from "next/image";
import { useColorMode } from "@chakra-ui/react";
import { Container } from "./Container";
function BackgroundIllustration(props) {
const id = useId();
const { colorMode } = useColorMode();
const baseRingColor = colorMode === "light" ? "#d4d4d4" : "#005a69";
const gradStopColor = colorMode === "light" ? "#06b6d4" : "#00f2ff";
return (
<div {...props}>
<svg
@@ -16,14 +21,14 @@ function BackgroundIllustration(props) {
>
<path
d="M1025 513c0 282.77-229.23 512-512 512S1 795.77 1 513 230.23 1 513 1s512 229.23 512 512Z"
stroke="#D4D4D4"
stroke={baseRingColor}
strokeOpacity="0.7"
/>
<path d="M513 1025C230.23 1025 1 795.77 1 513" stroke={`url(#${id}-gradient-1)`} strokeLinecap="round" />
<defs>
<linearGradient id={`${id}-gradient-1`} x1="1" y1="513" x2="1" y2="1025" gradientUnits="userSpaceOnUse">
<stop stopColor="#06b6d4" />
<stop offset="1" stopColor="#06b6d4" stopOpacity="0" />
<stop stopColor={gradStopColor} />
<stop offset="1" stopColor={gradStopColor} stopOpacity="0" />
</linearGradient>
</defs>
</svg>
@@ -35,14 +40,14 @@ function BackgroundIllustration(props) {
>
<path
d="M913 513c0 220.914-179.086 400-400 400S113 733.914 113 513s179.086-400 400-400 400 179.086 400 400Z"
stroke="#D4D4D4"
stroke={baseRingColor}
strokeOpacity="0.7"
/>
<path d="M913 513c0 220.914-179.086 400-400 400" stroke={`url(#${id}-gradient-2)`} strokeLinecap="round" />
<defs>
<linearGradient id={`${id}-gradient-2`} x1="913" y1="513" x2="913" y2="913" gradientUnits="userSpaceOnUse">
<stop stopColor="#06b6d4" />
<stop offset="1" stopColor="#06b6d4" stopOpacity="0" />
<stop stopColor={gradStopColor} />
<stop offset="1" stopColor={gradStopColor} stopOpacity="0" />
</linearGradient>
</defs>
</svg>
@@ -51,17 +56,21 @@ function BackgroundIllustration(props) {
}
export function Hero() {
const { colorMode } = useColorMode();
const pTextColor = colorMode === "light" ? "text-gray-600" : "text-white";
const fancyTextGradientClasses = colorMode === "light" ? "from-blue-600 via-sky-400 to-blue-700" : "from-blue-500 via-sky-300 to-blue-400";
return (
<div className="overflow-hidden py-20 sm:py-32 lg:pb-32 xl:pb-36">
<Container className="">
<div className="lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20">
<div className="relative z-10 mx-auto max-w-2xl lg:col-span-7 lg:max-w-none lg:pt-6 xl:col-span-6">
<h1 className="text-5xl mb-6 font-bold tracking-tight">Open Assistant</h1>
<p className="mt-8 text-3xl inline bg-gradient-to-r from-indigo-600 via-sky-400 to-indigo-700 bg-clip-text font-display tracking-tight text-transparent">
<p className={`bg-gradient-to-r ${fancyTextGradientClasses} mt-8 text-3xl inline bg-clip-text font-display tracking-tight text-transparent`}>
<b>Conversational AI for everyone.</b>
</p>
<p className="mt-6 text-lg text-gray-600">We believe we can create a revolution.</p>
<p className="mt-6 text-lg text-gray-600">
<p className={`mt-6 text-lg ${pTextColor}`}>We believe we can create a revolution.</p>
<p className={`mt-6 text-lg ${pTextColor}`}>
In the same way that Stable Diffusion helped the world make art and images in new ways, we want to improve
the world by providing amazing conversational AI.
</p>
website/src/pages/auth/signin.tsx
+32 -10
View File
@@ -4,10 +4,12 @@ import { FaBug, FaDiscord, FaEnvelope, FaGithub } from "react-icons/fa";
import { getCsrfToken, getProviders, signIn } from "next-auth/react";
import React, { useRef } from "react";
import Link from "next/link";
import { Header } from "src/components/Header";
import { Footer } from "src/components/Footer";
import { AuthLayout } from "src/components/AuthLayout";
import { useColorMode } from "@chakra-ui/react";
export default function Signin({ csrfToken, providers }) {
function Signin({ csrfToken, providers }) {
const { discord, email, github, credentials } = providers;
const emailEl = useRef(null);
const signinWithEmail = (ev: React.FormEvent) => {
@@ -21,8 +23,17 @@ export default function Signin({ csrfToken, providers }) {
signIn(credentials.id, { callbackUrl: "/", username: debugUsernameEl.current.value });
}
const { colorMode } = useColorMode();
const bgColorClass = colorMode === "light" ? "bg-gray-50" : "bg-chakra-gray-900";
const buttonBgColor = colorMode === "light" ? "#2563eb" : "#2563eb";
const borderClass = colorMode === "light" ? "border-slate-200" : "border-transparent";
const buttonColorScheme = colorMode === "light" ? "blue" : "dark-blue-btn";
return (
<>
<div className={bgColorClass}>
<Head>
<title>Sign Up - Open Assistant</title>
<meta name="Sign Up" content="Sign up to access Open Assistant" />
@@ -30,11 +41,11 @@ export default function Signin({ csrfToken, providers }) {
<AuthLayout>
<Stack spacing="2">
{credentials && (
<form onSubmit={signinWithDebugCredentials} className="border-2 border-orange-200 rounded-md p-4 relative">
<span className="text-orange-600 absolute -top-3 left-5 bg-white px-1">For Debugging Only</span>
<form onSubmit={signinWithDebugCredentials} className="border-2 border-orange-600 rounded-md p-4 relative">
<span className={`text-orange-600 absolute -top-3 left-5 ${bgColorClass} px-1`}>For Debugging Only</span>
<Stack>
<Input variant="outline" size="lg" placeholder="Username" ref={debugUsernameEl} />
<Button size={"lg"} leftIcon={<FaBug />} colorScheme="gray" type="submit">
<Input variant="outline" size="lg" placeholder="Username" ref={debugUsernameEl}/>
<Button size={"lg"} leftIcon={<FaBug />} colorScheme={buttonColorScheme} color="white" type="submit">
Continue with Debug User
</Button>
</Stack>
@@ -44,7 +55,7 @@ export default function Signin({ csrfToken, providers }) {
<form onSubmit={signinWithEmail}>
<Stack>
<Input variant="outline" size="lg" placeholder="Email Address" ref={emailEl} />
<Button size={"lg"} leftIcon={<FaEnvelope />} colorScheme="gray" type="submit">
<Button size={"lg"} leftIcon={<FaEnvelope />} type="submit" colorScheme={buttonColorScheme} color="white">
Continue with Email
</Button>
</Stack>
@@ -52,7 +63,7 @@ export default function Signin({ csrfToken, providers }) {
)}
{discord && (
<Button
bg="#5865F2"
bg={buttonBgColor}
_hover={{ bg: "#4A57E3" }}
_active={{
bg: "#454FBF",
@@ -101,10 +112,21 @@ export default function Signin({ csrfToken, providers }) {
</Link>
</div>
</AuthLayout>
</>
</div>
);
}
Signin.getLayout = (page) => (
<div className="grid grid-rows-[min-content_1fr_min-content] h-full justify-items-stretch">
<Header transparent={true} />
{page}
<Footer />
</div>
);
export default Signin;
export async function getServerSideProps(context) {
const csrfToken = await getCsrfToken();
const providers = await getProviders();
website/src/pages/index.tsx
+4 -2
View File
@@ -26,11 +26,13 @@ const Home = () => {
<TaskSelection />
</Container>
) : (
<Container className="min-w-full" variant="no-padding">
<main className="oa-basic-theme">
{/* <Container className="min-w-full" variant="no-padding"> */}
<Hero />
<CallToAction />
<Faq />
</Container>
{/* </Container> */}
</main>
)}
</>
);
website/src/styles/Theme/colors.ts
+6 -2
View File
@@ -1,10 +1,14 @@
export const colors = {
light: {
bg: "gray.100",
bg: "rgb(250,250,250)",
text: "black",
},
dark: {
bg: "gray.900",
text: "white",
},
};
'dark-blue-btn': {
200: 'rgb(29,78,216)',
300: 'blue',
}
};
website/src/styles/Theme/components/Container.ts
+2 -8
View File
@@ -1,12 +1,6 @@
import { color, defineStyle, defineStyleConfig, transition } from "@chakra-ui/styled-system";
import { colors } from "../colors";
import { defineStyleConfig } from "@chakra-ui/styled-system";
const baseStyle = defineStyle(({ colorMode }) => ({
minWidth: "100%",
bg: colorMode === "light" ? colors.light.bg : colors.dark.bg,
transition: "background-color 200ms cubic-bezier(0.4, 0, 1, 1)",
color: colorMode === "light" ? colors.light.text : colors.dark.text,
}));
const baseStyle = {};
const variants = {
'no-padding': {
website/src/styles/Theme/index.ts
+13 -5
View File
@@ -1,11 +1,13 @@
import { type ThemeConfig, extendTheme } from "@chakra-ui/react";
import { containerTheme } from "./components/Container";
import { Styles } from "@chakra-ui/theme-tools";
import { colors } from "./colors";
const config: ThemeConfig = {
initialColorMode: "light",
useSystemColorMode: true,
disableTransitionOnChange: false,
};
const components = {
@@ -13,9 +15,15 @@ const components = {
};
const styles: Styles = {
global: {
body: {
bg: "white",
global: (props) => ({
'*': {
transition: "background-color 200ms cubic-bezier(0.4, 0, 1, 1)",
// bg: props.colorMode === "light" ? colors.light.bg : colors.dark.bg,
// color: props.colorMode === "light" ? colors.light.text : colors.dark.text,
},
'.oa-basic-theme': {
bg: props.colorMode === "light" ? colors.light.bg : colors.dark.bg,
color: props.colorMode === "light" ? colors.light.text : colors.dark.text,
},
main: {
fontFamily: "Inter",
@@ -23,7 +31,7 @@ const styles: Styles = {
header: {
fontFamily: "Inter",
},
},
}),
};
export const theme = extendTheme({ config, styles, components });
export const theme = extendTheme({ colors, config, styles, components });
website/tailwind.config.js
+4
View File
@@ -71,6 +71,10 @@ module.exports = {
maxWidth: {
"2xl": "40rem",
},
colors: {
'chakra-gray-900': '#171923',
}
},
},
plugins: [require("@tailwindcss/forms")],