feat: change theme

This commit is contained in:
Nevo David 2024-08-28 18:17:26 +07:00
parent 09f6b72621
commit 580076ad09
79 changed files with 587 additions and 290 deletions

View File

@ -1,6 +1,6 @@
<svg width="366" height="167" viewBox="0 0 366 167" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M24.9659 30.4263V43.3825C26.9237 41.3095 29.3998 39.582 32.3941 38.2C35.3885 36.7028 39.0162 35.9543 43.2774 35.9543C47.1931 35.9543 50.8784 36.7028 54.3334 38.2C57.9036 39.6972 61.0131 42.1157 63.6619 45.4555C66.4259 48.6802 68.6141 52.9989 70.2264 58.4118C71.8387 63.8246 72.6449 70.3891 72.6449 78.1053C72.6449 83.6333 72.1266 89.1613 71.0902 94.6893C70.1688 100.217 68.4989 105.169 66.0804 109.546C63.6619 113.922 60.3796 117.492 56.2336 120.256C52.2028 122.905 47.1355 124.23 41.0316 124.23C36.6553 124.23 33.2003 123.654 30.6666 122.502C28.1329 121.235 26.2327 119.796 24.9659 118.183V160.162L0.0898438 166.381V30.4263H24.9659ZM32.7396 109.2C35.734 109.2 38.2676 108.221 40.3406 106.264C42.4136 104.191 44.026 101.542 45.1776 98.3171C46.4445 95.0924 47.3082 91.5222 47.7689 87.6066C48.3447 83.5757 48.6326 79.6025 48.6326 75.6868C48.6326 69.3526 48.0568 64.3429 46.9051 60.6575C45.8686 56.9722 44.6018 54.2658 43.1046 52.5383C41.6075 50.6956 40.1103 49.5439 38.6131 49.0833C37.2311 48.6226 36.137 48.3923 35.3309 48.3923C33.2579 48.3923 31.2425 49.1409 29.2846 50.638C27.3268 52.02 25.8872 54.1506 24.9659 57.0298V105.227C25.5417 106.148 26.463 107.07 27.7299 107.991C28.9967 108.797 30.6666 109.2 32.7396 109.2Z" fill="white"/>
<path d="M188.176 31.4627C191.055 42.5188 193.588 51.5593 195.777 58.5845C197.965 65.4945 199.807 71.3105 201.305 76.0323C202.917 80.7541 204.126 84.9001 204.932 88.4703C205.854 92.0405 206.314 96.0137 206.314 100.39C208.272 99.1232 210.172 97.7988 212.015 96.4168C213.858 94.9196 215.413 93.5376 216.679 92.2708H223.935C220.825 96.9926 217.543 100.908 214.088 104.018C210.633 107.012 207.293 109.661 204.069 111.964C201.996 116.456 198.829 119.623 194.567 121.466C190.306 123.308 185.872 124.23 181.266 124.23C176.083 124.23 171.649 123.539 167.964 122.157C164.279 120.659 161.227 118.702 158.808 116.283C156.505 113.749 154.777 110.87 153.626 107.646C152.474 104.421 151.898 101.023 151.898 97.4533C151.898 93.5376 152.819 90.4857 154.662 88.2975C156.62 85.9942 158.866 84.8426 161.399 84.8426C168.424 84.8426 171.937 87.6641 171.937 93.3073C171.937 95.15 171.304 96.7047 170.037 97.9716C168.77 99.2384 167.158 99.8718 165.2 99.8718C164.278 99.8718 163.3 99.7566 162.263 99.5263C161.342 99.1808 160.593 98.5474 160.017 97.6261C160.939 101.657 162.436 104.824 164.509 107.127C166.697 109.431 169.461 110.582 172.801 110.582C175.68 110.582 177.811 109.891 179.193 108.509C180.575 107.012 181.266 104.478 181.266 100.908C181.266 97.1078 180.92 93.7104 180.229 90.7161C179.653 87.6066 178.732 84.2091 177.465 80.5238C176.198 76.8385 174.644 72.4621 172.801 67.3948C170.958 62.2123 168.885 55.5326 166.582 47.3558C160.823 59.6786 153.222 67.5675 143.779 71.0225C143.779 71.9439 143.779 72.8652 143.779 73.7865C143.894 74.5927 143.952 75.4565 143.952 76.3778C143.952 83.0575 143.376 89.334 142.224 95.2076C141.072 100.966 139.115 106.033 136.351 110.41C133.702 114.671 130.247 118.068 125.986 120.602C121.724 123.02 116.484 124.23 110.265 124.23C106.004 124.23 101.916 123.596 98 122.329C94.1995 120.947 90.8021 118.759 87.8078 115.765C84.8134 112.655 82.3949 108.624 80.5523 103.672C78.8248 98.605 77.961 92.4436 77.961 85.188C77.961 80.2359 78.4793 74.9382 79.5158 69.295C80.5523 63.5367 82.4525 58.1814 85.2165 53.2293C87.9805 48.2771 91.7234 44.1887 96.4453 40.964C101.282 37.6242 107.444 35.9543 114.93 35.9543C122.646 35.9543 128.807 38.0273 133.414 42.1733C138.136 46.3193 141.303 52.9989 142.915 62.2123C146.946 61.2909 150.574 58.5269 153.798 53.9203C157.138 49.1984 160.305 42.8643 163.3 34.9177L188.176 31.4627ZM115.102 107.991C117.521 107.991 119.594 107.185 121.321 105.573C123.164 103.845 124.661 101.542 125.813 98.6626C126.964 95.6682 127.771 92.1556 128.231 88.1248C128.807 84.094 129.095 79.7176 129.095 74.9958V72.75C124.488 71.7135 122.185 68.3161 122.185 62.5578C122.185 58.8724 123.682 56.4539 126.677 55.3023C125.41 51.6169 123.855 49.1984 122.012 48.0468C120.285 46.8951 118.788 46.3193 117.521 46.3193C114.987 46.3193 112.799 47.5285 110.956 49.947C109.229 52.2504 107.789 55.2447 106.638 58.93C105.486 62.5002 104.622 66.4734 104.046 70.8498C103.586 75.2261 103.355 79.4297 103.355 83.4605C103.355 88.6431 103.701 92.8466 104.392 96.0713C105.198 99.296 106.177 101.772 107.329 103.5C108.48 105.227 109.747 106.436 111.129 107.127C112.511 107.703 113.835 107.991 115.102 107.991Z" fill="white"/>
<path d="M239.554 9.52348V36.818H250.092V43.728H239.554V95.5531C239.554 100.39 240.187 103.615 241.454 105.227C242.836 106.724 245.197 107.473 248.537 107.473C251.877 107.473 254.641 106.033 256.829 103.154C259.132 100.275 260.457 96.6471 260.802 92.2708H268.058C267.136 99.296 265.524 104.939 263.221 109.2C260.917 113.346 258.326 116.571 255.447 118.874C252.568 121.062 249.631 122.502 246.637 123.193C243.642 123.884 240.993 124.23 238.69 124.23C229.822 124.23 223.603 121.811 220.033 116.974C216.463 112.022 214.678 105.515 214.678 97.4533V43.728H209.15V36.818H214.678V12.9785L239.554 9.52348Z" fill="white"/>
<path d="M258.833 13.8422C258.833 10.0417 260.158 6.81706 262.806 4.16823C265.455 1.40422 268.68 0.0222168 272.48 0.0222168C276.281 0.0222168 279.506 1.40422 282.154 4.16823C284.918 6.81706 286.3 10.0417 286.3 13.8422C286.3 17.6427 284.918 20.8674 282.154 23.5162C279.506 26.1651 276.281 27.4895 272.48 27.4895C268.68 27.4895 265.455 26.1651 262.806 23.5162C260.158 20.8674 258.833 17.6427 258.833 13.8422ZM285.609 36.818V95.5531C285.609 100.39 286.243 103.615 287.51 105.227C288.892 106.724 291.253 107.473 294.592 107.473C296.09 107.473 297.184 107.358 297.875 107.127C298.681 106.897 299.372 106.667 299.948 106.436C300.063 107.012 300.12 107.588 300.12 108.164C300.12 108.74 300.12 109.315 300.12 109.891C300.12 112.77 299.602 115.131 298.566 116.974C297.644 118.817 296.377 120.314 294.765 121.466C293.268 122.502 291.598 123.193 289.755 123.539C288.028 123.999 286.358 124.23 284.746 124.23C275.878 124.23 269.659 121.811 266.089 116.974C262.518 112.022 260.733 105.515 260.733 97.4533V36.818H285.609ZM351.773 107.473C350.391 107.358 349.354 106.897 348.663 106.091C347.972 105.169 347.627 104.133 347.627 102.981C347.627 101.484 348.26 100.045 349.527 98.6626C350.794 97.1654 352.867 96.4168 355.746 96.4168C358.971 96.4168 361.389 97.5109 363.001 99.6991C364.614 101.772 365.42 104.248 365.42 107.127C365.42 108.97 365.074 110.87 364.383 112.828C363.692 114.671 362.598 116.398 361.101 118.011C359.604 119.508 357.761 120.775 355.573 121.811C353.385 122.732 350.851 123.193 347.972 123.193H300.293L334.152 46.1465H321.369C318.835 46.1465 316.704 46.3193 314.977 46.6648C313.365 46.8951 312.558 47.5285 312.558 48.565C312.558 49.0257 312.674 49.256 312.904 49.256C313.249 49.256 313.595 49.3712 313.94 49.6015C314.401 49.8318 314.747 50.2925 314.977 50.9835C315.322 51.6745 315.495 52.8838 315.495 54.6113C315.495 57.1449 314.689 58.9876 313.077 60.1393C311.579 61.2909 309.852 61.8668 307.894 61.8668C305.591 61.8668 303.345 61.1182 301.157 59.621C299.084 58.0087 298.047 55.5902 298.047 52.3655C298.047 50.638 298.393 48.9105 299.084 47.183C299.775 45.3403 300.811 43.6704 302.193 42.1733C303.575 40.5609 305.303 39.2941 307.376 38.3728C309.449 37.3363 311.867 36.818 314.631 36.818H362.138L329.142 109.891C329.833 109.891 330.812 109.949 332.079 110.064C333.346 110.179 334.67 110.294 336.052 110.41C337.55 110.525 338.989 110.64 340.371 110.755C341.868 110.87 343.193 110.928 344.344 110.928C346.417 110.928 348.145 110.697 349.527 110.237C351.024 109.776 351.773 108.855 351.773 107.473Z" fill="white"/>
<path d="M24.9659 30.4263V43.3825C26.9237 41.3095 29.3998 39.582 32.3941 38.2C35.3885 36.7028 39.0162 35.9543 43.2774 35.9543C47.1931 35.9543 50.8784 36.7028 54.3334 38.2C57.9036 39.6972 61.0131 42.1157 63.6619 45.4555C66.4259 48.6802 68.6141 52.9989 70.2264 58.4118C71.8387 63.8246 72.6449 70.3891 72.6449 78.1053C72.6449 83.6333 72.1266 89.1613 71.0902 94.6893C70.1688 100.217 68.4989 105.169 66.0804 109.546C63.6619 113.922 60.3796 117.492 56.2336 120.256C52.2028 122.905 47.1355 124.23 41.0316 124.23C36.6553 124.23 33.2003 123.654 30.6666 122.502C28.1329 121.235 26.2327 119.796 24.9659 118.183V160.162L0.0898438 166.381V30.4263H24.9659ZM32.7396 109.2C35.734 109.2 38.2676 108.221 40.3406 106.264C42.4136 104.191 44.026 101.542 45.1776 98.3171C46.4445 95.0924 47.3082 91.5222 47.7689 87.6066C48.3447 83.5757 48.6326 79.6025 48.6326 75.6868C48.6326 69.3526 48.0568 64.3429 46.9051 60.6575C45.8686 56.9722 44.6018 54.2658 43.1046 52.5383C41.6075 50.6956 40.1103 49.5439 38.6131 49.0833C37.2311 48.6226 36.137 48.3923 35.3309 48.3923C33.2579 48.3923 31.2425 49.1409 29.2846 50.638C27.3268 52.02 25.8872 54.1506 24.9659 57.0298V105.227C25.5417 106.148 26.463 107.07 27.7299 107.991C28.9967 108.797 30.6666 109.2 32.7396 109.2Z" fill="currentColor"/>
<path d="M188.176 31.4627C191.055 42.5188 193.588 51.5593 195.777 58.5845C197.965 65.4945 199.807 71.3105 201.305 76.0323C202.917 80.7541 204.126 84.9001 204.932 88.4703C205.854 92.0405 206.314 96.0137 206.314 100.39C208.272 99.1232 210.172 97.7988 212.015 96.4168C213.858 94.9196 215.413 93.5376 216.679 92.2708H223.935C220.825 96.9926 217.543 100.908 214.088 104.018C210.633 107.012 207.293 109.661 204.069 111.964C201.996 116.456 198.829 119.623 194.567 121.466C190.306 123.308 185.872 124.23 181.266 124.23C176.083 124.23 171.649 123.539 167.964 122.157C164.279 120.659 161.227 118.702 158.808 116.283C156.505 113.749 154.777 110.87 153.626 107.646C152.474 104.421 151.898 101.023 151.898 97.4533C151.898 93.5376 152.819 90.4857 154.662 88.2975C156.62 85.9942 158.866 84.8426 161.399 84.8426C168.424 84.8426 171.937 87.6641 171.937 93.3073C171.937 95.15 171.304 96.7047 170.037 97.9716C168.77 99.2384 167.158 99.8718 165.2 99.8718C164.278 99.8718 163.3 99.7566 162.263 99.5263C161.342 99.1808 160.593 98.5474 160.017 97.6261C160.939 101.657 162.436 104.824 164.509 107.127C166.697 109.431 169.461 110.582 172.801 110.582C175.68 110.582 177.811 109.891 179.193 108.509C180.575 107.012 181.266 104.478 181.266 100.908C181.266 97.1078 180.92 93.7104 180.229 90.7161C179.653 87.6066 178.732 84.2091 177.465 80.5238C176.198 76.8385 174.644 72.4621 172.801 67.3948C170.958 62.2123 168.885 55.5326 166.582 47.3558C160.823 59.6786 153.222 67.5675 143.779 71.0225C143.779 71.9439 143.779 72.8652 143.779 73.7865C143.894 74.5927 143.952 75.4565 143.952 76.3778C143.952 83.0575 143.376 89.334 142.224 95.2076C141.072 100.966 139.115 106.033 136.351 110.41C133.702 114.671 130.247 118.068 125.986 120.602C121.724 123.02 116.484 124.23 110.265 124.23C106.004 124.23 101.916 123.596 98 122.329C94.1995 120.947 90.8021 118.759 87.8078 115.765C84.8134 112.655 82.3949 108.624 80.5523 103.672C78.8248 98.605 77.961 92.4436 77.961 85.188C77.961 80.2359 78.4793 74.9382 79.5158 69.295C80.5523 63.5367 82.4525 58.1814 85.2165 53.2293C87.9805 48.2771 91.7234 44.1887 96.4453 40.964C101.282 37.6242 107.444 35.9543 114.93 35.9543C122.646 35.9543 128.807 38.0273 133.414 42.1733C138.136 46.3193 141.303 52.9989 142.915 62.2123C146.946 61.2909 150.574 58.5269 153.798 53.9203C157.138 49.1984 160.305 42.8643 163.3 34.9177L188.176 31.4627ZM115.102 107.991C117.521 107.991 119.594 107.185 121.321 105.573C123.164 103.845 124.661 101.542 125.813 98.6626C126.964 95.6682 127.771 92.1556 128.231 88.1248C128.807 84.094 129.095 79.7176 129.095 74.9958V72.75C124.488 71.7135 122.185 68.3161 122.185 62.5578C122.185 58.8724 123.682 56.4539 126.677 55.3023C125.41 51.6169 123.855 49.1984 122.012 48.0468C120.285 46.8951 118.788 46.3193 117.521 46.3193C114.987 46.3193 112.799 47.5285 110.956 49.947C109.229 52.2504 107.789 55.2447 106.638 58.93C105.486 62.5002 104.622 66.4734 104.046 70.8498C103.586 75.2261 103.355 79.4297 103.355 83.4605C103.355 88.6431 103.701 92.8466 104.392 96.0713C105.198 99.296 106.177 101.772 107.329 103.5C108.48 105.227 109.747 106.436 111.129 107.127C112.511 107.703 113.835 107.991 115.102 107.991Z" fill="currentColor"/>
<path d="M239.554 9.52348V36.818H250.092V43.728H239.554V95.5531C239.554 100.39 240.187 103.615 241.454 105.227C242.836 106.724 245.197 107.473 248.537 107.473C251.877 107.473 254.641 106.033 256.829 103.154C259.132 100.275 260.457 96.6471 260.802 92.2708H268.058C267.136 99.296 265.524 104.939 263.221 109.2C260.917 113.346 258.326 116.571 255.447 118.874C252.568 121.062 249.631 122.502 246.637 123.193C243.642 123.884 240.993 124.23 238.69 124.23C229.822 124.23 223.603 121.811 220.033 116.974C216.463 112.022 214.678 105.515 214.678 97.4533V43.728H209.15V36.818H214.678V12.9785L239.554 9.52348Z" fill="currentColor"/>
<path d="M258.833 13.8422C258.833 10.0417 260.158 6.81706 262.806 4.16823C265.455 1.40422 268.68 0.0222168 272.48 0.0222168C276.281 0.0222168 279.506 1.40422 282.154 4.16823C284.918 6.81706 286.3 10.0417 286.3 13.8422C286.3 17.6427 284.918 20.8674 282.154 23.5162C279.506 26.1651 276.281 27.4895 272.48 27.4895C268.68 27.4895 265.455 26.1651 262.806 23.5162C260.158 20.8674 258.833 17.6427 258.833 13.8422ZM285.609 36.818V95.5531C285.609 100.39 286.243 103.615 287.51 105.227C288.892 106.724 291.253 107.473 294.592 107.473C296.09 107.473 297.184 107.358 297.875 107.127C298.681 106.897 299.372 106.667 299.948 106.436C300.063 107.012 300.12 107.588 300.12 108.164C300.12 108.74 300.12 109.315 300.12 109.891C300.12 112.77 299.602 115.131 298.566 116.974C297.644 118.817 296.377 120.314 294.765 121.466C293.268 122.502 291.598 123.193 289.755 123.539C288.028 123.999 286.358 124.23 284.746 124.23C275.878 124.23 269.659 121.811 266.089 116.974C262.518 112.022 260.733 105.515 260.733 97.4533V36.818H285.609ZM351.773 107.473C350.391 107.358 349.354 106.897 348.663 106.091C347.972 105.169 347.627 104.133 347.627 102.981C347.627 101.484 348.26 100.045 349.527 98.6626C350.794 97.1654 352.867 96.4168 355.746 96.4168C358.971 96.4168 361.389 97.5109 363.001 99.6991C364.614 101.772 365.42 104.248 365.42 107.127C365.42 108.97 365.074 110.87 364.383 112.828C363.692 114.671 362.598 116.398 361.101 118.011C359.604 119.508 357.761 120.775 355.573 121.811C353.385 122.732 350.851 123.193 347.972 123.193H300.293L334.152 46.1465H321.369C318.835 46.1465 316.704 46.3193 314.977 46.6648C313.365 46.8951 312.558 47.5285 312.558 48.565C312.558 49.0257 312.674 49.256 312.904 49.256C313.249 49.256 313.595 49.3712 313.94 49.6015C314.401 49.8318 314.747 50.2925 314.977 50.9835C315.322 51.6745 315.495 52.8838 315.495 54.6113C315.495 57.1449 314.689 58.9876 313.077 60.1393C311.579 61.2909 309.852 61.8668 307.894 61.8668C305.591 61.8668 303.345 61.1182 301.157 59.621C299.084 58.0087 298.047 55.5902 298.047 52.3655C298.047 50.638 298.393 48.9105 299.084 47.183C299.775 45.3403 300.811 43.6704 302.193 42.1733C303.575 40.5609 305.303 39.2941 307.376 38.3728C309.449 37.3363 311.867 36.818 314.631 36.818H362.138L329.142 109.891C329.833 109.891 330.812 109.949 332.079 110.064C333.346 110.179 334.67 110.294 336.052 110.41C337.55 110.525 338.989 110.64 340.371 110.755C341.868 110.87 343.193 110.928 344.344 110.928C346.417 110.928 348.145 110.697 349.527 110.237C351.024 109.776 351.773 108.855 351.773 107.473Z" fill="currentColor"/>
</svg>

Before

Width:  |  Height:  |  Size: 7.4 KiB

After

Width:  |  Height:  |  Size: 7.4 KiB

View File

