style: new empty project screen (#2832)

web/components/project/card-list.tsx

@@ -4,10 +4,10 @@ import { observer } from "mobx-react-lite";
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { ProjectCard } from "components/project";
-import { EmptyState } from "components/common";
+import { EmptyState } from "components/project/empty-state";
 import { Loader } from "@plane/ui";
 // images
-import emptyProject from "public/empty-state/project.svg";
+import emptyProject from "public/empty-state/Project_full_screen.svg";
 // icons
 import { Plus } from "lucide-react";
 
@@ -52,11 +52,11 @@ export const ProjectCardList: FC<IProjectCardList> = observer((props) => {
       ) : (
         <EmptyState
           image={emptyProject}
-          title="No projects yet"
+          title="Why no fly 😔"
-          description="Get started by creating your first project"
+          description="Let’s take off, cap’n!"
           primaryButton={{
             icon: <Plus className="h-4 w-4" />,
-            text: "New Project",
+            text: "Start something new",
             onClick: () => commandPaletteStore.toggleCreateProjectModal(true),
           }}
         />

web/components/project/empty-state.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+
+import Image from "next/image";
+
+// ui
+import { Button } from "@plane/ui";
+
+type Props = {
+  title: string;
+  description?: React.ReactNode;
+  image: any;
+  primaryButton?: {
+    icon?: any;
+    text: string;
+    onClick: () => void;
+  };
+  secondaryButton?: React.ReactNode;
+  disabled?: boolean;
+};
+
+export const EmptyState: React.FC<Props> = ({
+  title,
+  description,
+  image,
+  primaryButton,
+  secondaryButton,
+  disabled = false,
+}) => (
+  <div className={`flex items-center lg:p-20 md:px-10 px-5 justify-center h-full w-full`}>
+    <div className="relative h-full w-full max-w-6xl">
+      <Image src={image} className="w-52 sm:w-60" alt={primaryButton?.text} layout="fill" />
+    </div>
+    <div className="absolute pt-[30vh] md:pt-[35vh] lg:pt-[45vh] text-center flex flex-col items-center w-full">
+      <h6 className="text-xl font-semibold mt-6">{title}</h6>
+      {description && <p className="text-custom-text-300 mb-7">{description}</p>}
+      <div className="flex items-center gap-4">
+        {primaryButton && (
+          <Button
+            size="lg"
+            variant="primary"
+            prependIcon={primaryButton.icon}
+            onClick={primaryButton.onClick}
+            disabled={disabled}
+          >
+            {primaryButton.text}
+          </Button>
+        )}
+        {secondaryButton}
+      </div>
+    </div>
+  </div>
+);

web/public/empty-state/Project_full_screen.svg

@@ -0,0 +1,31 @@
+<svg width="1053" height="653" viewBox="0 0 1053 653" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.3">
+<path d="M1033.18 69.7706H6.69667C6.24668 69.7706 5.81515 69.5629 5.49697 69.193C5.17878 68.8231 5 68.3215 5 67.7984C5 67.2753 5.17878 66.7737 5.49697 66.4039C5.81515 66.034 6.24668 65.8262 6.69667 65.8262H1033.18C1033.63 65.8262 1034.06 66.034 1034.38 66.4039C1034.7 66.7737 1034.88 67.2753 1034.88 67.7984C1034.88 68.3215 1034.7 68.8231 1034.38 69.193C1034.06 69.5629 1033.63 69.7706 1033.18 69.7706Z" fill="#E5E5E5"/>
+<path d="M258.869 652.805C258.419 652.805 257.987 652.598 257.669 652.228C257.351 651.858 257.172 651.356 257.172 650.833V1.97222C257.172 1.44916 257.351 0.947512 257.669 0.577649C257.987 0.207786 258.419 0 258.869 0C259.319 0 259.75 0.207786 260.068 0.577649C260.386 0.947512 260.565 1.44916 260.565 1.97222V650.833C260.565 651.356 260.386 651.858 260.068 652.228C259.75 652.598 259.319 652.805 258.869 652.805Z" fill="#E5E5E5"/>
+<path d="M529.005 475.358C528.634 475.358 528.279 475.207 528.016 474.938C527.754 474.669 527.606 474.304 527.606 473.924V1.95019C527.606 1.56972 527.754 1.20483 528.016 0.9358C528.279 0.666766 528.634 0.515625 529.005 0.515625C529.376 0.515625 529.732 0.666766 529.995 0.9358C530.257 1.20483 530.404 1.56972 530.404 1.95019V473.924C530.404 474.304 530.257 474.669 529.995 474.938C529.732 475.207 529.376 475.358 529.005 475.358Z" fill="#E5E5E5"/>
+<path d="M809.21 652.805C808.76 652.805 808.329 652.598 808.011 652.228C807.692 651.858 807.514 651.356 807.514 650.833V1.97222C807.514 1.44916 807.692 0.947512 808.011 0.577649C808.329 0.207786 808.76 0 809.21 0C809.66 0 810.092 0.207786 810.41 0.577649C810.728 0.947512 810.907 1.44916 810.907 1.97222V650.833C810.907 651.356 810.728 651.858 810.41 652.228C810.092 652.598 809.66 652.805 809.21 652.805Z" fill="#E5E5E5"/>
+<path d="M106.007 272.791H44.011C41.9867 272.789 40.0461 271.853 38.6147 270.189C37.1834 268.525 36.3782 266.269 36.376 263.916V178.875C36.3782 176.522 37.1834 174.266 38.6147 172.602C40.0461 170.938 41.9867 170.003 44.011 170H106.007C108.031 170.003 109.972 170.938 111.403 172.602C112.835 174.266 113.64 176.522 113.642 178.875V263.916C113.64 266.269 112.835 268.525 111.403 270.189C109.972 271.853 108.031 272.789 106.007 272.791Z" fill="#A3A3A3"/>
+<path d="M88.6312 592.862H26.635C24.6108 592.859 22.6701 591.923 21.2387 590.259C19.8074 588.596 19.0022 586.34 19 583.987V498.945C19.0022 496.592 19.8074 494.336 21.2387 492.673C22.6701 491.009 24.6108 490.073 26.635 490.07H88.6312C90.6554 490.073 92.5961 491.009 94.0274 492.673C95.4588 494.336 96.2639 496.592 96.2662 498.945V583.987C96.2639 586.34 95.4588 588.596 94.0274 590.259C92.5961 591.923 90.6554 592.859 88.6312 592.862Z" fill="#D4D4D4"/>
+<path d="M195.631 466.862H133.635C131.611 466.859 129.67 465.923 128.239 464.259C126.807 462.596 126.002 460.34 126 457.987V372.945C126.002 370.592 126.807 368.336 128.239 366.673C129.67 365.009 131.611 364.073 133.635 364.07H195.631C197.655 364.073 199.596 365.009 201.027 366.673C202.459 368.336 203.264 370.592 203.266 372.945V457.987C203.264 460.34 202.459 462.596 201.027 464.259C199.596 465.923 197.655 466.859 195.631 466.862Z" fill="#A3A3A3"/>
+<path d="M393.538 324.588H331.542C329.518 324.586 327.577 323.65 326.146 321.986C324.715 320.322 323.91 318.066 323.907 315.713V230.672C323.91 228.319 324.715 226.063 326.146 224.399C327.577 222.735 329.518 221.8 331.542 221.797H393.538C395.563 221.8 397.503 222.735 398.935 224.399C400.366 226.063 401.171 228.319 401.173 230.672V315.713C401.171 318.066 400.366 320.322 398.935 321.986C397.503 323.65 395.563 324.586 393.538 324.588Z" fill="#A3A3A3"/>
+<path d="M661.184 231.901H599.188C597.164 231.898 595.223 230.962 593.791 229.298C592.36 227.635 591.555 225.379 591.553 223.026V137.984C591.555 135.631 592.36 133.376 593.791 131.712C595.223 130.048 597.164 129.112 599.188 129.109H661.184C663.208 129.112 665.149 130.048 666.58 131.712C668.011 133.376 668.817 135.631 668.819 137.984V223.026C668.817 225.379 668.011 227.635 666.58 229.298C665.149 230.962 663.208 231.898 661.184 231.901Z" fill="#A3A3A3"/>
+<path d="M919.359 231.903H857.363C855.339 231.9 853.398 230.964 851.967 229.3C850.535 227.637 849.73 225.381 849.728 223.028V137.986C849.73 135.633 850.535 133.377 851.967 131.714C853.398 130.05 855.339 129.114 857.363 129.111H919.359C921.383 129.114 923.324 130.05 924.755 131.714C926.187 133.377 926.992 135.633 926.994 137.986V223.028C926.992 225.381 926.187 227.637 924.755 229.3C923.324 230.964 921.383 231.9 919.359 231.903Z" fill="#A3A3A3"/>
+<path d="M1044.71 554.403H982.711C980.686 554.4 978.746 553.464 977.314 551.8C975.883 550.137 975.078 547.881 975.076 545.528V460.486C975.078 458.133 975.883 455.877 977.314 454.214C978.746 452.55 980.686 451.614 982.711 451.611H1044.71C1046.73 451.614 1048.67 452.55 1050.1 454.214C1051.53 455.877 1052.34 458.133 1052.34 460.486V545.528C1052.34 547.881 1051.53 550.137 1050.1 551.8C1048.67 553.464 1046.73 554.4 1044.71 554.403Z" fill="#A3A3A3"/>
+<path d="M1029.64 255.573H967.645C965.621 255.57 963.68 254.634 962.249 252.97C960.818 251.306 960.013 249.051 960.01 246.698V161.656C960.013 159.303 960.818 157.047 962.249 155.384C963.68 153.72 965.621 152.784 967.645 152.781H1029.64C1031.67 152.784 1033.61 153.72 1035.04 155.384C1036.47 157.047 1037.27 159.303 1037.28 161.656V246.698C1037.27 249.051 1036.47 251.307 1035.04 252.97C1033.61 254.634 1031.67 255.57 1029.64 255.573Z" fill="#E5E5E5"/>
+<path d="M980.442 407.442H918.446C916.422 407.439 914.481 406.503 913.05 404.839C911.618 403.176 910.813 400.92 910.811 398.567V313.525C910.813 311.172 911.618 308.917 913.05 307.253C914.481 305.589 916.422 304.653 918.446 304.65H980.442C982.466 304.653 984.407 305.589 985.838 307.253C987.27 308.917 988.075 311.172 988.077 313.525V398.567C988.075 400.92 987.27 403.176 985.838 404.84C984.407 406.503 982.466 407.439 980.442 407.442Z" fill="#E5E5E5"/>
+<path d="M759.707 307.401H697.711C695.687 307.398 693.746 306.462 692.315 304.798C690.884 303.135 690.078 300.879 690.076 298.526V213.484C690.078 211.131 690.884 208.876 692.315 207.212C693.746 205.548 695.687 204.612 697.711 204.609H759.707C761.732 204.612 763.672 205.548 765.103 207.212C766.535 208.876 767.34 211.131 767.342 213.484V298.526C767.34 300.879 766.535 303.135 765.103 304.798C763.672 306.462 761.732 307.398 759.707 307.401Z" fill="#D4D4D4"/>
+<path d="M652.707 407.401H590.711C588.687 407.398 586.746 406.462 585.315 404.798C583.884 403.135 583.078 400.879 583.076 398.526V313.484C583.078 311.131 583.884 308.876 585.315 307.212C586.746 305.548 588.687 304.612 590.711 304.609H652.707C654.732 304.612 656.672 305.548 658.103 307.212C659.535 308.876 660.34 311.131 660.342 313.484V398.526C660.34 400.879 659.535 403.135 658.103 404.798C656.672 406.462 654.732 407.398 652.707 407.401Z" fill="#E5E5E5"/>
+<path d="M362.975 541.557H300.979C298.955 541.554 297.014 540.618 295.582 538.955C294.151 537.291 293.346 535.035 293.344 532.682V447.641C293.346 445.288 294.151 443.032 295.582 441.368C297.014 439.704 298.955 438.768 300.979 438.766H362.975C364.999 438.768 366.94 439.704 368.371 441.368C369.802 443.032 370.608 445.288 370.61 447.641V532.682C370.608 535.035 369.802 537.291 368.371 538.955C366.94 540.619 364.999 541.554 362.975 541.557Z" fill="#E5E5E5"/>
+<path d="M488.707 231.401H426.711C424.687 231.398 422.746 230.462 421.315 228.798C419.884 227.135 419.078 224.879 419.076 222.526V137.484C419.078 135.131 419.884 132.876 421.315 131.212C422.746 129.548 424.687 128.612 426.711 128.609H488.707C490.732 128.612 492.672 129.548 494.103 131.212C495.535 132.876 496.34 135.131 496.342 137.484V222.526C496.34 224.879 495.535 227.135 494.103 228.798C492.672 230.462 490.732 231.398 488.707 231.401Z" fill="#E5E5E5"/>
+<path d="M69.6312 428.862H7.635C5.61076 428.859 3.67008 427.923 2.23873 426.259C0.807378 424.596 0.00224541 422.34 0 419.987V334.945C0.00224541 332.592 0.807378 330.336 2.23873 328.673C3.67008 327.009 5.61076 326.073 7.635 326.07H69.6312C71.6554 326.073 73.5961 327.009 75.0274 328.673C76.4588 330.336 77.2639 332.592 77.2662 334.945V419.987C77.2639 422.34 76.4588 424.596 75.0274 426.259C73.5961 427.923 71.6554 428.859 69.6312 428.862Z" fill="#F1F1F1"/>
+<path d="M467.707 438.401H405.711C403.687 438.398 401.746 437.462 400.315 435.798C398.884 434.135 398.078 431.879 398.076 429.526V344.484C398.078 342.131 398.884 339.875 400.315 338.212C401.746 336.548 403.687 335.612 405.711 335.609H467.707C469.732 335.612 471.672 336.548 473.104 338.212C474.535 339.875 475.34 342.131 475.342 344.484V429.526C475.34 431.879 474.535 434.135 473.104 435.798C471.672 437.462 469.732 438.398 467.707 438.401Z" fill="#F1F1F1"/>
+<path d="M918.707 582.403H856.711C854.686 582.4 852.746 581.464 851.314 579.8C849.883 578.137 849.078 575.881 849.076 573.528V488.486C849.078 486.133 849.883 483.877 851.314 482.214C852.746 480.55 854.686 479.614 856.711 479.611H918.707C920.731 479.614 922.672 480.55 924.103 482.214C925.534 483.877 926.34 486.133 926.342 488.486V573.528C926.34 575.881 925.534 578.137 924.103 579.8C922.672 581.464 920.731 582.4 918.707 582.403Z" fill="#F1F1F1"/>
+<path d="M742.707 527.401H680.711C678.687 527.398 676.746 526.462 675.315 524.798C673.884 523.135 673.078 520.879 673.076 518.526V433.484C673.078 431.131 673.884 428.875 675.315 427.212C676.746 425.548 678.687 424.612 680.711 424.609H742.707C744.732 424.612 746.672 425.548 748.104 427.212C749.535 428.875 750.34 431.131 750.342 433.484V518.526C750.34 520.879 749.535 523.135 748.104 524.798C746.672 526.462 744.732 527.398 742.707 527.401Z" fill="#F1F1F1"/>
+<path d="M224.889 272.791H162.893C160.869 272.789 158.928 271.853 157.497 270.189C156.065 268.525 155.26 266.269 155.258 263.916V178.875C155.26 176.522 156.065 174.266 157.497 172.602C158.928 170.938 160.869 170.003 162.893 170H224.889C226.913 170.003 228.854 170.938 230.285 172.602C231.717 174.266 232.522 176.522 232.524 178.875V263.916C232.522 266.269 231.717 268.525 230.285 270.189C228.854 271.853 226.913 272.789 224.889 272.791Z" fill="#E5E5E5"/>
+<path d="M225.631 644.862H163.635C161.611 644.859 159.67 643.923 158.239 642.259C156.807 640.596 156.002 638.34 156 635.987V550.945C156.002 548.592 156.807 546.336 158.239 544.673C159.67 543.009 161.611 542.073 163.635 542.07H225.631C227.655 542.073 229.596 543.009 231.027 544.673C232.459 546.336 233.264 548.592 233.266 550.945V635.987C233.264 638.34 232.459 640.596 231.027 642.259C229.596 643.923 227.655 644.859 225.631 644.862Z" fill="#E5E5E5"/>
+<path d="M178.101 37.4731H81.3912C79.5912 37.4731 77.865 36.6419 76.5923 35.1625C75.3195 33.683 74.6045 31.6765 74.6045 29.5842C74.6045 27.4919 75.3195 25.4854 76.5923 24.0059C77.865 22.5265 79.5912 21.6953 81.3912 21.6953H178.101C179.901 21.6953 181.627 22.5265 182.9 24.0059C184.173 25.4854 184.888 27.4919 184.888 29.5842C184.888 31.6765 184.173 33.683 182.9 35.1625C181.627 36.6419 179.901 37.4731 178.101 37.4731Z" fill="#D4D4D4"/>
+<path d="M442.272 37.4731H345.562C343.762 37.4731 342.036 36.6419 340.763 35.1625C339.49 33.683 338.775 31.6765 338.775 29.5842C338.775 27.4919 339.49 25.4854 340.763 24.0059C342.036 22.5265 343.762 21.6953 345.562 21.6953H442.272C444.072 21.6953 445.798 22.5265 447.071 24.0059C448.344 25.4854 449.059 27.4919 449.059 29.5842C449.059 31.6765 448.344 33.683 447.071 35.1625C445.798 36.6419 444.072 37.4731 442.272 37.4731Z" fill="#D4D4D4"/>
+<path d="M720.483 37.4731H623.773C621.973 37.4731 620.247 36.6419 618.974 35.1625C617.701 33.683 616.986 31.6765 616.986 29.5842C616.986 27.4919 617.701 25.4854 618.974 24.0059C620.247 22.5265 621.973 21.6953 623.773 21.6953H720.483C722.283 21.6953 724.009 22.5265 725.282 24.0059C726.555 25.4854 727.27 27.4919 727.27 29.5842C727.27 31.6765 726.555 33.683 725.282 35.1625C724.009 36.6419 722.283 37.4731 720.483 37.4731Z" fill="#D4D4D4"/>
+<path d="M990.77 37.4731H894.06C892.26 37.4731 890.534 36.6419 889.261 35.1625C887.988 33.683 887.273 31.6765 887.273 29.5842C887.273 27.4919 887.988 25.4854 889.261 24.0059C890.534 22.5265 892.26 21.6953 894.06 21.6953H990.77C992.57 21.6953 994.296 22.5265 995.569 24.0059C996.842 25.4854 997.557 27.4919 997.557 29.5842C997.557 31.6765 996.842 33.683 995.569 35.1625C994.296 36.6419 992.57 37.4731 990.77 37.4731Z" fill="#D4D4D4"/>
+</g>
+</svg>