From 5819e471db7bc8e96e97af628dcbbf8e8d747276 Mon Sep 17 00:00:00 2001
From: Terry Sutton <saltcod@gmail.com>
Date: Mon, 27 Feb 2023 22:39:49 -0330
Subject: [PATCH] Styles for logged in ticket page

---
 .../LaunchWeek/ReferralIndicator.tsx          |  30 +++++
 .../LaunchWeek/Ticket/ticket-actions.tsx      |  12 +-
 .../LaunchWeek/Ticket/ticket-copy.tsx         |  32 +++--
 .../Ticket/ticket-visual.module.css           |   5 +
 .../LaunchWeek/Ticket/ticket-visual.tsx       |   3 +
 .../components/LaunchWeek/Ticket/ticket.tsx   |  32 +++--
 apps/www/components/LaunchWeek/lw7_days.json  | 114 ++++++++++++++++++
 apps/www/components/Nav/index.tsx             |   4 +-
 8 files changed, 194 insertions(+), 38 deletions(-)
 create mode 100644 apps/www/components/LaunchWeek/ReferralIndicator.tsx
 create mode 100644 apps/www/components/LaunchWeek/lw7_days.json

diff --git a/apps/www/components/LaunchWeek/ReferralIndicator.tsx b/apps/www/components/LaunchWeek/ReferralIndicator.tsx
new file mode 100644
index 00000000000..7d0cd71a645
--- /dev/null
+++ b/apps/www/components/LaunchWeek/ReferralIndicator.tsx
@@ -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>
+  )
+}
diff --git a/apps/www/components/LaunchWeek/Ticket/ticket-actions.tsx b/apps/www/components/LaunchWeek/Ticket/ticket-actions.tsx
index 96867056b48..8cb309656ae 100644
--- a/apps/www/components/LaunchWeek/Ticket/ticket-actions.tsx
+++ b/apps/www/components/LaunchWeek/Ticket/ticket-actions.tsx
@@ -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} />
diff --git a/apps/www/components/LaunchWeek/Ticket/ticket-copy.tsx b/apps/www/components/LaunchWeek/Ticket/ticket-copy.tsx
index 997ada1729f..0023a661936 100644
--- a/apps/www/components/LaunchWeek/Ticket/ticket-copy.tsx
+++ b/apps/www/components/LaunchWeek/Ticket/ticket-copy.tsx
@@ -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>
   )
diff --git a/apps/www/components/LaunchWeek/Ticket/ticket-visual.module.css b/apps/www/components/LaunchWeek/Ticket/ticket-visual.module.css
index df49beabbaa..6b1c81c7813 100644
--- a/apps/www/components/LaunchWeek/Ticket/ticket-visual.module.css
+++ b/apps/www/components/LaunchWeek/Ticket/ticket-visual.module.css
@@ -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;
diff --git a/apps/www/components/LaunchWeek/Ticket/ticket-visual.tsx b/apps/www/components/LaunchWeek/Ticket/ticket-visual.tsx
index b3800935a44..5fe649962d4 100644
--- a/apps/www/components/LaunchWeek/Ticket/ticket-visual.tsx
+++ b/apps/www/components/LaunchWeek/Ticket/ticket-visual.tsx
@@ -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={{
diff --git a/apps/www/components/LaunchWeek/Ticket/ticket.tsx b/apps/www/components/LaunchWeek/Ticket/ticket.tsx
index ec63cec5db3..5e716fa529c 100644
--- a/apps/www/components/LaunchWeek/Ticket/ticket.tsx
+++ b/apps/www/components/LaunchWeek/Ticket/ticket.tsx
@@ -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>
                 )}
               </>
diff --git a/apps/www/components/LaunchWeek/lw7_days.json b/apps/www/components/LaunchWeek/lw7_days.json
new file mode 100644
index 00000000000..e961beefa62
--- /dev/null
+++ b/apps/www/components/LaunchWeek/lw7_days.json
@@ -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
+      }
+    ]
+  }
+]
diff --git a/apps/www/components/Nav/index.tsx b/apps/www/components/Nav/index.tsx
index 63fb3f51ea1..fe549dc6acc 100644
--- a/apps/www/components/Nav/index.tsx
+++ b/apps/www/components/Nav/index.tsx
@@ -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"> */}