feat(SFT-715): adding welcome screen update

solspace · Oct 17, 2023 · e1c0e19 · e1c0e19
1 parent 9b29ea8
commit e1c0e19
Show file tree

Hide file tree

Showing 16 changed files with 421 additions and 27 deletions.
diff --git a/packages/client/src/app/pages/forms/edit/index.tsx b/packages/client/src/app/pages/forms/edit/index.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Provider } from 'react-redux';
+import { Breadcrumb } from '@components/breadcrumbs/breadcrumbs';
 import { ModalProvider } from '@components/modals/modal.context';
 
 import { Edit } from './edit';
@@ -9,6 +10,7 @@ import { store } from './store';
 export const EditProvider: React.FC = () => {
   return (
     <Provider store={store}>
+      <Breadcrumb label="Forms" url="/forms" />
       <EditorGlobalStyles />
 
       <ModalProvider>

diff --git a/packages/client/src/app/pages/forms/list/index.tsx b/packages/client/src/app/pages/forms/list/index.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Breadcrumb } from '@components/breadcrumbs/breadcrumbs';
 import { ModalProvider } from '@components/modals/modal.context';
 import {
   fetchFieldPropertySections,
@@ -20,6 +21,7 @@ export const ListProvider: React.FC = () => {
 
   return (
     <ModalProvider>
+      <Breadcrumb label="Forms" url="/forms" />
       <List />
     </ModalProvider>
   );

diff --git a/packages/client/src/app/pages/welcome/check.icon.svg b/packages/client/src/app/pages/welcome/check.icon.svg
diff --git a/packages/client/src/app/pages/welcome/logo.animations.ts b/packages/client/src/app/pages/welcome/logo.animations.ts
@@ -0,0 +1,92 @@
+import type { SpringValues } from 'react-spring';
+import { useChain, useSpring, useSpringRef, useTrail } from 'react-spring';
+
+type SpringReturnType = {
+  opacity?: number;
+  scale?: number;
+  x?: number;
+  y?: number;
+};
+
+type TrailReturnType = SpringValues<{
+  opacity: number;
+  x: number;
+  y: number;
+}>;
+
+type UseLogoAnimation = {
+  background: SpringValues<SpringReturnType>;
+  border: SpringValues<SpringReturnType>;
+  lines: TrailReturnType[];
+  check: SpringValues<SpringReturnType>;
+  pencil: SpringValues<SpringReturnType>;
+  letters: SpringValues<SpringReturnType>[];
+};
+
+export const useLogoAnimation = (): UseLogoAnimation => {
+  const background = useSpring({
+    from: { opacity: 0, scale: 0 },
+    to: { opacity: 1, scale: 1 },
+  });
+
+  const borderRef = useSpringRef();
+  const border = useSpring({
+    ref: borderRef,
+    from: { opacity: 0, scale: 0 },
+    to: { opacity: 1, scale: 1 },
+    config: {
+      tension: 300,
+    },
+  });
+
+  const linesRef = useSpringRef();
+  const lines = useTrail(5, {
+    ref: linesRef,
+    from: { opacity: 0, x: -30, y: 10 },
+    to: { opacity: 1, x: 0, y: 0 },
+    config: {
+      tension: 300,
+    },
+  });
+
+  const checkRef = useSpringRef();
+  const check = useSpring({
+    ref: checkRef,
+    from: { opacity: 0, scale: 0, x: -30, y: 10 },
+    to: { opacity: 1, scale: 1, x: 0, y: 0 },
+    config: {
+      tension: 200,
+    },
+  });
+
+  const pencilRef = useSpringRef();
+  const pencil = useSpring({
+    ref: pencilRef,
+    from: { opacity: 0, scale: 0.6, x: 30, y: -40 },
+    to: { opacity: 1, scale: 1, x: 0, y: 0 },
+    config: {
+      tension: 130,
+    },
+  });
+
+  const lettersRef = useSpringRef();
+  const letters = useTrail(8, {
+    ref: lettersRef,
+    from: { opacity: 0, scale: 1.05 },
+    to: { opacity: 1, scale: 1 },
+  });
+
+  useChain(
+    [borderRef, linesRef, checkRef, pencilRef, lettersRef],
+    [0, 0.8, 0.6, 1, 0.8]
+  );
+
+  return {
+    background,
+    border,
+    lines,
+    check,
+    pencil,
+    letters,
+  };
+};
diff --git a/packages/client/src/app/pages/welcome/logo.tsx b/packages/client/src/app/pages/welcome/logo.tsx
@@ -0,0 +1,120 @@
+import React from 'react';
+import { animated } from 'react-spring';
+import styled from 'styled-components';
+
+import { useLogoAnimation } from './logo.animations';
+
+const CenteredPath = styled(animated.path)`
+  transform-origin: 54px;
+`;
+
+export const Logo: React.FC = () => {
+  const { border, lines, check, pencil, letters } = useLogoAnimation();
+
+  return (
+    <>
+      <svg
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        x="0"
+        y="0"
+        width="581"
+        height="121"
+        viewBox="0, 0, 581, 121"
+      >
+        <g>
+          <animated.path
+            style={letters[0]}
+            d="M137.033,21 L137.033,97.284 L153.807,97.284 L153.807,65.766 L185.752,65.766 L185.752,52.732 L153.807,52.732 L153.807,35.103 L190.667,35.103 L190.667,21 z"
+            fill="#058FFE"
+          />
+          <animated.path
+            style={letters[1]}
+            d="M196.65,42.047 L196.65,97.284 L211.821,97.284 L211.821,72.39 Q211.821,68.651 212.569,65.445 Q213.317,62.24 215.08,59.836 Q216.842,57.432 219.727,56.044 Q222.612,54.655 226.779,54.655 Q228.167,54.655 229.663,54.815 Q231.159,54.975 232.227,55.189 L232.227,41.086 Q230.411,40.552 228.915,40.552 Q226.031,40.552 223.36,41.406 Q220.689,42.261 218.338,43.81 Q215.988,45.36 214.171,47.55 Q212.355,49.74 211.287,52.304 L211.073,52.304 L211.073,42.047 z"
+            fill="#058FFE"
+          />
+          <animated.path
+            style={letters[2]}
+            d="M273.468,63.736 L248.788,63.736 Q248.894,62.133 249.482,60.103 Q250.07,58.074 251.512,56.257 Q252.954,54.441 255.358,53.212 Q257.762,51.984 261.395,51.984 Q266.95,51.984 269.675,54.975 Q272.399,57.967 273.468,63.736 z M248.788,73.352 L288.639,73.352 Q289.066,66.941 287.571,61.065 Q286.075,55.189 282.709,50.595 Q279.344,46.001 274.109,43.276 Q268.874,40.552 261.822,40.552 Q255.518,40.552 250.337,42.795 Q245.155,45.039 241.416,48.939 Q237.676,52.838 235.646,58.18 Q233.616,63.522 233.616,69.719 Q233.616,76.129 235.593,81.471 Q237.569,86.813 241.202,90.66 Q244.834,94.506 250.07,96.589 Q255.305,98.673 261.822,98.673 Q271.224,98.673 277.848,94.399 Q284.472,90.126 287.677,80.189 L274.322,80.189 Q273.574,82.754 270.262,85.051 Q266.95,87.348 262.356,87.348 Q255.946,87.348 252.527,84.036 Q249.108,80.724 248.788,73.352 z"
+            fill="#058FFE"
+          />
+          <animated.path
+            style={letters[3]}
+            d="M334.794,63.736 L310.114,63.736 Q310.221,62.133 310.808,60.103 Q311.396,58.074 312.838,56.257 Q314.281,54.441 316.684,53.212 Q319.088,51.984 322.721,51.984 Q328.277,51.984 331.001,54.975 Q333.725,57.967 334.794,63.736 z M310.114,73.352 L349.965,73.352 Q350.392,66.941 348.897,61.065 Q347.401,55.189 344.035,50.595 Q340.67,46.001 335.435,43.276 Q330.2,40.552 323.148,40.552 Q316.845,40.552 311.663,42.795 Q306.481,45.039 302.742,48.939 Q299.002,52.838 296.972,58.18 Q294.942,63.522 294.942,69.719 Q294.942,76.129 296.919,81.471 Q298.896,86.813 302.528,90.66 Q306.161,94.506 311.396,96.589 Q316.631,98.673 323.148,98.673 Q332.55,98.673 339.174,94.399 Q345.798,90.126 349.004,80.189 L335.649,80.189 Q334.901,82.754 331.589,85.051 Q328.277,87.348 323.682,87.348 Q317.272,87.348 313.853,84.036 Q310.434,80.724 310.114,73.352 z"
+            fill="#058FFE"
+          />
+          <animated.path
+            style={letters[4]}
+            d="M362.252,52.197 L362.252,97.284 L377.423,97.284 L377.423,52.197 L387.893,52.197 L387.893,42.047 L377.423,42.047 L377.423,38.735 Q377.423,35.317 378.759,33.874 Q380.094,32.432 383.192,32.432 Q386.077,32.432 388.748,32.752 L388.748,21.427 Q386.825,21.321 384.795,21.16 Q382.765,21 380.735,21 Q371.44,21 366.846,25.701 Q362.252,30.402 362.252,37.774 L362.252,42.047 L353.17,42.047 L353.17,52.197 z"
+            fill="#058FFE"
+          />
+          <animated.path
+            style={letters[5]}
+            d="M405.842,69.719 Q405.842,66.407 406.484,63.202 Q407.125,59.997 408.674,57.539 Q410.223,55.082 412.787,53.533 Q415.351,51.984 419.197,51.984 Q423.044,51.984 425.661,53.533 Q428.279,55.082 429.828,57.539 Q431.377,59.997 432.018,63.202 Q432.659,66.407 432.659,69.719 Q432.659,73.031 432.018,76.183 Q431.377,79.335 429.828,81.845 Q428.279,84.356 425.661,85.852 Q423.044,87.348 419.197,87.348 Q415.351,87.348 412.787,85.852 Q410.223,84.356 408.674,81.845 Q407.125,79.335 406.484,76.183 Q405.842,73.031 405.842,69.719 z M390.671,69.719 Q390.671,76.343 392.701,81.685 Q394.731,87.027 398.471,90.82 Q402.21,94.613 407.445,96.643 Q412.68,98.673 419.197,98.673 Q425.715,98.673 431.003,96.643 Q436.292,94.613 440.031,90.82 Q443.771,87.027 445.801,81.685 Q447.831,76.343 447.831,69.719 Q447.831,63.095 445.801,57.7 Q443.771,52.304 440.031,48.511 Q436.292,44.719 431.003,42.635 Q425.715,40.552 419.197,40.552 Q412.68,40.552 407.445,42.635 Q402.21,44.719 398.471,48.511 Q394.731,52.304 392.701,57.7 Q390.671,63.095 390.671,69.719 z"
+            fill="#058FFE"
+          />
+          <animated.path
+            style={letters[6]}
+            d="M454.455,42.048 L454.455,97.284 L469.626,97.284 L469.626,72.39 Q469.626,68.651 470.374,65.445 Q471.122,62.24 472.885,59.836 Q474.647,57.432 477.532,56.044 Q480.417,54.655 484.584,54.655 Q485.973,54.655 487.468,54.815 Q488.964,54.975 490.032,55.189 L490.032,41.086 Q488.216,40.552 486.72,40.552 Q483.836,40.552 481.165,41.406 Q478.494,42.261 476.143,43.81 Q473.793,45.36 471.976,47.55 Q470.16,49.74 469.092,52.304 L468.878,52.304 L468.878,42.048 z"
+            fill="#058FFE"
+          />
+          <animated.path
+            style={letters[7]}
+            d="M495.374,42.048 L495.374,97.284 L510.546,97.284 L510.546,65.232 Q510.546,61.172 511.721,58.661 Q512.896,56.15 514.552,54.815 Q516.208,53.479 517.971,52.999 Q519.734,52.518 520.802,52.518 Q524.435,52.518 526.305,53.746 Q528.174,54.975 528.976,57.005 Q529.777,59.035 529.884,61.439 Q529.991,63.843 529.991,66.3 L529.991,97.284 L545.162,97.284 L545.162,66.514 Q545.162,63.95 545.536,61.439 Q545.91,58.928 547.032,56.952 Q548.153,54.975 550.13,53.746 Q552.107,52.518 555.312,52.518 Q558.517,52.518 560.387,53.586 Q562.256,54.655 563.218,56.471 Q564.179,58.287 564.393,60.745 Q564.607,63.202 564.607,65.98 L564.607,97.284 L579.778,97.284 L579.778,60.317 Q579.778,54.975 578.282,51.182 Q576.787,47.39 574.116,45.039 Q571.445,42.689 567.705,41.62 Q563.966,40.552 559.585,40.552 Q553.816,40.552 549.596,43.33 Q545.376,46.107 542.918,49.74 Q540.675,44.612 536.348,42.582 Q532.021,40.552 526.785,40.552 Q521.337,40.552 517.116,42.902 Q512.896,45.253 509.905,49.526 L509.691,49.526 L509.691,42.048 z"
+            fill="#058FFE"
+          />
+        </g>
+        <g>
+          <CenteredPath
+            id="border"
+            style={border}
+            d="M38.21,8.235 C55.991,3.485 48.257,5.547 61.41,2.045 C81.122,-3.121 85.308,12.293 86.733,17.316 C87.578,20.376 88.397,23.444 89.221,26.511 L85.846,39.107 C84.005,32.333 82.23,25.54 80.268,18.799 C77.299,8.891 73.26,6.026 62.542,8.526 C52.269,11.295 21.955,19.37 18.061,20.461 C11.917,22.214 5.241,25.568 8.378,37.778 C11.495,49.432 20.359,82.504 25.555,101.889 C29.226,116.009 37.094,114.185 43.274,112.875 C48.704,111.465 80.987,102.813 87.871,100.899 C98.428,97.964 99.959,92.397 97.461,82.748 L96.649,79.683 L100.059,66.957 C101.32,71.668 102.579,76.379 103.838,81.09 C108.849,99.83 97.949,104.671 89.358,107.378 C84.703,108.639 62.438,114.602 45.371,119.171 C25.355,124.656 20.772,109.079 19.296,103.67 C17.82,98.262 5.477,52.147 2.127,39.56 C-3.194,19.969 11.809,15.443 16.267,14.164 C23.57,12.146 30.892,10.198 38.21,8.235 z"
+            fill="#058FFE"
+          />
+          <CenteredPath
+            id="Pencil"
+            style={pencil}
+            d="M104.896,9.029 C108.021,9.788 109.983,12.498 109.216,15.366 C108.45,18.234 91.809,79.661 91.809,79.661 L91.809,79.661 C89.131,83.319 86.452,86.977 83.789,90.648 C83.326,91.289 82.471,91.069 82.416,90.222 L80.555,76.613 C80.555,76.613 97.181,15.201 97.968,12.32 C98.754,9.438 101.772,8.27 104.896,9.029 z"
+            fill="#FF6624"
+          />
+          <CenteredPath
+            id="line-5"
+            style={lines[4]}
+            d="M33.991,89.16 L55.133,83.495 L57.764,93.316 L36.622,98.981 z"
+            fill="#058FFE"
+          />
+          <CenteredPath
+            id="line-1"
+            style={lines[0]}
+            d="M50.225,33.282 L71.367,27.617 L72.77,32.85 L51.628,38.516 z"
+            fill="#058FFE"
+          />
+          <CenteredPath
+            id="line-2"
+            style={lines[1]}
+            d="M53.591,45.845 L74.734,40.18 L76.137,45.416 L54.994,51.081 z"
+            fill="#058FFE"
+          />
+          <CenteredPath
+            id="check"
+            style={check}
+            d="M44.691,24.459 L34.761,41.811 L30.887,39.484 L28.718,43.126 L36.268,47.485 L39.034,42.686 L41.193,50.742 L28.637,54.107 L24.459,38.516 L33.43,36 L36.34,30.96 L19.598,35.446 L25.878,58.883 L45.968,53.499 L41.793,37.916 L48.4,26.471 z"
+            fill="#058FFE"
+          />
+          <CenteredPath
+            id="line-4"
+            style={lines[3]}
+            d="M30.933,77.748 L79.11,64.818 L77.427,70.967 L32.335,82.981 z"
+            fill="#058FFE"
+          />
+          <CenteredPath
+            id="line-3"
+            style={lines[2]}
+            d="M27.662,65.888 L78.053,52.385 L79.456,57.619 L29.064,71.122 z"
+            fill="#058FFE"
+          />
+        </g>
+      </svg>
+    </>
+  );
+};
diff --git a/packages/client/src/app/pages/welcome/welcome.animations.ts b/packages/client/src/app/pages/welcome/welcome.animations.ts
@@ -0,0 +1,59 @@
+import type { SpringValues } from 'react-spring';
+import { useChain, useSpring, useSpringRef, useTrail } from 'react-spring';
+
+type SpringReturnType = {
+  opacity?: number;
+  scale?: number;
+  x?: number;
+  y?: number;
+};
+
+type UseLogoAnimation = {
+  installed: {
+    icon: SpringValues<SpringReturnType>;
+    text: SpringValues<SpringReturnType>;
+  };
+  extra: SpringValues<SpringReturnType>;
+  buttons: SpringValues<SpringReturnType>[];
+};
+
+export const useWelcomeAnimations = (): UseLogoAnimation => {
+  const icon = useSpring({
+    from: { opacity: 0, scale: 0.5 },
+    to: { opacity: 1, scale: 1 },
+    delay: 1000,
+  });
+
+  const textRef = useSpringRef();
+  const text = useSpring({
+    ref: textRef,
+    from: { opacity: 0, y: 10 },
+    to: { opacity: 1, y: 0 },
+    delay: 1000,
+  });
+
+  const extraRef = useSpringRef();
+  const extra = useSpring({
+    ref: extraRef,
+    from: { opacity: 0, y: 10 },
+    to: { opacity: 1, y: 0 },
+  });
+
+  const buttonsRef = useSpringRef();
+  const buttons = useTrail(4, {
+    ref: buttonsRef,
+    from: { opacity: 0, y: 20 },
+    to: { opacity: 1, y: 0 },
+  });
+
+  useChain([textRef, extraRef, buttonsRef], [0, 2, 2.2]);
+
+  return {
+    installed: {
+      icon,
+      text,
+    },
+    extra,
+    buttons,
+  };
+};
diff --git a/packages/client/src/app/pages/welcome/welcome.styles.ts b/packages/client/src/app/pages/welcome/welcome.styles.ts
@@ -0,0 +1,66 @@
+import { animated } from 'react-spring';
+import {
+  borderRadius,
+  colors,
+  shadows,
+  spacings,
+} from '@ff-client/styles/variables';
+import styled from 'styled-components';
+
+export const WelcomeWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 20px;
+
+  height: 80vh;
+  padding: 40px;
+
+  background-color: ${colors.white};
+  border-radius: ${borderRadius.lg};
+  box-shadow: ${shadows.panel}, ${shadows.box};
+`;
+
+export const LogoWrapper = styled.div``;
+
+export const InstallWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${spacings.sm};
+
+  margin-top: 60px;
+
+  font-size: 22px;
+  fill: ${colors.teal500};
+`;
+
+export const InstallIcon = styled(animated.div)`
+  font-size: 30px;
+`;
+
+export const InstallText = styled(animated.div)``;
+
+export const ExtraContentWrapper = styled(animated.div)`
+  max-width: 60%;
+  margin-top: 40px;
+
+  color: ${colors.gray400};
+  font-style: italic;
+  text-align: center;
+`;
+
+export const ButtonsWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  gap: ${spacings.sm};
+
+  margin-top: 40px;
+`;
+
+export const Button = styled(animated.div)`
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+`;