[WEB-4488] feat: brand revamp (#7544)

* chore: empty state asset and theme improvement (#7542)

* chore: empty state asset and theme improvement

* chore: upgrade modal improvement and code refactor

* feat: onboarding revamp and theme changes (#7541)

* refactor: consolidate password strength indicator into shared UI package

* chore: remove old password strength meter implementations

* chore: update package dependencies for password strength refactor

* chore: code refactor

* chore: brand logo added

* chore:  terms and conditions refactor

* chore: auth form refactor

* chore: oauth enhancements and refactor

* chore: plane new logos added

* chore: auth input form field added to ui package

* chore: password input component added

* chore: web auth refactor

* chore: update brand colors and remove onboarding-specific styles

* chore: clean up unused assets

* chore: profile menu text overflow

* chore: theme related changes

* chore: logo spinner updated

* chore: onboarding constant and types updated

* chore: theme changes and code refactor

* feat: onboarding flow revamp

* fix:  build error and code refactoring

* chore: code refactor

* fix: build error

* chore: consent option added to onboarding and code refactor

* fix: build fix

* chore: code refactor

* chore: auth screen revamp and code refactor

* chore: onboarding enhancements

* chore: code refactor

* chore: onboarding logic improvement

* chore: code refactor

* fix: onboarding pre release improvements

* chore: color token updated

* chore: color token updated

* chore: auth screen line height and size improvements

* chore: input height updated

* chore: n-progress theme updated

* chore: theme and logo enhancements

* chore: space auth and code refactor

* chore: update new brand empty states (#7543)

* [WEB-4585]chore: branding updates (#7540)

* chore: updated logo, og image, and loaders

* chore: updated branding colors

* chore: tour modal logo

* chore: updated logo spinner size

* chore: updated email templates logos and colors

* chore: code refactor

* fix: removed conditional hook render

* fix: space app loader

---------

Co-authored-by: Vamsi Krishna <46787868+vamsikrishnamathala@users.noreply.github.com>
Co-authored-by: vamsikrishnamathala <matalav55@gmail.com>

apps/web/public/empty-state/pages/all-filters-dark.svg

@@ -0,0 +1,50 @@
+<svg width="205" height="205" viewBox="0 0 205 205" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_935_236572)">
+<circle cx="102.5" cy="102.5" r="102.5" fill="url(#paint0_linear_935_236572)"/>
+<path d="M120.5 44.667H67.9997C64.9055 44.667 61.938 45.8962 59.7501 48.0841C57.5622 50.272 56.333 53.2395 56.333 56.3337V149.667C56.333 152.761 57.5622 155.729 59.7501 157.917C61.938 160.104 64.9055 161.334 67.9997 161.334H138C141.094 161.334 144.061 160.104 146.249 157.917C148.437 155.729 149.666 152.761 149.666 149.667V73.8337L120.5 44.667Z" stroke="#4E4E54" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M114.667 44.667V68.0003C114.667 71.0945 115.896 74.062 118.084 76.2499C120.272 78.4378 123.239 79.667 126.334 79.667H149.667" stroke="#4E4E54" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M91.3337 85.5H79.667" stroke="#4E4E54" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M126.334 108.833H79.667" stroke="#4E4E54" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M126.334 132.167H79.667" stroke="#4E4E54" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
+<g filter="url(#filter0_ddd_935_236572)">
+<circle cx="103.254" cy="173.828" r="31" fill="#006399"/>
+<path d="M88 164H118" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M94.667 174H111.334" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M99.667 184H106.334" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_ddd_935_236572" x="64.2539" y="137.828" width="78" height="79" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="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"/>
+<feMorphology radius="2" operator="erode" in="SourceAlpha" result="effect1_dropShadow_935_236572"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.24 0 0 0 0.051 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_935_236572"/>
+<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"/>
+<feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect2_dropShadow_935_236572"/>
+<feOffset dy="3"/>
+<feGaussianBlur stdDeviation="6"/>
+<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.055 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_935_236572" result="effect2_dropShadow_935_236572"/>
+<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"/>
+<feMorphology radius="8" operator="erode" in="SourceAlpha" result="effect3_dropShadow_935_236572"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="8"/>
+<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.078 0"/>
+<feBlend mode="normal" in2="effect2_dropShadow_935_236572" result="effect3_dropShadow_935_236572"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow_935_236572" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_935_236572" x1="102.5" y1="0" x2="102.5" y2="207.52" gradientUnits="userSpaceOnUse">
+<stop stop-color="#343434"/>
+<stop offset="1" stop-color="#171717" stop-opacity="0.16"/>
+</linearGradient>
+<clipPath id="clip0_935_236572">
+<rect width="205" height="205" fill="white"/>
+</clipPath>
+</defs>
+</svg>

apps/web/public/empty-state/pages/all-filters-light.svg

@@ -0,0 +1,45 @@
+<svg width="205" height="217" viewBox="0 0 205 217" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="102.5" cy="102.5" r="102.5" fill="url(#paint0_linear_935_236561)"/>
+<path d="M120.5 44.667H67.9997C64.9055 44.667 61.938 45.8962 59.7501 48.0841C57.5622 50.272 56.333 53.2395 56.333 56.3337V149.667C56.333 152.761 57.5622 155.729 59.7501 157.917C61.938 160.104 64.9055 161.334 67.9997 161.334H138C141.094 161.334 144.061 160.104 146.249 157.917C148.437 155.729 149.666 152.761 149.666 149.667V73.8337L120.5 44.667Z" stroke="#D1D6E0" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M114.667 44.667V68.0003C114.667 71.0945 115.896 74.062 118.084 76.2499C120.272 78.4378 123.239 79.667 126.334 79.667H149.667" stroke="#D1D6E0" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M91.3337 85.5H79.667" stroke="#D1D6E0" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M126.334 108.833H79.667" stroke="#D1D6E0" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M126.334 132.167H79.667" stroke="#D1D6E0" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
+<g filter="url(#filter0_ddd_935_236561)">
+<circle cx="103.254" cy="173.828" r="31" fill="#006399"/>
+<path d="M88 164H118" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M94.667 174H111.334" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M99.667 184H106.334" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<filter id="filter0_ddd_935_236561" x="64.2539" y="137.828" width="78" height="79" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="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"/>
+<feMorphology radius="2" operator="erode" in="SourceAlpha" result="effect1_dropShadow_935_236561"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.24 0 0 0 0.051 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_935_236561"/>
+<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"/>
+<feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect2_dropShadow_935_236561"/>
+<feOffset dy="3"/>
+<feGaussianBlur stdDeviation="6"/>
+<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.055 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_935_236561" result="effect2_dropShadow_935_236561"/>
+<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"/>
+<feMorphology radius="8" operator="erode" in="SourceAlpha" result="effect3_dropShadow_935_236561"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="8"/>
+<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.078 0"/>
+<feBlend mode="normal" in2="effect2_dropShadow_935_236561" result="effect3_dropShadow_935_236561"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow_935_236561" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_935_236561" x1="102.5" y1="0" x2="102.5" y2="207.52" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F7F7F7"/>
+<stop offset="1" stop-color="#F8F9FA" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>

apps/web/public/empty-state/pages/all-filters.svg

@@ -1,45 +0,0 @@
-<svg width="206" height="217" viewBox="0 0 206 217" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="103.5" cy="102.5" r="102.5" fill="url(#paint0_linear_8002_162251)"/>
-<path d="M118.625 40.5H65.5C62.1848 40.5 59.0054 41.817 56.6612 44.1612C54.317 46.5054 53 49.6848 53 53V153C53 156.315 54.317 159.495 56.6612 161.839C59.0054 164.183 62.1848 165.5 65.5 165.5H140.5C143.815 165.5 146.995 164.183 149.339 161.839C151.683 159.495 153 156.315 153 153V74.875L118.625 40.5Z" stroke="#80838D" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M115.5 40.5V78H153" stroke="#80838D" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M128 109.25H78" stroke="#80838D" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M128 134.25H78" stroke="#80838D" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M90.5 84.25H78" stroke="#80838D" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
-<g filter="url(#filter0_ddd_8002_162251)">
-<circle cx="103.754" cy="173.828" r="31" fill="#3A5BC7"/>
-<path d="M92.75 166.5H115.25" stroke="#F9F9FB" stroke-width="3.57143" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M97.75 174H110.25" stroke="#F9F9FB" stroke-width="3.57143" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M101.5 181.5H106.5" stroke="#F9F9FB" stroke-width="3.57143" stroke-linecap="round" stroke-linejoin="round"/>
-</g>
-<defs>
-<filter id="filter0_ddd_8002_162251" x="64.7539" y="137.828" width="78" height="79" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="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"/>
-<feMorphology radius="2" operator="erode" in="SourceAlpha" result="effect1_dropShadow_8002_162251"/>
-<feOffset dy="2"/>
-<feGaussianBlur stdDeviation="1.5"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.24 0 0 0 0.051 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_8002_162251"/>
-<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"/>
-<feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect2_dropShadow_8002_162251"/>
-<feOffset dy="3"/>
-<feGaussianBlur stdDeviation="6"/>
-<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.055 0"/>
-<feBlend mode="normal" in2="effect1_dropShadow_8002_162251" result="effect2_dropShadow_8002_162251"/>
-<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"/>
-<feMorphology radius="8" operator="erode" in="SourceAlpha" result="effect3_dropShadow_8002_162251"/>
-<feOffset dy="4"/>
-<feGaussianBlur stdDeviation="8"/>
-<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.078 0"/>
-<feBlend mode="normal" in2="effect2_dropShadow_8002_162251" result="effect3_dropShadow_8002_162251"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow_8002_162251" result="shape"/>
-</filter>
-<linearGradient id="paint0_linear_8002_162251" x1="103.5" y1="0" x2="103.5" y2="207.52" gradientUnits="userSpaceOnUse">
-<stop stop-color="#F7F7F7"/>
-<stop offset="1" stop-color="#F8F9FA" stop-opacity="0"/>
-</linearGradient>
-</defs>
-</svg>