feat(web): styling invite screens

showtime-xyz · Oct 9, 2023 · ce651b2 · ce651b2
1 parent 6107040
commit ce651b2
Show file tree

Hide file tree

Showing 5 changed files with 381 additions and 1 deletion.
diff --git a/apps/next/src/pages/_app.tsx b/apps/next/src/pages/_app.tsx
@@ -37,6 +37,8 @@ import { CreatorChannelsMembersScreen } from "app/screens/creator-channels-membe
 import { CreatorChannelsMessageReactionsScreen } from "app/screens/creator-channels-message-reactions";
 import { CreatorChannelsSettingsScreen } from "app/screens/creator-channels-settings";
 import { CreatorChannelsShareScreen } from "app/screens/creator-channles-share";
+import { InviteCreatorTokenScreen } from "app/screens/creator-token/invite-creator-token";
+import { ReviewCreatorTokenScreen } from "app/screens/creator-token/review-creator-token";
 import { DetailsScreen } from "app/screens/details";
 import { DropScreen } from "app/screens/drop";
 import { DropEditDetailsScreen } from "app/screens/drop-edit-details";
@@ -54,7 +56,6 @@ import { PayoutsSetupScreen } from "app/screens/payouts/setup";
 import { QRCodeShareScreen } from "app/screens/qr-code-share";
 import { RaffleScreen } from "app/screens/raffle";
 import { ReportScreen } from "app/screens/report";
-import { ReviewCreatorTokenScreen } from "app/screens/review-creator-token";
 import { AddEmailScreen } from "app/screens/settings-add-email";
 import { VerifyPhoneNumberScreen } from "app/screens/settings-verify-phone-number";
 import { prevRouteRef } from "app/utilities";
@@ -255,6 +256,7 @@ function App({ Component, pageProps, router }: AppProps) {
         <EditProfileScreen />
         <OnboardingScreen />
         <ReviewCreatorTokenScreen />
+        <InviteCreatorTokenScreen />
         <AddEmailScreen />
         <VerifyPhoneNumberScreen />
         <UnlockedChannelScreen />

diff --git a/apps/next/tailwind.config.js b/apps/next/tailwind.config.js
@@ -89,6 +89,10 @@ module.exports = {
         "zoom-in": "zoom-in 250ms",
       },
     },