@ -11,8 +11,8 @@ export const metadata: Metadata = {
export default async function Index() {
return (
<div className="bg-[#0b0f1c] h-[951px] flex flex-col rounded-[4px] border border-[#172034]">
<div className="bg-[#0F1524] h-[64px]" />
<div className="bg-customColor3 h-[951px] flex flex-col rounded-[4px] border border-customColor6">
<div className="bg-customColor8 h-[64px]" />
<div className="flex-1 flex justify-center items-center text-[20px]">
Select a conversation and chat away.
</div>

View File

@ -20,7 +20,7 @@ export default async function AuthLayout({
<div className="relative z-[1] pr-[100px] flex justify-end items-center h-[100vh] w-[100vw] overflow-hidden">
<div className="w-[557px] flex h-[614px] bg-loginBox bg-contain">
<div className="w-full relative">
<div className="custom:fixed custom:text-left custom:left-[20px] custom:justify-start custom:top-[20px] absolute -top-[100px] text-white justify-center items-center w-full flex gap-[10px]">
<div className="custom:fixed custom:text-left custom:left-[20px] custom:justify-start custom:top-[20px] absolute -top-[100px] text-textColor justify-center items-center w-full flex gap-[10px]">
<Image
src={isGeneral() ? '/postiz.svg' : '/logo.svg'}
width={55}
@ -31,26 +31,49 @@ export default async function AuthLayout({
className={clsx(!isGeneral() ? 'mt-[12px]' : 'min-w-[80px]')}
>
{isGeneral() ? (
<img src="/postiz-text.svg" className="w-[80px]" />
<svg
width="80"
height="36.5"
viewBox="0 0 366 167"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M24.9659 30.4263V43.3825C26.9237 41.3095 29.3998 39.582 32.3941 38.2C35.3885 36.7028 39.0162 35.9543 43.2774 35.9543C47.1931 35.9543 50.8784 36.7028 54.3334 38.2C57.9036 39.6972 61.0131 42.1157 63.6619 45.4555C66.4259 48.6802 68.6141 52.9989 70.2264 58.4118C71.8387 63.8246 72.6449 70.3891 72.6449 78.1053C72.6449 83.6333 72.1266 89.1613 71.0902 94.6893C70.1688 100.217 68.4989 105.169 66.0804 109.546C63.6619 113.922 60.3796 117.492 56.2336 120.256C52.2028 122.905 47.1355 124.23 41.0316 124.23C36.6553 124.23 33.2003 123.654 30.6666 122.502C28.1329 121.235 26.2327 119.796 24.9659 118.183V160.162L0.0898438 166.381V30.4263H24.9659ZM32.7396 109.2C35.734 109.2 38.2676 108.221 40.3406 106.264C42.4136 104.191 44.026 101.542 45.1776 98.3171C46.4445 95.0924 47.3082 91.5222 47.7689 87.6066C48.3447 83.5757 48.6326 79.6025 48.6326 75.6868C48.6326 69.3526 48.0568 64.3429 46.9051 60.6575C45.8686 56.9722 44.6018 54.2658 43.1046 52.5383C41.6075 50.6956 40.1103 49.5439 38.6131 49.0833C37.2311 48.6226 36.137 48.3923 35.3309 48.3923C33.2579 48.3923 31.2425 49.1409 29.2846 50.638C27.3268 52.02 25.8872 54.1506 24.9659 57.0298V105.227C25.5417 106.148 26.463 107.07 27.7299 107.991C28.9967 108.797 30.6666 109.2 32.7396 109.2Z"
fill="currentColor"
/>
<path
d="M188.176 31.4627C191.055 42.5188 193.588 51.5593 195.777 58.5845C197.965 65.4945 199.807 71.3105 201.305 76.0323C202.917 80.7541 204.126 84.9001 204.932 88.4703C205.854 92.0405 206.314 96.0137 206.314 100.39C208.272 99.1232 210.172 97.7988 212.015 96.4168C213.858 94.9196 215.413 93.5376 216.679 92.2708H223.935C220.825 96.9926 217.543 100.908 214.088 104.018C210.633 107.012 207.293 109.661 204.069 111.964C201.996 116.456 198.829 119.623 194.567 121.466C190.306 123.308 185.872 124.23 181.266 124.23C176.083 124.23 171.649 123.539 167.964 122.157C164.279 120.659 161.227 118.702 158.808 116.283C156.505 113.749 154.777 110.87 153.626 107.646C152.474 104.421 151.898 101.023 151.898 97.4533C151.898 93.5376 152.819 90.4857 154.662 88.2975C156.62 85.9942 158.866 84.8426 161.399 84.8426C168.424 84.8426 171.937 87.6641 171.937 93.3073C171.937 95.15 171.304 96.7047 170.037 97.9716C168.77 99.2384 167.158 99.8718 165.2 99.8718C164.278 99.8718 163.3 99.7566 162.263 99.5263C161.342 99.1808 160.593 98.5474 160.017 97.6261C160.939 101.657 162.436 104.824 164.509 107.127C166.697 109.431 169.461 110.582 172.801 110.582C175.68 110.582 177.811 109.891 179.193 108.509C180.575 107.012 181.266 104.478 181.266 100.908C181.266 97.1078 180.92 93.7104 180.229 90.7161C179.653 87.6066 178.732 84.2091 177.465 80.5238C176.198 76.8385 174.644 72.4621 172.801 67.3948C170.958 62.2123 168.885 55.5326 166.582 47.3558C160.823 59.6786 153.222 67.5675 143.779 71.0225C143.779 71.9439 143.779 72.8652 143.779 73.7865C143.894 74.5927 143.952 75.4565 143.952 76.3778C143.952 83.0575 143.376 89.334 142.224 95.2076C141.072 100.966 139.115 106.033 136.351 110.41C133.702 114.671 130.247 118.068 125.986 120.602C121.724 123.02 116.484 124.23 110.265 124.23C106.004 124.23 101.916 123.596 98 122.329C94.1995 120.947 90.8021 118.759 87.8078 115.765C84.8134 112.655 82.3949 108.624 80.5523 103.672C78.8248 98.605 77.961 92.4436 77.961 85.188C77.961 80.2359 78.4793 74.9382 79.5158 69.295C80.5523 63.5367 82.4525 58.1814 85.2165 53.2293C87.9805 48.2771 91.7234 44.1887 96.4453 40.964C101.282 37.6242 107.444 35.9543 114.93 35.9543C122.646 35.9543 128.807 38.0273 133.414 42.1733C138.136 46.3193 141.303 52.9989 142.915 62.2123C146.946 61.2909 150.574 58.5269 153.798 53.9203C157.138 49.1984 160.305 42.8643 163.3 34.9177L188.176 31.4627ZM115.102 107.991C117.521 107.991 119.594 107.185 121.321 105.573C123.164 103.845 124.661 101.542 125.813 98.6626C126.964 95.6682 127.771 92.1556 128.231 88.1248C128.807 84.094 129.095 79.7176 129.095 74.9958V72.75C124.488 71.7135 122.185 68.3161 122.185 62.5578C122.185 58.8724 123.682 56.4539 126.677 55.3023C125.41 51.6169 123.855 49.1984 122.012 48.0468C120.285 46.8951 118.788 46.3193 117.521 46.3193C114.987 46.3193 112.799 47.5285 110.956 49.947C109.229 52.2504 107.789 55.2447 106.638 58.93C105.486 62.5002 104.622 66.4734 104.046 70.8498C103.586 75.2261 103.355 79.4297 103.355 83.4605C103.355 88.6431 103.701 92.8466 104.392 96.0713C105.198 99.296 106.177 101.772 107.329 103.5C108.48 105.227 109.747 106.436 111.129 107.127C112.511 107.703 113.835 107.991 115.102 107.991Z"
fill="currentColor"
/>
<path
d="M239.554 9.52348V36.818H250.092V43.728H239.554V95.5531C239.554 100.39 240.187 103.615 241.454 105.227C242.836 106.724 245.197 107.473 248.537 107.473C251.877 107.473 254.641 106.033 256.829 103.154C259.132 100.275 260.457 96.6471 260.802 92.2708H268.058C267.136 99.296 265.524 104.939 263.221 109.2C260.917 113.346 258.326 116.571 255.447 118.874C252.568 121.062 249.631 122.502 246.637 123.193C243.642 123.884 240.993 124.23 238.69 124.23C229.822 124.23 223.603 121.811 220.033 116.974C216.463 112.022 214.678 105.515 214.678 97.4533V43.728H209.15V36.818H214.678V12.9785L239.554 9.52348Z"
fill="currentColor"
/>
<path
d="M258.833 13.8422C258.833 10.0417 260.158 6.81706 262.806 4.16823C265.455 1.40422 268.68 0.0222168 272.48 0.0222168C276.281 0.0222168 279.506 1.40422 282.154 4.16823C284.918 6.81706 286.3 10.0417 286.3 13.8422C286.3 17.6427 284.918 20.8674 282.154 23.5162C279.506 26.1651 276.281 27.4895 272.48 27.4895C268.68 27.4895 265.455 26.1651 262.806 23.5162C260.158 20.8674 258.833 17.6427 258.833 13.8422ZM285.609 36.818V95.5531C285.609 100.39 286.243 103.615 287.51 105.227C288.892 106.724 291.253 107.473 294.592 107.473C296.09 107.473 297.184 107.358 297.875 107.127C298.681 106.897 299.372 106.667 299.948 106.436C300.063 107.012 300.12 107.588 300.12 108.164C300.12 108.74 300.12 109.315 300.12 109.891C300.12 112.77 299.602 115.131 298.566 116.974C297.644 118.817 296.377 120.314 294.765 121.466C293.268 122.502 291.598 123.193 289.755 123.539C288.028 123.999 286.358 124.23 284.746 124.23C275.878 124.23 269.659 121.811 266.089 116.974C262.518 112.022 260.733 105.515 260.733 97.4533V36.818H285.609ZM351.773 107.473C350.391 107.358 349.354 106.897 348.663 106.091C347.972 105.169 347.627 104.133 347.627 102.981C347.627 101.484 348.26 100.045 349.527 98.6626C350.794 97.1654 352.867 96.4168 355.746 96.4168C358.971 96.4168 361.389 97.5109 363.001 99.6991C364.614 101.772 365.42 104.248 365.42 107.127C365.42 108.97 365.074 110.87 364.383 112.828C363.692 114.671 362.598 116.398 361.101 118.011C359.604 119.508 357.761 120.775 355.573 121.811C353.385 122.732 350.851 123.193 347.972 123.193H300.293L334.152 46.1465H321.369C318.835 46.1465 316.704 46.3193 314.977 46.6648C313.365 46.8951 312.558 47.5285 312.558 48.565C312.558 49.0257 312.674 49.256 312.904 49.256C313.249 49.256 313.595 49.3712 313.94 49.6015C314.401 49.8318 314.747 50.2925 314.977 50.9835C315.322 51.6745 315.495 52.8838 315.495 54.6113C315.495 57.1449 314.689 58.9876 313.077 60.1393C311.579 61.2909 309.852 61.8668 307.894 61.8668C305.591 61.8668 303.345 61.1182 301.157 59.621C299.084 58.0087 298.047 55.5902 298.047 52.3655C298.047 50.638 298.393 48.9105 299.084 47.183C299.775 45.3403 300.811 43.6704 302.193 42.1733C303.575 40.5609 305.303 39.2941 307.376 38.3728C309.449 37.3363 311.867 36.818 314.631 36.818H362.138L329.142 109.891C329.833 109.891 330.812 109.949 332.079 110.064C333.346 110.179 334.67 110.294 336.052 110.41C337.55 110.525 338.989 110.64 340.371 110.755C341.868 110.87 343.193 110.928 344.344 110.928C346.417 110.928 348.145 110.697 349.527 110.237C351.024 109.776 351.773 108.855 351.773 107.473Z"
fill="currentColor"
/>
</svg>
) : (
<div className="text-[40px]">Gitroom</div>
)}
</div>
</div>
</div>
<div className="p-[32px] absolute w-[557px] h-[614px] text-white">
<div className="p-[32px] absolute w-[557px] h-[614px] text-textColor">
{children}
</div>
<div className="flex flex-1 flex-col">
<div className="flex-1 flex justify-end">
<div className="absolute top-0 bg-gradient-to-t from-[#354258] w-[1px] translate-x-[22px] h-full" />
<div className="absolute top-0 bg-gradient-to-t from-customColor9 w-[1px] translate-x-[22px] h-full" />
</div>
<div>
<div className="absolute right-0 bg-gradient-to-l from-[#354258] h-[1px] translate-y-[22px] w-full" />
<div className="absolute right-0 bg-gradient-to-l from-customColor9 h-[1px] translate-y-[22px] w-full" />
</div>
</div>
<div className="absolute top-0 bg-gradient-to-t from-[#354258] w-[1px] -translate-x-[22px] h-full" />
<div className="absolute right-0 bg-gradient-to-l from-[#354258] h-[1px] -translate-y-[22px] w-full" />
<div className="absolute top-0 bg-gradient-to-t from-customColor9 w-[1px] -translate-x-[22px] h-full" />
<div className="absolute right-0 bg-gradient-to-l from-customColor9 h-[1px] -translate-y-[22px] w-full" />
</div>
</div>
</>

View File

@ -0,0 +1,138 @@
:root {
.dark {
--color-primary: #000000;
--color-secondary: #090b13;
--color-text: #ffffff;
--color-third: #080b13;
--color-forth: #612ad5;
--color-fifth: #28344f;
--color-sixth: #0b101b;
--color-seventh: #7236f1;
--color-gray: #8c8c8c;
--color-input: #131b2c;
--color-input-text: #64748b;
--color-table-border: #1f2941;
--color-custom1: #324264;
--color-custom2: #141c2c;
--color-custom3: #0b0f1c;
--color-custom4: #8155dd;
--color-custom5: #e9e9f1;
--color-custom6: #172034;
--color-custom7: #7950f2;
--color-custom8: #0f1524;
--color-custom9: #354258;
--color-custom10: #e4b895;
--color-custom11: #8b90ff;
--color-custom12: #b7c1ff;
--color-custom13: #ffac30;
--color-custom14: #576a9a;
--color-custom15: #0a0a0a;
--color-custom16: #121a2d;
--color-custom17: #d3d3d3;
--color-custom18: #aaaaaa;
--color-custom19: #f97066;
--color-custom20: #121b2c;
--color-custom21: #506490;
--color-custom22: #b91c1c;
--color-custom23: #06080d;
--color-custom24: #eaff00;
--color-custom25: #2e3336;
--color-custom26: #1d9bf0;
--color-custom27: #71767b;
--color-custom28: #b69dec;
--color-custom29: #291259;
--color-custom30: #5826c2;
--color-custom31: #0f1727;
--color-custom32: #181818;
--color-custom33: #f2f2f2;
--color-custom34: #334155;
--color-custom35: #242424;
--color-custom36: #6b6b6b;
--color-custom37: #0b1416;
--color-custom38: #d9d9d9;
--color-custom39: #ffffff;
--color-custom40: #0e0e0e;
--color-custom41: #cebdf2;
--color-custom42: #32d583;
--color-custom43: #425379;
--color-custom44: #283450;
--color-custom45: #832ad5;
--color-custom46: #658dac;
--color-custom47: #182034;
--color-custom48: #080b14;
--color-custom49: #0a0b14;
--color-custom50: #262373;
--color-custom51: #4f46e5;
--color-custom52: #eaeef2;
--color-custom53: #7c7d86;
--color-custom54: #afb8c1;
}
.light {
--color-primary: #fff;
--color-secondary: #fff;
--color-text: #000;
--color-third: white;
--color-forth: #612ad5;
--color-fifth: #efefef;
--color-sixth: #fff;
--color-seventh: #7236f1;
--color-gray: #8c8c8c;
--color-input: #f8f8f8;
--color-input-text: #64748b;
--color-table-border: #efefef;
--color-custom1: #324264;
--color-custom2: #f8f8f8;
--color-custom3: #fff;
--color-custom4: #8155dd;
--color-custom5: #e9e9f1;
--color-custom6: #fff;
--color-custom7: #7950f2;
--color-custom8: #efefef;
--color-custom9: #354258;
--color-custom10: #e4b895;
--color-custom11: #8b90ff;
--color-custom12: #b7c1ff;
--color-custom13: #ffac30;
--color-custom14: #576a9a;
--color-custom15: #0a0a0a;
--color-custom16: #121a2d;
--color-custom17: #000;
--color-custom18: #000;
--color-custom19: #f97066;
--color-custom20: #F5F5F5;
--color-custom21: #506490;
--color-custom22: #b91c1c;
--color-custom23: #F5F5F5;
--color-custom24: #eaff00;
--color-custom25: #2e3336;
--color-custom26: #1d9bf0;
--color-custom27: #71767b;
--color-custom28: #b69dec;
--color-custom29: #291259;
--color-custom30: #efefef;
--color-custom31: #E0E0E0;
--color-custom32: #181818;
--color-custom33: #f2f2f2;
--color-custom34: #334155;
--color-custom35: #242424;
--color-custom36: #6b6b6b;
--color-custom37: #0b1416;
--color-custom38: #d9d9d9;
--color-custom39: #000;
--color-custom40: #fff;
--color-custom41: #cebdf2;
--color-custom42: #32d583;
--color-custom43: #425379;
--color-custom44: #283450;
--color-custom45: #832ad5;
--color-custom46: #658dac;
--color-custom47: #182034;
--color-custom48: #fff;
--color-custom49: #0a0b14;
--color-custom50: #262373;
--color-custom51: #4f46e5;
--color-custom52: #eaeef2;
--color-custom53: #7c7d86;
--color-custom54: #afb8c1;
}
}

View File

@ -1,11 +1,12 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@import "./colors.scss";
@import "./polonto.css";
body,
html {
background-color: #000;
@apply bg-primary;
}
.box {
position: relative;
@ -33,11 +34,11 @@ html {
}
.showbox {
color: black;
@apply text-primary;
}
.showbox:after {
@apply bg-textColor;
opacity: 1;
background: white;
transition: all 0.3s ease-in-out;
}
.table1 {
@ -46,10 +47,9 @@ html {
}
.table1 thead {
background-color: #0f1524;
@apply bg-customColor8 border-b border-b-fifth;
height: 44px;
font-size: 12px;
border-bottom: 1px solid #28344f;
}
.table1 thead th,
.table1 tbody td {
@ -63,21 +63,24 @@ html {
}
.swal2-modal {
background-color: black !important;
border: 2px solid #0b101b;
@apply bg-primary #{!important};
@apply border-b-[2px] border-b-sixth;
}
.swal2-modal * {
color: white !important;
@apply text-textColor #{!important};
}
.swal2-icon {
color: white !important;
border-color: white !important;
@apply text-textColor bg-primary #{!important};
}
.swal2-cancel {
@apply text-white #{!important};
}
.swal2-confirm {
background-color: #262373 !important;
@apply bg-customColor50 #{!important};
@apply text-white #{!important};
}
.w-md-editor-text {
@ -85,12 +88,11 @@ html {
}
.react-tags {
@apply border border-fifth bg-input;
position: relative;
border: 1px solid #28344f;
padding-left: 16px;
height: 44px;
border-radius: 4px;
background: #131b2c;
/* shared font styles */
font-size: 14px;
line-height: 1.2;
@ -101,12 +103,12 @@ html {
}
.react-tags.is-active {
border-color: #4f46e5;
@apply border-customColor51;
}
.react-tags.is-disabled {
opacity: 0.75;
background-color: #eaeef2;
@apply bg-customColor52;
/* Prevent any clicking on the component */
pointer-events: none;
cursor: not-allowed;
@ -142,15 +144,14 @@ html {
padding: 0.15rem 0.5rem;
border: 0;
border-radius: 3px;
background: #7236f1;
@apply bg-seventh;
/* match the font styles */
font-size: inherit;
line-height: inherit;
}
.react-tags__tag:hover {
color: #ffffff;
background-color: #4f46e5;
@apply text-textColor bg-customColor51;
}
.react-tags__tag::after {
@ -174,11 +175,11 @@ html {
);
margin-left: 0.5rem;
font-size: 0.875rem;
background-color: #7c7d86;
@apply bg-customColor53;
}
.react-tags__tag:hover::after {
background-color: #ffffff;
@apply bg-primary;
}
.react-tags__combobox {
@ -203,7 +204,7 @@ html {
}
.react-tags__combobox-input::placeholder {
color: #7c7d86;
@apply text-customColor53;
opacity: 1;
}
@ -216,8 +217,7 @@ html {
right: -2px;
max-height: 12.5rem;
overflow-y: auto;
background: #131b2c;
border: 1px solid #afb8c1;
@apply bg-input border border-customColor54;
border-radius: 6px;
box-shadow: rgba(0, 0, 0, 0.1) 0 10px 15px -4px,
rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
@ -229,16 +229,15 @@ html {
.react-tags__listbox-option:hover {
cursor: pointer;
background: #080b13;
@apply bg-third;
}
.react-tags__listbox-option:not([aria-disabled='true']).is-active {
background: #4f46e5;
color: #ffffff;
@apply text-textColor bg-customColor51;
}
.react-tags__listbox-option[aria-disabled='true'] {
color: #7c7d86;
@apply text-customColor53;
cursor: not-allowed;
pointer-events: none;
}
@ -249,7 +248,7 @@ html {
}
.react-tags__listbox-option[aria-selected='true']:not(.is-active)::after {
color: #4f46e5;
@apply text-customColor51;
}
.react-tags__listbox-option-highlight {
@ -260,7 +259,7 @@ html {
/* display: none;*/
/*}*/
.w-md-editor {
background-color: #131b2c !important;
@apply bg-input #{!important};
border: 0 !important;
box-shadow: none !important;
border-radius: 8px !important;
@ -269,11 +268,10 @@ html {
}
.w-md-editor-toolbar {
@apply bg-input border-fifth #{!important};
height: 40px !important;
min-height: 40px !important;
background-color: #131b2c !important;
padding: 0 8px !important;
border-color: #28344f !important;
}
.wmde-markdown {
@ -286,7 +284,7 @@ html {
}
.editor * {
color: white;
@apply text-textColor;
}
.editor .polonto * {
@ -317,7 +315,7 @@ html {
}
.copilotKitWindow {
background-color: #0b0f1c !important;
@apply bg-customColor3 #{!important};
}
.copilotKitButtonIconOpen svg {
@ -325,12 +323,12 @@ html {
}
.copilotKitButtonIconOpen:after {
@apply text-textColor;
content: '';
display: block;
position: relative;
z-index: 1;
object-fit: contain;
color: white;
background: url('/magic.svg') no-repeat center center / contain;
width: 30px;
height: 30px;
@ -346,7 +344,8 @@ html {
}
.uppy-FileInput-container {
@apply cursor-pointer font-[500] flex justify-center items-center gap-[4px] text-[12px] rounded-[4px] w-[107px] h-[25px] bg-[#0b0f1c] text-white border-[2px] border-[#506490];
@apply cursor-pointer font-[500] flex justify-center items-center gap-[4px] text-[12px] rounded-[4px] w-[107px] h-[25px] text-textColor border-[2px];
@apply bg-customColor3 border-customColor21;
}
.uppy-ProgressBar {
@ -355,7 +354,7 @@ html {
}
.uppy-ProgressBar-inner {
background-color: #4f46e5;
@apply bg-customColor51;
height: 25px;
border-radius: 4px;
}
@ -376,7 +375,7 @@ html {
@apply animate-normalFadeOut;
}
.fill-text-white {
.fill-text-textColor {
-webkit-text-fill-color: white !important;
}
div div .set-font-family {

View File

@ -1,7 +1,7 @@
import interClass from '@gitroom/react/helpers/inter.font';
export const dynamic = 'force-dynamic';
import './global.css';
import './global.scss';
import 'react-tooltip/dist/react-tooltip.css';
import '@copilotkit/react-ui/styles.css';
@ -10,6 +10,7 @@ import { ReactNode } from 'react';
import { Chakra_Petch } from 'next/font/google';
import { isGeneral } from '@gitroom/react/helpers/is.general';
import PlausibleProvider from 'next-plausible';
import clsx from 'clsx';
const chakra = Chakra_Petch({ weight: '400', subsets: ['latin'] });
@ -23,7 +24,7 @@ export default async function AppLayout({ children }: { children: ReactNode }) {
sizes="any"
/>
</head>
<body className={chakra.className}>
<body className={clsx(chakra.className, 'text-primary dark')}>
<PlausibleProvider domain={isGeneral() ? "postiz.com" : "gitroom.com"}>
<LayoutContext>{children}</LayoutContext>
</PlausibleProvider>

View File

@ -49,12 +49,12 @@ export const AnalyticsComponent: FC = () => {
{/* <img className="w-8 h-8 rounded-full" src="https://via.placeholder.com/32x32"/>*/}
{/* <div className="grow shrink basis-0 flex-col justify-start items-start gap-1 inline-flex">*/}
{/* <div className="justify-center items-center gap-1 inline-flex">*/}
{/* <div className="text-white text-sm font-medium leading-tight">Nevo David</div>*/}
{/* <div className="text-textColor text-sm font-medium leading-tight">Nevo David</div>*/}
{/* <div className="text-neutral-500 text-[10px] font-normal uppercase tracking-wide">05/06/2024</div>*/}
{/* </div>*/}
{/* <div className="self-stretch text-neutral-400 text-xs font-normal">O atual sistema político precisa mudar para valorizar o trabalho e garantir igualdade de oportunidad</div>*/}
{/* <div className="self-stretch justify-start items-center gap-1 inline-flex">*/}
{/* <div className="text-[#E4B895] text-xs font-normal">See Tweet</div>*/}
{/* <div className="text-customColor10 text-xs font-normal">See Tweet</div>*/}
{/* <div className="w-4 h-4 relative"/>*/}
{/* </div>*/}
{/* </div>*/}
@ -63,12 +63,12 @@ export const AnalyticsComponent: FC = () => {
{/* <img className="w-8 h-8 rounded-full" src="https://via.placeholder.com/32x32"/>*/}
{/* <div className="grow shrink basis-0 flex-col justify-start items-start gap-1 inline-flex">*/}
{/* <div className="justify-center items-center gap-1 inline-flex">*/}
{/* <div className="text-white text-sm font-medium leading-tight">Nevo David</div>*/}
{/* <div className="text-textColor text-sm font-medium leading-tight">Nevo David</div>*/}
{/* <div className="text-neutral-500 text-[10px] font-normal uppercase tracking-wide">05/06/2024</div>*/}
{/* </div>*/}
{/* <div className="self-stretch text-neutral-400 text-xs font-normal">O atual sistema político precisa mudar para valorizar o trabalho e garantir igualdade de oportunidad</div>*/}
{/* <div className="self-stretch justify-start items-center gap-1 inline-flex">*/}
{/* <div className="text-[#E4B895] text-xs font-normal">See Tweet</div>*/}
{/* <div className="text-customColor10 text-xs font-normal">See Tweet</div>*/}
{/* <div className="w-4 h-4 relative"/>*/}
{/* </div>*/}
{/* </div>*/}
@ -77,12 +77,12 @@ export const AnalyticsComponent: FC = () => {
{/* <img className="w-8 h-8 rounded-full" src="https://via.placeholder.com/32x32"/>*/}
{/* <div className="grow shrink basis-0 flex-col justify-start items-start gap-1 inline-flex">*/}
{/* <div className="justify-center items-center gap-1 inline-flex">*/}
{/* <div className="text-white text-sm font-medium leading-tight">Nevo David</div>*/}
{/* <div className="text-textColor text-sm font-medium leading-tight">Nevo David</div>*/}
{/* <div className="text-neutral-500 text-[10px] font-normal uppercase tracking-wide">05/06/2024</div>*/}
{/* </div>*/}
{/* <div className="self-stretch text-neutral-400 text-xs font-normal">O atual sistema político precisa mudar para valorizar o trabalho e garantir igualdade de oportunidad</div>*/}
{/* <div className="self-stretch justify-start items-center gap-1 inline-flex">*/}
{/* <div className="text-[#E4B895] text-xs font-normal">See Tweet</div>*/}
{/* <div className="text-customColor10 text-xs font-normal">See Tweet</div>*/}
{/* <div className="w-4 h-4 relative"/>*/}
{/* </div>*/}
{/* </div>*/}
@ -91,12 +91,12 @@ export const AnalyticsComponent: FC = () => {
{/* <img className="w-8 h-8 rounded-full" src="https://via.placeholder.com/32x32"/>*/}
{/* <div className="grow shrink basis-0 flex-col justify-start items-start gap-1 inline-flex">*/}
{/* <div className="justify-center items-center gap-1 inline-flex">*/}
{/* <div className="text-white text-sm font-medium leading-tight">Nevo David</div>*/}
{/* <div className="text-textColor text-sm font-medium leading-tight">Nevo David</div>*/}
{/* <div className="text-neutral-500 text-[10px] font-normal uppercase tracking-wide">05/06/2024</div>*/}
{/* </div>*/}
{/* <div className="self-stretch text-neutral-400 text-xs font-normal">O atual sistema político precisa mudar para valorizar o trabalho e garantir igualdade de oportunidad</div>*/}
{/* <div className="self-stretch justify-start items-center gap-1 inline-flex">*/}
{/* <div className="text-[#E4B895] text-xs font-normal">See Tweet</div>*/}
{/* <div className="text-customColor10 text-xs font-normal">See Tweet</div>*/}
{/* <div className="w-4 h-4 relative"/>*/}
{/* </div>*/}
{/* </div>*/}
@ -105,12 +105,12 @@ export const AnalyticsComponent: FC = () => {
{/* <img className="w-8 h-8 rounded-full" src="https://via.placeholder.com/32x32"/>*/}
{/* <div className="grow shrink basis-0 flex-col justify-start items-start gap-1 inline-flex">*/}
{/* <div className="justify-center items-center gap-1 inline-flex">*/}
{/* <div className="text-white text-sm font-medium leading-tight">Nevo David</div>*/}
{/* <div className="text-textColor text-sm font-medium leading-tight">Nevo David</div>*/}
{/* <div className="text-neutral-500 text-[10px] font-normal uppercase tracking-wide">05/06/2024</div>*/}
{/* </div>*/}
{/* <div className="self-stretch text-neutral-400 text-xs font-normal">O atual sistema político precisa mudar para valorizar o trabalho e garantir igualdade de oportunidad</div>*/}
{/* <div className="self-stretch justify-start items-center gap-1 inline-flex">*/}
{/* <div className="text-[#E4B895] text-xs font-normal">See Tweet</div>*/}
{/* <div className="text-customColor10 text-xs font-normal">See Tweet</div>*/}
{/* <div className="w-4 h-4 relative"/>*/}
{/* </div>*/}
{/* </div>*/}

View File

@ -140,7 +140,7 @@ export const StarsAndForks: FC<StarsAndForksInterface> = (props) => {
</div>
</div>
<div className="flex items-center">
<div className="w-[2px] h-[30px] bg-[#8B90FF] mr-[16px]"></div>
<div className="w-[2px] h-[30px] bg-customColor11 mr-[16px]"></div>
<div className="text-[24px] flex-1">
<UtcToLocalDateRender
date={
@ -152,7 +152,7 @@ export const StarsAndForks: FC<StarsAndForksInterface> = (props) => {
<div
className={clsx(
'text-[24px]',
p === 0 ? 'text-[#B7C1FF]' : 'text-[#FFAC30]'
p === 0 ? 'text-customColor12' : 'text-customColor13'
)}
>
<UtcToLocalDateRender
@ -163,12 +163,12 @@ export const StarsAndForks: FC<StarsAndForksInterface> = (props) => {
/>
</div>
<div>
<div className="rounded-full bg-[#576A9A] w-[5px] h-[5px] mx-[8px]" />
<div className="rounded-full bg-customColor14 w-[5px] h-[5px] mx-[8px]" />
</div>
<div
className={clsx(
'text-[24px]',
p === 0 ? 'text-[#B7C1FF]' : 'text-[#FFAC30]'
p === 0 ? 'text-customColor12' : 'text-customColor13'
)}
>
<UtcToLocalDateRender

View File

@ -157,7 +157,7 @@ export const StarsTableComponent = () => {
return (
<div className="flex flex-1 flex-col gap-[15px] min-h-[426px]">
<div className="text-white flex gap-[8px] items-center select-none">
<div className="text-textColor flex gap-[8px] items-center select-none">
<div
onClick={changePage('decrease')}
className={clsx(

View File

@ -8,7 +8,7 @@ export function Activate() {
Activate your account
</h1>
</div>
<div className="text-white">
<div className="text-textColor">
Thank you for registering!<br />Please check your email to activate your account.
</div>
</>

View File

@ -63,7 +63,7 @@ export function ForgotReturn({ token }: { token: string }) {
</div>
{!state ? (
<>
<div className="space-y-4 text-white">
<div className="space-y-4 text-textColor">
<Input
label="New Password"
{...form.register('password')}

View File

@ -48,7 +48,7 @@ export function Forgot() {
</div>
{!state ? (
<>
<div className="space-y-4 text-white">
<div className="space-y-4 text-textColor">
<Input
label="Email"
{...form.register('email')}

View File

@ -67,11 +67,11 @@ export function Login() {
<div
className={`absolute z-[1] ${interClass} justify-center items-center w-full left-0 top-0 flex`}
>
<div className="bg-[#0a0a0a] px-[16px]">OR</div>
<div className="bg-customColor15 px-[16px]">OR</div>
</div>
</div>
<div className="text-white">
<div className="text-textColor">
<Input
label="Email"
{...form.register('email')}

View File

@ -12,7 +12,7 @@ export const GithubProvider = () => {
return (
<div
onClick={gotoLogin}
className={`cursor-pointer bg-white h-[44px] rounded-[4px] flex justify-center items-center text-[#121A2D] ${interClass} gap-[4px]`}
className={`cursor-pointer bg-white h-[44px] rounded-[4px] flex justify-center items-center text-customColor16 ${interClass} gap-[4px]`}
>
<div>
<svg

View File

@ -12,7 +12,7 @@ export const GoogleProvider = () => {
return (
<div
onClick={gotoLogin}
className={`cursor-pointer bg-white h-[44px] rounded-[4px] flex justify-center items-center text-[#121A2D] ${interClass} gap-[4px]`}
className={`cursor-pointer bg-white h-[44px] rounded-[4px] flex justify-center items-center text-customColor16 ${interClass} gap-[4px]`}
>
<div>
<svg

View File

@ -142,11 +142,11 @@ export function RegisterAfter({
<div
className={`absolute z-[1] ${interClass} justify-center items-center w-full left-0 top-0 flex`}
>
<div className="bg-[#0a0a0a] px-[16px]">OR</div>
<div className="bg-customColor15 px-[16px]">OR</div>
</div>
</div>
)}
<div className="text-white">
<div className="text-textColor">
{!isAfterProvider && (
<>
<Input

View File

@ -89,7 +89,7 @@ export const FAQSection: FC<{ title: string; description: string }> = (
onClick={(e) => {
e.stopPropagation();
}}
className={`mt-[16px] w-full text-wrap ${interClass} font-[400] text-[16px] text-[#D3D3D3] select-text`}
className={`mt-[16px] w-full text-wrap ${interClass} font-[400] text-[16px] text-customColor17 select-text`}
dangerouslySetInnerHTML={{ __html: description }}
/>
</div>

View File

@ -113,12 +113,12 @@ export const LifetimeDeal = () => {
return (
<div className="flex gap-[30px]">
<div className="border border-[#172034] bg-sixth p-[24px] flex flex-col gap-[20px] flex-1 rounded-[4px]">
<div className="border border-customColor6 bg-sixth p-[24px] flex flex-col gap-[20px] flex-1 rounded-[4px]">
<div className="text-[30px]">
Current Package: {user?.totalChannels > 8 ? 'EXTRA' : user?.tier?.current}
</div>
<div className="flex flex-col gap-[10px] justify-center text-[16px] text-[#AAA]">
<div className="flex flex-col gap-[10px] justify-center text-[16px] text-customColor18">
{features.map((feature) => (
<div key={feature} className="flex gap-[20px]">
<div>
@ -141,13 +141,13 @@ export const LifetimeDeal = () => {
</div>
</div>
<div className="border border-[#172034] bg-sixth p-[24px] flex flex-col gap-[20px] flex-1 rounded-[4px]">
<div className="border border-customColor6 bg-sixth p-[24px] flex flex-col gap-[20px] flex-1 rounded-[4px]">
<div className="text-[30px]">
Next Package:{' '}
{user?.tier?.current === 'PRO' ? 'EXTRA' : !user?.tier?.current ? 'FREE' : user?.tier?.current === 'STANDARD' ? 'PRO' : 'STANDARD'}
</div>
<div className="flex flex-col gap-[10px] justify-center text-[16px] text-[#AAA]">
<div className="flex flex-col gap-[10px] justify-center text-[16px] text-customColor18">
{(user?.tier?.current === 'PRO'
? [`${(user?.totalChannels || 0) + 5} channels`]
: nextFeature

View File

@ -125,7 +125,7 @@ export const Features: FC<{
}, [pack]);
return (
<div className="flex flex-col gap-[10px] justify-center text-[16px] text-[#AAA]">
<div className="flex flex-col gap-[10px] justify-center text-[16px] text-customColor18">
{features.map((feature) => (
<div key={feature} className="flex gap-[20px]">
<div>
@ -333,7 +333,7 @@ export const MainBillingComponent: FC<{
.map(([name, values]) => (
<div
key={name}
className="flex-1 bg-sixth border border-[#172034] rounded-[4px] p-[24px] gap-[16px] flex flex-col"
className="flex-1 bg-sixth border border-customColor6 rounded-[4px] p-[24px] gap-[16px] flex flex-col"
>
<div className="text-[18px]">{name}</div>
<div className="text-[38px] flex gap-[2px] items-center">
@ -343,7 +343,7 @@ export const MainBillingComponent: FC<{
? values.year_price
: values.month_price}
</div>
<div className={`text-[14px] ${interClass} text-[#AAA]`}>
<div className={`text-[14px] ${interClass} text-customColor18`}>
{monthlyOrYearly === 'on' ? '/year' : '/month'}
</div>
</div>

View File

@ -384,7 +384,7 @@ export const AddEditModal: FC<{
instructions="You are an assistant that help the user to schedule their social media posts, everytime somebody write something, try to use a function call, if not prompt the user that the request is invalid and you are here to assists with social media posts"
/>
)}
<div className={clsx('flex gap-[20px] bg-black')}>
<div className={clsx('flex p-[10px] rounded-[4px] bg-primary gap-[20px]')}>
<div
className={clsx(
'flex flex-col gap-[16px] transition-all duration-700 whitespace-nowrap',
@ -393,7 +393,7 @@ export const AddEditModal: FC<{
: 'w-0 overflow-hidden'
)}
>
<div className="relative flex gap-[20px] flex-col flex-1 rounded-[4px] border border-[#172034] bg-sixth p-[16px] pt-0">
<div className="relative flex gap-[20px] flex-col flex-1 rounded-[4px] border border-customColor6 bg-sixth p-[16px] pt-0">
<TopTitle title={existingData?.group ? 'Edit Post' : 'Create Post'}>
<div className="flex items-center">
<PostToOrganization
@ -425,7 +425,7 @@ export const AddEditModal: FC<{
<Fragment key={`edit_${index}`}>
<div>
<div className="flex gap-[4px]">
<div className="flex-1 editor text-white">
<div className="flex-1 editor text-textColor">
<Editor
order={index}
height={value.length > 1 ? 150 : 250}
@ -444,7 +444,7 @@ export const AddEditModal: FC<{
{showError &&
(!p.content || p.content.length < 6) && (
<div className="my-[5px] text-[#F97066] text-[12px] font-[500]">
<div className="my-[5px] text-customColor19 text-[12px] font-[500]">
The post should be at least 6 characters long
</div>
)}
@ -458,7 +458,7 @@ export const AddEditModal: FC<{
onChange={changeImage(index)}
/>
</div>
<div className="flex bg-[#121b2c] rounded-br-[8px] text-[#F97066]">
<div className="flex bg-customColor20 rounded-br-[8px] text-customColor19">
{value.length > 1 && (
<div
className="flex cursor-pointer gap-[4px] justify-center items-center flex-1"
@ -505,7 +505,7 @@ export const AddEditModal: FC<{
</>
) : null}
</div>
<div className="relative h-[68px] flex flex-col rounded-[4px] border border-[#172034] bg-sixth">
<div className="relative h-[68px] flex flex-col rounded-[4px] border border-customColor6 bg-sixth">
<div className="flex flex-1 gap-[10px] relative">
<div className="absolute w-full h-full flex gap-[10px] justify-end items-center right-[16px]">
<Button
@ -530,7 +530,7 @@ export const AddEditModal: FC<{
)}
<Button
onClick={schedule('draft')}
className="rounded-[4px] border-2 border-[#506490]"
className="rounded-[4px] border-2 border-customColor21"
secondary={true}
disabled={selectedIntegrations.length === 0}
>
@ -546,7 +546,7 @@ export const AddEditModal: FC<{
}
>
<div className="flex justify-center items-center gap-[5px] h-full">
<div className="h-full flex items-center">
<div className="h-full flex items-center text-white">
{!canSendForPublication
? 'Not matching order'
: postFor
@ -571,7 +571,7 @@ export const AddEditModal: FC<{
</svg>
<div
onClick={postNow}
className="hidden group-hover:flex hover:flex flex-col justify-center absolute left-0 top-[100%] w-full h-[40px] bg-[#B91C1C] border border-tableBorder"
className="hidden group-hover:flex hover:flex flex-col justify-center absolute left-0 top-[100%] w-full h-[40px] bg-customColor22 border border-tableBorder"
>
Post now
</div>
@ -586,7 +586,7 @@ export const AddEditModal: FC<{
</div>
<div
className={clsx(
'flex gap-[20px] flex-col rounded-[4px] border-[#172034] bg-sixth flex-1 transition-all duration-700',
'flex gap-[20px] flex-col rounded-[4px] border-customColor6 bg-sixth flex-1 transition-all duration-700',
!selectedIntegrations.length
? 'flex-grow-0 overflow-hidden'
: 'flex-grow-1 border animate-overflow'

View File

@ -34,7 +34,7 @@ export const AddPostButton: FC<{ onClick: () => void; num: number }> = (
/>
</svg>
</div>
<div>Add comment</div>
<div className="text-white">Add comment</div>
</Button>
);
};

View File

@ -23,7 +23,7 @@ export const useAddProvider = (update?: () => void) => {
title: '',
withCloseButton: false,
classNames: {
modal: 'bg-transparent text-white',
modal: 'bg-transparent text-textColor',
},
children: <AddProviderComponent update={update} {...data} />,
size: 'auto',
@ -89,7 +89,7 @@ export const ApiModal: FC<{
}, []);
return (
<div className="rounded-[4px] border border-[#172034] bg-sixth px-[16px] pb-[16px] relative">
<div className="rounded-[4px] border border-customColor6 bg-sixth px-[16px] pb-[16px] relative">
<TopTitle title={`Add API key for ${name}`} />
<button
onClick={close}
@ -157,7 +157,7 @@ export const AddProviderComponent: FC<{
title: '',
withCloseButton: false,
classNames: {
modal: 'bg-transparent text-white',
modal: 'bg-transparent text-textColor',
},
children: (
<ApiModal update={update} name={name} identifier={identifier} />
@ -167,7 +167,7 @@ export const AddProviderComponent: FC<{
[]
);
return (
<div className="w-full flex flex-col gap-[20px] rounded-[4px] border border-[#172034] bg-sixth px-[16px] pb-[16px] relative">
<div className="w-full flex flex-col gap-[20px] rounded-[4px] border border-customColor6 bg-sixth px-[16px] pb-[16px] relative">
<div className="flex flex-col">
<TopTitle title="Add Channel" />
<button
@ -197,7 +197,7 @@ export const AddProviderComponent: FC<{
key={item.identifier}
onClick={getSocialLink(item.identifier)}
className={
'w-[120px] h-[100px] bg-input text-white justify-center items-center flex flex-col gap-[10px] cursor-pointer'
'w-[120px] h-[100px] bg-input text-textColor justify-center items-center flex flex-col gap-[10px] cursor-pointer'
}
>
<div>
@ -223,7 +223,7 @@ export const AddProviderComponent: FC<{
<div
key={item.identifier}
onClick={showApiButton(item.identifier, item.name)}
className="w-[120px] h-[100px] bg-input text-white justify-center items-center flex flex-col gap-[10px] cursor-pointer"
className="w-[120px] h-[100px] bg-input text-textColor justify-center items-center flex flex-col gap-[10px] cursor-pointer"
>
<div>
<img

View File

@ -281,7 +281,7 @@ const CalendarColumnRender: FC<{ day: number; hour: string }> = (props) => {
const integration = await getIntegration(postInfo);
modal.openModal({
classNames: {
modal: 'bg-transparent text-white',
modal: 'bg-transparent text-textColor',
},
size: 'auto',
withCloseButton: false,
@ -317,7 +317,7 @@ const CalendarColumnRender: FC<{ day: number; hour: string }> = (props) => {
closeOnEscape: false,
withCloseButton: false,
classNames: {
modal: 'w-[100%] max-w-[1400px] bg-transparent text-white',
modal: 'w-[100%] max-w-[1400px] bg-transparent text-textColor',
},
children: (
<ExistingDataContextProvider value={data}>
@ -344,7 +344,7 @@ const CalendarColumnRender: FC<{ day: number; hour: string }> = (props) => {
closeOnEscape: false,
withCloseButton: false,
classNames: {
modal: 'w-[100%] max-w-[1400px] bg-transparent text-white',
modal: 'w-[100%] max-w-[1400px] bg-transparent text-textColor',
},
children: (
<AddEditModal
@ -372,16 +372,16 @@ const CalendarColumnRender: FC<{ day: number; hour: string }> = (props) => {
ref={drop}
className={clsx(
'flex-col flex-1 text-[12px] pointer w-full overflow-hidden justify-center overflow-x-auto flex scrollbar scrollbar-thumb-tableBorder scrollbar-track-secondary',
isBeforeNow && 'bg-[#06080d]',
isBeforeNow && 'bg-customColor23',
canDrop && 'bg-white/80',
canBeTrending && 'bg-[#eaff00]'
canBeTrending && 'bg-customColor24'
)}
>
{postList.map((post) => (
<div
key={post.id}
className={clsx(
'text-white p-[2.5px] relative flex flex-col justify-center items-center'
'text-textColor p-[2.5px] relative flex flex-col justify-center items-center'
)}
>
<div className="relative w-full flex flex-col items-center p-[2.5px]">
@ -477,7 +477,7 @@ export const CommentBox: FC<{ totalComments: number; date: dayjs.Dayjs }> = (
mutate(`/posts`);
},
classNames: {
modal: 'bg-transparent text-white',
modal: 'bg-transparent text-textColor',
},
size: '80%',
});
@ -507,7 +507,7 @@ export const CommentBox: FC<{ totalComments: number; date: dayjs.Dayjs }> = (
)}
>
{totalComments > 0 && (
<div className="absolute right-0 bottom-[10px] w-[10px] h-[10px] text-[8px] bg-red-500 z-[20] rounded-full flex justify-center items-center text-white">
<div className="absolute right-0 bottom-[10px] w-[10px] h-[10px] text-[8px] bg-red-500 z-[20] rounded-full flex justify-center items-center text-textColor">
{totalComments}
</div>
)}

View File

@ -276,7 +276,7 @@ export const CommentComponent: FC<{ date: dayjs.Dayjs }> = (props) => {
}, []);
return (
<div className="relative flex gap-[20px] flex-col flex-1 rounded-[4px] border border-[#172034] bg-sixth p-[16px] pt-0">
<div className="relative flex gap-[20px] flex-col flex-1 rounded-[4px] border border-customColor6 bg-sixth p-[16px] pt-0">
<TopTitle title={`Comments for ${date.format('DD/MM/YYYY HH:mm')}`} />
<button
onClick={closeAll}
@ -314,7 +314,7 @@ export const CommentComponent: FC<{ date: dayjs.Dayjs }> = (props) => {
<div className={`rounded-full relative z-[2] text-blue-500 font-bold ${interClass} flex justify-center items-center w-[40px] h-[40px] bg-white border-tableBorder border`}>
{comment.user.email[0].toUpperCase()}
</div>
<div className="flex-1 w-[2px] h-[calc(100%-10px)] bg-[#2E3336] absolute top-[10px] z-[1]" />
<div className="flex-1 w-[2px] h-[calc(100%-10px)] bg-customColor25 absolute top-[10px] z-[1]" />
</div>
<div className="flex-1 flex flex-col gap-[4px]">
<div className="flex">
@ -361,8 +361,8 @@ export const CommentComponent: FC<{ date: dayjs.Dayjs }> = (props) => {
</div>
<div className="flex">
<div className="relative w-[40px] flex flex-col items-center">
<div className="h-[30px] w-[2px] bg-[#2E3336] absolute top-0 z-[1]" />
<div className="h-[2px] w-[21px] bg-[#2E3336] absolute top-[30px] right-0 z-[1]" />
<div className="h-[30px] w-[2px] bg-customColor25 absolute top-0 z-[1]" />
<div className="h-[2px] w-[21px] bg-customColor25 absolute top-[30px] right-0 z-[1]" />
</div>
<div className="flex-1">
<CommentBox

View File

@ -42,12 +42,12 @@ export const Editor = forwardRef<
});
return (
<div className="relative bg-[#141C2C]">
<div className="relative bg-customColor2">
{user?.tier?.ai ? (
<CopilotTextarea
disableBranding={true}
className={clsx(
'!min-h-40 !max-h-80 p-2 overflow-hidden bg-[#141C2C] outline-none'
'!min-h-40 !max-h-80 p-2 overflow-hidden bg-customColor2 outline-none'
)}
value={props.value}
onChange={(e) => props?.onChange?.(e.target.value)}

View File

@ -25,7 +25,7 @@ export const Filters = () => {
}, [week.currentWeek, week.currentYear]);
return (
<div className="h-[20px] text-white flex gap-[8px] items-center select-none">
<div className="h-[20px] text-textColor flex gap-[8px] items-center select-none">
<div onClick={previousWeek}>
<svg
xmlns="http://www.w3.org/2000/svg"

View File

@ -37,7 +37,7 @@ export const GeneralPreviewComponent: FC<{maximumCharacters?: number}> = (props)
className="rounded-full relative z-[2]"
/>
{index !== topValue.length - 1 && (
<div className="flex-1 w-[2px] h-[calc(100%-10px)] bg-[#2E3336] absolute top-[10px] z-[1]" />
<div className="flex-1 w-[2px] h-[calc(100%-10px)] bg-customColor25 absolute top-[10px] z-[1]" />
)}
</div>
<div className="flex-1 flex flex-col gap-[4px]">
@ -45,7 +45,7 @@ export const GeneralPreviewComponent: FC<{maximumCharacters?: number}> = (props)
<div className="h-[22px] text-[15px] font-[700]">
{integration?.name}
</div>
<div className="text-[15px] text-[#1D9BF0] mt-[1px] ml-[2px]">
<div className="text-[15px] text-customColor26 mt-[1px] ml-[2px]">
<svg
viewBox="0 0 22 22"
aria-label="Verified account"
@ -58,7 +58,7 @@ export const GeneralPreviewComponent: FC<{maximumCharacters?: number}> = (props)
</g>
</svg>
</div>
<div className="text-[15px] font-[400] text-[#71767b] ml-[4px]">
<div className="text-[15px] font-[400] text-customColor27 ml-[4px]">
@username
</div>
</div>

View File

@ -304,7 +304,7 @@ export const GeneratorPopup = () => {
}, []);
return (
<div className="bg-sixth p-[32px] w-full max-w-[920px] mx-auto flex flex-col gap-[24px] rounded-[4px] border border-[#172034] relative">
<div className="bg-sixth p-[32px] w-full max-w-[920px] mx-auto flex flex-col gap-[24px] rounded-[4px] border border-customColor6 relative">
<button
onClick={closeAll}
className="outline-none absolute right-[20px] top-[15px] mantine-UnstyledButton-root mantine-ActionIcon-root hover:bg-tableBorder cursor-pointer mantine-Modal-close mantine-1dcetaa"
@ -383,7 +383,7 @@ export const GeneratorComponent = () => {
title: '',
withCloseButton: false,
classNames: {
modal: 'bg-transparent text-white',
modal: 'bg-transparent text-textColor',
},
size: '100%',
children: <GeneratorPopup />,
@ -392,7 +392,7 @@ export const GeneratorComponent = () => {
return (
<button
className="text-white p-[8px] rounded-md bg-red-700 flex justify-center items-center gap-[5px] outline-none"
className="text-textColor p-[8px] rounded-md bg-red-700 flex justify-center items-center gap-[5px] outline-none"
onClick={generate}
>
<svg

View File

@ -57,14 +57,14 @@ export const DatePicker: FC<{
{open && (
<div
onClick={(e) => e.stopPropagation()}
className="animate-normalFadeDown absolute top-[100%] mt-[16px] right-0 bg-sixth border border-tableBorder text-white rounded-[16px] z-[300] p-[16px] flex flex-col"
className="animate-normalFadeDown absolute top-[100%] mt-[16px] right-0 bg-sixth border border-tableBorder text-textColor rounded-[16px] z-[300] p-[16px] flex flex-col"
>
<Calendar
onChange={changeDate('date')}
value={date.toDate()}
dayClassName={(date, modifiers) => {
if (modifiers.weekend) {
return '!text-[#B69DEC]';
return '!text-customColor28';
}
if (modifiers.outside) {
@ -72,24 +72,24 @@ export const DatePicker: FC<{
}
if (modifiers.selected) {
return '!text-white !bg-seventh !outline-none';
return '!text-textColor !bg-seventh !outline-none';
}
return '!text-white';
return '!text-textColor';
}}
classNames={{
day: 'hover:bg-seventh',
calendarHeaderControl: 'text-white hover:bg-third',
calendarHeaderLevel: 'text-white hover:bg-third', // cell: 'child:!text-white'
calendarHeaderControl: 'text-textColor hover:bg-third',
calendarHeaderLevel: 'text-textColor hover:bg-third', // cell: 'child:!text-textColor'
}}
/>
<TimeInput
onChange={changeDate('time')}
label="Pick time"
classNames={{
label: 'text-white py-[12px]',
label: 'text-textColor py-[12px]',
input:
'bg-sixth h-[40px] border border-tableBorder text-white rounded-[4px] outline-none',
'bg-sixth h-[40px] border border-tableBorder text-textColor rounded-[4px] outline-none',
}}
placeholder="Pick time"
defaultValue={date.toDate()}

View File

@ -101,14 +101,14 @@ export const LinkedinCompany: FC<{
};
return (
<div className="text-white fixed left-0 top-0 bg-black/80 z-[300] w-full h-full p-[60px] animate-fade justify-center flex">
<div className="text-textColor fixed left-0 top-0 bg-primary/80 z-[300] w-full h-full p-[60px] animate-fade justify-center flex">
<div className="flex flex-col w-[500px] h-[250px] bg-sixth border-tableBorder border-2 rounded-xl pb-[20px] px-[20px] relative">
<div className="flex">
<div className="flex-1">
<TopTitle title={'Select Company'} />
</div>
<button
className="outline-none absolute right-[20px] top-[20px] mantine-UnstyledButton-root mantine-ActionIcon-root bg-black hover:bg-tableBorder cursor-pointer mantine-Modal-close mantine-1dcetaa"
className="outline-none absolute right-[20px] top-[20px] mantine-UnstyledButton-root mantine-ActionIcon-root bg-primary hover:bg-tableBorder cursor-pointer mantine-Modal-close mantine-1dcetaa"
type="button"
>
<svg

View File

@ -211,7 +211,7 @@ export const PickPlatforms: FC<{
<div
className={clsx('flex select-none', props.singleSelect && 'gap-[10px]')}
>
{props.singleSelect && (
{props.singleSelect && isLeft && (
<div className="flex items-center">
{isLeft && (
<svg
@ -299,7 +299,7 @@ export const PickPlatforms: FC<{
(p) => p.id === integration.id
) === -1
? 'bg-third border border-third'
: 'bg-[#291259] border border-[#5826C2]'
: 'bg-customColor29 border border-customColor30'
)}
>
<div className="flex items-center justify-center gap-[10px]">

View File

@ -10,7 +10,7 @@ export const TopTitle: FC<{
const { title, children, shouldExpend, expend, collapse } = props;
return (
<div className="h-[57px] border-b flex items-center border-[#172034] px-[16px] -mx-[16px]">
<div className="h-[57px] border-b flex items-center border-customColor6 px-[16px] -mx-[16px]">
<div className="flex-1">{title}</div>
{children}
{shouldExpend !== undefined && (

View File

@ -117,7 +117,7 @@ export const LaunchesComponent = () => {
<CalendarWeekProvider integrations={sortedIntegrations}>
<div className="flex flex-1 flex-col">
<div className="flex flex-1 relative">
<div className="outline-none absolute w-full h-full grid grid-cols-[220px_minmax(0,1fr)] gap-[30px] overflow-hidden overflow-y-scroll scrollbar scrollbar-thumb-tableBorder scrollbar-track-secondary">
<div className="outline-none absolute w-full h-full grid grid-cols-[220px_minmax(0,1fr)] gap-[30px] overflow-hidden overflow-y-auto scrollbar scrollbar-thumb-tableBorder scrollbar-track-secondary">
<div className="w-[220px] bg-third p-[16px] flex flex-col gap-[24px] min-h-[100%]">
<h2 className="text-[20px]">Channels</h2>
<div className="gap-[16px] flex flex-col">
@ -153,7 +153,7 @@ export const LaunchesComponent = () => {
<div className="bg-red-500 w-[15px] h-[15px] rounded-full -left-[5px] -top-[5px] absolute z-[200] text-[10px] flex justify-center items-center">
!
</div>
<div className="bg-black/60 w-[39px] h-[46px] left-0 top-0 absolute rounded-full z-[199]" />
<div className="bg-primary/60 w-[39px] h-[46px] left-0 top-0 absolute rounded-full z-[199]" />
</div>
)}
<ImageWithFallback

View File

@ -19,14 +19,14 @@ export const hours = Array.from({ length: 24 }, (_, i) => i);
export const NewCalendarComponent = () => {
return (
<DNDProvider>
<div className="flex flex-col h-screen bg-[#0f1727] rounded-[10px] overflow-hidden text-white flex-1">
<div className="flex flex-col h-screen overflow-hidden text-textColor flex-1">
<div className="flex-1">
<div className="grid grid-cols-8 bg-gray-800 gap-[2px]">
<div className="bg-[#121b2c] sticky top-0 z-10 bg-gray-900"></div>
<div className="grid grid-cols-8 bg-customColor31 gap-[1px] border-customColor31 border rounded-[10px]">
<div className="bg-customColor20 sticky top-0 z-10 bg-gray-900"></div>
{days.map((day, index) => (
<div
key={day}
className="sticky top-0 z-10 bg-[#121b2c] p-2 text-center"
className="sticky top-0 z-10 bg-customColor20 p-2 text-center"
>
<div>{day}</div>
</div>

View File

@ -86,7 +86,7 @@ const Polonto: FC<{
};
}, []);
return (
<div className="fixed left-0 top-0 bg-black/80 z-[300] w-full min-h-full p-[60px] animate-fade">
<div className="fixed left-0 top-0 bg-primary/80 z-[300] w-full min-h-full p-[60px] animate-fade">
<div className="w-full h-full bg-sixth border-tableBorder border-2 rounded-xl pb-[20px] px-[20px] relative">
<div className="flex">
<div className="flex-1">
@ -94,7 +94,7 @@ const Polonto: FC<{
</div>
<button
onClick={closeModal}
className="outline-none absolute right-[20px] top-[20px] mantine-UnstyledButton-root mantine-ActionIcon-root bg-black hover:bg-tableBorder cursor-pointer mantine-Modal-close mantine-1dcetaa"
className="outline-none absolute right-[20px] top-[20px] mantine-UnstyledButton-root mantine-ActionIcon-root bg-primary hover:bg-tableBorder cursor-pointer mantine-Modal-close mantine-1dcetaa"
type="button"
>
<svg

View File

@ -35,7 +35,7 @@ const DevtoPreview: FC = () => {
<div
className={clsx(
font.className,
'font-[800] flex h-[1000px] w-[699.8px] rounded-[10px] bg-[#181818] overflow-hidden overflow-y-auto flex-col gap-[32px]'
'font-[800] flex h-[1000px] w-[699.8px] rounded-[10px] bg-customColor32 overflow-hidden overflow-y-auto flex-col gap-[32px]'
)}
>
{!!coverPicture?.path && (

View File

@ -108,7 +108,7 @@ const DribbblePreview: FC = (props) => {
className="rounded-full absolute -right-[5px] -bottom-[5px] z-[2]"
/>
</div>
<div className="flex-1 flex flex-col leading-[16px] bg-[#F2F2F2] w-full pt-[8px] pr-[64px] pl-[12px] pb-[8px] rounded-[8px]">
<div className="flex-1 flex flex-col leading-[16px] bg-customColor33 w-full pt-[8px] pr-[64px] pl-[12px] pb-[8px] rounded-[8px]">
<div className="text-[14px] font-[600]">{integration?.name}</div>
<div className="text-[12px] font-[400] text-black/60">
CEO @ Gitroom

View File

@ -95,7 +95,7 @@ const FacebookPreview: FC = (props) => {
className="rounded-full absolute -right-[5px] -bottom-[5px] z-[2]"
/>
</div>
<div className="flex-1 flex flex-col leading-[16px] bg-[#F2F2F2] w-full pt-[8px] pr-[64px] pl-[12px] pb-[8px] rounded-[8px]">
<div className="flex-1 flex flex-col leading-[16px] bg-customColor33 w-full pt-[8px] pr-[64px] pl-[12px] pb-[8px] rounded-[8px]">
<div className="text-[14px] font-[600]">{integration?.name}</div>
<div className="text-[12px] font-[400] text-black/60">
CEO @ Gitroom

View File

@ -45,7 +45,7 @@ const HashnodePreview: FC = () => {
)}
<div className="px-[60px]">
<div className="font-[800] text-[48px] leading-[60px] mb-[8px]">{title}</div>
<div className="font-[400] text-[30px] leading-[60px] mb-[8px] text-[#334155]">{subtitle}</div>
<div className="font-[400] text-[30px] leading-[60px] mb-[8px] text-customColor34">{subtitle}</div>
</div>
<div className="px-[60px] text-left">
<MDEditor.Markdown

View File

@ -277,7 +277,7 @@ export const withProvider = (
)}
<div className="flex-1 flex">
<Button
className="rounded-[4px] flex-1 !bg-red-700 overflow-hidden whitespace-nowrap"
className="text-white rounded-[4px] flex-1 !bg-red-700 overflow-hidden whitespace-nowrap"
secondary={showTab !== 1}
onClick={changeToEditor}
>
@ -299,7 +299,7 @@ export const withProvider = (
<Fragment key={`edit_inner_${index}`}>
<div>
<div className="flex gap-[4px]">
<div className="flex-1 text-white editor">
<div className="flex-1 text-textColor editor">
<Editor
order={index}
height={InPlaceValue.length > 1 ? 200 : 250}
@ -320,7 +320,7 @@ export const withProvider = (
onChange={changeValue(index)}
/>
{(!val.content || val.content.length < 6) && (
<div className="my-[5px] text-[#F97066] text-[12px] font-[500]">
<div className="my-[5px] text-customColor19 text-[12px] font-[500]">
The post should be at least 6 characters long
</div>
)}
@ -334,7 +334,7 @@ export const withProvider = (
onChange={changeImage(index)}
/>
</div>
<div className="flex bg-[#121b2c] rounded-br-[8px] text-[#F97066]">
<div className="flex bg-customColor20 rounded-br-[8px] text-customColor19">
{InPlaceValue.length > 1 && (
<div
className="flex cursor-pointer gap-[4px] justify-center items-center flex-1"

View File

@ -94,7 +94,7 @@ const InstagramPreview: FC = (props) => {
className="rounded-full absolute -right-[5px] -bottom-[5px] z-[2]"
/>
</div>
<div className="flex-1 flex flex-col leading-[16px] bg-[#F2F2F2] w-full pt-[8px] pr-[64px] pl-[12px] pb-[8px] rounded-[8px]">
<div className="flex-1 flex flex-col leading-[16px] bg-customColor33 w-full pt-[8px] pr-[64px] pl-[12px] pb-[8px] rounded-[8px]">
<div className="text-[14px] font-[600]">{integration?.name}</div>
<div className="text-[12px] font-[400] text-black/60">
CEO @ Gitroom

View File

@ -95,7 +95,7 @@ const LinkedinPreview: FC = (props) => {
className="rounded-full absolute -right-[5px] -bottom-[5px] z-[2]"
/>
</div>
<div className="flex-1 flex flex-col leading-[16px] bg-[#F2F2F2] w-full pt-[8px] pr-[64px] pl-[12px] pb-[8px] rounded-[8px]">
<div className="flex-1 flex flex-col leading-[16px] bg-customColor33 w-full pt-[8px] pr-[64px] pl-[12px] pb-[8px] rounded-[8px]">
<div className="text-[14px] font-[600]">{integration?.name}</div>
<div className="text-[12px] font-[400] text-black/60">
CEO @ Gitroom

View File

@ -48,12 +48,12 @@ const MediumPreview: FC = () => {
return (
<div
className={clsx(
`font-[800] flex h-[1000px] w-[699.8px] text-[#242424] ${interClass} rounded-[10px] bg-white overflow-hidden overflow-y-auto flex-col gap-[56px]`
`font-[800] flex h-[1000px] w-[699.8px] text-customColor35 ${interClass} rounded-[10px] bg-white overflow-hidden overflow-y-auto flex-col gap-[56px]`
)}
>
<div className="px-[60px] pt-[20px]">
<div className="text-[48px] leading-[60px] mb-[8px]">{title}</div>
<div className="text-[22px] font-[400] text-[#6b6b6b]">{subtitle}</div>
<div className="text-[22px] font-[400] text-customColor36">{subtitle}</div>
</div>
<div className="px-[60px]">
<MDEditor.Markdown

View File

@ -115,7 +115,7 @@ const PinterestPreview: FC = (props) => {
className="rounded-full absolute -right-[5px] -bottom-[5px] z-[2]"
/>
</div>
<div className="flex-1 flex flex-col leading-[16px] bg-[#F2F2F2] w-full pt-[8px] pr-[64px] pl-[12px] pb-[8px] rounded-[8px]">
<div className="flex-1 flex flex-col leading-[16px] bg-customColor33 w-full pt-[8px] pr-[64px] pl-[12px] pb-[8px] rounded-[8px]">
<div className="text-[14px] font-[600]">{integration?.name}</div>
<div className="text-[12px] font-[400] text-black/60">
CEO @ Gitroom

View File

@ -94,7 +94,7 @@ const RedditPreview: FC = (props) => {
<div
key={index}
className={clsx(
`bg-[#0B1416] w-full p-[10px] flex flex-col ${interClass} border-tableBorder border`
`bg-customColor37 w-full p-[10px] flex flex-col ${interClass} border-tableBorder border`
)}
>
<div className="flex flex-col">
@ -184,7 +184,7 @@ const RedditSettings: FC = () => {
<div key={field.id} className="flex flex-col relative">
<div
onClick={deleteField(index)}
className="absolute -left-[10px] justify-center items-center flex -top-[10px] w-[20px] h-[20px] bg-red-600 rounded-full text-white"
className="absolute -left-[10px] justify-center items-center flex -top-[10px] w-[20px] h-[20px] bg-red-600 rounded-full text-textColor"
>
x
</div>

View File

@ -94,7 +94,7 @@ const ThreadsPreview: FC = (props) => {
className="rounded-full absolute -right-[5px] -bottom-[5px] z-[2]"
/>
</div>
<div className="flex-1 flex flex-col leading-[16px] bg-[#F2F2F2] w-full pt-[8px] pr-[64px] pl-[12px] pb-[8px] rounded-[8px]">
<div className="flex-1 flex flex-col leading-[16px] bg-customColor33 w-full pt-[8px] pr-[64px] pl-[12px] pb-[8px] rounded-[8px]">
<div className="text-[14px] font-[600]">{integration?.name}</div>
<div className="text-[12px] font-[400] text-black/60">
CEO @ Gitroom

View File

@ -222,7 +222,7 @@ const TikTokPreview: FC = (props) => {
className="rounded-full absolute -right-[5px] -bottom-[5px] z-[2]"
/>
</div>
<div className="flex-1 flex flex-col leading-[16px] bg-[#F2F2F2] w-full pt-[8px] pr-[64px] pl-[12px] pb-[8px] rounded-[8px]">
<div className="flex-1 flex flex-col leading-[16px] bg-customColor33 w-full pt-[8px] pr-[64px] pl-[12px] pb-[8px] rounded-[8px]">
<div className="text-[14px] font-[600]">{integration?.name}</div>
<div className="text-[12px] font-[400] text-black/60">
CEO @ Gitroom

View File

@ -52,7 +52,7 @@ const XPreview: FC = (props) => {
className="rounded-full relative z-[2]"
/>
{index !== topValue.length - 1 && (
<div className="flex-1 w-[2px] h-[calc(100%-10px)] bg-[#2E3336] absolute top-[10px] z-[1]" />
<div className="flex-1 w-[2px] h-[calc(100%-10px)] bg-customColor25 absolute top-[10px] z-[1]" />
)}
</div>
<div className="flex-1 flex flex-col gap-[4px]">
@ -60,7 +60,7 @@ const XPreview: FC = (props) => {
<div className="h-[22px] text-[15px] font-[700]">
{integration?.name}
</div>
<div className="text-[15px] text-[#1D9BF0] mt-[1px] ml-[2px]">
<div className="text-[15px] text-customColor26 mt-[1px] ml-[2px]">
<svg
viewBox="0 0 22 22"
aria-label="Verified account"
@ -73,7 +73,7 @@ const XPreview: FC = (props) => {
</g>
</svg>
</div>
<div className="text-[15px] font-[400] text-[#71767b] ml-[4px]">
<div className="text-[15px] font-[400] text-customColor27 ml-[4px]">
@username
</div>
</div>

View File

@ -133,7 +133,7 @@ const YoutubePreview: FC = (props) => {
className="rounded-full absolute -right-[5px] -bottom-[5px] z-[2]"
/>
</div>
<div className="flex-1 flex flex-col leading-[16px] bg-[#F2F2F2] w-full pt-[8px] pr-[64px] pl-[12px] pb-[8px] rounded-[8px]">
<div className="flex-1 flex flex-col leading-[16px] bg-customColor33 w-full pt-[8px] pr-[64px] pl-[12px] pb-[8px] rounded-[8px]">
<div className="text-[14px] font-[600]">{integration?.name}</div>
<div className="text-[12px] font-[400] text-black/60">
CEO @ Gitroom

View File

@ -41,7 +41,7 @@ export const UpDownArrow: FC<{
'outline-none rounded-tl-[20px] rounded-tr-[20px] w-[24px] h-[24px] flex justify-center items-center',
isUp
? 'bg-input hover:bg-seventh cursor-pointer'
: 'bg-[#0F1524] pointer-events-none text-tableBorder'
: 'bg-customColor8 pointer-events-none text-textColor'
)}
>
<Arrow flip={true} />
@ -52,7 +52,7 @@ export const UpDownArrow: FC<{
'outline-none rounded-bl-[20px] rounded-br-[20px] w-[24px] h-[24px] flex justify-center items-center',
isDown
? 'bg-input hover:bg-seventh cursor-pointer'
: 'bg-[#0F1524] pointer-events-none text-tableBorder'
: 'bg-customColor8 pointer-events-none text-textColor'
)}
>
<Arrow flip={false} />

View File

@ -47,11 +47,11 @@ export const ContinueProvider: FC = () => {
return (
<div
className="fixed left-0 top-0 w-full h-full bg-black/40 z-[499]"
className="fixed left-0 top-0 w-full h-full bg-primary/40 z-[499]"
onClick={closeModal}
>
<div
className="w-[100%] max-w-[674px] absolute left-[50%] top-[65px] bg-[#0B0F1C] z-[500] -translate-x-[50%] text-white p-[16px] !pt-0 border border-[#172034] min-h-[300px]"
className="w-[100%] max-w-[674px] absolute left-[50%] top-[65px] bg-customColor3 z-[500] -translate-x-[50%] text-textColor p-[16px] !pt-0 border border-customColor6 min-h-[300px]"
onClick={(e) => e.stopPropagation()}
>
<div className="w-full h-full relative">

View File

@ -116,7 +116,7 @@ export const Impersonate = () => {
<div>Currently Impersonating</div>
<div>
<div
className="px-[10px] rounded-[4px] bg-red-500 text-white cursor-pointer"
className="px-[10px] rounded-[4px] bg-red-500 text-textColor cursor-pointer"
onClick={stopImpersonating}
>
X
@ -140,15 +140,15 @@ export const Impersonate = () => {
{!!data?.length && (
<>
<div
className="bg-black/80 fixed left-0 top-0 w-full h-full z-[998]"
className="bg-primary/80 fixed left-0 top-0 w-full h-full z-[998]"
onClick={() => setName('')}
/>
<div className="absolute top-[100%] w-full left-0 bg-sixth border border-[#172034] text-white z-[999]">
<div className="absolute top-[100%] w-full left-0 bg-sixth border border-customColor6 text-textColor z-[999]">
{mapData?.map((user: any) => (
<div
onClick={setUser(user.id)}
key={user.id}
className="p-[10px] border-b border-[#172034] hover:bg-tableBorder cursor-pointer"
className="p-[10px] border-b border-customColor6 hover:bg-tableBorder cursor-pointer"
>
user: {user.id.split('-').at(-1)} - {user.name} -{' '}
{user.email}

View File

@ -30,6 +30,11 @@ import { CopilotKit } from '@copilotkit/react-core';
import { Impersonate } from '@gitroom/frontend/components/layout/impersonate';
import clsx from 'clsx';
import { BillingComponent } from '@gitroom/frontend/components/billing/billing.component';
import dynamic from 'next/dynamic';
const ModeComponent = dynamic(
() => import('@gitroom/frontend/components/layout/mode.component'),
{ ssr: false }
);
dayjs.extend(utc);
dayjs.extend(weekOfYear);
@ -68,12 +73,12 @@ export const LayoutSettings = ({ children }: { children: ReactNode }) => {
{(user.tier !== 'FREE' || !isGeneral()) && <Onboarding />}
<Support />
<ContinueProvider />
<div className="min-h-[100vh] w-full max-w-[1440px] mx-auto bg-primary px-[12px] text-white flex flex-col">
<div className="min-h-[100vh] w-full max-w-[1440px] mx-auto bg-primary px-[12px] text-textColor flex flex-col">
{user?.admin && <Impersonate />}
<div className="px-[23px] flex h-[80px] items-center justify-between z-[200] sticky top-0 bg-primary">
<Link
href="/"
className="text-2xl flex items-center gap-[10px]"
className="text-2xl flex items-center gap-[10px] text-textColor"
>
<div className="min-w-[55px]">
<Image
@ -89,7 +94,30 @@ export const LayoutSettings = ({ children }: { children: ReactNode }) => {
)}
>
{isGeneral() ? (
<img src="/postiz-text.svg" className="w-[80px]" />
<svg
width="80"
height="167"
viewBox="0 0 366 167"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M24.9659 30.4263V43.3825C26.9237 41.3095 29.3998 39.582 32.3941 38.2C35.3885 36.7028 39.0162 35.9543 43.2774 35.9543C47.1931 35.9543 50.8784 36.7028 54.3334 38.2C57.9036 39.6972 61.0131 42.1157 63.6619 45.4555C66.4259 48.6802 68.6141 52.9989 70.2264 58.4118C71.8387 63.8246 72.6449 70.3891 72.6449 78.1053C72.6449 83.6333 72.1266 89.1613 71.0902 94.6893C70.1688 100.217 68.4989 105.169 66.0804 109.546C63.6619 113.922 60.3796 117.492 56.2336 120.256C52.2028 122.905 47.1355 124.23 41.0316 124.23C36.6553 124.23 33.2003 123.654 30.6666 122.502C28.1329 121.235 26.2327 119.796 24.9659 118.183V160.162L0.0898438 166.381V30.4263H24.9659ZM32.7396 109.2C35.734 109.2 38.2676 108.221 40.3406 106.264C42.4136 104.191 44.026 101.542 45.1776 98.3171C46.4445 95.0924 47.3082 91.5222 47.7689 87.6066C48.3447 83.5757 48.6326 79.6025 48.6326 75.6868C48.6326 69.3526 48.0568 64.3429 46.9051 60.6575C45.8686 56.9722 44.6018 54.2658 43.1046 52.5383C41.6075 50.6956 40.1103 49.5439 38.6131 49.0833C37.2311 48.6226 36.137 48.3923 35.3309 48.3923C33.2579 48.3923 31.2425 49.1409 29.2846 50.638C27.3268 52.02 25.8872 54.1506 24.9659 57.0298V105.227C25.5417 106.148 26.463 107.07 27.7299 107.991C28.9967 108.797 30.6666 109.2 32.7396 109.2Z"
fill="currentColor"
/>
<path
d="M188.176 31.4627C191.055 42.5188 193.588 51.5593 195.777 58.5845C197.965 65.4945 199.807 71.3105 201.305 76.0323C202.917 80.7541 204.126 84.9001 204.932 88.4703C205.854 92.0405 206.314 96.0137 206.314 100.39C208.272 99.1232 210.172 97.7988 212.015 96.4168C213.858 94.9196 215.413 93.5376 216.679 92.2708H223.935C220.825 96.9926 217.543 100.908 214.088 104.018C210.633 107.012 207.293 109.661 204.069 111.964C201.996 116.456 198.829 119.623 194.567 121.466C190.306 123.308 185.872 124.23 181.266 124.23C176.083 124.23 171.649 123.539 167.964 122.157C164.279 120.659 161.227 118.702 158.808 116.283C156.505 113.749 154.777 110.87 153.626 107.646C152.474 104.421 151.898 101.023 151.898 97.4533C151.898 93.5376 152.819 90.4857 154.662 88.2975C156.62 85.9942 158.866 84.8426 161.399 84.8426C168.424 84.8426 171.937 87.6641 171.937 93.3073C171.937 95.15 171.304 96.7047 170.037 97.9716C168.77 99.2384 167.158 99.8718 165.2 99.8718C164.278 99.8718 163.3 99.7566 162.263 99.5263C161.342 99.1808 160.593 98.5474 160.017 97.6261C160.939 101.657 162.436 104.824 164.509 107.127C166.697 109.431 169.461 110.582 172.801 110.582C175.68 110.582 177.811 109.891 179.193 108.509C180.575 107.012 181.266 104.478 181.266 100.908C181.266 97.1078 180.92 93.7104 180.229 90.7161C179.653 87.6066 178.732 84.2091 177.465 80.5238C176.198 76.8385 174.644 72.4621 172.801 67.3948C170.958 62.2123 168.885 55.5326 166.582 47.3558C160.823 59.6786 153.222 67.5675 143.779 71.0225C143.779 71.9439 143.779 72.8652 143.779 73.7865C143.894 74.5927 143.952 75.4565 143.952 76.3778C143.952 83.0575 143.376 89.334 142.224 95.2076C141.072 100.966 139.115 106.033 136.351 110.41C133.702 114.671 130.247 118.068 125.986 120.602C121.724 123.02 116.484 124.23 110.265 124.23C106.004 124.23 101.916 123.596 98 122.329C94.1995 120.947 90.8021 118.759 87.8078 115.765C84.8134 112.655 82.3949 108.624 80.5523 103.672C78.8248 98.605 77.961 92.4436 77.961 85.188C77.961 80.2359 78.4793 74.9382 79.5158 69.295C80.5523 63.5367 82.4525 58.1814 85.2165 53.2293C87.9805 48.2771 91.7234 44.1887 96.4453 40.964C101.282 37.6242 107.444 35.9543 114.93 35.9543C122.646 35.9543 128.807 38.0273 133.414 42.1733C138.136 46.3193 141.303 52.9989 142.915 62.2123C146.946 61.2909 150.574 58.5269 153.798 53.9203C157.138 49.1984 160.305 42.8643 163.3 34.9177L188.176 31.4627ZM115.102 107.991C117.521 107.991 119.594 107.185 121.321 105.573C123.164 103.845 124.661 101.542 125.813 98.6626C126.964 95.6682 127.771 92.1556 128.231 88.1248C128.807 84.094 129.095 79.7176 129.095 74.9958V72.75C124.488 71.7135 122.185 68.3161 122.185 62.5578C122.185 58.8724 123.682 56.4539 126.677 55.3023C125.41 51.6169 123.855 49.1984 122.012 48.0468C120.285 46.8951 118.788 46.3193 117.521 46.3193C114.987 46.3193 112.799 47.5285 110.956 49.947C109.229 52.2504 107.789 55.2447 106.638 58.93C105.486 62.5002 104.622 66.4734 104.046 70.8498C103.586 75.2261 103.355 79.4297 103.355 83.4605C103.355 88.6431 103.701 92.8466 104.392 96.0713C105.198 99.296 106.177 101.772 107.329 103.5C108.48 105.227 109.747 106.436 111.129 107.127C112.511 107.703 113.835 107.991 115.102 107.991Z"
fill="currentColor"
/>
<path
d="M239.554 9.52348V36.818H250.092V43.728H239.554V95.5531C239.554 100.39 240.187 103.615 241.454 105.227C242.836 106.724 245.197 107.473 248.537 107.473C251.877 107.473 254.641 106.033 256.829 103.154C259.132 100.275 260.457 96.6471 260.802 92.2708H268.058C267.136 99.296 265.524 104.939 263.221 109.2C260.917 113.346 258.326 116.571 255.447 118.874C252.568 121.062 249.631 122.502 246.637 123.193C243.642 123.884 240.993 124.23 238.69 124.23C229.822 124.23 223.603 121.811 220.033 116.974C216.463 112.022 214.678 105.515 214.678 97.4533V43.728H209.15V36.818H214.678V12.9785L239.554 9.52348Z"
fill="currentColor"
/>
<path
d="M258.833 13.8422C258.833 10.0417 260.158 6.81706 262.806 4.16823C265.455 1.40422 268.68 0.0222168 272.48 0.0222168C276.281 0.0222168 279.506 1.40422 282.154 4.16823C284.918 6.81706 286.3 10.0417 286.3 13.8422C286.3 17.6427 284.918 20.8674 282.154 23.5162C279.506 26.1651 276.281 27.4895 272.48 27.4895C268.68 27.4895 265.455 26.1651 262.806 23.5162C260.158 20.8674 258.833 17.6427 258.833 13.8422ZM285.609 36.818V95.5531C285.609 100.39 286.243 103.615 287.51 105.227C288.892 106.724 291.253 107.473 294.592 107.473C296.09 107.473 297.184 107.358 297.875 107.127C298.681 106.897 299.372 106.667 299.948 106.436C300.063 107.012 300.12 107.588 300.12 108.164C300.12 108.74 300.12 109.315 300.12 109.891C300.12 112.77 299.602 115.131 298.566 116.974C297.644 118.817 296.377 120.314 294.765 121.466C293.268 122.502 291.598 123.193 289.755 123.539C288.028 123.999 286.358 124.23 284.746 124.23C275.878 124.23 269.659 121.811 266.089 116.974C262.518 112.022 260.733 105.515 260.733 97.4533V36.818H285.609ZM351.773 107.473C350.391 107.358 349.354 106.897 348.663 106.091C347.972 105.169 347.627 104.133 347.627 102.981C347.627 101.484 348.26 100.045 349.527 98.6626C350.794 97.1654 352.867 96.4168 355.746 96.4168C358.971 96.4168 361.389 97.5109 363.001 99.6991C364.614 101.772 365.42 104.248 365.42 107.127C365.42 108.97 365.074 110.87 364.383 112.828C363.692 114.671 362.598 116.398 361.101 118.011C359.604 119.508 357.761 120.775 355.573 121.811C353.385 122.732 350.851 123.193 347.972 123.193H300.293L334.152 46.1465H321.369C318.835 46.1465 316.704 46.3193 314.977 46.6648C313.365 46.8951 312.558 47.5285 312.558 48.565C312.558 49.0257 312.674 49.256 312.904 49.256C313.249 49.256 313.595 49.3712 313.94 49.6015C314.401 49.8318 314.747 50.2925 314.977 50.9835C315.322 51.6745 315.495 52.8838 315.495 54.6113C315.495 57.1449 314.689 58.9876 313.077 60.1393C311.579 61.2909 309.852 61.8668 307.894 61.8668C305.591 61.8668 303.345 61.1182 301.157 59.621C299.084 58.0087 298.047 55.5902 298.047 52.3655C298.047 50.638 298.393 48.9105 299.084 47.183C299.775 45.3403 300.811 43.6704 302.193 42.1733C303.575 40.5609 305.303 39.2941 307.376 38.3728C309.449 37.3363 311.867 36.818 314.631 36.818H362.138L329.142 109.891C329.833 109.891 330.812 109.949 332.079 110.064C333.346 110.179 334.67 110.294 336.052 110.41C337.55 110.525 338.989 110.64 340.371 110.755C341.868 110.87 343.193 110.928 344.344 110.928C346.417 110.928 348.145 110.697 349.527 110.237C351.024 109.776 351.773 108.855 351.773 107.473Z"
fill="currentColor"
/>
</svg>
) : (
'Gitroom'
)}
@ -101,6 +129,7 @@ export const LayoutSettings = ({ children }: { children: ReactNode }) => {
<div />
)}
<div className="flex items-center gap-[8px]">
<ModeComponent />
<SettingsComponent />
<NotificationComponent />
<OrganizationSelector />

View File

@ -0,0 +1,51 @@
'use client';
import { useCallback, useEffect, useState } from 'react';
const ModeComponent = () => {
const [mode, setMode] = useState(localStorage.getItem('mode') || 'dark');
const changeMode = useCallback(() => {
setMode(mode === 'dark' ? 'light' : 'dark');
localStorage.setItem('mode', mode === 'dark' ? 'light' : 'dark');
}, [mode]);
useEffect(() => {
console.log(mode);
document.body.classList.remove('dark', 'light');
document.body.classList.add(mode);
}, [mode]);
return (
<div onClick={changeMode} className="select-none">
{mode === 'dark' ? (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 32 32"
fill="none"
>
<path
d="M29.0175 17.955C28.9211 17.8588 28.8004 17.7907 28.6683 17.7579C28.5362 17.725 28.3976 17.7288 28.2675 17.7688C26.3175 18.3582 24.244 18.4074 22.2682 17.9113C20.2924 17.4152 18.4882 16.3923 17.0479 14.9516C15.6076 13.5109 14.5852 11.7064 14.0896 9.73049C13.594 7.75454 13.6438 5.68114 14.2337 3.73126C14.2731 3.60124 14.2765 3.46294 14.2434 3.33116C14.2103 3.19938 14.1421 3.07906 14.0459 2.98305C13.9498 2.88704 13.8294 2.81895 13.6976 2.78605C13.5657 2.75315 13.4275 2.75668 13.2975 2.79626C10.7119 3.5895 8.44227 5.1777 6.81123 7.33501C4.96231 9.79013 4.06245 12.8305 4.2773 15.8964C4.49215 18.9623 5.80724 21.8475 7.9805 24.0207C10.1538 26.194 13.0389 27.5091 16.1048 27.7239C19.1708 27.9388 22.2111 27.0389 24.6662 25.19C26.8236 23.559 28.4117 21.2893 29.205 18.7038C29.2445 18.5737 29.248 18.4353 29.215 18.3034C29.1819 18.1715 29.1137 18.0511 29.0175 17.955ZM23.7675 23.9913C21.601 25.6161 18.9212 26.4049 16.22 26.213C13.5188 26.021 10.9774 24.8611 9.06253 22.9462C7.14766 21.0313 5.98776 18.49 5.79579 15.7888C5.60382 13.0875 6.39266 10.4077 8.01748 8.24126C9.1748 6.70679 10.7024 5.49096 12.4575 4.70751C12.088 6.73704 12.2162 8.8259 12.831 10.795C13.4459 12.7642 14.5291 14.5548 15.9878 16.0135C17.4464 17.4722 19.2371 18.5554 21.2062 19.1702C23.1753 19.7851 25.2642 19.9133 27.2937 19.5438C26.5124 21.3011 25.2978 22.8314 23.7637 23.9913H23.7675Z"
fill="currentColor"
/>
</svg>
) : (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 32 32"
fill="none"
>
<path
d="M15 5V4C15 3.73478 15.1054 3.48043 15.2929 3.29289C15.4804 3.10536 15.7348 3 16 3C16.2652 3 16.5196 3.10536 16.7071 3.29289C16.8946 3.48043 17 3.73478 17 4V5C17 5.26522 16.8946 5.51957 16.7071 5.70711C16.5196 5.89464 16.2652 6 16 6C15.7348 6 15.4804 5.89464 15.2929 5.70711C15.1054 5.51957 15 5.26522 15 5ZM24 16C24 17.5823 23.5308 19.129 22.6518 20.4446C21.7727 21.7602 20.5233 22.7855 19.0615 23.391C17.5997 23.9965 15.9911 24.155 14.4393 23.8463C12.8874 23.5376 11.462 22.7757 10.3431 21.6569C9.22433 20.538 8.4624 19.1126 8.15372 17.5607C7.84504 16.0089 8.00346 14.4003 8.60896 12.9385C9.21447 11.4767 10.2398 10.2273 11.5554 9.34824C12.871 8.46919 14.4177 8 16 8C18.121 8.00232 20.1545 8.84591 21.6543 10.3457C23.1541 11.8455 23.9977 13.879 24 16ZM22 16C22 14.8133 21.6481 13.6533 20.9888 12.6666C20.3295 11.6799 19.3925 10.9108 18.2961 10.4567C17.1997 10.0026 15.9933 9.88378 14.8295 10.1153C13.6656 10.3468 12.5965 10.9182 11.7574 11.7574C10.9182 12.5965 10.3468 13.6656 10.1153 14.8295C9.88378 15.9933 10.0026 17.1997 10.4567 18.2961C10.9108 19.3925 11.6799 20.3295 12.6666 20.9888C13.6533 21.6481 14.8133 22 16 22C17.5908 21.9983 19.116 21.3657 20.2408 20.2408C21.3657 19.116 21.9983 17.5908 22 16ZM7.2925 8.7075C7.48014 8.89514 7.73464 9.00056 8 9.00056C8.26536 9.00056 8.51986 8.89514 8.7075 8.7075C8.89514 8.51986 9.00056 8.26536 9.00056 8C9.00056 7.73464 8.89514 7.48014 8.7075 7.2925L7.7075 6.2925C7.51986 6.10486 7.26536 5.99944 7 5.99944C6.73464 5.99944 6.48014 6.10486 6.2925 6.2925C6.10486 6.48014 5.99944 6.73464 5.99944 7C5.99944 7.26536 6.10486 7.51986 6.2925 7.7075L7.2925 8.7075ZM7.2925 23.2925L6.2925 24.2925C6.10486 24.4801 5.99944 24.7346 5.99944 25C5.99944 25.2654 6.10486 25.5199 6.2925 25.7075C6.48014 25.8951 6.73464 26.0006 7 26.0006C7.26536 26.0006 7.51986 25.8951 7.7075 25.7075L8.7075 24.7075C8.80041 24.6146 8.87411 24.5043 8.92439 24.3829C8.97468 24.2615 9.00056 24.1314 9.00056 24C9.00056 23.8686 8.97468 23.7385 8.92439 23.6171C8.87411 23.4957 8.80041 23.3854 8.7075 23.2925C8.61459 23.1996 8.50429 23.1259 8.3829 23.0756C8.2615 23.0253 8.13139 22.9994 8 22.9994C7.86861 22.9994 7.7385 23.0253 7.6171 23.0756C7.49571 23.1259 7.38541 23.1996 7.2925 23.2925ZM24 9C24.1314 9.0001 24.2615 8.97432 24.3829 8.92414C24.5042 8.87395 24.6146 8.80033 24.7075 8.7075L25.7075 7.7075C25.8951 7.51986 26.0006 7.26536 26.0006 7C26.0006 6.73464 25.8951 6.48014 25.7075 6.2925C25.5199 6.10486 25.2654 5.99944 25 5.99944C24.7346 5.99944 24.4801 6.10486 24.2925 6.2925L23.2925 7.2925C23.1525 7.43236 23.0571 7.61061 23.0185 7.80469C22.9798 7.99878 22.9996 8.19997 23.0754 8.38279C23.1511 8.56561 23.2794 8.72185 23.444 8.83172C23.6086 8.94159 23.8021 9.00016 24 9ZM24.7075 23.2925C24.5199 23.1049 24.2654 22.9994 24 22.9994C23.7346 22.9994 23.4801 23.1049 23.2925 23.2925C23.1049 23.4801 22.9994 23.7346 22.9994 24C22.9994 24.2654 23.1049 24.5199 23.2925 24.7075L24.2925 25.7075C24.3854 25.8004 24.4957 25.8741 24.6171 25.9244C24.7385 25.9747 24.8686 26.0006 25 26.0006C25.1314 26.0006 25.2615 25.9747 25.3829 25.9244C25.5043 25.8741 25.6146 25.8004 25.7075 25.7075C25.8004 25.6146 25.8741 25.5043 25.9244 25.3829C25.9747 25.2615 26.0006 25.1314 26.0006 25C26.0006 24.8686 25.9747 24.7385 25.9244 24.6171C25.8741 24.4957 25.8004 24.3854 25.7075 24.2925L24.7075 23.2925ZM5 15H4C3.73478 15 3.48043 15.1054 3.29289 15.2929C3.10536 15.4804 3 15.7348 3 16C3 16.2652 3.10536 16.5196 3.29289 16.7071C3.48043 16.8946 3.73478 17 4 17H5C5.26522 17 5.51957 16.8946 5.70711 16.7071C5.89464 16.5196 6 16.2652 6 16C6 15.7348 5.89464 15.4804 5.70711 15.2929C5.51957 15.1054 5.26522 15 5 15ZM16 26C15.7348 26 15.4804 26.1054 15.2929 26.2929C15.1054 26.4804 15 26.7348 15 27V28C15 28.2652 15.1054 28.5196 15.2929 28.7071C15.4804 28.8946 15.7348 29 16 29C16.2652 29 16.5196 28.8946 16.7071 28.7071C16.8946 28.5196 17 28.2652 17 28V27C17 26.7348 16.8946 26.4804 16.7071 26.2929C16.5196 26.1054 16.2652 26 16 26ZM28 15H27C26.7348 15 26.4804 15.1054 26.2929 15.2929C26.1054 15.4804 26 15.7348 26 16C26 16.2652 26.1054 16.5196 26.2929 16.7071C26.4804 16.8946 26.7348 17 27 17H28C28.2652 17 28.5196 16.8946 28.7071 16.7071C28.8946 16.5196 29 16.2652 29 16C29 15.7348 28.8946 15.4804 28.7071 15.2929C28.5196 15.1054 28.2652 15 28 15Z"
fill="currentColor"
/>
</svg>
)}
</div>
);
};
export default ModeComponent;

View File

@ -82,7 +82,7 @@ export const SettingsPopup: FC<{ getRef?: Ref<any> }> = (props) => {
<div
className={clsx(
'w-full max-w-[920px] mx-auto bg-sixth gap-[24px] flex flex-col relative',
!getRef && 'p-[32px] rounded-[4px] border border-[#172034]'
!getRef && 'p-[32px] rounded-[4px] border border-customColor6'
)}
>
{!getRef && (
@ -112,17 +112,17 @@ export const SettingsPopup: FC<{ getRef?: Ref<any> }> = (props) => {
)}
<div className="flex flex-col gap-[4px]">
<div className="text-[20px] font-[500]">Profile</div>
<div className="text-[14px] text-[#AAA] font-[400]">
<div className="text-[14px] text-customColor18 font-[400]">
Add profile information
</div>
</div>
<div className="rounded-[4px] border border-[#172034] p-[24px] flex flex-col">
<div className="rounded-[4px] border border-customColor6 p-[24px] flex flex-col">
<div className="flex justify-between items-center">
<div className="w-[455px]">
<Input label="Full Name" name="fullname" />
</div>
<div className="flex gap-[8px] mb-[10px]">
<div className="w-[48px] h-[48px] rounded-full bg-[#D9D9D9]">
<div className="w-[48px] h-[48px] rounded-full bg-customColor38">
{!!picture?.path && (
<img
src={picture?.path}
@ -157,7 +157,7 @@ export const SettingsPopup: FC<{ getRef?: Ref<any> }> = (props) => {
</div>
</button>
<button
className="h-[24px] w-[88px] rounded-[4px] border-2 border-[#506490] flex justify-center items-center gap-[4px]"
className="h-[24px] w-[88px] rounded-[4px] border-2 border-customColor21 flex justify-center items-center gap-[4px]"
type="button"
>
<div>
@ -205,7 +205,7 @@ export const SettingsComponent = () => {
settings.openModal({
children: <SettingsPopup />,
classNames: {
modal: 'bg-transparent text-white',
modal: 'bg-transparent text-textColor',
},
withCloseButton: false,
size: '100%',
@ -224,7 +224,7 @@ export const SettingsComponent = () => {
>
<path
d="M19.9987 15.5C19.1087 15.5 18.2387 15.7639 17.4986 16.2584C16.7586 16.7528 16.1818 17.4556 15.8413 18.2779C15.5007 19.1002 15.4115 20.005 15.5852 20.8779C15.7588 21.7508 16.1874 22.5526 16.8167 23.182C17.4461 23.8113 18.2479 24.2399 19.1208 24.4135C19.9937 24.5871 20.8985 24.498 21.7208 24.1574C22.5431 23.8168 23.2459 23.2401 23.7403 22.5C24.2348 21.76 24.4987 20.89 24.4987 20C24.4975 18.8069 24.023 17.663 23.1793 16.8194C22.3357 15.9757 21.1918 15.5012 19.9987 15.5ZM19.9987 23C19.4054 23 18.8254 22.824 18.332 22.4944C17.8387 22.1647 17.4541 21.6962 17.2271 21.148C17 20.5999 16.9406 19.9967 17.0564 19.4147C17.1721 18.8328 17.4578 18.2982 17.8774 17.8787C18.297 17.4591 18.8315 17.1734 19.4134 17.0576C19.9954 16.9419 20.5986 17.0013 21.1468 17.2283C21.6949 17.4554 22.1635 17.8399 22.4931 18.3333C22.8228 18.8266 22.9987 19.4066 22.9987 20C22.9987 20.7956 22.6826 21.5587 22.12 22.1213C21.5574 22.6839 20.7944 23 19.9987 23ZM30.3056 18.0509C30.2847 17.9453 30.2413 17.8454 30.1784 17.7581C30.1155 17.6707 30.0345 17.5979 29.9409 17.5447L27.1443 15.9509L27.1331 12.799C27.1327 12.6905 27.1089 12.5833 27.063 12.4849C27.0172 12.3865 26.9506 12.2992 26.8678 12.229C25.8533 11.3709 24.6851 10.7134 23.4253 10.2912C23.3261 10.2577 23.2209 10.2452 23.1166 10.2547C23.0123 10.2643 22.9111 10.2955 22.8197 10.3465L19.9987 11.9234L17.175 10.3437C17.0834 10.2924 16.9821 10.2609 16.8776 10.2513C16.7732 10.2416 16.6678 10.2539 16.5684 10.2875C15.3095 10.7127 14.1426 11.3728 13.1297 12.2328C13.0469 12.3028 12.9804 12.39 12.9346 12.4882C12.8888 12.5865 12.8648 12.6935 12.8643 12.8019L12.8503 15.9565L10.0537 17.5503C9.96015 17.6036 9.87916 17.6763 9.81623 17.7637C9.7533 17.8511 9.70992 17.9509 9.68903 18.0565C9.43309 19.3427 9.43309 20.6667 9.68903 21.9528C9.70992 22.0584 9.7533 22.1583 9.81623 22.2456C9.87916 22.333 9.96015 22.4058 10.0537 22.459L12.8503 24.0528L12.8615 27.2047C12.8619 27.3132 12.8858 27.4204 12.9316 27.5188C12.9774 27.6172 13.044 27.7045 13.1268 27.7747C14.1413 28.6328 15.3095 29.2904 16.5693 29.7125C16.6686 29.7461 16.7737 29.7585 16.878 29.749C16.9823 29.7394 17.0835 29.7082 17.175 29.6572L19.9987 28.0765L22.8225 29.6562C22.9342 29.7185 23.0602 29.7508 23.1881 29.75C23.27 29.75 23.3514 29.7367 23.429 29.7106C24.6878 29.286 25.8547 28.6265 26.8678 27.7672C26.9505 27.6971 27.017 27.61 27.0628 27.5117C27.1087 27.4135 27.1326 27.3065 27.1331 27.1981L27.1472 24.0434L29.9437 22.4497C30.0373 22.3964 30.1183 22.3236 30.1812 22.2363C30.2441 22.1489 30.2875 22.049 30.3084 21.9434C30.5629 20.6583 30.562 19.3357 30.3056 18.0509ZM28.8993 21.3237L26.2209 22.8472C26.1035 22.9139 26.0064 23.0111 25.9397 23.1284C25.8853 23.2222 25.8281 23.3215 25.77 23.4153C25.6956 23.5335 25.6559 23.6703 25.6556 23.81L25.6415 26.8334C24.9216 27.3988 24.1195 27.8509 23.2631 28.174L20.5612 26.6684C20.449 26.6064 20.3228 26.5741 20.1947 26.5747H20.1768C20.0634 26.5747 19.949 26.5747 19.8356 26.5747C19.7014 26.5713 19.5688 26.6037 19.4512 26.6684L16.7475 28.1778C15.8892 27.8571 15.0849 27.4072 14.3625 26.8437L14.3522 23.825C14.3517 23.685 14.3121 23.548 14.2378 23.4294C14.1797 23.3356 14.1225 23.2419 14.069 23.1425C14.0028 23.0233 13.9056 22.9242 13.7878 22.8556L11.1065 21.3284C10.9678 20.4507 10.9678 19.5567 11.1065 18.679L13.7803 17.1528C13.8976 17.0861 13.9948 16.9889 14.0615 16.8715C14.1159 16.7778 14.1731 16.6784 14.2312 16.5847C14.3056 16.4664 14.3453 16.3297 14.3456 16.19L14.3597 13.1665C15.0796 12.6012 15.8816 12.1491 16.7381 11.8259L19.4362 13.3315C19.5536 13.3966 19.6864 13.429 19.8206 13.4253C19.934 13.4253 20.0484 13.4253 20.1618 13.4253C20.296 13.4286 20.4287 13.3963 20.5462 13.3315L23.25 11.8222C24.1082 12.1429 24.9125 12.5927 25.635 13.1562L25.6453 16.175C25.6457 16.3149 25.6854 16.452 25.7597 16.5706C25.8178 16.6644 25.875 16.7581 25.9284 16.8575C25.9947 16.9767 26.0918 17.0758 26.2097 17.1444L28.8909 18.6715C29.0315 19.5499 29.0331 20.4449 28.8956 21.3237H28.8993Z"
fill="white"
fill="currentColor"
/>
</svg>
);

View File

@ -18,7 +18,7 @@ export const Support = () => {
if (!process.env.NEXT_PUBLIC_DISCORD_SUPPORT || !show) return null
return (
<div
className="bg-[#fff] w-[194px] h-[58px] fixed right-[20px] bottom-[20px] z-[500] text-[16px] text-[#0E0E0E] rounded-[30px] !rounded-br-[0] cursor-pointer flex justify-center items-center gap-[10px]"
className="bg-customColor39 w-[194px] h-[58px] fixed right-[20px] bottom-[20px] z-[500] text-[16px] text-customColor40 rounded-[30px] !rounded-br-[0] cursor-pointer flex justify-center items-center gap-[10px]"
onClick={() => window.open(process.env.NEXT_PUBLIC_DISCORD_SUPPORT)}
>
<div>
@ -32,7 +32,7 @@ export const Support = () => {
>
<path
d="M26.1303 11.347C24.3138 9.93899 22.134 9.23502 19.8331 9.11768L19.4697 9.4697C21.5284 9.93899 23.345 10.8776 25.0404 12.1683C22.9817 11.1123 20.6807 10.4084 18.2587 10.1737C17.5321 10.0563 16.9266 10.0563 16.2 10.0563C15.4734 10.0563 14.8679 10.0563 14.1413 10.1737C11.7193 10.4084 9.41833 11.1123 7.35963 12.1683C9.05501 10.8776 10.8716 9.93899 12.9303 9.4697L12.5669 9.11768C10.266 9.23502 8.08621 9.93899 6.26972 11.347C4.21101 15.1017 3.1211 19.3257 3 23.6669C4.81649 25.5443 7.35963 26.7177 10.0239 26.7177C10.0239 26.7177 10.8716 25.779 11.477 24.9576C9.90277 24.6057 8.44954 23.7843 7.48074 22.4937C8.32843 22.963 9.17611 23.4323 10.0239 23.7843C11.1138 24.2537 12.2037 24.4883 13.2936 24.723C14.2624 24.8403 15.2312 24.9576 16.2 24.9576C17.1688 24.9576 18.1376 24.8403 19.1064 24.723C20.1963 24.4883 21.2862 24.2537 22.3761 23.7843C23.2239 23.4323 24.0716 22.963 24.9193 22.4937C23.9505 23.7843 22.4972 24.6057 20.923 24.9576C21.5284 25.779 22.3761 26.7177 22.3761 26.7177C25.0404 26.7177 27.5835 25.5443 29.4 23.6669C29.2789 19.3257 28.189 15.1017 26.1303 11.347ZM12.2037 21.555C10.9927 21.555 9.90278 20.499 9.90278 19.2084C9.90278 17.9177 10.9927 16.8617 12.2037 16.8617C13.4147 16.8617 14.5046 17.9177 14.5046 19.2084C14.5046 20.499 13.4147 21.555 12.2037 21.555ZM20.1963 21.555C18.9853 21.555 17.8954 20.499 17.8954 19.2084C17.8954 17.9177 18.9853 16.8617 20.1963 16.8617C21.4073 16.8617 22.4972 17.9177 22.4972 19.2084C22.4972 20.499 21.4073 21.555 20.1963 21.555Z"
fill="#0E0E0E"
fill="currentColor"
/>
</svg>
</div>

View File

@ -11,8 +11,8 @@ export const BuyerSeller: FC = () => {
<div className="relative">
<div className="w-[286px] h-[50px] bg-third p-[9px] flex select-none absolute -translate-y-[63px] right-0">
<div className="bg-input flex flex-1">
<Link href="/marketplace/seller" className={clsx("flex justify-center items-center flex-1", pathComputed.indexOf('/marketplace/seller') > -1 && 'bg-forth')}>Seller</Link>
<Link href="/marketplace/buyer" className={clsx("flex justify-center items-center flex-1", pathComputed.indexOf('/marketplace/buyer') > -1 && 'bg-forth')}>Buyer</Link>
<Link href="/marketplace/seller" className={clsx("flex justify-center items-center flex-1", pathComputed.indexOf('/marketplace/seller') > -1 && 'bg-forth text-white')}>Seller</Link>
<Link href="/marketplace/buyer" className={clsx("flex justify-center items-center flex-1", pathComputed.indexOf('/marketplace/buyer') > -1 && 'bg-forth text-white')}>Buyer</Link>
</div>
</div>
</div>

View File

@ -165,7 +165,7 @@ const Pagination: FC<{ results: number }> = (props) => {
onClick={changePage(p)}
className={clsx(
'w-[40px] h-[40px] flex justify-center items-center rounded-[8px] cursor-pointer',
p === page + 1 ? 'bg-[#8155DD]' : 'text-inputText'
p === page + 1 ? 'bg-customColor4' : 'text-inputText'
)}
>
{p}
@ -252,10 +252,10 @@ export const Options: FC<{
return (
<>
<div className="h-[56px] text-[20px] font-[600] flex items-center px-[24px] bg-[#0F1524]">
<div className="h-[56px] text-[20px] font-[600] flex items-center px-[24px] bg-customColor8">
{title}
</div>
<div className="bg-[#0b0f1c] flex px-[32px] py-[24px]">
<div className="bg-customColor3 flex px-[32px] py-[24px]">
{optionsGroup.map((options, key) => (
<div
key={`options_` + key}
@ -313,7 +313,7 @@ export const RequestService: FC<{ toId: string; name: string }> = (props) => {
return (
<form onSubmit={form.handleSubmit(createConversation)}>
<FormProvider {...form}>
<div className="w-full max-w-[920px] mx-auto bg-sixth px-[16px] rounded-[4px] border border-[#172034] gap-[24px] flex flex-col relative">
<div className="w-full max-w-[920px] mx-auto bg-sixth px-[16px] rounded-[4px] border border-customColor6 gap-[24px] flex flex-col relative">
<button
onClick={close}
className="outline-none absolute right-[20px] top-[20px] mantine-UnstyledButton-root mantine-ActionIcon-root hover:bg-tableBorder cursor-pointer mantine-Modal-close mantine-1dcetaa"
@ -376,7 +376,7 @@ export const Card: FC<{
modal.openModal({
children: <RequestService toId={data.id} name={data.name || 'Noname'} />,
classNames: {
modal: 'bg-transparent text-white',
modal: 'bg-transparent text-textColor',
},
withCloseButton: false,
size: '100%',
@ -404,7 +404,7 @@ export const Card: FC<{
className="rounded-full w-full h-full"
/>
)}
<div className="w-[80px] h-[28px] bg-[#8155DD] absolute bottom-0 left-[50%] -translate-x-[50%] rounded-[30px] flex gap-[4px] justify-center items-center">
<div className="w-[80px] h-[28px] bg-customColor4 absolute bottom-0 left-[50%] -translate-x-[50%] rounded-[30px] flex gap-[4px] justify-center items-center">
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
@ -430,7 +430,7 @@ export const Card: FC<{
{data.items.some((i) => i.key === 'content-writer') && (
<div
className={clsx(
'bg-[#172034] rounded-[34px] py-[8px] px-[12px] text-[12px]',
'bg-customColor6 rounded-[34px] py-[8px] px-[12px] text-[12px]',
interClass
)}
>
@ -440,7 +440,7 @@ export const Card: FC<{
{data.items.some((i) => i.key === 'influencers') && (
<div
className={clsx(
'bg-[#172034] rounded-[34px] py-[8px] px-[12px] text-[12px]',
'bg-customColor6 rounded-[34px] py-[8px] px-[12px] text-[12px]',
interClass
)}
>
@ -458,12 +458,12 @@ export const Card: FC<{
))}
</div>
</div>
<div className="text-[18px] text-[#AAA] font-[400]">
<div className="text-[18px] text-customColor18 font-[400]">
{data.bio || 'No bio'}
</div>
<div
className={clsx(
'gap-[8px] flex items-center text-[10px] font-[300] text-[#CEBDF2] tracking-[1.2px] uppercase',
'gap-[8px] flex items-center text-[10px] font-[300] text-customColor41 tracking-[1.2px] uppercase',
interClass
)}
>
@ -472,7 +472,7 @@ export const Card: FC<{
<div>{tag}</div>
{index !== tags.length - 1 && (
<div>
<div className="w-[4px] h-[4px] bg-[#324264] rounded-full" />
<div className="w-[4px] h-[4px] bg-customColor1 rounded-full" />
</div>
)}
</Fragment>

View File

@ -25,9 +25,9 @@ export const OrderList: FC<{ type: 'seller' | 'buyer' }> = (props) => {
if (isLoading || !data?.orders?.length) return <></>;
return (
<div className="bg-sixth p-[24px] flex flex-col gap-[24px] border border-[#172034] rounded-[4px]">
<div className="bg-sixth p-[24px] flex flex-col gap-[24px] border border-customColor6 rounded-[4px]">
<h3 className="text-[24px]">Orders</h3>
<div className="pt-[20px] px-[24px] border border-[#172034] flex">
<div className="pt-[20px] px-[24px] border border-customColor6 flex">
<table className="w-full">
<tr>
<td colSpan={biggerRow + 1} className="pb-[20px]">

View File

@ -160,7 +160,7 @@ export const NewOrder: FC<{ group: string }> = (props) => {
return (
<form onSubmit={form.handleSubmit(submit)}>
<FormProvider {...form}>
<div className="w-full max-w-[647px] mx-auto bg-sixth px-[16px] rounded-[4px] border border-[#172034] gap-[24px] flex flex-col relative">
<div className="w-full max-w-[647px] mx-auto bg-sixth px-[16px] rounded-[4px] border border-customColor6 gap-[24px] flex flex-col relative">
<button
onClick={close}
className="outline-none absolute right-[20px] top-[20px] mantine-UnstyledButton-root mantine-ActionIcon-root hover:bg-tableBorder cursor-pointer mantine-Modal-close mantine-1dcetaa"
@ -189,7 +189,7 @@ export const NewOrder: FC<{ group: string }> = (props) => {
{index !== 0 && (
<div
onClick={() => remove(index)}
className="cursor-pointer top-[3px] z-[99] w-[15px] h-[15px] bg-red-500 rounded-full text-white absolute left-[60px] text-[12px] flex justify-center items-center pb-[2px] select-none"
className="cursor-pointer top-[3px] z-[99] w-[15px] h-[15px] bg-red-500 rounded-full text-textColor absolute left-[60px] text-[12px] flex justify-center items-center pb-[2px] select-none"
>
x
</div>
@ -231,7 +231,7 @@ export const NewOrder: FC<{ group: string }> = (props) => {
onClick={() =>
append({ value: undefined, total: 1, price: '' })
}
className="select-none rounded-[4px] border-2 border-[#506490] flex py-[9.5px] px-[24px] items-center gap-[4px] text-[14px] float-left cursor-pointer"
className="select-none rounded-[4px] border-2 border-customColor21 flex py-[9.5px] px-[24px] items-center gap-[4px] text-[14px] float-left cursor-pointer"
>
<div>
<svg
@ -283,11 +283,11 @@ export const OrderInProgress: FC<{ group: string; buyer: boolean, order: string
return (
<div className="flex gap-[10px]">
{buyer && (
<div onClick={completeOrder} className="rounded-[34px] border-[1px] border-[#506490] !bg-sixth h-[28px] justify-center items-center text-[12px] px-[12px] flex font-[600] cursor-pointer">
<div onClick={completeOrder} className="rounded-[34px] border-[1px] border-customColor21 !bg-sixth h-[28px] justify-center items-center text-[12px] px-[12px] flex font-[600] cursor-pointer">
Complete order and pay early
</div>
)}
<div className="h-[28px] justify-center items-center bg-[#32D583] text-[12px] px-[12px] flex rounded-[34px] font-[600]">
<div className="h-[28px] justify-center items-center bg-customColor42 text-[12px] px-[12px] flex rounded-[34px] font-[600]">
Order in progress
</div>
</div>
@ -301,7 +301,7 @@ export const CreateNewOrder: FC<{ group: string }> = (props) => {
const createOrder = useCallback(() => {
modals.openModal({
classNames: {
modal: 'bg-transparent text-white',
modal: 'bg-transparent text-textColor',
},
withCloseButton: false,
size: '100%',
@ -311,7 +311,7 @@ export const CreateNewOrder: FC<{ group: string }> = (props) => {
return (
<div
className="h-[28px] justify-center items-center bg-[#32D583] text-[12px] px-[12px] flex rounded-[34px] font-[600] cursor-pointer"
className="h-[28px] justify-center items-center bg-customColor42 text-[12px] px-[12px] flex rounded-[34px] font-[600] cursor-pointer"
onClick={createOrder}
>
Create a new offer

View File

@ -21,7 +21,7 @@ export const AddAccount: FC<{ openBankAccount: (country: string) => void }> = (
const [country, setCountry] = useState('');
const [loading, setLoading] = useState(false);
return (
<div className="bg-sixth p-[32px] text-[20px] w-full max-w-[600px] mx-auto flex flex-col gap-[24px] rounded-[4px] border border-[#172034] relative">
<div className="bg-sixth p-[32px] text-[20px] w-full max-w-[600px] mx-auto flex flex-col gap-[24px] rounded-[4px] border border-customColor6 relative">
Please select your country where your business is.
<br />
<Select
@ -147,7 +147,7 @@ export const Seller = () => {
modals.openModal({
size: '100%',
classNames: {
modal: 'bg-transparent text-white',
modal: 'bg-transparent text-textColor',
},
withCloseButton: false,
children: <AddAccount openBankAccount={connectBankAccountLink} />,
@ -172,8 +172,8 @@ export const Seller = () => {
<div className="flex mt-[29px] w-full gap-[26px]">
<div className="w-[328px] flex flex-col gap-[16px]">
<h2 className="text-[20px]">Seller Mode</h2>
<div className="flex p-[24px] bg-sixth rounded-[4px] border border-[#172034] flex-col items-center gap-[16px]">
<div className="w-[64px] h-[64px] bg-[#D9D9D9] rounded-full">
<div className="flex p-[24px] bg-sixth rounded-[4px] border border-customColor6 flex-col items-center gap-[16px]">
<div className="w-[64px] h-[64px] bg-customColor38 rounded-full">
{!!data?.picture?.path && (
<img
className="w-full h-full rounded-full"
@ -193,7 +193,7 @@ export const Seller = () => {
<div className="text-[18px]">Active</div>
</div>
)}
<div className="border-t border-t-[#425379] w-full" />
<div className="border-t border-t-customColor43 w-full" />
<div className="w-full">
<Button
className="w-full"
@ -209,7 +209,7 @@ export const Seller = () => {
</div>
<div className="flex-1 flex gap-[16px] flex-col">
<h2 className="text-[20px]">Details</h2>
<div className="bg-sixth rounded-[4px] border border-[#172034]">
<div className="bg-sixth rounded-[4px] border border-customColor6">
{tagsList.map((tag) => (
<Options
rows={3}
@ -221,10 +221,10 @@ export const Seller = () => {
title={tag.name}
/>
))}
<div className="h-[56px] text-[20px] font-[600] flex items-center px-[24px] bg-[#0F1524]">
<div className="h-[56px] text-[20px] font-[600] flex items-center px-[24px] bg-customColor8">
Audience Size
</div>
<div className="bg-[#0b0f1c] flex px-[32px] py-[24px]">
<div className="bg-customColor3 flex px-[32px] py-[24px]">
<div className="flex-1">
<Input
label="Audience size on all platforms"

View File

@ -30,8 +30,8 @@ interface SpecialMessageInterface {
export const OrderCompleted: FC = () => {
return (
<div className="border border-[#283450] flex flex-col rounded-[6px] overflow-hidden">
<div className="flex items-center bg-[#0F1524] px-[24px] py-[16px] text-[20px]">
<div className="border border-customColor44 flex flex-col rounded-[6px] overflow-hidden">
<div className="flex items-center bg-customColor8 px-[24px] py-[16px] text-[20px]">
<div className="flex-1">Order completed</div>
</div>
<div className="py-[16px] px-[24px] flex flex-col gap-[20px] text-[18px]">
@ -49,8 +49,8 @@ export const Published: FC<{
}> = (props) => {
const { data, isSellerOrBuyer } = props;
return (
<div className="border border-[#283450] flex flex-col rounded-[6px] overflow-hidden">
<div className="flex items-center bg-[#0F1524] px-[24px] py-[16px] text-[20px]">
<div className="border border-customColor44 flex flex-col rounded-[6px] overflow-hidden">
<div className="flex items-center bg-customColor8 px-[24px] py-[16px] text-[20px]">
<div className="flex-1">
{isSellerOrBuyer === 'BUYER' ? 'Your' : 'The'} post has been published
</div>
@ -99,7 +99,7 @@ export const PreviewPopup: FC<{
return modal.closeAll();
}, []);
return (
<div className="bg-black p-[20px] w-full relative">
<div className="bg-primary p-[20px] w-full relative">
<button
onClick={close}
className="outline-none absolute right-[20px] top-[20px] mantine-UnstyledButton-root mantine-ActionIcon-root hover:bg-tableBorder cursor-pointer mantine-Modal-close mantine-1dcetaa"
@ -150,10 +150,10 @@ export const Offer: FC<{
}, 0);
}, [data?.data?.ordersItems]);
return (
<div className="border border-[#283450] flex flex-col rounded-[6px] overflow-hidden">
<div className="flex items-center bg-[#0F1524] px-[24px] py-[16px] text-[20px]">
<div className="border border-customColor44 flex flex-col rounded-[6px] overflow-hidden">
<div className="flex items-center bg-customColor8 px-[24px] py-[16px] text-[20px]">
<div className="flex-1">New Offer</div>
<div className="text-[#32D583]">${totalPrice}</div>
<div className="text-customColor42">${totalPrice}</div>
</div>
<div className="py-[16px] px-[24px] flex flex-col gap-[20px]">
<div className="text-inputText text-[12px]">Platform</div>
@ -275,7 +275,7 @@ export const Post: FC<{
modal.openModal({
classNames: {
modal: 'bg-transparent text-white',
modal: 'bg-transparent text-textColor',
},
size: 'auto',
withCloseButton: false,
@ -305,8 +305,8 @@ export const Post: FC<{
}>(`/integrations/${data.data.integration}`, getIntegration);
return (
<div className="border border-[#283450] flex flex-col rounded-[6px] overflow-hidden">
<div className="flex items-center bg-[#0F1524] px-[24px] py-[16px] text-[20px]">
<div className="border border-customColor44 flex flex-col rounded-[6px] overflow-hidden">
<div className="flex items-center bg-customColor8 px-[24px] py-[16px] text-[20px]">
<div className="flex-1">
Post Draft {capitalize(integrationData?.providerIdentifier || '')}
</div>
@ -336,13 +336,13 @@ export const Post: FC<{
<div className="mt-[18px] flex gap-[10px] justify-end">
<Button
onClick={requestRevision}
className="rounded-[4px] text-[14px] border-[2px] border-[#506490] !bg-sixth"
className="rounded-[4px] text-[14px] border-[2px] border-customColor21 !bg-sixth"
>
Revision Needed
</Button>
<Button
onClick={requestApproved}
className="rounded-[4px] text-[14px] border-[2px] border-[#506490] !bg-sixth"
className="rounded-[4px] text-[14px] border-[2px] border-customColor21 !bg-sixth"
>
Approve
</Button>

View File

@ -43,7 +43,7 @@ export const ShowMediaBoxModal: FC = () => {
if (!showModal) return null;
return (
<div className="text-white">
<div className="text-textColor">
<MediaBox setMedia={callBack!} closeModal={closeModal} />
</div>
);
@ -94,7 +94,7 @@ export const MediaBox: FC<{
}, [data]);
return (
<div className="fixed left-0 top-0 bg-black/80 z-[300] w-full min-h-full p-[60px] animate-fade">
<div className="fixed left-0 top-0 bg-primary/80 z-[300] w-full min-h-full p-[60px] animate-fade">
<div className="w-full h-full bg-sixth border-tableBorder border-2 rounded-xl pb-[20px] px-[20px] relative">
<div className="flex">
<div className="flex-1">
@ -102,7 +102,7 @@ export const MediaBox: FC<{
</div>
<button
onClick={closeModal}
className="outline-none absolute right-[20px] top-[20px] mantine-UnstyledButton-root mantine-ActionIcon-root bg-black hover:bg-tableBorder cursor-pointer mantine-Modal-close mantine-1dcetaa"
className="outline-none absolute right-[20px] top-[20px] mantine-UnstyledButton-root mantine-ActionIcon-root bg-primary hover:bg-tableBorder cursor-pointer mantine-Modal-close mantine-1dcetaa"
type="button"
>
<svg
@ -144,7 +144,7 @@ export const MediaBox: FC<{
<div
className={clsx(
'flex flex-wrap gap-[10px] mt-[35px] pt-[20px]',
!!mediaList.length && 'justify-center items-center text-white'
!!mediaList.length && 'justify-center items-center text-textColor'
)}
>
{!mediaList.length && (
@ -268,10 +268,11 @@ export const MultiMediaComponent: FC<{
<div className="flex">
<Button
onClick={showModal}
className="ml-[10px] rounded-[4px] mb-[10px] gap-[8px] justify-center items-center w-[127px] flex border border-dashed border-[#506490] bg-input"
className="ml-[10px] rounded-[4px] mb-[10px] gap-[8px] !text-primary justify-center items-center w-[127px] flex border border-dashed border-customColor21 bg-input"
>
<div>
<svg
className="!text-primary"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
@ -280,16 +281,16 @@ export const MultiMediaComponent: FC<{
>
<path
d="M19.5 3H7.5C7.10218 3 6.72064 3.15804 6.43934 3.43934C6.15804 3.72064 6 4.10218 6 4.5V6H4.5C4.10218 6 3.72064 6.15804 3.43934 6.43934C3.15804 6.72064 3 7.10218 3 7.5V19.5C3 19.8978 3.15804 20.2794 3.43934 20.5607C3.72064 20.842 4.10218 21 4.5 21H16.5C16.8978 21 17.2794 20.842 17.5607 20.5607C17.842 20.2794 18 19.8978 18 19.5V18H19.5C19.8978 18 20.2794 17.842 20.5607 17.5607C20.842 17.2794 21 16.8978 21 16.5V4.5C21 4.10218 20.842 3.72064 20.5607 3.43934C20.2794 3.15804 19.8978 3 19.5 3ZM7.5 4.5H19.5V11.0044L17.9344 9.43875C17.6531 9.15766 17.2717 8.99976 16.8741 8.99976C16.4764 8.99976 16.095 9.15766 15.8137 9.43875L8.75344 16.5H7.5V4.5ZM16.5 19.5H4.5V7.5H6V16.5C6 16.8978 6.15804 17.2794 6.43934 17.5607C6.72064 17.842 7.10218 18 7.5 18H16.5V19.5ZM19.5 16.5H10.875L16.875 10.5L19.5 13.125V16.5ZM11.25 10.5C11.695 10.5 12.13 10.368 12.5 10.1208C12.87 9.87357 13.1584 9.52217 13.3287 9.11104C13.499 8.6999 13.5436 8.2475 13.4568 7.81105C13.37 7.37459 13.1557 6.97368 12.841 6.65901C12.5263 6.34434 12.1254 6.13005 11.689 6.04323C11.2525 5.95642 10.8001 6.00097 10.389 6.17127C9.97783 6.34157 9.62643 6.62996 9.37919 6.99997C9.13196 7.36998 9 7.80499 9 8.25C9 8.84674 9.23705 9.41903 9.65901 9.84099C10.081 10.2629 10.6533 10.5 11.25 10.5ZM11.25 7.5C11.3983 7.5 11.5433 7.54399 11.6667 7.6264C11.79 7.70881 11.8861 7.82594 11.9429 7.96299C11.9997 8.10003 12.0145 8.25083 11.9856 8.39632C11.9566 8.5418 11.8852 8.67544 11.7803 8.78033C11.6754 8.88522 11.5418 8.95665 11.3963 8.98559C11.2508 9.01453 11.1 8.99968 10.963 8.94291C10.8259 8.88614 10.7088 8.79001 10.6264 8.66668C10.544 8.54334 10.5 8.39834 10.5 8.25C10.5 8.05109 10.579 7.86032 10.7197 7.71967C10.8603 7.57902 11.0511 7.5 11.25 7.5Z"
fill="white"
fill="currentColor"
/>
</svg>
</div>
<div className="text-[12px] font-[500]">Insert Media</div>
<div className="text-[12px] font-[500] text-primary">Insert Media</div>
</Button>
<Button
onClick={designMedia}
className="ml-[10px] rounded-[4px] mb-[10px] gap-[8px] justify-center items-center w-[127px] flex border border-dashed border-[#506490] !bg-[#832ad5]"
className="ml-[10px] rounded-[4px] mb-[10px] gap-[8px] justify-center items-center w-[127px] flex border border-dashed border-customColor21 !bg-customColor45"
>
<div>
<svg
@ -305,7 +306,7 @@ export const MultiMediaComponent: FC<{
/>
</svg>
</div>
<div className="text-[12px] font-[500]">Design Media</div>
<div className="text-[12px] font-[500] !text-white">Design Media</div>
</Button>
</div>
@ -327,7 +328,7 @@ export const MultiMediaComponent: FC<{
</div>
<div
onClick={clearMedia(index)}
className="rounded-full w-[15px] h-[15px] bg-red-800 text-white flex justify-center items-center absolute -right-[4px] -top-[4px]"
className="rounded-full w-[15px] h-[15px] bg-red-800 text-textColor flex justify-center items-center absolute -right-[4px] -top-[4px]"
>
x
</div>
@ -415,7 +416,7 @@ export const MediaComponent: FC<{
)}
<div className="flex gap-[5px]">
<Button onClick={showModal}>Select</Button>
<Button onClick={showDesignModal} className="!bg-[#832AD5]">
<Button onClick={showDesignModal} className="!bg-customColor45">
Editor
</Button>
<Button secondary={true} onClick={clearMedia}>

View File

@ -28,7 +28,7 @@ const Card: FC<{ message: Root2 }> = (props) => {
onClick={changeConversation}
className={clsx(
'h-[89px] p-[24px] flex gap-[16px] rounded-[4px] cursor-pointer',
path?.id === message.id && 'bg-sixth border border-[#172034]'
path?.id === message.id && 'bg-sixth border border-customColor6'
)}
>
<div className="w-[40px] h-[40px] rounded-full bg-amber-200">

View File

@ -121,7 +121,7 @@ export const Message: FC<{
<div className="flex-1 flex flex-col max-w-[534px] gap-[10px]">
<div className="flex gap-[10px] items-center">
<div>{isMe ? 'Me' : person?.name}</div>
<div className="w-[6px] h-[6px] bg-[#334155] rounded-full" />
<div className="w-[6px] h-[6px] bg-customColor34 rounded-full" />
<div className="text-[14px] text-inputText">{time}</div>
</div>
<pre
@ -241,8 +241,8 @@ export const Messages = () => {
return (
<form onSubmit={form.handleSubmit(submit)}>
<FormProvider {...form}>
<div className="flex-1 flex flex-col rounded-[4px] border border-[#172034] bg-[#0b0f1c] pb-[16px]">
<div className="bg-[#0F1524] h-[64px] px-[24px] py-[16px] flex gap-[10px] items-center">
<div className="flex-1 flex flex-col rounded-[4px] border border-customColor6 bg-customColor3 pb-[16px]">
<div className="bg-customColor8 h-[64px] px-[24px] py-[16px] flex gap-[10px] items-center">
<div className="w-[32px] h-[32px] rounded-full bg-amber-200">
{!!showFrom?.picture?.path && (
<img
@ -276,7 +276,7 @@ export const Messages = () => {
</div>
</div>
<div className="border-t border-t-[#658dac] p-[16px] flex flex-col">
<div className="border-t border-t-customColor46 p-[16px] flex flex-col">
<div>
<Textarea
className="!min-h-[100px] resize-none"
@ -287,7 +287,7 @@ export const Messages = () => {
<div className="flex justify-end">
<button
className={clsx(
'rounded-[4px] border border-[#506490] h-[48px] px-[24px]',
'rounded-[4px] border border-customColor21 h-[48px] px-[24px]',
!form.formState.isValid && 'opacity-40'
)}
disabled={!form.formState.isValid}

View File

@ -26,7 +26,7 @@ export const ShowNotification: FC<{
return (
<div
className={clsx(
`text-white px-[16px] py-[10px] border-b border-tableBorder last:border-b-0 transition-colors ${interClass} overflow-hidden text-ellipsis`,
`text-textColor px-[16px] py-[10px] border-b border-tableBorder last:border-b-0 transition-colors ${interClass} overflow-hidden text-ellipsis`,
newNotification && 'font-bold bg-seventh animate-newMessages'
)}
dangerouslySetInnerHTML={{ __html: replaceLinks(notification.content) }}
@ -42,7 +42,7 @@ export const NotificationOpenComponent = () => {
const { data, isLoading } = useSWR('notifications', loadNotifications);
return (
<div className="opacity-0 animate-normalFadeDown mt-[10px] absolute w-[420px] min-h-[200px] top-[100%] right-0 bg-third text-white rounded-[16px] flex flex-col border border-tableBorder">
<div className="opacity-0 animate-normalFadeDown mt-[10px] absolute w-[420px] min-h-[200px] top-[100%] right-0 bg-third text-textColor rounded-[16px] flex flex-col border border-tableBorder">
<div className={`p-[16px] border-b border-tableBorder ${interClass} font-bold`}>
Notifications
</div>
@ -54,7 +54,7 @@ export const NotificationOpenComponent = () => {
</div>
)}
{!isLoading && !data.notifications.length && (
<div className="text-center p-[16px] text-white flex-1 flex justify-center items-center mt-[20px]">
<div className="text-center p-[16px] text-textColor flex-1 flex justify-center items-center mt-[20px]">
No notifications
</div>
)}
@ -115,7 +115,7 @@ const NotificationComponent = () => {
>
<path
d="M20.7927 16.4944C20.2724 15.5981 19.4989 13.0622 19.4989 9.75C19.4989 7.76088 18.7087 5.85322 17.3022 4.4467C15.8957 3.04018 13.988 2.25 11.9989 2.25C10.0098 2.25 8.10214 3.04018 6.69561 4.4467C5.28909 5.85322 4.49891 7.76088 4.49891 9.75C4.49891 13.0631 3.72454 15.5981 3.20423 16.4944C3.07135 16.7222 3.00091 16.9811 3.00001 17.2449C2.9991 17.5086 3.06776 17.768 3.19907 17.9967C3.33037 18.2255 3.51968 18.4156 3.74789 18.5478C3.9761 18.6801 4.23515 18.7498 4.49891 18.75H8.32485C8.49789 19.5967 8.95806 20.3577 9.62754 20.9042C10.297 21.4507 11.1347 21.7492 11.9989 21.7492C12.8631 21.7492 13.7008 21.4507 14.3703 20.9042C15.0398 20.3577 15.4999 19.5967 15.673 18.75H19.4989C19.7626 18.7496 20.0215 18.6798 20.2496 18.5475C20.4777 18.4151 20.6669 18.225 20.7981 17.9963C20.9292 17.7676 20.9978 17.5083 20.9969 17.2446C20.9959 16.9809 20.9255 16.7222 20.7927 16.4944ZM11.9989 20.25C11.5337 20.2499 11.0801 20.1055 10.7003 19.8369C10.3205 19.5683 10.0333 19.1886 9.87829 18.75H14.1195C13.9645 19.1886 13.6773 19.5683 13.2975 19.8369C12.9178 20.1055 12.4641 20.2499 11.9989 20.25ZM4.49891 17.25C5.22079 16.0087 5.99891 13.1325 5.99891 9.75C5.99891 8.1587 6.63105 6.63258 7.75627 5.50736C8.88149 4.38214 10.4076 3.75 11.9989 3.75C13.5902 3.75 15.1163 4.38214 16.2416 5.50736C17.3668 6.63258 17.9989 8.1587 17.9989 9.75C17.9989 13.1297 18.7752 16.0059 19.4989 17.25H4.49891Z"
fill="white"
fill="currentColor"
/>
</svg>
</div>

View File

@ -113,7 +113,7 @@ export const ConnectChannels: FC = () => {
return (
<>
{!!identifier && (
<div className="absolute w-full h-full bg-black/80 left-0 top-0 z-[200] p-[30px] flex items-center justify-center">
<div className="absolute w-full h-full bg-primary/80 left-0 top-0 z-[200] p-[30px] flex items-center justify-center">
<div className="w-[400px]">
<ApiModal
close={() => setIdentifier(undefined)}
@ -127,12 +127,12 @@ export const ConnectChannels: FC = () => {
<div className="flex flex-col">
<div className="flex gap-[4px] flex-col">
<div className="text-[20px]">Connect Channels</div>
<div className="text-[14px] text-[#AAA]">
<div className="text-[14px] text-customColor18">
Connect your social media and publishing websites channels to
schedule posts later
</div>
</div>
<div className="flex border border-[#182034] rounded-[4px] mt-[16px]">
<div className="flex border border-customColor47 rounded-[4px] mt-[16px]">
<div className="flex-1 flex flex-col p-[16px] gap-[10px]">
<div className="text-[18px]">Social</div>
<div className="grid grid-cols-3 gap-[16px]">
@ -183,7 +183,7 @@ export const ConnectChannels: FC = () => {
</div>
)}
</div>
<div className="my-[24px] border border-[#182034] rounded-[4px] p-[16px]">
<div className="my-[24px] border border-customColor47 rounded-[4px] p-[16px]">
<div className="gap-[16px] flex flex-col">
{sortedIntegrations.length === 0 && (
<div className="text-[12px]">No channels</div>
@ -204,7 +204,7 @@ export const ConnectChannels: FC = () => {
<div className="bg-red-500 w-[15px] h-[15px] rounded-full -left-[5px] -top-[5px] absolute z-[200] text-[10px] flex justify-center items-center">
!
</div>
<div className="bg-black/60 w-[39px] h-[46px] left-0 top-0 absolute rounded-full z-[199]" />
<div className="bg-primary/60 w-[39px] h-[46px] left-0 top-0 absolute rounded-full z-[199]" />
</div>
)}
<Image

View File

@ -66,7 +66,7 @@ export const Step: FC<{
)}
</div>
</div>
<div className="mb-[4px] text-[10px] text-[#AAA] tracking-[1.2px]">
<div className="mb-[4px] text-[10px] text-customColor18 tracking-[1.2px]">
STEP {step}
</div>
<div
@ -107,7 +107,7 @@ const SkipOnboarding: FC = () => {
return (
<Button
secondary={true}
className="border-[2px] border-[#506490]"
className="border-[2px] border-customColor21"
onClick={onSkip}
>
Skip onboarding
@ -157,7 +157,7 @@ const Welcome: FC = () => {
}, []);
return (
<div className="bg-sixth p-[32px] w-full max-w-[920px] mx-auto flex flex-col gap-[24px] rounded-[4px] border border-[#172034] relative">
<div className="bg-sixth p-[32px] w-full max-w-[920px] mx-auto flex flex-col gap-[24px] rounded-[4px] border border-customColor6 relative">
<h1 className="text-[24px]">Onboarding</h1>
<div className="flex">
<Step title="Profile" step={1} currentStep={step} lastStep={lastStep} />
@ -281,7 +281,7 @@ export const Onboarding: FC = () => {
withCloseButton: false,
closeOnEscape: false,
classNames: {
modal: 'bg-transparent text-white',
modal: 'bg-transparent text-textColor',
},
size: '100%',
children: <Welcome />,

View File

@ -140,7 +140,7 @@ export const PlatformAnalytics = () => {
return (
<div className="flex gap-[30px] flex-1">
<div className="p-[16px] bg-[#080B14] overflow-hidden flex w-[220px]">
<div className="p-[16px] bg-customColor48 overflow-hidden flex w-[220px]">
<div className="flex gap-[16px] flex-col overflow-hidden">
<div className="text-[20px] mb-[8px]">Channels</div>
{sortedIntegrations.map((integration, index) => (
@ -174,7 +174,7 @@ export const PlatformAnalytics = () => {
<div className="bg-red-500 w-[15px] h-[15px] rounded-full left-0 -top-[5px] absolute z-[200] text-[10px] flex justify-center items-center">
!
</div>
<div className="bg-black/60 w-[39px] h-[46px] left-0 top-0 absolute rounded-full z-[199]" />
<div className="bg-primary/60 w-[39px] h-[46px] left-0 top-0 absolute rounded-full z-[199]" />
</div>
)}
<ImageWithFallback
@ -209,7 +209,7 @@ export const PlatformAnalytics = () => {
<div className="flex-1 flex flex-col gap-[14px]">
<div className="max-w-[200px]">
<Select
className="bg-[#0A0B14] !border-0"
className="bg-customColor49 !border-0"
label=""
name="date"
disableForm={true}

View File

@ -135,7 +135,7 @@ export const PostSelector: FC<{
<div
className={
!noModal
? 'text-white fixed left-0 top-0 bg-black/80 z-[300] w-full h-full p-[60px] animate-fade'
? 'text-textColor fixed left-0 top-0 bg-primary/80 z-[300] w-full h-full p-[60px] animate-fade'
: ''
}
>
@ -158,7 +158,7 @@ export const PostSelector: FC<{
</div>
<button
onClick={onCloseWithEmptyString}
className="outline-none absolute right-[20px] top-[20px] mantine-UnstyledButton-root mantine-ActionIcon-root bg-black hover:bg-tableBorder cursor-pointer mantine-Modal-close mantine-1dcetaa"
className="outline-none absolute right-[20px] top-[20px] mantine-UnstyledButton-root mantine-ActionIcon-root bg-primary hover:bg-tableBorder cursor-pointer mantine-Modal-close mantine-1dcetaa"
type="button"
>
<svg

View File

@ -56,7 +56,7 @@ export const SettingsComponent = () => {
{!general && (
<div className="flex flex-col">
<h3 className="text-[20px]">Your Git Repository</h3>
<div className="text-[#AAA] mt-[4px]">
<div className="text-customColor18 mt-[4px]">
Connect your GitHub repository to receive updates and analytics
</div>
<GithubComponent

View File

@ -81,7 +81,7 @@ export const AddMember = () => {
return (
<FormProvider {...form}>
<form onSubmit={form.handleSubmit(submit)}>
<div className="relative flex gap-[10px] flex-col flex-1 rounded-[4px] border border-[#172034] bg-sixth p-[16px] pt-0">
<div className="relative flex gap-[10px] flex-col flex-1 rounded-[4px] border border-customColor6 bg-sixth p-[16px] pt-0">
<TopTitle title="Add Member" />
<button
onClick={closeModal}
@ -152,7 +152,7 @@ export const TeamsComponent = () => {
const addMember = useCallback(() => {
modals.openModal({
classNames: {
modal: 'bg-transparent text-white',
modal: 'bg-transparent text-textColor',
},
withCloseButton: false,
children: <AddMember />,
@ -188,7 +188,7 @@ export const TeamsComponent = () => {
<div className="flex flex-col">
<h2 className="text-[24px] mb-[24px]">Team Members</h2>
<h3 className="text-[20px]">Account Managers</h3>
<div className="text-[#AAA] mt-[4px]">
<div className="text-customColor18 mt-[4px]">
Invite your assistant or team member to manage your account
</div>
<div className="my-[16px] mt-[16px] bg-sixth border-fifth border rounded-[4px] p-[24px] flex flex-col gap-[24px]">
@ -208,7 +208,7 @@ export const TeamsComponent = () => {
{+myLevel > +getLevel(p.role) ? (
<div className="flex-1 flex justify-end">
<Button
className={`!bg-[#0b0f1c] !h-[24px] border border-[#506490] rounded-[4px] text-[12px] ${interClass}`}
className={`!bg-customColor3 !h-[24px] border border-customColor21 rounded-[4px] text-[12px] ${interClass}`}
onClick={remove(p)}
>
<div className="flex justify-center items-center gap-[4px]">

View File

@ -19,17 +19,72 @@ module.exports = {
theme: {
extend: {
colors: {
primary: '#000',
secondary: '#090B13',
third: '#080B13',
forth: '#612AD5',
fifth: '#28344F',
sixth: '#0B101B',
seventh: '#7236f1',
gray: '#8C8C8C',
input: '#131B2C',
inputText: '#64748B',
tableBorder: '#1F2941',
primary: 'var(--color-primary)',
secondary: 'var(--color-secondary)',
textColor: 'var(--color-text)',
third: 'var(--color-third)',
forth: 'var(--color-forth)',
fifth: 'var(--color-fifth)',
sixth: 'var(--color-sixth)',
seventh: 'var(--color-seventh)',
gray: 'var(--color-gray)',
input: 'var(--color-input)',
inputText: 'var(--color-input-text)',
tableBorder: 'var(--color-table-border)',
customColor1: 'var(--color-custom1)',
customColor2: 'var(--color-custom2)',
customColor3: 'var(--color-custom3)',
customColor4: 'var(--color-custom4)',
customColor5: 'var(--color-custom5)',
customColor6: 'var(--color-custom6)',
customColor7: 'var(--color-custom7)',
customColor8: 'var(--color-custom8)',
customColor9: 'var(--color-custom9)',
customColor10: 'var(--color-custom10)',
customColor11: 'var(--color-custom11)',
customColor12: 'var(--color-custom12)',
customColor13: 'var(--color-custom13)',
customColor14: 'var(--color-custom14)',
customColor15: 'var(--color-custom15)',
customColor16: 'var(--color-custom16)',
customColor17: 'var(--color-custom17)',
customColor18: 'var(--color-custom18)',
customColor19: 'var(--color-custom19)',
customColor20: 'var(--color-custom20)',
customColor21: 'var(--color-custom21)',
customColor22: 'var(--color-custom22)',
customColor23: 'var(--color-custom23)',
customColor24: 'var(--color-custom24)',
customColor25: 'var(--color-custom25)',
customColor26: 'var(--color-custom26)',
customColor27: 'var(--color-custom27)',
customColor28: 'var(--color-custom28)',
customColor29: 'var(--color-custom29)',
customColor30: 'var(--color-custom30)',
customColor31: 'var(--color-custom31)',
customColor32: 'var(--color-custom32)',
customColor33: 'var(--color-custom33)',
customColor34: 'var(--color-custom34)',
customColor35: 'var(--color-custom35)',
customColor36: 'var(--color-custom36)',
customColor37: 'var(--color-custom37)',
customColor38: 'var(--color-custom38)',
customColor39: 'var(--color-custom39)',
customColor40: 'var(--color-custom40)',
customColor41: 'var(--color-custom41)',
customColor42: 'var(--color-custom42)',
customColor43: 'var(--color-custom43)',
customColor44: 'var(--color-custom44)',
customColor45: 'var(--color-custom45)',
customColor46: 'var(--color-custom46)',
customColor47: 'var(--color-custom47)',
customColor48: 'var(--color-custom48)',
customColor49: 'var(--color-custom49)',
customColor50: 'var(--color-custom50)',
customColor51: 'var(--color-custom51)',
customColor52: 'var(--color-custom52)',
customColor53: 'var(--color-custom53)',
customColor54: 'var(--color-custom54)',
},
gridTemplateColumns: {
13: 'repeat(13, minmax(0, 1fr));',
@ -87,9 +142,9 @@ module.exports = {
'100%': { opacity: 1, transform: 'translateY(0)' },
},
newMessages: {
'0%': { backgroundColor: '#7236f1', fontWeight: 'bold' },
'99%': { backgroundColor: '#080B13', fontWeight: 'bold' },
'100%': { backgroundColor: '#080B13', fontWeight: 'normal' },
'0%': { backgroundColor: 'var(--color-seventh)', fontWeight: 'bold' },
'99%': { backgroundColor: 'var(--color-third)', fontWeight: 'bold' },
'100%': { backgroundColor: 'var(--color-third)', fontWeight: 'normal' },
},
}),
screens: {

View File

@ -32,7 +32,7 @@ export const Button: FC<
className={clsx(
(props.disabled || loading) && 'opacity-50 pointer-events-none',
`${
props.secondary ? 'bg-third' : 'bg-forth'
props.secondary ? 'bg-third' : 'bg-forth text-white'
} px-[24px] h-[40px] cursor-pointer items-center justify-center flex relative`,
props?.className
)}

View File

@ -37,7 +37,7 @@ export const Checkbox = forwardRef<null, {
onClick={changeStatus}
className={clsx(
'cursor-pointer rounded-[4px] select-none w-[24px] h-[24px] justify-center items-center flex',
variant === 'default' || !variant ? ('bg-forth') : ('border-[#324264] border-2 bg-[#141c2c]'),
variant === 'default' || !variant ? ('bg-forth') : ('border-customColor1 border-2 bg-customColor2'),
className
)}
>

View File

@ -124,7 +124,7 @@ export const CustomSelect: FC<{
{options.map((option) => (
<div
onClick={setOption(option)}
className="px-[16px] py-[8px] bg-input w-full flex gap-[8px] hover:bg-[#0b0f1c] select-none cursor-pointer"
className="px-[16px] py-[8px] bg-input w-full flex gap-[8px] hover:bg-customColor3 select-none cursor-pointer"
>
{!!option.icon && (
<div className="flex justify-center items-center">

View File

@ -10,9 +10,9 @@ export const Slider: FC<{value: 'on' | 'off', fill?: boolean, onChange: (value:
}, [value]);
return (
<div className={clsx("w-[57px] h-[34px] p-[4px] border-fifth border rounded-[100px]", value === 'on' && fill && 'bg-[#8155DD]')} onClick={change}>
<div className={clsx("w-[57px] h-[34px] p-[4px] border-fifth border rounded-[100px]", value === 'on' && fill && 'bg-customColor4')} onClick={change}>
<div className="w-full h-full relative rounded-[100px]">
<div className={clsx("absolute left-0 top-0 w-[24px] h-[24px] bg-[#E9E9F1] rounded-full transition-all cursor-pointer", value === 'on' ? 'left-[100%] -translate-x-[100%]' : 'left-0')} />
<div className={clsx("absolute left-0 top-0 w-[24px] h-[24px] bg-customColor5 rounded-full transition-all cursor-pointer", value === 'on' ? 'left-[100%] -translate-x-[100%]' : 'left-0')} />
</div>
</div>
)

View File

@ -17,9 +17,9 @@ export const Track: FC<{
onChange={onChange}
size="xl"
classNames={{
track: 'before:bg-[#0B0F1C] before:border before:border-[#172034]',
mark: 'border-[#172034]',
markFilled: 'border-[#7950F2]',
track: 'before:bg-customColor3 before:border before:border-customColor6',
mark: 'border-customColor6',
markFilled: 'border-customColor7',
}}
min={min}
max={max}

View File

@ -35,7 +35,7 @@ export const Toaster = () => {
return (
<div
className={clsx(
'animate-fadeDown rounded-[8px] gap-[18px] flex items-center overflow-hidden bg-[#0F1524] p-[16px] min-w-[319px] fixed left-[50%] text-white z-[300] top-[32px] -translate-x-[50%] h-[56px]',
'animate-fadeDown rounded-[8px] gap-[18px] flex items-center overflow-hidden bg-customColor8 p-[16px] min-w-[319px] fixed left-[50%] text-white z-[300] top-[32px] -translate-x-[50%] h-[56px]',
toasterType === 'success' ? 'shadow-greenToast' : 'shadow-yellowToast'
)}
>