dima/supabase
1
0 Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-10-14 21:59:16 +03:00
Code Issues Packages Projects Releases Wiki Activity

Styles for logged in ticket page

Browse Source
This commit is contained in:
Terry Sutton committed 2023-02-27 22:39:49 -03:30
1 parent c68bf4e9bf
commit 5819e471db
8 files changed
+194 -38
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/www/components/LaunchWeek/ReferralIndicator.tsx
+30
View File
@@ -0,0 +1,30 @@
import React from 'react'
interface Props {
referrals: number
}
export default function ReferralIndicator({ referrals }: Props) {
let text
switch (referrals) {
case 0:
text = '1x chance'
break
case 1:
text = '2x chance'
break
case 2:
text = '3x chance'
break
default:
text = 'You have more than three referrals.'
}
return (
<div className="bg-[#EAEAEA75] rounded-full mt-4 flex">
<span className="bg-gradient-to-l from-[#A141E4] to-[#6300F569] rounded-full pl-4 pr-6 py-2 text-xs">
{text}
</span>
</div>
)
}
apps/www/components/LaunchWeek/Ticket/ticket-actions.tsx
+6 -6
View File
@@ -40,7 +40,7 @@ export default function TicketActions({ username, golden = false }: Props) {
const ActionStyle = ({ children }: any) => {
return (
<div className="rounded-full bg-white dark:bg-scale-400 dark:hover:bg-scale-500 py-1 px-3 border border-scale-500 dark:text-white text-sm mb-1 transition-all ease-out hover:bg-scale-500">
<div className="rounded-md bg-[#E6E8EB] text-scale-500 py-1 px-3 border border-scale-1100 text-sm mb-1 transition-all ease-out hover:bg-[#dfe1e3]">
{children}
</div>
)
@@ -53,12 +53,12 @@ export default function TicketActions({ username, golden = false }: Props) {
href={tweetUrl}
rel="noopener noreferrer"
target="_blank"
className="flex items-center gap-2"
className="flex items-center justify-center gap-2"
>
<div className="text-scale-900">
<IconCheckCircle size={12} strokeWidth={1.5} />
</div>
Connect with github
Connect with Github
</a>
</ActionStyle>
<ActionStyle>
@@ -66,7 +66,7 @@ export default function TicketActions({ username, golden = false }: Props) {
href={tweetUrl}
rel="noopener noreferrer"
target="_blank"
className="flex items-center gap-2"
className="flex items-center justify-center gap-2"
>
<div className="text-scale-900">
<IconTwitter size={12} strokeWidth={1.5} />
@@ -79,7 +79,7 @@ export default function TicketActions({ username, golden = false }: Props) {
href={linkedInUrl}
rel="noopener noreferrer"
target="_blank"
className="flex items-center gap-2"
className="flex items-center justify-center gap-2"
>
<div className="text-scale-900">
<IconLinkedin size={12} strokeWidth={1.5} />
@@ -99,7 +99,7 @@ export default function TicketActions({ username, golden = false }: Props) {
setLoading(true)
}}
download="ticket.png"
className="flex items-center gap-2"
className="flex items-center justify-center gap-2"
>
<div className="text-scale-900">
<IconDownload size={12} strokeWidth={1.5} />
apps/www/components/LaunchWeek/Ticket/ticket-copy.tsx
+15 -17
View File
@@ -24,8 +24,6 @@ export default function TicketCopy({ username }: Props) {
}
}, [])
const copiedText = <span className="text-xs text-scale-1200">Copied!</span>
// background: none;
// outline: none;
// border: none;
@@ -41,7 +39,7 @@ export default function TicketCopy({ username }: Props) {
<button
type="button"
name="Copy"
className="text-scale-900 hover:text-scale-1200 w-21 flex items-center cursor-pointer"
className="bg-[#E6E8EB] text-scale-500 text-xs w-21 flex items-center cursor-pointer py-1 px-2 rounded-md"
ref={buttonRef}
onClick={() => {
navigator.clipboard.writeText(url).then(() => {
@@ -52,13 +50,17 @@ export default function TicketCopy({ username }: Props) {
})
}}
>
{copied ? (
<div className="text-brand-900">
<IconCheck size={14} />
</div>
) : (
<IconCopy size={14} />
)}
<div className="flex items-center gap-1 ">
{copied ? (
<>
<IconCheck size={14} /> Copied!
</>
) : (
<>
<IconCopy size={14} /> Copy your unique URL{' '}
</>
)}
</div>
</button>
)
@@ -67,11 +69,10 @@ export default function TicketCopy({ username }: Props) {
className={cn(
styleUtils.appear,
styleUtils['appear-third'],
'bg-scaleA-200 h-8 rounded border border-scale-400 w-full'
'bg-scaleA-200 h-8 rounded-md border border-scale-1100 w-full'
)}
>
<div className="px-3 h-full flex items-center gap-3 w-full truncate relative pr-20">
<div className="text-scale-900 text-sm hidden lg:flex">Your ticket URL:</div>
<div className="px-3 h-full flex items-center gap-3 w-full truncate relative pr-20 bg-[#D9D9D94D]">
<div className="flex items-center truncate">
<p
className={['text-xs font-mono text-scale-1200 truncate'].join(' ')}
@@ -95,10 +96,7 @@ export default function TicketCopy({ username }: Props) {
{url}
</p>
</div>
<div className="absolute right-3 with-auto height-auto flex items-center">
{copied && copiedText}
{copyButton}
</div>
<div className="absolute right-1 with-auto height-auto flex items-center">{copyButton}</div>
</div>
</div>
)
apps/www/components/LaunchWeek/Ticket/ticket-visual.module.css
+5
View File
@@ -31,6 +31,11 @@
/* border-image-source: linear-gradient(to left, var(--gold-secondary), var(--gold-accent)); */
}
.visual--logged-in {
background-image: url('/images/launchweek/seven/lw-7-bg.svg');
background-size: cover;
}
@media (max-width: 768px) {
.visual {
background-size: cover;
apps/www/components/LaunchWeek/Ticket/ticket-visual.tsx
+3
View File
@@ -7,6 +7,7 @@ import TicketMonoMobile from './ticket-mono-mobile'
import cn from 'classnames'
import { useRouter } from 'next/router'
import { DATE } from '~/lib/constants'
import useConfData from '~/components/LaunchWeek/Ticket//hooks/use-conf-data'
type TicketGenerationState = 'default' | 'loading'
type Props = {
@@ -28,6 +29,7 @@ export default function TicketVisual({
setTicketGenerationState,
golden = false,
}: Props) {
const { session } = useConfData()
// golden = true
const router = useRouter()
@@ -39,6 +41,7 @@ export default function TicketVisual({
className={[
styles.visual,
golden ? styles['visual--gold'] : '',
session ? styles['visual--logged-in'] : '',
'flex relative flex-col justify-between rounded-xl bg-black ',
].join(' ')}
style={{
apps/www/components/LaunchWeek/Ticket/ticket.tsx
+19 -13
View File
@@ -13,6 +13,7 @@ import TicketCopy from './ticket-copy'
import { DATE, SITE_NAME } from '~/lib/constants'
import Form from './form'
import { UserData } from './hooks/use-conf-data'
import ReferralIndicator from '../ReferralIndicator'
type TicketGenerationState = 'default' | 'loading'
type Props = {
@@ -86,7 +87,7 @@ export default function Ticket({
{!sharePage && (
<>
{username ? (
<div className="flex flex-col gap-6 py-4 mx-8">
<div className="flex flex-col gap-6 py-4 mx-3">
<div>
<TicketCopy username={username} />
</div>
@@ -112,12 +113,11 @@ export default function Ticket({
`}
>
<h1 className={cn(styleUtils.appear, styleUtils['appear-first'], 'text-xl xl:text-3xl')}>
{sharePage ? (
name ? (
<p className="text-3xl dark:text-scale-1200 tracking-[0.02rem]">{name}'s ticket</p>
) : (
<p className="text-3xl dark:text-scale-1200 tracking-[0.02rem]">{SITE_NAME}</p>
)
{name ? (
<p className="text-2xl dark:text-scale-1200 tracking-[0.02rem]">
You're <span className="gradient-text-purple-500">in the draw!</span> <br />
Now make it gold.
</p>
) : golden ? (
<p className="text-xl dark:text-scale-1200 tracking-[0.02rem]">Congratulations!</p>
) : (
@@ -142,13 +142,19 @@ export default function Ticket({
</>
) : (
<>
<p>
We have some fantastic swag up for grabs, including 3x limited edition mechanical
keyboard that you won't want to miss.
</p>
{username && (
{username ? (
<>
<p>
Why stop there? Increase your chances of winning by sharing your unique
ticket. Get sharing!
</p>
<ReferralIndicator referrals={referrals} />
</>
) : (
<p>
{`<<<<`} Referrals: {referrals} {`>>>>`}
We have some fantastic swag up for grabs, including 3x limited edition
mechanical keyboard that you won't want to miss.
</p>
)}
</>
apps/www/components/LaunchWeek/lw7_days.json
+114
View File
@@ -0,0 +1,114 @@
[
{
"title": "Docs Updated",
"shipped": true,
"date": "12 Dec 2022",
"description": "Supabase Docs",
"d": 1,
"dd": "Monday",
"youtube_id": "OpPOaJI_Z28",
"blogpost": "https://supabase.com/blog/new-supabase-docs-built-with-nextjs",
"docs": "https://supabase.com/docs",
"steps": [
{
"title": "Supabase Docs",
"blog": "/blog/new-supabase-docs-built-with-nextjs",
"docs": "/docs",
"isNew": true,
"description": ""
}
]
},
{
"title": "Image Processing: Resize V2 + CDN",
"shipped": true,
"date": "13 Dec 2022",
"description": "Image Transformations",
"d": 2,
"dd": "Tuesday",
"youtube_id": "iqZlPtl_b-I",
"blogpost": "https://supabase.com/blog",
"docs": "https://supabase.com/docs",
"steps": [
{
"title": "Image Transformations",
"blog": "/blog/storage-image-resizing-smart-cdn",
"docs": "/docs/guides/storage/image-transformations",
"isNew": true,
"description": ""
},
{
"title": "Smart CDN",
"description": "Faster asset delivery, now even faster.",
"blog": "/blog/storage-image-resizing-smart-cdn",
"docs": "/docs/guides/storage/cdn",
"isNew": true
}
]
},
{
"title": "Multi-factor Authentication",
"shipped": true,
"date": "14 Dec 2022",
"description": "Multi-factor Authentication",
"d": 3,
"dd": "Wednesday",
"youtube_id": "CGZr5tybW18",
"blogpost": "https://supabase.com/blog",
"docs": "https://supabase.com/docs",
"steps": [
{
"title": "Multi-factor Authentication",
"blog": "/blog/mfa-auth-via-rls",
"docs": "/docs/guides/auth/auth-mfa",
"isNew": false,
"description": ""
}
]
},
{
"title": "Supabase Wrappers - FDW Framework",
"shipped": true,
"date": "15 Dec 2022",
"description": "Supabase Wrappers",
"d": 4,
"dd": "Thursday",
"youtube_id": "QA2qC5F-4OU",
"blogpost": "/blog/postgres-foreign-data-wrappers-rust",
"docs": "https://supabase.com/docs",
"steps": [
{
"title": "Supabase Wrappers",
"blog": "/blog/postgres-foreign-data-wrappers-rust",
"docs": "https://supabase.github.io/wrappers/",
"isNew": true,
"description": "Connect Postgres to external systems with Postgres Foreign Data Wrappers"
}
]
},
{
"title": "Supabase Vault Release",
"shipped": true,
"date": "16 Dec 2022",
"description": "Vault Release",
"d": 5,
"dd": "Friday",
"youtube_id": "6bGQotxisoY",
"blogpost": "https://supabase.com/blog",
"docs": "https://supabase.com/docs",
"steps": [
{
"title": "Vault Release",
"blog": "/blog/vault-now-in-beta",
"isNew": true,
"description": ""
},
{
"title": "Transparent Column Encryption",
"description": "Faster asset delivery, now even faster.",
"blog": "/blog/transparent-column-encryption-with-postgres",
"isNew": true
}
]
}
]
apps/www/components/Nav/index.tsx
+2 -2
View File
@@ -196,8 +196,8 @@ const Nav = () => {
} absolute top-0 h-full w-full opacity-80`}
></div>
<nav
className={`border-scale-400 border-b ${
isLauchWeekPage ? 'border-[#be9eea]' : ' backdrop-blur-sm'
className={`border-scale-400 border-b backdrop-blur-sm ${
isLauchWeekPage ? 'border-[#be9eea]' : ''
}`}
>
{/* <div className="lg:container mx-auto relative flex justify-between h-16 lg:px-10 xl:px-0"> */}