+    letterSpacing: {
+      "extra-wide": "0.2em",
+      "ultra-wide": "0.3em",
+    },
   },
   plugins: [
     require("nativewind/tailwind/css"),

diff --git a/packages/app/components/creator-token/assets/invite.tsx b/packages/app/components/creator-token/assets/invite.tsx
@@ -0,0 +1,244 @@
+import * as React from "react";
+
+import Svg, {
+  SvgProps,
+  LinearGradient,
+  Stop,
+  ClipPath,
+  Rect,
+  Mask,
+  Path,
+  G,
+} from "react-native-svg";
+
+/* SVGR has dropped some elements not supported by react-native-svg: filter */
+const SvgComponent = (props: SvgProps) => (
+  <Svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    width={227}
+    height={119}
+    fill="none"
+    {...props}
+  >
+    <LinearGradient id="a">
+      <Stop offset={0} stopColor="#ffb42c" />
+      <Stop offset={1} stopColor="#9d6600" />
+    </LinearGradient>
+    <LinearGradient
+      xlinkHref="#a"
+      id="e"
+      x1={27.202}
+      x2={27.202}
+      y1={0.371}
+      y2={102.201}
+      gradientUnits="userSpaceOnUse"
+    />
+    <LinearGradient id="b">
+      <Stop offset={0.021} stopColor="#ffcb6c" />
+      <Stop offset={0.049} stopColor="#fdd764" />
+      <Stop offset={0.124} stopColor="#ffd24d" />
+      <Stop offset={0.155} stopColor="#e6a130" />
+      <Stop offset={0.172} stopColor="#edaf38" />
+      <Stop offset={0.191} stopColor="#ffe956" />
+      <Stop offset={0.222} stopColor="#ffec92" />
+      <Stop offset={0.26} stopColor="#fed749" />
+      <Stop offset={0.313} stopColor="#fdc93f" />
+      <Stop offset={0.362} stopColor="#f6c33d" />
+      <Stop offset={0.404} stopColor="#ed9f26" />
+      <Stop offset={0.464} stopColor="#e88a3f" />
+      <Stop offset={0.541} stopColor="#f4ce5e" />
+      <Stop offset={0.609} stopColor="#e4973c" />
+      <Stop offset={0.696} stopColor="#f1a819" />
+      <Stop offset={0.824} stopColor="#ffd480" />
+      <Stop offset={0.918} stopColor="#fbc73f" />
+      <Stop offset={0.998} stopColor="#f5e794" />
+    </LinearGradient>
+    <LinearGradient
+      xlinkHref="#b"
+      id="g"
+      x1={218.57}
+      x2={83.225}
+      y1={-80.894}
+      y2={-134.066}
+      gradientUnits="userSpaceOnUse"
+    />
+    <LinearGradient id="c">
+      <Stop offset={0.021} stopColor="#ffcb6c" />
+      <Stop offset={0.049} stopColor="#fdd764" />
+      <Stop offset={0.124} stopColor="#ffd24d" />
+      <Stop offset={0.155} stopColor="#e6a130" />
+      <Stop offset={0.172} stopColor="#edaf38" />
+      <Stop offset={0.191} stopColor="#ffe956" />
+      <Stop offset={0.26} stopColor="#fed749" />
+      <Stop offset={0.468} stopColor="#ffec92" />
+      <Stop offset={0.522} stopColor="#f4ce5e" />
+      <Stop offset={0.712} stopColor="#e4973c" />
+      <Stop offset={0.842} stopColor="#f1a819" />
+      <Stop offset={0.918} stopColor="#fbc73f" />
+      <Stop offset={0.998} stopColor="#f5e794" />
+    </LinearGradient>
+    <LinearGradient
+      xlinkHref="#c"
+      id="h"
+      x1={125.287}
+      x2={15.923}
+      y1={-41.427}
+      y2={-60.223}
+      gradientUnits="userSpaceOnUse"
+    />
+    <LinearGradient
+      xlinkHref="#a"
+      id="j"
+      x1={154.159}
+      x2={154.159}
+      y1={0.313}
+      y2={96.357}
+      gradientUnits="userSpaceOnUse"
+    />
+    <LinearGradient
+      xlinkHref="#b"
+      id="l"
+      x1={-26.335}
+      x2={101.32}
+      y1={-76.335}
+      y2={-126.484}
+      gradientUnits="userSpaceOnUse"
+    />
+    <LinearGradient
+      xlinkHref="#c"
+      id="m"
+      x1={61.647}
+      x2={164.797}
+      y1={-39.11}
+      y2={-56.838}
+      gradientUnits="userSpaceOnUse"
+    />
+    <ClipPath id="d">
+      <Rect width={375} height={844} x={-83.606} y={-107.369} rx={32} />
+    </ClipPath>
+    <Mask id="f" fill="#fff">
+      <Path
+        fillRule="evenodd"
+        d="M38.058 97.86c9.409-7.91 15.973-25.787 15.973-46.574 0-20.786-6.564-38.663-15.973-46.574V.372h-11.45v.012C12.065.982.373 23.544.373 51.286c0 27.744 11.692 50.304 26.235 50.903v.012h11.45z"
+        clipRule="evenodd"
+      />
+    </Mask>
+    <Mask id="k" fill="#fff">
+      <Path
+        fillRule="evenodd"
+        d="M143.92 92.263c-8.875-7.461-15.065-24.322-15.065-43.928s6.19-36.467 15.065-43.928V.313H154.719v.012c13.716.565 24.744 21.844 24.744 48.01 0 26.166-11.028 47.445-24.744 48.01v.012H143.92z"
+        clipRule="evenodd"
+      />
+    </Mask>
+    <Path fill="#1e1e1e" d="M0 0h227v119H0z" />
+    <G clipPath="url(#d)">
+      <Rect
+        width={375}
+        height={844}
+        x={-83.606}
+        y={-107.369}
+        fill="#fff"
+        rx={32}
+      />
+      <Rect
+        width={38.123}
+        height={12.385}
+        x={13.691}
+        y={93.215}
+        fill="#d9d9d9"
+        rx={6.192}
+      />
+      <Path
+        fill="url(#e)"
+        fillRule="evenodd"
+        d="M38.058 97.86c9.409-7.91 15.973-25.787 15.973-46.574 0-20.786-6.564-38.663-15.973-46.574V.372h-11.45v.012C12.065.982.373 23.544.373 51.286c0 27.744 11.692 50.304 26.235 50.903v.012h11.45z"
+        clipRule="evenodd"
+      />
+      <Path
+        fill="#121212"
+        d="m38.058 97.86-.836-.995-.464.39v.605zm0-93.148h-1.3v.606l.464.39zm0-4.34h1.3v-1.3h-1.3zm-11.45 0v-1.3h-1.3v1.3zm0 .012.054 1.298 1.246-.05V.383zm0 101.805h1.3v-1.247l-1.246-.052zm0 .012h-1.3v1.3h1.3zm11.45 0v1.3h1.3v-1.3zm14.673-50.915c0 10.262-1.621 19.781-4.385 27.687-2.77 7.923-6.658 14.137-11.124 17.892l1.673 1.99C43.837 94.7 47.936 88.021 50.8 79.831c2.87-8.208 4.53-18.02 4.53-28.545zM37.22 5.707c4.467 3.756 8.354 9.97 11.125 17.893 2.764 7.905 4.385 17.425 4.385 27.686h2.6c0-10.524-1.661-20.337-4.531-28.544-2.864-8.19-6.963-14.87-11.905-19.025zM36.759.371v4.341h2.6V.372zm-9.556 1.3h10.856v-2.6H27.202zm-.594 0h.594v-2.6h-.594zm1.3-1.287V.37h-2.6v.013zM1.673 51.286c0-13.705 2.89-26.069 7.52-35.034C13.85 7.228 20.087 1.953 26.661 1.682l-.107-2.597c-7.969.328-14.85 6.633-19.673 15.974C2.029 24.46-.927 37.25-.927 51.286zm24.989 49.604c-6.574-.271-12.81-5.545-17.47-14.57-4.628-8.965-7.519-21.328-7.519-35.034h-2.6c0 14.038 2.956 26.826 7.809 36.227 4.823 9.342 11.704 15.647 19.673 15.975zm1.246 1.311v-.012h-2.6v.012zm-.706-1.3h-.594v2.6h.594zm10.856 0H27.202v2.6h10.856zm-1.3-3.04v4.34h2.6v-4.34z"
+        mask="url(#f)"
+      />
+      <Path
+        fill="url(#g)"
+        stroke="#121212"
+        strokeWidth={1.3}
+        d="M64.236 51.287c0 13.976-2.986 26.596-7.783 35.699-4.812 9.133-11.348 14.566-18.396 14.566-7.047 0-13.583-5.433-18.396-14.566-4.796-9.103-7.783-21.724-7.783-35.7s2.987-26.596 7.783-35.699C24.474 6.454 31.01 1.022 38.057 1.022c7.048 0 13.584 5.432 18.396 14.565 4.797 9.103 7.783 21.724 7.783 35.7z"
+      />
+      <Path
+        fill="url(#h)"
+        stroke="#121212"
+        strokeWidth={1.3}
+        d="M59.827 51.286c0 11.844-2.355 22.534-6.134 30.24-3.799 7.747-8.924 12.28-14.383 12.28s-10.585-4.533-14.384-12.28c-3.778-7.706-6.133-18.396-6.133-30.24 0-11.843 2.355-22.533 6.133-30.238C28.725 13.3 33.85 8.768 39.31 8.768s10.584 4.532 14.383 12.28c3.779 7.705 6.134 18.395 6.134 30.238z"
+      />
+      <G filter="url(#i)">
+        <Path
+          fill="#121212"
+          d="M49.235 51.493c.415-.318.427-1.383.019-1.71l-2.74-2.19c-2.087-1.67-3.73-4.748-4.59-8.599l-1.13-5.054c-.167-.753-.751-.76-.936-.01l-1.24 5.028c-.945 3.83-2.657 6.872-4.78 8.494l-2.788 2.13c-.415.317-.427 1.383-.019 1.71l2.74 2.19c2.087 1.67 3.73 4.748 4.59 8.599l1.13 5.054c.167.753.751.76.936.01l1.24-5.028c.945-3.83 2.657-6.872 4.78-8.494z"
+        />
+      </G>
+      <G stroke="#121212" strokeWidth={0.405}>
+        <Path d="M29.805 3.373H19.043M26.785 5.886H16.023M24.422 8.4H13.66M22.152 10.913H11.391M20.918 13.425H10.156M19.508 15.939H8.746M18.1 18.452H7.337M16.904 20.965H6.143M16.062 23.478H5.301M15.223 25.99H4.46M14.38 28.504H3.62M13.691 31.017H2.93M13.184 33.53H2.421M12.678 36.043H1.916M12.172 38.556H1.41M12.172 41.07H1.41M12.172 43.582H1.41M12.172 46.096H1.41M12.059 48.609H1.296M11.95 51.122H1.187M11.836 53.635H1.074M11.726 56.148H.965M11.613 58.661H.852M12.242 61.174H1.48M12.871 63.687H2.109M12.941 66.2H2.18M13.012 68.713H2.25M13.69 71.226H2.927M14.369 73.74H3.607M15.049 76.252H4.287M15.726 78.765H4.965M16.84 81.279H6.078M17.955 83.792H7.193M19.07 86.305H8.31M20.6 88.818H9.837M22.129 91.331H11.367M23.984 93.844H13.223M26.264 96.357H15.502M29.305 98.87H18.543" />
+      </G>
+      <Path
+        fill="#000"
+        d="m201.109 92-.949-.783a3 3 0 0 0-1.79-.683L97.46 86.549a3.006 3.006 0 0 0-1.772.495c-1.84 1.212-1.796 3.932.088 5.074l42.962 26.049c.775.47 1.722.564 2.575.256l58.907-21.287c2.186-.79 2.682-3.658.889-5.136z"
+        opacity={0.2}
+      />
+      <Path
+        fill="url(#j)"
+        fillRule="evenodd"
+        d="M143.92 92.263c-8.875-7.461-15.065-24.322-15.065-43.928s6.19-36.467 15.065-43.928V.313H154.719v.012c13.716.565 24.744 21.844 24.744 48.01 0 26.166-11.028 47.445-24.744 48.01v.012H143.92z"
+        clipRule="evenodd"
+      />
+      <Path
+        fill="#121212"
+        d="m143.92 92.263.836-.995.464.39v.605zm0-87.856h1.3v.606l-.464.39zm0-4.094h-1.3v-1.3h1.3zm10.799 0v-1.3h1.3v1.3zm0 .012-.054 1.299-1.246-.052V.325zm0 96.02h-1.3v-1.247l1.246-.052zm0 .012h1.3v1.3h-1.3zm-10.799 0v1.3h-1.3v-1.3zm-13.765-48.022c0 9.671 1.527 18.642 4.131 26.09 2.611 7.464 6.271 13.312 10.47 16.843l-1.673 1.99c-4.675-3.93-8.547-10.244-11.251-17.976-2.71-7.75-4.277-17.013-4.277-26.947zm14.601-42.933c-4.199 3.53-7.859 9.379-10.47 16.844-2.604 7.447-4.131 16.418-4.131 26.089h-2.6c0-9.934 1.567-19.198 4.277-26.947 2.704-7.732 6.576-14.046 11.251-17.976zm.464-5.089v4.094h-2.6V.313zm8.939 1.3H143.92v-2.6h10.239zm.56 0h-.56v-2.6h.56zm-1.3-1.288V.313h2.6v.012zm24.744 48.01c0-12.917-2.725-24.566-7.084-33.01-4.389-8.502-10.253-13.447-16.414-13.701l.107-2.598c7.556.311 14.064 6.287 18.618 15.107 4.584 8.879 7.373 20.953 7.373 34.202zm-23.498 46.711c6.161-.254 12.025-5.2 16.414-13.702 4.359-8.443 7.084-20.092 7.084-33.009h2.6c0 13.25-2.789 25.323-7.373 34.202-4.554 8.82-11.062 14.796-18.618 15.107zm-1.246 1.31v-.01h2.6v.01zm.74-1.3h.56v2.6h-.56zm-10.239 0h10.239v2.6H143.92zm1.3-2.793v4.094h-2.6v-4.094z"
+        mask="url(#k)"
+      />
+      <Path
+        fill="url(#l)"
+        stroke="#121212"
+        strokeWidth={1.3}
+        d="M119.266 48.335c0 13.177 2.816 25.074 7.337 33.654 4.536 8.609 10.691 13.718 17.317 13.718 6.627 0 12.782-5.11 17.318-13.718 4.521-8.58 7.337-20.477 7.337-33.654s-2.816-25.074-7.337-33.653C156.702 6.072 150.547.963 143.92.963c-6.626 0-12.781 5.11-17.317 13.719-4.521 8.58-7.337 20.476-7.337 33.653z"
+      />
+      <Path
+        fill="url(#m)"
+        stroke="#121212"
+        strokeWidth={1.3}
+        d="M123.425 48.335c0 11.166 2.22 21.243 5.781 28.504 3.581 7.304 8.405 11.562 13.533 11.562 5.127 0 9.952-4.258 13.533-11.562 3.561-7.26 5.781-17.338 5.781-28.504s-2.22-21.243-5.781-28.504c-3.581-7.304-8.406-11.562-13.533-11.562-5.128 0-9.952 4.258-13.533 11.562-3.561 7.261-5.781 17.338-5.781 28.504z"
+      />
+      <G filter="url(#n)">
+        <Path
+          fill="#121212"
+          d="M133.38 48.53c-.392-.3-.403-1.304-.018-1.612l2.584-2.067c1.969-1.574 3.519-4.478 4.33-8.11l1.064-4.766c.159-.71.71-.717.884-.01l1.17 4.742c.891 3.613 2.505 6.481 4.508 8.012l2.629 2.009c.392.299.403 1.304.018 1.612l-2.584 2.066c-1.968 1.575-3.519 4.478-4.33 8.11l-1.064 4.767c-.159.71-.709.716-.884.01l-1.17-4.743c-.891-3.612-2.505-6.481-4.508-8.011z"
+        />
+      </G>
+      <G stroke="#121212" strokeWidth={0.405}>
+        <Path d="M151.707 3.144h10.15M154.555 5.515h10.15M156.782 7.885h10.15M158.924 10.255h10.15M160.088 12.626h10.15M161.416 14.996h10.15M162.746 17.366h10.15M163.873 19.736h10.15M164.666 22.107h10.15M165.459 24.477h10.15M166.254 26.847h10.15M166.903 29.217h10.15M167.381 31.588h10.15M167.86 33.958h10.15M168.336 36.328h10.15M168.336 38.699h10.15M168.336 41.069h10.15M168.336 43.44h10.15M168.442 45.81h10.15M168.547 48.18h10.15M168.653 50.55h10.15M168.758 52.92h10.15M168.864 55.29h10.15M168.27 57.66h10.15M167.678 60.031h10.15M167.612 62.401h10.15M167.545 64.772h10.15M166.905 67.142h10.15M166.264 69.512h10.15M165.623 71.882h10.15M164.983 74.252h10.15M163.934 76.623h10.15M162.881 78.993h10.15M161.83 81.364h10.15M160.387 83.733h10.15M158.944 86.104h10.15M157.196 88.474h10.15M155.045 90.844h10.15M152.178 93.215h10.15" />
+      </G>
+      <Path
+        fill="#fff"
+        d="m140.332 57.793-42.25-22.5v53.75l42.25 25.5 57-19.75v-53.75z"
+      />
+      <Path
+        stroke="#000"
+        d="m98.082 35.293 42.25 22.5 57-16.75m-99.25-5.75 23.01-8.468m-23.01 8.468v53.75l42.25 25.5 57-19.75v-53.75m0 0L176.928 29.58"
+      />
+      <Path
+        fill="#fff"
+        d="m140.3 57.657 41.907-11.65-3.49 21.597-8.827 26.358-25.488 5.843-13.054-1.492-15.168-35.682V44.728z"
+      />
+      <Path
+        stroke="#000"
+        d="m98.082 35.293 42.25 22.5 57-16.75v53.75l-57 19.75-42.25-25.5zm0 0 24.237-8.912M140.57 58.131v56.125"
+      />
+      <Path
+        fill="#f03232"
+        d="M175.638 93.77c-6.306 1.432-8.406 8.278-8.626 12.069l7.498-2.638c1.483-7.087 10.276-6.34 11.842-1.19.9 2.963 5.169 8.944 14.339 10.054 7.829.948 20.438-4.999 26.207-8.735l-1.813-6.387c-12.485 9.354-29.591 12.528-33.294 5.645-4.08-7.582-7.623-10.755-16.153-8.818zM120.811 96.326c1.584 2.343 1.292 6.176 1.126 7.676l-5.809-3.468c.1-2.1-.572-4.236-1.156-4.778-8.75 0-9.088 7.999-12.713 11.624-2.9 2.9-9.719 6.376-13.052 7.751l-4.875-4.75c14.845-4.868 14.302-9.976 17.927-14.351s8.559-4.578 10.461-4.386c2.934.296 5.856 1.378 8.091 4.682zM95.753 61.607c.685-.146 1.548.999 1.895 1.59v-6.053c-.22-.303-.734-.425-1.223-.303l-2.81-4.4-6.478 3.911c.57 1.1 1.919 3.606 2.75 4.828 1.039 1.528 5.01.61 5.866.427z"
+      />
+    </G>
+  </Svg>
+);
+export default SvgComponent;