lw7: update shadows

apps/www/components/LaunchWeek/LW7BgGraphic.tsx

@@ -1,18 +1,12 @@
 import { motion, useScroll, useTransform } from 'framer-motion'
 import Image from 'next/image'
 import { useMobileViewport } from '../../hooks/useMobileViewport'
+import styles from './lw7-bg-graphic.module.css'
 
 export default function LW7BgGraphic() {
   const { scrollYProgress } = useScroll()
   const isMobile = useMobileViewport(768)
 
-  // const graphicsScale = useTransform(
-  //   scrollYProgress,
-  //   // Map scrollYProgress from these values:
-  //   [0, 0.5],
-  //   // Into these scale values:
-  //   [1, isMobile ? 1.1 : 1.2]
-  // )
   const graphicsY = useTransform(
     scrollYProgress,
     // Map scrollYProgress from these values:
@@ -22,12 +16,15 @@ export default function LW7BgGraphic() {
   )
 
   return (
-    <div className="relative h-[300px] md:h-[700px] overflow-hidden before:content[' '] before:absolute before:bottom-0 before:h-[200px] md:before:h-[400px] before:z-20 before:w-full before:bg-gradient-to-t before:from-[#1C1C1C] before:via-[#1C1C1C40] before:to-transparent">
+    <div
+      className={[
+        "relative h-[300px] md:h-[700px] overflow-hidden before:content[' '] before:absolute before:bottom-0 before:h-[200px] md:before:h-[600px] before:z-20 before:w-full before:bg-gradient-to-t before:from-[#1C1C1C] before:via-[#1C1C1C40] before:to-transparent",
+        styles['gradient-overlay'],
+      ].join(' ')}
+    >
       <motion.div
         className="absolute bottom-0 w-full h-full"
         style={{
-          // scale: graphicsScale,
-          // scale: 1,
           y: graphicsY,
           willChange: 'transform',
         }}

apps/www/components/LaunchWeek/Ticket/ActualTicket.tsx

@@ -113,12 +113,12 @@ export default function Ticket({
                         <br className="hidden lg:inline" />
                         chance!
                         <br className="inline lg:hidden" /> Almost{' '}
-                        <span className="gradient-text-gold-500">gold</span>.
+                        <span className={styles['gold-text']}>gold</span>.
                       </span>
                     )}
                     {winningChances === 3 && (
                       <span className="text-2xl tracking-[0.02rem] font-medium leading-7 block">
-                        You're <span className="gradient-text-gold-500">gold</span>!<br />
+                        You're <span className={styles['gold-text']}>gold</span>!<br />
                         You've maxed your <br /> chances of winning!
                       </span>
                     )}

apps/www/components/LaunchWeek/Ticket/TicketActions.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'react'
 import { SITE_URL, TWEET_TEXT, TWEET_TEXT_GOLDEN } from '~/lib/constants'
-import { IconCheckCircle, IconDownload, IconGitHub, IconLinkedin, IconTwitter } from 'ui'
+import { IconCheckCircle } from 'ui'
 import useConfData from '~/components/LaunchWeek/Ticket//hooks/use-conf-data'
 import LoadingDots from './loading-dots'
 import { useParams } from '~/hooks/useParams'
@@ -59,10 +59,10 @@ export default function TicketActions({
   }, [downloadUrl])
 
   return (
-    <div className="grid gap-1">
+    <div className="grid gap-1 grid-cols-1 sm:grid-cols-3 lg:grid-cols-1">
       {!sharePage ? (
         <>
-          <div className="rounded-md bg-[#E6E8EB] text-scale-500 py-1 px-3 border border-scale-1100 text-xs mb-1">
+          <div className="rounded-full bg-[#E6E8EB] text-scale-500 py-1 sm:py-2 lg:py-1 px-3 border border-[#dfe1e3] text-xs mb-1">
             <div className="flex items-center justify-center gap-2">
               <div className="text-scale-900">
                 <IconCheckCircle size={10} strokeWidth={1} />
@@ -71,9 +71,9 @@ export default function TicketActions({
             </div>
           </div>
           <div
-            className={`rounded-md ${
+            className={`rounded-full ${
               userData.sharedOnTwitter ? 'bg-[#E6E8EB] text-scale-500' : 'text-white'
-            }  text-scale-500 py-1 px-3 border border-scale-1100 text-xs mb-1 transition-all ease-out hover:bg-[#dfe1e3]`}
+            }  text-scale-500 py-1 sm:py-2 lg:py-1 px-3 border border-[#dfe1e3] text-xs mb-1 transition-all ease-out hover:bg-[#dfe1e3]`}
           >
             <a
               href={tweetUrl}
@@ -94,9 +94,9 @@ export default function TicketActions({
             </a>
           </div>
           <div
-            className={`rounded-md ${
+            className={`rounded-full ${
               userData.sharedOnLinkedIn ? 'bg-[#E6E8EB] text-scale-500' : 'text-white'
-            }  text-scale-500 py-1 px-3 border border-scale-1100 text-xs mb-1 transition-all ease-out hover:bg-[#dfe1e3]`}
+            }  text-scale-500 py-1 sm:py-2 lg:py-1 px-3 border border-[#dfe1e3] text-xs mb-1 transition-all ease-out hover:bg-[#dfe1e3]`}
           >
             <a
               href={linkedInUrl}

apps/www/components/LaunchWeek/Ticket/ticket-copy.tsx

@@ -2,8 +2,6 @@ import { useEffect, useState, useRef } from 'react'
 import cn from 'classnames'
 import { SITE_URL } from '~/lib/constants'
 import styleUtils from './utils.module.css'
-// import IconCopy from '~/components/LaunchWeek/Ticket/icons/icon-copy'
-import styles from './ticket-copy.module.css'
 import { IconCopy, IconCheck } from 'ui'
 
 type Props = {
@@ -24,22 +22,11 @@ export default function TicketCopy({ username }: Props) {
     }
   }, [])
 
-  // background: none;
-  // outline: none;
-  // border: none;
-  // z-index: 2;
-  // border-radius: var(--space-2x);
-  // width: 40px;
-  // display: flex;
-  // align-items: center;
-  // justify-content: center;
-  // margin-right: -10px;
-
   const copyButton = (
     <button
       type="button"
       name="Copy"
-      className="bg-[#E6E8EB] text-[#2e2e2e] text-xs w-21 flex items-center cursor-pointer py-1 px-2 rounded-lg"
+      className="bg-[#E6E8EB] text-[#2e2e2e] text-xs w-21 flex items-center cursor-pointer py-1 px-2 rounded-full"
       ref={buttonRef}
       onClick={() => {
         navigator.clipboard.writeText(url).then(() => {
@@ -69,7 +56,7 @@ export default function TicketCopy({ username }: Props) {
       className={cn(
         styleUtils.appear,
         styleUtils['appear-third'],
-        'bg-scaleA-200 h-8 rounded-xl border border-scale-1100 w-full overflow-hidden'
+        'bg-scaleA-200 h-8 rounded-full border border-scale-1100 w-full overflow-hidden'
       )}
       id="wayfinding--ticket-copy"
     >

apps/www/components/LaunchWeek/Ticket/ticket.module.css

@@ -153,3 +153,14 @@
   /* border-radius: calc(16px * var(--size)); */
   width: 100%;
 }
+
+.gold-text {
+  color: #f4cf72;
+  text-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 4px rgba(0, 0, 0, 0.1);
+}
+
+@media (min-width: 768px) {
+  .gold-text {
+    color: #e4b641;
+  }
+}

apps/www/components/LaunchWeek/lw7-bg-graphic.module.css

@@ -0,0 +1,5 @@
+.gradient-overlay::before {
+  background: linear-gradient(0deg, #1c1c1c 0%, #1c1c1c20 60%, transparent 100%),
+    linear-gradient(0deg, #1c1c1c 0%, #1c1c1c80 20%, #1c1c1c60 40%, #1c1c1c05 75%, transparent 100%),
+    linear-gradient(0deg, #1c1c1c 0%, #1c1c1c80 15%, #1c1c1c50 40%, #1c1c1c05 65%, transparent 100%);
+}