Update PromoToast (#19311)

update PromoToast visual

apps/docs/pages/_app.tsx

@@ -10,14 +10,12 @@ import { AuthProvider, ThemeProvider, useTelemetryProps, useThemeSandbox } from
 import { useRouter } from 'next/router'
 import { useCallback, useEffect, useState } from 'react'
 import { AppPropsWithLayout } from 'types'
-import { CommandMenuProvider, useConsent } from 'ui'
+import { CommandMenuProvider, PortalToast, PromoToast, useConsent } from 'ui'
 import { TabsProvider } from 'ui/src/components/Tabs'
-import PortalToast from 'ui/src/layout/PortalToast'
 import Favicons from '~/components/Favicons'
 import SiteLayout from '~/layouts/SiteLayout'
 import { API_URL, IS_PLATFORM } from '~/lib/constants'
 import { post } from '~/lib/fetchWrappers'
-import PromoToast from 'ui/src/components/PromoToast'
 
 function MyApp({ Component, pageProps }: AppPropsWithLayout) {
   const router = useRouter()

apps/www/components/Sections/FunctionsUsecases.tsx

@@ -36,7 +36,7 @@ function FunctionsUsecases(props: Props) {
     <div className="grid grid-cols-12 lg:gap-16">
       <div className="col-span-12 pb-8 lg:col-span-5 xl:col-span-5">
         <h2 className="h3">{props.title}</h2>
-        <p className="p">{props.text}</p>
+        <div className="p">{props.text}</div>
 
         <div className="flex flex-col gap-3">
           {props.content.map((feat, i) => {

apps/www/pages/edge-functions/edge-functions.tsx

@@ -139,7 +139,7 @@ function Database() {
 
                     <div>
                       <h3 className="text-foreground text-lg">{item.title}</h3>
-                      <p className="text-foreground-light text-sm">{item.description}</p>
+                      <div className="text-foreground-light text-sm">{item.description}</div>
                     </div>
                   </div>
                 )
@@ -260,9 +260,7 @@ serve(async (req) => {
             footer={[
               <div className="grid grid-cols-12" key={0}>
                 <div className="col-span-12 mt-0 flex lg:col-span-6 xl:col-span-12 xl:mb-8">
-                  <p>
-                    <p className="text-foreground-light m-0">Libraries coming soon:</p>
-                  </p>
+                  <p className="text-foreground-light m-0">Libraries coming soon:</p>
                   <div className="ml-1 space-x-1">
                     <Badge dot={false}>Python</Badge>
                     <Badge dot={false}>Dart</Badge>

apps/www/supabase/functions/lwx-og/handler.tsx

@@ -17,6 +17,7 @@ const mono_font = fetch(new URL(MONO_FONT_URL, import.meta.url)).then((res) => r
 const BUCKET_FOLDER_VERSION = 'v1'
 
 const LW_TABLE = 'lwx_tickets'
+const LW_MATERIALIZED_VIEW = 'lwx_tickets_golden'
 
 const STYLING_CONGIF = {
   REG: {
@@ -66,7 +67,7 @@ export async function handler(req: Request) {
 
     // Get ticket data
     const { data, error } = await supabaseAdminClient
-      .from(LW_TABLE)
+      .from(LW_MATERIALIZED_VIEW)
       .select('name, ticketNumber, sharedOnTwitter, sharedOnLinkedIn, metadata')
       .eq('username', username)
       .maybeSingle()

apps/www/supabase/functions/lwx-ticket/handler.tsx

@@ -16,6 +16,7 @@ const font = fetch(new URL(FONT_URL, import.meta.url)).then((res) => res.arrayBu
 const mono_font = fetch(new URL(MONO_FONT_URL, import.meta.url)).then((res) => res.arrayBuffer())
 
 const LW_TABLE = 'lwx_tickets'
+const LW_MATERIALIZED_VIEW = 'lwx_tickets_golden'
 
 const STYLING_CONGIF = {
   REG: {
@@ -63,7 +64,7 @@ export async function handler(req: Request) {
 
     // Get ticket data
     const { data, error } = await supabaseAdminClient
-      .from(LW_TABLE)
+      .from(LW_MATERIALIZED_VIEW)
       .select('name, ticketNumber, sharedOnTwitter, sharedOnLinkedIn, metadata')
       .eq('username', username)
       .maybeSingle()

packages/common/constants/local-storage.ts

@@ -1,3 +1,4 @@
 export const LOCAL_STORAGE_KEYS = {
   TELEMETRY_CONSENT: 'supabase-consent',
+  HIDE_PROMO_TOAST: 'supabase-hide-promo-toast',
 }

packages/ui/src/components/PromoToast/PromoBg.tsx

@@ -8,155 +8,94 @@ const PromoBg = ({ className }: Props) => {
   return (
     <svg
       className={cn('', className)}
-      width="349"
+      width="358"
       height="195"
-      viewBox="0 0 349 195"
+      viewBox="0 0 358 195"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <g clip-path="url(#clip0_558_2902)">
-        <rect width="349" height="195" rx="8" fill="hsl(var(--background-alternative-default))" />
-        <path
-          d="M233.234 -24.4339L255.919 -26.0767M233.234 -24.4339L234.876 -1.74894M233.234 -24.4339L231.591 -47.119M233.234 -24.4339L210.548 -22.791M255.919 -26.0767L257.561 -3.3917M255.919 -26.0767L231.591 -47.119M255.919 -26.0767L278.603 -27.7194M255.919 -26.0767L280.246 -5.03439M255.919 -26.0767L276.961 -50.4044L278.603 -27.7194M257.561 -3.3917L234.876 -1.74894M257.561 -3.3917L259.204 19.2934M257.561 -3.3917L280.246 -5.03439M234.876 -1.74894L210.548 -22.791M234.876 -1.74894L236.519 20.9361M234.876 -1.74894L213.834 22.5788M234.876 -1.74894L259.204 19.2934M234.876 -1.74894L212.191 -0.106216M231.591 -47.119L208.906 -45.476M208.906 -45.476L210.548 -22.791M208.906 -45.476L186.22 -43.8331M210.548 -22.791L212.191 -0.106216M210.548 -22.791L187.863 -21.1483M210.548 -22.791L189.506 1.53674M283.531 40.3356L281.889 17.6506M283.531 40.3356L259.204 19.2934M283.531 40.3356L306.216 38.6929M283.531 40.3356L260.847 41.9783M283.531 40.3356L262.49 64.6634M259.204 19.2934L281.889 17.6506M259.204 19.2934L236.519 20.9361M259.204 19.2934L238.162 43.6211M259.204 19.2934L280.246 -5.03439M259.204 19.2934L260.847 41.9783M281.889 17.6506L304.573 16.0079M281.889 17.6506L280.246 -5.03439M280.246 -5.03439L278.603 -27.7194M280.246 -5.03439L304.573 16.0079M280.246 -5.03439L301.288 -29.3621M280.246 -5.03439L302.931 -6.67716M280.246 -5.03439L304.574 16.0079M278.603 -27.7194L276.96 -50.4044L299.645 -52.0471M278.603 -27.7194L301.288 -29.3621M262.49 64.6634L260.847 41.9783M262.49 64.6634L238.162 43.6211M238.162 43.6211L260.847 41.9783M238.162 43.6211L236.519 20.9361M238.162 43.6211L215.477 45.264M269.062 155.403L267.419 132.718M269.062 155.403L244.734 134.361M269.062 155.403L290.104 131.075M269.062 155.403L246.376 157.046M269.062 155.403L270.704 178.088M269.062 155.403L291.746 153.761M269.062 155.403L293.389 176.446M269.062 155.403L248.019 179.731M244.734 134.361L267.419 132.718M244.734 134.361L265.776 110.033M244.734 134.361L222.048 136.004M244.734 134.361L246.376 157.046M267.419 132.718L290.104 131.075M267.419 132.718L265.776 110.033M304.573 16.0079L306.216 38.6929M304.573 16.0079L327.258 14.3651L325.616 -8.31985M304.573 16.0079L302.931 -6.67716M304.573 16.0079L328.901 37.0501M306.216 38.6929L328.901 37.0501M306.216 38.6929L307.859 61.3781M299.645 -52.0471L301.288 -29.3621M299.645 -52.0471L322.33 -53.6899M301.288 -29.3621L302.931 -6.67716M301.288 -29.3621L323.973 -31.0049M301.288 -29.3621L325.616 -8.31985M236.519 20.9361L213.834 22.5788M290.104 131.075L265.776 110.033M290.104 131.075L291.746 153.761M213.834 22.5788L215.477 45.264M213.834 22.5788L191.149 24.2218M213.834 22.5788L212.191 -0.106216M213.834 22.5788L192.791 46.9067M215.477 45.264L192.791 46.9067M215.477 45.264L217.119 67.949M212.191 -0.106216L189.506 1.53674M302.931 -6.67716L325.616 -8.31985M302.931 -6.67716L304.574 16.0079M166.822 3.17947L144.137 4.82223M166.822 3.17947L168.465 25.8645M166.822 3.17947L165.18 -19.5058M144.137 4.82223L145.78 27.5072M144.137 4.82223L123.095 29.1501M144.137 4.82223L165.18 -19.5058M144.137 4.82223L142.495 -17.8628M145.78 27.5072L168.465 25.8645M145.78 27.5072L123.095 29.1501M145.78 27.5072L147.422 50.1922M168.465 25.8645L170.108 48.5495M168.465 25.8645L147.423 50.1922M168.465 25.8645L191.15 24.2217M168.465 25.8645L189.507 1.5367L191.15 24.2217M187.863 -21.1483L165.178 -19.5055M187.863 -21.1483L189.506 1.53674M187.863 -21.1483L186.22 -43.8331M165.178 -19.5055L166.821 3.1795M165.178 -19.5055L186.22 -43.8331M165.178 -19.5055L163.535 -42.1903L186.22 -43.8331M166.821 3.1795L189.506 1.53674M166.821 3.1795L168.464 25.8644M189.506 1.53674L168.464 25.8644M189.506 1.53674L191.149 24.2218M147.422 50.1922L145.779 27.5072L168.464 25.8644M147.422 50.1922L168.464 25.8644M147.422 50.1922L124.737 51.8349M147.422 50.1922L149.065 72.8772M147.422 50.1922L126.38 74.52M123.095 29.1501L124.737 51.8349M123.095 29.1501L100.41 30.7927M123.095 29.1501L121.452 6.46492M123.095 29.1501L144.136 4.82219M123.095 29.1501L102.052 53.4779M124.737 51.8349L102.052 53.4779M124.737 51.8349L126.38 74.52M165.18 -19.5058L142.495 -17.8628M165.18 -19.5058L163.537 -42.1905L140.852 -40.5478L142.495 -17.8628M147.423 50.1922L170.108 48.5495M147.423 50.1922L149.066 72.8772M170.108 48.5495L192.793 46.9067L191.15 24.2217M170.108 48.5495L171.751 71.2345M348.302 -9.9628L370.987 -11.6056M348.302 -9.9628L349.944 12.7222M348.302 -9.9628L346.659 -32.6476M370.987 -11.6056L372.629 11.0794M370.987 -11.6056L395.314 9.43697M370.987 -11.6056L346.659 -32.6476M370.987 -11.6056L393.671 -13.2482M370.987 -11.6056L369.343 -34.2903M372.629 11.0794L349.944 12.7222M372.629 11.0794L374.271 33.7647M372.629 11.0794L395.314 9.43697M349.944 12.7222L374.271 33.7647M349.944 12.7222L351.587 35.4074M349.944 12.7222L327.259 14.3652M349.944 12.7222L325.617 -8.31982L327.259 14.3652M323.973 -31.0049L346.658 -32.6476M323.973 -31.0049L325.616 -8.31985M323.973 -31.0049L322.33 -53.6899M346.658 -32.6476L348.301 -9.96262M346.658 -32.6476L322.33 -53.6899M346.658 -32.6476L345.015 -55.3326L322.33 -53.6899M348.301 -9.96262L325.616 -8.31985M348.Line truncated
-          stroke="hsl(var(--border-stronger))"
-          strokeWidth="0.284772"
-        />
-        <g filter="url(#filter0_d_558_2902)">
-          <path
-            d="M283.537 40.7317L306.078 39.0993L307.711 61.6412L286.801 85.8154L285.169 63.2736L262.627 64.906L283.537 40.7317Z"
-            fill="url(#paint0_radial_558_2902)"
-            fillOpacity="0.14"
-            shapeRendering="crispEdges"
-          />
-          <path
-            d="M244.983 134.164L265.892 109.99L243.35 111.622L241.718 89.0802L220.808 113.254L222.441 135.796L244.983 134.164Z"
-            fill="url(#paint1_radial_558_2902)"
-            fillOpacity="0.14"
-            shapeRendering="crispEdges"
-          />
-          <path
-            d="M238.453 43.9965L262.627 64.906L286.801 85.8154L310.976 106.725L312.608 129.267L290.066 130.899L265.892 109.99L241.718 89.0802L217.544 68.1708L215.911 45.6289L238.453 43.9965Z"
-            fill="url(#paint2_radial_558_2902)"
-            fillOpacity="0.14"
-            shapeRendering="crispEdges"
-          />
-          <path
-            d="M286.801 85.8154L307.711 61.6412L306.078 39.0993L283.537 40.7317L262.627 64.906M286.801 85.8154L285.169 63.2736L262.627 64.906M286.801 85.8154L262.627 64.906M286.801 85.8154L310.976 106.725L312.608 129.267L290.066 130.899L265.892 109.99M262.627 64.906L238.453 43.9965L215.911 45.6289L217.544 68.1708L241.718 89.0802M265.892 109.99L244.983 134.164L222.441 135.796L220.808 113.254L241.718 89.0802M265.892 109.99L243.35 111.622L241.718 89.0802M265.892 109.99L241.718 89.0802"
-            stroke="url(#paint3_linear_558_2902)"
-            strokeWidth="0.426545"
-            shapeRendering="crispEdges"
-          />
-        </g>
-        <rect
-          x="-5.47168"
-          y="-46.7805"
-          width="515.894"
-          height="339.196"
-          transform="rotate(-4.14192 -5.47168 -46.7805)"
-          fill="url(#paint4_radial_558_2902)"
-        />
-      </g>
-      <rect
-        x="0.5"
-        y="0.5"
-        width="348"
-        height="194"
-        rx="7.5"
-        stroke="hsl(var(--background-alternative-default))"
+      <path
+        d="M246.827 -15.6134H268.864M246.827 -15.6134V6.42289M246.827 -15.6134V-37.6498M246.827 -15.6134L224.791 -15.6134M268.864 -15.6134V6.42289M268.864 -15.6134L246.827 -37.6498M268.864 -15.6134L290.899 -15.6135M268.864 -15.6134L290.899 6.42285M268.864 -15.6134L290.901 -15.6134V-37.6498L268.864 -15.6134ZM268.864 -15.6134L290.901 6.42288M268.864 6.42289H246.827M268.864 6.42289L268.863 28.4593M268.864 6.42289L290.901 6.42288M268.864 6.42289L268.864 28.4592M246.827 6.42289L224.791 -15.6134M246.827 6.42289V28.4592M246.827 6.42289L224.791 28.4592M246.827 6.42289L268.863 28.4593M246.827 6.42289H224.791M246.827 -37.6498H224.791M224.791 -37.6498V-15.6134M224.791 -37.6498L202.754 -37.6498M224.791 -15.6134V6.42289M224.791 -15.6134L202.754 -15.6135M224.791 -15.6134L202.754 6.42288M290.899 50.4956V28.4593M290.899 50.4956L268.863 28.4593M290.899 50.4956H312.935M268.863 28.4593H290.899M268.863 28.4593L246.827 28.4592M268.863 28.4593L246.828 50.4956M290.899 28.4593L312.935 28.4593M290.899 28.4593V6.42285M290.899 6.42285V-15.6135M290.899 6.42285L312.935 28.4593M290.899 6.42285L312.935 -15.6134M290.899 6.42285L312.936 6.42288M290.899 -15.6135L290.899 -37.6498H312.935M290.899 -15.6135L312.935 -15.6134M268.864 72.5319V50.4956M268.864 72.5319L246.828 50.4956M268.864 72.5319L290.901 50.4956M246.828 50.4956H268.864M246.828 50.4956L246.827 28.4592M246.828 50.4956L268.864 28.4592M268.864 50.4956H290.901M268.864 50.4956V28.4592M268.864 160.677V138.641M268.864 160.677L246.828 138.641M268.864 160.677L290.901 138.641M268.864 160.677L246.827 160.677M268.864 160.677L268.864 182.714M268.864 160.677L290.901 160.677V138.641M268.864 160.677L290.901 182.713M268.864 160.677L246.827 182.714M246.828 138.641H268.864M246.828 138.641L268.864 116.605M246.828 138.641L246.827 160.677M268.864 138.641H290.901M268.864 138.641V116.605M312.935 28.4593V50.4956M312.935 28.4593L334.972 28.4592M312.935 28.4593L312.936 6.42288M312.935 28.4593L334.972 50.4956M312.935 50.4956L334.972 50.4956M312.935 50.4956L312.936 72.5319M312.935 -37.6498V-15.6134M312.935 -37.6498L334.972 -37.6498M312.935 -15.6134L312.936 6.42288M312.935 -15.6134L334.972 -15.6134M312.935 -15.6134L334.972 6.42289M246.827 28.4592H224.791M246.827 28.4592L246.827 50.4956H224.791M290.901 50.4956L268.864 28.4592M290.901 138.641L268.864 116.605M224.791 28.4592V50.4956M224.791 28.4592L202.754 28.4592M224.791 28.4592V6.42289M224.791 28.4592L202.754 50.4956M224.791 50.4956L202.754 50.4956M224.791 50.4956V72.5319M290.901 6.42288V28.4592H268.864M290.901 6.42288L268.864 28.4592M224.791 6.42289L202.754 6.42288M312.936 6.42288L334.972 6.42289M180.719 6.42285H158.682M180.719 6.42285V28.4592M180.719 6.42285V-15.6135M158.682 6.42285V28.4592M158.682 6.42285L136.646 28.4592M158.682 6.42285L180.719 -15.6135M158.682 6.42285L136.646 6.42289M158.682 6.42285L158.682 -15.6134M158.682 28.4592H180.719M158.682 28.4592L158.682 50.4956M158.682 28.4592L136.646 28.4592M180.719 28.4592L158.682 50.4956M180.719 28.4592V50.4956M180.719 28.4592L202.754 28.4592M180.719 28.4592L202.755 6.42294L202.754 28.4592M202.754 -15.6135H180.717M202.754 -15.6135V6.42288M202.754 -15.6135V-37.6498M180.717 -15.6135V6.42288M180.717 -15.6135L202.754 -37.6498M180.717 -15.6135V-37.6498H202.754M180.717 6.42288H202.754M180.717 6.42288V28.4592L202.754 6.42288M202.754 6.42288L202.754 28.4592M158.682 50.4956H136.646M158.682 50.4956L180.719 50.4956M158.682 50.4956V72.5319M158.682 50.4956L136.645 72.5319M136.646 28.4592V50.4956M136.646 28.4592L114.609 28.4592M136.646 28.4592V6.42289M136.646 28.4592L114.609 50.4956M136.646 50.4956H114.609M136.646 50.4956L136.645 72.5319M180.719 -15.6135L158.682 -15.6134M180.719 -15.6135V-37.6498L158.682 -37.6498M180.719 50.4956L202.755 50.4956L202.754 28.4592M180.719 50.4956V72.5319M357.009 6.42289H379.045M357.009 6.42289V28.4592M357.009 6.42289L357.009 -15.6134M357.009 6.42289L334.972 6.42289M379.045 6.42289V28.4592M379.045 6.42289L401.081 28.4593M379.045 6.42289L357.009 -15.6134M379.045 6.42289L401.081 6.42285M379.045 6.42289L379.045 -15.6135M379.045 28.4592H357.009M379.045 28.4592L379.045 50.4956M379.045 28.4592L401.081 28.4593M357.009 28.4592L379.045 50.4956M357.009 28.4592L334.972 6.42289M357.009 28.4592V50.4956M357.009 28.4592L334.972 28.4592M334.972 -15.6134H357.009M334.972 -15.6134V6.42289M334.972 -15.6134V-37.6498M357.009 -15.6134L334.972 -37.6498M357.009 -15.6134V-37.6498M357.009 -15.6134L379.045 -15.6135M334.972 6.42289L334.972 28.4592M334.972 -37.6498H357.009M379.045 50.4956H401.081M379.045 50.4956L357.009 50.4956M379.045 50.4956V72.5319M379.045 50.4956L401.081 72.5319M401.081 28.4593V50.4956M401.081 28.4593L423.117 28.4592M401.081 28.4593V6.42285M401.081 28.4593L423.118 50.4956M401.081 50.4956L423.118 50.4956M401.081 50.4956L401.081 72.5319M357.009 -37.6498L379.045 -37.6498M357.009 50.4956H334.972M357.009 50.4956L357.009 72.5319M202.754 28.4592L202.754 50.4956M202.754 50.4956V72.5319M202.754 50.4956L180.717 72.5319M202.754 50.4956H180.717V72.5319M334.972 28.4592L334.972 50.4956M334.972 50.4956V72.5319M334.972 
Line truncated
+        stroke="hsl(var(--border-stronger))"
+        strokeWidth="0.284772"
       />
+      <path
+        d="M290.876 50.8788H312.774V72.776L290.876 94.6733V72.776H268.979L290.876 50.8788Z"
+        fill="url(#paint0_radial_590_7684)"
+        fillOpacity="0.14"
+      />
+      <path
+        d="M247.082 138.468L268.979 116.571H247.082V94.6733L225.185 116.571V138.468H247.082Z"
+        fill="url(#paint1_radial_590_7684)"
+        fillOpacity="0.14"
+      />
+      <path
+        d="M247.082 50.8788L268.979 72.776L290.876 94.6733L312.774 116.571V138.468H290.876L268.979 116.571L247.082 94.6733L225.185 72.7761V50.8788L247.082 50.8788Z"
+        fill="url(#paint2_radial_590_7684)"
+        fillOpacity="0.14"
+      />
+      <path
+        d="M290.876 94.6733L312.774 72.776V50.8788H290.876L268.979 72.776M290.876 94.6733V72.776H268.979M290.876 94.6733L268.979 72.776M290.876 94.6733L312.774 116.571V138.468H290.876L268.979 116.571M268.979 72.776L247.082 50.8788L225.185 50.8788V72.7761L247.082 94.6733M268.979 116.571L247.082 138.468H225.185V116.571L247.082 94.6733M268.979 116.571H247.082V94.6733M268.979 116.571L247.082 94.6733"
+        stroke="url(#paint3_linear_590_7684)"
+        strokeWidth="0.426545"
+      />
+      <rect width="358" height="195" fill="url(#paint4_radial_590_7684)" />
       <defs>
-        {/* <filter
-          id="filter0_d_558_2902"
-          x="194.355"
-          y="17.5438"
-          width="139.808"
-          height="139.808"
-          filterUnits="userSpaceOnUse"
-          colorInterpolationFilters="sRGB"
-        >
-          <feFlood floodOpacity="0" result="BackgroundImageFix" />
-          <feColorMatrix
-            in="SourceAlpha"
-            type="matrix"
-            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-            result="hardAlpha"
-          />
-          <feOffset />
-          <feGaussianBlur stdDeviation="10.6636" />
-          <feComposite in2="hardAlpha" operator="out" />
-          <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
-          <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_558_2902" />
-          <feBlend
-            mode="normal"
-            in="SourceGraphic"
-            in2="effect1_dropShadow_558_2902"
-            result="shape"
-          />
-        </filter> */}
         <radialGradient
-          id="paint0_radial_558_2902"
+          id="paint0_radial_590_7684"
           cx="0"
           cy="0"
           r="1"
           gradientUnits="userSpaceOnUse"
-          gradientTransform="translate(217.594 47.173) rotate(46.9725) scale(272.067 241.104)"
+          gradientTransform="translate(263 73.5) rotate(-143.669) scale(159.507 135.774)"
         >
-          <stop stopColor="hsl(var(--foreground-lighter))" />
-          <stop offset="0.194164" stopColor="hsl(var(--foreground-lighter))" />
-          <stop offset="0.571134" />
-          <stop offset="1" stopColor="hsl(var(--foreground-lighter))" />
+          <stop stopColor="hsl(var(--foreground-default))" />
+          <stop offset="1" stopColor="hsl(var(--foreground-light))" />
         </radialGradient>
         <radialGradient
-          id="paint1_radial_558_2902"
+          id="paint1_radial_590_7684"
           cx="0"
           cy="0"
           r="1"
           gradientUnits="userSpaceOnUse"
-          gradientTransform="translate(217.594 47.173) rotate(46.9725) scale(272.067 241.104)"
+          gradientTransform="translate(263 73.5) rotate(-143.669) scale(159.507 135.774)"
         >
-          <stop stopColor="hsl(var(--foreground-lighter))" />
-          <stop offset="0.194164" stopColor="hsl(var(--foreground-lighter))" />
-          <stop offset="0.571134" />
-          <stop offset="1" stopColor="hsl(var(--foreground-lighter))" />
+          <stop stopColor="hsl(var(--foreground-default))" />
+          <stop offset="1" stopColor="hsl(var(--foreground-light))" />
         </radialGradient>
         <radialGradient
-          id="paint2_radial_558_2902"
+          id="paint2_radial_590_7684"
           cx="0"
           cy="0"
           r="1"
           gradientUnits="userSpaceOnUse"
-          gradientTransform="translate(217.594 47.173) rotate(46.9725) scale(272.067 241.104)"
+          gradientTransform="translate(263 73.5) rotate(-143.669) scale(159.507 135.774)"
         >
-          <stop stopColor="hsl(var(--foreground-lighter))" />
-          <stop offset="0.194164" stopColor="hsl(var(--foreground-lighter))" />
-          <stop offset="0.571134" />
-          <stop offset="1" stopColor="hsl(var(--foreground-lighter))" />
+          <stop stopColor="hsl(var(--foreground-default))" />
+          <stop offset="1" stopColor="hsl(var(--foreground-light))" />
         </radialGradient>
         <linearGradient
-          id="paint3_linear_558_2902"
-          x1="228.696"
-          y1="40.8579"
-          x2="319.801"
-          y2="121.437"
+          id="paint3_linear_590_7684"
+          x1="237.873"
+          y1="47.1631"
+          x2="320.272"
+          y2="131.405"
           gradientUnits="userSpaceOnUse"
         >
-          <stop stopColor="hsl(var(--border-stronger))" />
-          <stop offset="0.410781" stopColor="hsl(var(--border-default))" />
+          <stop stopColor="hsl(var(--foreground-lighter))" />
+          <stop offset="0.410781" stopColor="hsl(var(--border-stronger))" />
         </linearGradient>
         <radialGradient
-          id="paint4_radial_558_2902"
+          id="paint4_radial_590_7684"
           cx="0"
           cy="0"
           r="1"
           gradientUnits="userSpaceOnUse"
-          gradientTransform="translate(252.475 122.817) rotate(90) scale(127.553 194)"
+          gradientTransform="translate(266 95) rotate(135) scale(142.482 176.767)"
         >
-          <stop stopColor="hsl(var(--background-alternative-default))" stopOpacity="0" />
+          <stop stopOpacity="0" stopColor="hsl(var(--background-alternative-default))" />
           <stop offset="1" stopColor="hsl(var(--background-alternative-default))" />
         </radialGradient>
-        <clipPath id="clip0_558_2902">
-          <rect width="349" height="195" rx="8" fill="hsl(var(--foreground-default))" />
-        </clipPath>
       </defs>
     </svg>
   )

packages/ui/src/components/PromoToast/PromoToast.tsx

@@ -1,18 +1,23 @@
 import Image from 'next/image'
 import Link from 'next/link'
 import { useEffect, useState } from 'react'
-import { Button } from 'ui'
+import { Button, cn } from 'ui'
+import { LOCAL_STORAGE_KEYS } from 'common'
 import announcement from '../../layout/banners/data/Announcement.json'
 import CountdownComponent from '../CountdownWidget/Countdown'
 import PromoBg from './PromoBg'
 
+const LWXLogo =
+  'https://obuldanrptloktxcffvn.supabase.co/storage/v1/object/public/images/lwx/assets/lwx_logo.svg?t=2023-11-22T17%3A45%3A52.077Z'
+
 const PromoToast = () => {
   const [visible, setVisible] = useState(false)
-  const LWXLogo =
-    'https://obuldanrptloktxcffvn.supabase.co/storage/v1/object/public/images/lwx/assets/lwx_logo.svg?t=2023-11-22T17%3A45%3A52.077Z'
 
   useEffect(() => {
-    const shouldHide = localStorage?.getItem('supabase-hide-promo-toast') === 'true'
+    const shouldHide =
+      !localStorage?.getItem(LOCAL_STORAGE_KEYS.TELEMETRY_CONSENT) ||
+      localStorage?.getItem(LOCAL_STORAGE_KEYS.HIDE_PROMO_TOAST) === 'true'
+
     if (!shouldHide) {
       setVisible(true)
     }
@@ -20,7 +25,7 @@ const PromoToast = () => {
 
   const handleHide = () => {
     setVisible(false)
-    localStorage?.setItem('supabase-hide-promo-toast', 'true')
+    localStorage?.setItem(LOCAL_STORAGE_KEYS.HIDE_PROMO_TOAST, 'true')
   }
 
   if (!visible) {
@@ -28,7 +33,12 @@ const PromoToast = () => {
   }
 
   return (
-    <div className="grid gap-4 fixed z-50 bottom-8 right-8 w-[80vw] sm:w-[350px] bg-alternative hover:bg-alternative transition-colors border border-default rounded p-6 shadow-lg overflow-hidden">
+    <div
+      className={cn(
+        'opacity-0 translate-y-3 transition-all grid gap-4 fixed z-50 bottom-8 right-8 w-[80vw] sm:w-[350px] bg-alternative hover:bg-alternative border border-default rounded p-6 shadow-lg overflow-hidden',
+        visible && 'opacity-100 translate-y-0'
+      )}
+    >
       <div className="relative z-10 text-foreground flex flex-col text-base uppercase tracking-[1px]">
         <div className="flex gap-1.5 items-center">
           <p>Launch Week</p>
@@ -48,7 +58,7 @@ const PromoToast = () => {
           Dismiss
         </Button>
       </div>
-      <PromoBg className="absolute z-0 inset-0 w-full h-auto my-auto -right-3 left-auto" />
+      <PromoBg className="absolute z-0 inset-0 w-full h-auto my-auto -right-5 left-auto" />
     </div>
   )
 }

packages/ui/src/components/PromoToast/index.ts

@@ -1,3 +1,5 @@
 import PromoToast from './PromoToast'
 
+export { PromoToast }
+
 export default PromoToast

packages/ui/src/layout/PortalToast/PortalToast.tsx

@@ -20,6 +20,7 @@ const PortalToast = () => (
           paddingLeft: '16px',
           paddingRight: '16px',
           fontSize: '0.875rem',
+          opacity: '1',
         },
         error: {
           duration: 8000,