gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-12-27 03:22:15 +03:00
Code Issues Packages Projects Releases Wiki Activity

changed the illustration images

Browse Source
This commit is contained in:
Pavel Laptev 2024-01-05 12:00:24 +01:00 committed by GitButler
parent b5e04b8bca
commit 4858d41606
20 changed files with 294 additions and 327 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
gitbutler-ui/src/lib/assets/empty-states/new-branch/bottom-sheet-dark.svg Normal file
View File

@ -0,0 +1,9 @@
<svg width="46" height="44" viewBox="0 0 46 44" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 1.56287H32.5895L45 13.6072V42.5629H1V1.56287Z" fill="#242423"/>
<path d="M33 15.0629V4.26997C33 3.82452 33.5386 3.60144 33.8536 3.91642L44.1464 14.2093C44.4614 14.5243 44.2383 15.0629 43.7929 15.0629H33Z" fill="#242423"/>
<path d="M1 2.06287H6.62791V7.8321H1V2.06287Z" fill="#373634"/>
<path d="M17.3721 25.1398H12.2558V30.909H17.3721V25.1398Z" fill="#373634"/>
<path d="M22.4884 25.1398V30.909H28.1163V25.1398H22.4884Z" fill="#373634"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.2558 7.8321H6.62791V13.6013H1V19.3706H6.62791V25.1398H1V30.909H6.62791V36.6783H1V42.0629H6.62791V36.6783H12.2558V42.0629H17.3721V36.6783H22.4884V42.0629H28.1163V36.6783H33.7442V42.0629H39.3721V36.6783H45V30.909H39.3721V25.1398H45V19.3706H39.3721V14.3706H33.7442V19.3706H28.1163V13.6013H33V7.8321H28.1163V2.06287H22.4884V7.8321H17.3721V2.06287H12.2558V7.8321ZM12.2558 13.6013V7.8321H17.3721V13.6013H12.2558ZM12.2558 19.3706H6.62791V13.6013H12.2558V19.3706ZM17.3721 19.3706V13.6013H22.4884V19.3706H17.3721ZM17.3721 25.1398V19.3706H12.2558V25.1398H6.62791V30.909H12.2558V36.6783H17.3721V30.909H22.4884V36.6783H28.1163V30.909H33.7442V36.6783H39.3721V30.909H33.7442V25.1398H39.3721V19.3706H33.7442V25.1398H28.1163V19.3706H22.4884V25.1398H17.3721ZM22.4884 13.6013V7.8321H28.1163V13.6013H22.4884Z" fill="#373634"/>
<path d="M32.5895 1.56287H1V42.5629H45V14.0629M32.5895 1.56287L45 14.0629M32.5895 1.56287V14.0629H45" stroke="#51504D" stroke-width="1.2"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

9
gitbutler-ui/src/lib/assets/empty-states/new-branch/bottom-sheet-light.svg Normal file
View File

@ -0,0 +1,9 @@
<svg width="46" height="44" viewBox="0 0 46 44" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 1.56299H32.5895L45 13.6073V42.563H1V1.56299Z" fill="#F5F5F3"/>
<path d="M33 15.063V4.2701C33 3.82464 33.5386 3.60156 33.8536 3.91654L44.1464 14.2094C44.4614 14.5244 44.2383 15.063 43.7929 15.063H33Z" fill="#F5F5F3"/>
<path d="M1 2.06299H6.62791V7.83222H1V2.06299Z" fill="#DBDAD7"/>
<path d="M17.3721 25.1399H12.2558V30.9091H17.3721V25.1399Z" fill="#DBDAD7"/>
<path d="M22.4884 25.1399V30.9091H28.1163V25.1399H22.4884Z" fill="#DBDAD7"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.2558 7.83222H6.62791V13.6015H1V19.3707H6.62791V25.1399H1V30.9091H6.62791V36.6784H1V42.063H6.62791V36.6784H12.2558V42.063H17.3721V36.6784H22.4884V42.063H28.1163V36.6784H33.7442V42.063H39.3721V36.6784H45V30.9091H39.3721V25.1399H45V19.3707H39.3721V14.3707H33.7442V19.3707H28.1163V13.6015H33V7.83222H28.1163V2.06299H22.4884V7.83222H17.3721V2.06299H12.2558V7.83222ZM12.2558 13.6015V7.83222H17.3721V13.6015H12.2558ZM12.2558 19.3707H6.62791V13.6015H12.2558V19.3707ZM17.3721 19.3707V13.6015H22.4884V19.3707H17.3721ZM17.3721 25.1399V19.3707H12.2558V25.1399H6.62791V30.9091H12.2558V36.6784H17.3721V30.9091H22.4884V36.6784H28.1163V30.9091H33.7442V36.6784H39.3721V30.9091H33.7442V25.1399H39.3721V19.3707H33.7442V25.1399H28.1163V19.3707H22.4884V25.1399H17.3721ZM22.4884 13.6015V7.83222H28.1163V13.6015H22.4884Z" fill="#DBDAD7"/>
<path d="M32.5895 1.56299H1V42.563H45V14.063M32.5895 1.56299L45 14.063M32.5895 1.56299V14.063H45" stroke="#C5C5C3" stroke-width="1.2"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

9
gitbutler-ui/src/lib/assets/empty-states/new-branch/bottom-sheet.svg
View File

@ -1,9 +0,0 @@
<svg width="46" height="43" viewBox="0 0 46 43" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 1.06299H32.5895L45 13.1073V42.063H1V1.06299Z" fill="#F5F5F3"/>
<path d="M33 14.563V3.7701C33 3.32464 33.5386 3.10156 33.8536 3.41654L44.1464 13.7094C44.4614 14.0244 44.2383 14.563 43.7929 14.563H33Z" fill="#F5F5F3"/>
<path d="M1 1.56299H6.62791V7.33222H1V1.56299Z" fill="#DBDAD7"/>
<path d="M17.3721 24.6399H12.2558V30.4091H17.3721V24.6399Z" fill="#DBDAD7"/>
<path d="M22.4884 24.6399V30.4091H28.1163V24.6399H22.4884Z" fill="#DBDAD7"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.2558 7.33222H6.62791V13.1015H1V18.8707H6.62791V24.6399H1V30.4091H6.62791V36.1784H1V41.563H6.62791V36.1784H12.2558V41.563H17.3721V36.1784H22.4884V41.563H28.1163V36.1784H33.7442V41.563H39.3721V36.1784H45V30.4091H39.3721V24.6399H45V18.8707H39.3721V13.8707H33.7442V18.8707H28.1163V13.1015H33V7.33222H28.1163V1.56299H22.4884V7.33222H17.3721V1.56299H12.2558V7.33222ZM12.2558 13.1015V7.33222H17.3721V13.1015H12.2558ZM12.2558 18.8707H6.62791V13.1015H12.2558V18.8707ZM17.3721 18.8707V13.1015H22.4884V18.8707H17.3721ZM17.3721 24.6399V18.8707H12.2558V24.6399H6.62791V30.4091H12.2558V36.1784H17.3721V30.4091H22.4884V36.1784H28.1163V30.4091H33.7442V36.1784H39.3721V30.4091H33.7442V24.6399H39.3721V18.8707H33.7442V24.6399H28.1163V18.8707H22.4884V24.6399H17.3721ZM22.4884 13.1015V7.33222H28.1163V13.1015H22.4884Z" fill="#DBDAD7"/>
<path d="M32.5895 1.06299H1V42.063H45V13.563M32.5895 1.06299L45 13.563M32.5895 1.06299V13.563H45" stroke="#C5C5C3" stroke-width="1.2"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

8
gitbutler-ui/src/lib/assets/empty-states/new-branch/hand-dark.svg Normal file
View File

@ -0,0 +1,8 @@
<svg width="38" height="37" viewBox="0 0 38 37" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.8176 7.25903C8.60162 4.33541 2.49812 8.89063 7.43214 15.4453C4.85787 15.0161 3.06001 16.2698 3.06002 19.0585C3.06003 21.8473 6.87209 27.8375 15.0733 30.2138C20.0073 26.7814 25.156 26.3524 30.9481 27.2105C34.595 21.6328 34.3665 14.2674 34.038 10.1825C33.7095 6.09762 30.8778 1.18847 26.7288 4.62764C25.2668 1.99625 21.1736 1.41139 18.8347 4.9199C17.0804 2.28881 12.6948 2.87355 11.8176 7.25903Z" fill="#242423"/>
<path d="M9.7714 18.3688C5.6782 14.2756 4.50872 9.88994 6.84768 7.25872C8.7189 5.15368 11.8948 6.67386 12.9875 8.42809M11.8959 7.25872C12.1104 5.79675 12.8121 4.15951 14.4493 3.45782C16.0866 2.75613 17.9578 3.1654 20.0044 6.38149M19.1273 4.91963C19.712 3.75015 20.7061 2.52215 22.3434 2.28822C24.6823 1.95404 26.4366 4.0425 27.3137 5.79683M26.6159 4.62735C27.0213 3.75023 29.1915 3.0352 30.5298 3.45782C36.0848 5.21212 34.9153 20.123 31.6992 26.2627L15.3264 30.3559C5.97051 26.8476 2.75443 20.7078 3.04691 18.3688C3.33938 16.0298 5.67814 15.1527 7.14006 15.4451" stroke="#51504D" stroke-width="1.2"/>
<path d="M14.8586 12.8375C15.6673 14.1082 16.3109 16.0389 16.5272 17.3425M21.2944 11.5504C21.8244 12.8587 22.103 14.9499 22.103 16.2535M27.4661 10.8904C27.8951 12.1775 27.8951 14.5373 27.7301 15.8409" stroke="#51504D" stroke-width="1.2"/>
<path d="M22.5344 24.863C30.2572 23.3561 34.1187 25.9355 34.1187 29.1534C34.1186 32.3714 29.8282 34.7311 25.1087 35.5892C20.3892 36.4473 14.2906 36.6617 13.3099 33.2294C12.4518 30.2261 14.8116 26.3699 22.5344 24.863Z" fill="#242423"/>
<path d="M22.5344 24.8632C20.4303 25.2738 18.7243 25.8587 17.373 26.5533C13.7646 28.4081 12.6856 31.0446 13.3099 33.2297C14.2906 36.662 20.3892 36.4475 25.1087 35.5894C29.8282 34.7313 34.1186 32.3716 34.1187 29.1537C34.1187 26.9683 32.3376 25.0773 28.7755 24.5609" stroke="#51504D" stroke-width="1.2"/>
<path d="M18.9063 32.6739C21.0636 30.9088 25.7704 29.732 28.5875 30.3704" stroke="#51504D" stroke-width="1.2"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

8
gitbutler-ui/src/lib/assets/empty-states/new-branch/hand-light.svg Normal file
View File

@ -0,0 +1,8 @@
<svg width="38" height="37" viewBox="0 0 38 37" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.8176 7.25915C8.60162 4.33553 2.49812 8.89075 7.43214 15.4454C4.85787 15.0162 3.06001 16.2699 3.06002 19.0587C3.06003 21.8474 6.87209 27.8377 15.0733 30.2139C20.0073 26.7815 25.156 26.3525 30.9481 27.2106C34.595 21.6329 34.3665 14.2676 34.038 10.1827C33.7095 6.09774 30.8778 1.18859 26.7288 4.62777C25.2668 1.99637 21.1736 1.41151 18.8347 4.92002C17.0804 2.28893 12.6948 2.87368 11.8176 7.25915Z" fill="#F5F5F3"/>
<path d="M9.7714 18.3688C5.6782 14.2756 4.50872 9.88994 6.84768 7.25872C8.7189 5.15368 11.8948 6.67386 12.9875 8.42809M11.8959 7.25872C12.1104 5.79675 12.8121 4.15951 14.4493 3.45782C16.0866 2.75613 17.9578 3.1654 20.0044 6.38149M19.1273 4.91963C19.712 3.75015 20.7061 2.52215 22.3434 2.28822C24.6823 1.95404 26.4366 4.0425 27.3137 5.79683M26.6159 4.62735C27.0213 3.75023 29.1915 3.0352 30.5298 3.45782C36.0848 5.21212 34.9153 20.123 31.6992 26.2627L15.3264 30.3559C5.97051 26.8476 2.75443 20.7078 3.04691 18.3688C3.33938 16.0298 5.67814 15.1527 7.14006 15.4451" stroke="#C5C5C3" stroke-width="1.2"/>
<path d="M14.8586 12.8375C15.6673 14.1082 16.3109 16.0389 16.5272 17.3425M21.2944 11.5504C21.8244 12.8587 22.103 14.9499 22.103 16.2535M27.4661 10.8904C27.8951 12.1775 27.8951 14.5373 27.7301 15.8409" stroke="#C5C5C3" stroke-width="1.2"/>
<path d="M22.5344 24.8633C30.2572 23.3564 34.1187 25.9358 34.1187 29.1537C34.1186 32.3716 29.8282 34.7313 25.1087 35.5894C20.3892 36.4475 14.2906 36.662 13.3099 33.2297C12.4518 30.2263 14.8116 26.3701 22.5344 24.8633Z" fill="#F5F5F3"/>
<path d="M22.5344 24.8634C20.4303 25.2739 18.7243 25.8589 17.373 26.5534C13.7646 28.4082 12.6856 31.0447 13.3099 33.2298C14.2906 36.6621 20.3892 36.4476 25.1087 35.5895C29.8282 34.7315 34.1186 32.3717 34.1187 29.1538C34.1187 26.9684 32.3376 25.0774 28.7755 24.561" stroke="#C5C5C3" stroke-width="1.2"/>
<path d="M18.9063 32.6742C21.0636 30.9091 25.7704 29.7324 28.5875 30.3707" stroke="#C5C5C3" stroke-width="1.2"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

8
gitbutler-ui/src/lib/assets/empty-states/new-branch/hand.svg
View File

@ -1,8 +0,0 @@
<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.6065 8.90225C9.83772 5.47615 2.6852 10.8143 8.46724 18.4955C5.45052 17.9926 3.34367 19.4617 3.34368 22.7298C3.34369 25.9978 7.81094 33.0176 17.4218 35.8023C23.2037 31.78 29.2373 31.2772 36.0249 32.2828C40.2986 25.7465 40.0308 17.1152 39.6459 12.3282C39.2609 7.54123 35.9426 1.78834 31.0804 5.81861C29.3672 2.73495 24.5705 2.04957 21.8295 6.1611C19.7738 3.07779 14.6344 3.76304 13.6065 8.90225Z" fill="#F5F5F3"/>
<path d="M11.2086 21.9214C6.41188 17.1247 5.0414 11.9853 7.78236 8.90183C9.97519 6.43499 13.697 8.21645 14.9774 10.2722M13.6983 8.90183C13.9496 7.18859 14.7718 5.26996 16.6905 4.44767C18.6092 3.62537 20.802 4.10499 23.2004 7.87383M22.1725 6.16072C22.8577 4.79023 24.0226 3.35118 25.9413 3.07704C28.6823 2.68542 30.738 5.13284 31.7659 7.18868M30.9481 5.8182C31.4233 4.79033 33.9665 3.95241 35.5347 4.44767C42.0446 6.50348 40.6741 23.9772 36.9052 31.1721L17.7183 35.9688C6.75443 31.8575 2.9856 24.6624 3.32834 21.9214C3.67108 19.1805 6.4118 18.1526 8.12499 18.4952" stroke="#C5C5C3" stroke-width="1.2"/>
<path d="M17.1702 15.4395C18.1178 16.9286 18.872 19.1912 19.1255 20.7188M24.712 13.9312C25.3331 15.4644 25.6596 17.9149 25.6596 19.4426M31.9445 13.1577C32.4473 14.6661 32.4473 17.4314 32.2538 18.9591" stroke="#C5C5C3" stroke-width="1.2"/>
<path d="M26.1651 29.5319C35.2152 27.766 39.7404 30.7888 39.7404 34.5597C39.7403 38.3307 34.7125 41.096 29.1818 42.1016C23.6512 43.1072 16.5044 43.3585 15.3552 39.3363C14.3496 35.8167 17.115 31.2978 26.1651 29.5319Z" fill="#F5F5F3"/>
<path d="M26.1651 29.532C23.6994 30.0131 21.7002 30.6986 20.1166 31.5126C15.888 33.6861 14.6236 36.7758 15.3552 39.3364C16.5044 43.3586 23.6512 43.1073 29.1818 42.1017C34.7125 41.0962 39.7403 38.3308 39.7404 34.5599C39.7404 31.9988 37.6532 29.7829 33.4789 29.1777" stroke="#C5C5C3" stroke-width="1.2"/>
<path d="M21.9133 38.6851C24.4414 36.6167 29.9571 35.2377 33.2584 35.9857" stroke="#C5C5C3" stroke-width="1.2"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.0 KiB

4
gitbutler-ui/src/lib/assets/empty-states/new-branch/middle-sheet-dark.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="47" height="42" viewBox="0 0 47 42" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.5 0.999878H32.5L45.5 13.4999V40.9999H1.5V0.999878Z" fill="#242423" stroke="#51504D" stroke-width="1.2"/>
<path d="M10.6887 21.8515H38.0511M10.6887 26.6038H27.2586M10.6887 31.3556H32.6548M10.6887 36.1082H21.8623M31.5 3.49988V14.4999H42.5" stroke="#51504D" stroke-width="1.2"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 391 B

4
gitbutler-ui/src/lib/assets/empty-states/new-branch/middle-sheet-light.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="47" height="42" viewBox="0 0 47 42" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.5 1H32.5L45.5 13.5V41H1.5V1Z" fill="#F5F5F3" stroke="#C5C5C3" stroke-width="1.2"/>
<path d="M10.6887 21.8516H38.0511M10.6887 26.604H27.2586M10.6887 31.3557H32.6548M10.6887 36.1083H21.8623M31.5 3.5V14.5H42.5" stroke="#C5C5C3" stroke-width="1.2"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 361 B

4
gitbutler-ui/src/lib/assets/empty-states/new-branch/middle-sheet.svg
View File

@ -1,4 +0,0 @@
<svg width="47" height="43" viewBox="0 0 47 43" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.5 1.5H32.5L45.5 14V41.5H1.5V1.5Z" fill="#F5F5F3" stroke="#C5C5C3" stroke-width="1.2"/>
<path d="M10.6887 22.3516H38.0511M10.6887 27.104H27.2586M10.6887 31.8557H32.6548M10.6887 36.6083H21.8623M31.5 4V15H42.5" stroke="#C5C5C3" stroke-width="1.2"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 361 B

69
gitbutler-ui/src/lib/assets/empty-states/new-branch/top-sheet-dark.svg Normal file
View File

@ -0,0 +1,69 @@
<svg width="46" height="56" viewBox="0 0 46 56" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 1.49988H29.6499L45 16.2648V54.4999H1V1.49988Z" fill="#242423"/>
<path d="M29.1658 5.92114V17.3025H41.9698" stroke="#51504D" stroke-width="1.2"/>
<path d="M1.5 51.9332H3.54762V53.9999H1.5V51.9332Z" fill="#373634"/>
<path d="M5.59524 51.9332H7.64286V53.9999H5.59524V51.9332Z" fill="#373634"/>
<path d="M9.69048 51.9332H11.7381V53.9999H9.69048V51.9332Z" fill="#373634"/>
<path d="M7.64286 49.8665H9.69048V51.9332H7.64286V49.8665Z" fill="#373634"/>
<path d="M15.8333 49.8665H17.881V51.9332H15.8333V49.8665Z" fill="#373634"/>
<path d="M24.0238 49.8665H26.0714V51.9332H24.0238V49.8665Z" fill="#373634"/>
<path d="M32.2143 49.8665H34.2619V51.9332H32.2143V49.8665Z" fill="#373634"/>
<path d="M40.4048 49.8665H42.4524V51.9332H40.4048V49.8665Z" fill="#373634"/>
<path d="M38.3571 47.7999H40.4048V49.8665H38.3571V47.7999Z" fill="#373634"/>
<path d="M42.4524 47.7999H44.5V49.8665H42.4524V47.7999Z" fill="#373634"/>
<path d="M34.2619 47.7999H36.3095V49.8665H34.2619V47.7999Z" fill="#373634"/>
<path d="M30.1667 47.7999H32.2143V49.8665H30.1667V47.7999Z" fill="#373634"/>
<path d="M26.0714 47.7999H28.119V49.8665H26.0714V47.7999Z" fill="#373634"/>
<path d="M21.9762 47.7999H24.0238V49.8665H21.9762V47.7999Z" fill="#373634"/>
<path d="M17.881 47.7999H19.9286V49.8665H17.881V47.7999Z" fill="#373634"/>
<path d="M13.7857 47.7999H15.8333V49.8665H13.7857V47.7999Z" fill="#373634"/>
<path d="M9.69048 47.7999H11.7381V49.8665H9.69048V47.7999Z" fill="#373634"/>
<path d="M5.59524 47.7999H7.64286V49.8665H5.59524V47.7999Z" fill="#373634"/>
<path d="M1.5 47.7999H3.54762V49.8665H1.5V47.7999Z" fill="#373634"/>
<path d="M3.54762 45.7332H5.59524V47.7999H3.54762V45.7332Z" fill="#373634"/>
<path d="M5.59524 43.6665H7.64286V45.7332H5.59524V43.6665Z" fill="#373634"/>
<path d="M5.59524 39.5332H7.64286V41.5999H5.59524V39.5332Z" fill="#373634"/>
<path d="M13.7857 39.5332H15.8333V41.5999H13.7857V39.5332Z" fill="#373634"/>
<path d="M21.9762 39.5332H24.0238V41.5999H21.9762V39.5332Z" fill="#373634"/>
<path d="M30.1667 39.5332H32.2143V41.5999H30.1667V39.5332Z" fill="#373634"/>
<path d="M9.69048 43.6665H11.7381V45.7332H9.69048V43.6665Z" fill="#373634"/>
<path d="M13.7857 43.6665H15.8333V45.7332H13.7857V43.6665Z" fill="#373634"/>
<path d="M17.881 43.6665H19.9286V45.7332H17.881V43.6665Z" fill="#373634"/>
<path d="M21.9762 43.6665H24.0238V45.7332H21.9762V43.6665Z" fill="#373634"/>
<path d="M26.0714 43.6665H28.119V45.7332H26.0714V43.6665Z" fill="#373634"/>
<path d="M30.1667 43.6665H32.2143V45.7332H30.1667V43.6665Z" fill="#373634"/>
<path d="M34.2619 43.6665H36.3095V45.7332H34.2619V43.6665Z" fill="#373634"/>
<path d="M38.3571 43.6665H40.4048V45.7332H38.3571V43.6665Z" fill="#373634"/>
<path d="M42.4524 43.6665H44.5V45.7332H42.4524V43.6665Z" fill="#373634"/>
<path d="M1.5 43.6665H3.54762V45.7332H1.5V43.6665Z" fill="#373634"/>
<path d="M1.5 39.5332H3.54762V41.5999H1.5V39.5332Z" fill="#373634"/>
<path d="M1.5 35.3999H3.54762V37.4665H1.5V35.3999Z" fill="#373634"/>
<path d="M5.59524 31.2665H7.64286V33.3332H5.59524V31.2665Z" fill="#373634"/>
<path d="M13.7857 31.2665H15.8333V33.3332H13.7857V31.2665Z" fill="#373634"/>
<path d="M21.9762 31.2665H24.0238V33.3332H21.9762V31.2665Z" fill="#373634"/>
<path d="M30.1667 31.2665H32.2143V33.3332H30.1667V31.2665Z" fill="#373634"/>
<path d="M38.3571 31.2665H40.4048V33.3332H38.3571V31.2665Z" fill="#373634"/>
<path d="M9.69048 27.1332H11.7381V29.1999H9.69048V27.1332Z" fill="#373634"/>
<path d="M13.7857 22.9999H15.8333V25.0665H13.7857V22.9999Z" fill="#373634"/>
<path d="M9.69048 35.3999H11.7381V37.4665H9.69048V35.3999Z" fill="#373634"/>
<path d="M17.881 35.3999H19.9286V37.4665H17.881V35.3999Z" fill="#373634"/>
<path d="M26.0714 35.3999H28.119V37.4665H26.0714V35.3999Z" fill="#373634"/>
<path d="M34.2619 35.3999H36.3095V37.4665H34.2619V35.3999Z" fill="#373634"/>
<path d="M9.69048 39.5332H11.7381V41.5999H9.69048V39.5332Z" fill="#373634"/>
<path d="M17.881 39.5332H19.9286V41.5999H17.881V39.5332Z" fill="#373634"/>
<path d="M26.0714 39.5332H28.119V41.5999H26.0714V39.5332Z" fill="#373634"/>
<path d="M38.3571 39.5332H40.4048V41.5999H38.3571V39.5332Z" fill="#373634"/>
<path d="M11.7381 45.7332H13.7857V47.7999H11.7381V45.7332Z" fill="#373634"/>
<path d="M19.9286 45.7332H21.9762V47.7999H19.9286V45.7332Z" fill="#373634"/>
<path d="M28.119 45.7332H30.1667V47.7999H28.119V45.7332Z" fill="#373634"/>
<path d="M36.3095 45.7332H38.3571V47.7999H36.3095V45.7332Z" fill="#373634"/>
<path d="M13.7857 51.9332H15.8333V53.9999H13.7857V51.9332Z" fill="#373634"/>
<path d="M17.881 51.9332H19.9286V53.9999H17.881V51.9332Z" fill="#373634"/>
<path d="M21.9762 51.9332H24.0238V53.9999H21.9762V51.9332Z" fill="#373634"/>
<path d="M26.0714 51.9332H28.119V53.9999H26.0714V51.9332Z" fill="#373634"/>
<path d="M30.1667 51.9332H32.2143V53.9999H30.1667V51.9332Z" fill="#373634"/>
<path d="M34.2619 51.9332H36.3095V53.9999H34.2619V51.9332Z" fill="#373634"/>
<path d="M38.3571 51.9332H40.4048V53.9999H38.3571V51.9332Z" fill="#373634"/>
<path d="M42.4524 51.9332H44.5V53.9999H42.4524V51.9332Z" fill="#373634"/>
<path d="M1 1.49988H29.6499L45 16.2648V54.4999H1V1.49988Z" stroke="#51504D" stroke-width="1.2"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB

69
gitbutler-ui/src/lib/assets/empty-states/new-branch/top-sheet-light.svg Normal file
View File

@ -0,0 +1,69 @@
<svg width="46" height="56" viewBox="0 0 46 56" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 1.5H29.6499L45 16.2649V54.5H1V1.5Z" fill="#F5F5F3"/>
<path d="M29.1658 5.92114V17.3025H41.9698" stroke="#C5C5C3" stroke-width="1.2"/>
<path d="M1.5 51.9333H3.54762V54H1.5V51.9333Z" fill="#DBDAD7"/>
<path d="M5.59524 51.9333H7.64286V54H5.59524V51.9333Z" fill="#DBDAD7"/>
<path d="M9.69048 51.9333H11.7381V54H9.69048V51.9333Z" fill="#DBDAD7"/>
<path d="M7.64286 49.8667H9.69048V51.9333H7.64286V49.8667Z" fill="#DBDAD7"/>
<path d="M15.8333 49.8667H17.881V51.9333H15.8333V49.8667Z" fill="#DBDAD7"/>
<path d="M24.0238 49.8667H26.0714V51.9333H24.0238V49.8667Z" fill="#DBDAD7"/>
<path d="M32.2143 49.8667H34.2619V51.9333H32.2143V49.8667Z" fill="#DBDAD7"/>
<path d="M40.4048 49.8667H42.4524V51.9333H40.4048V49.8667Z" fill="#DBDAD7"/>
<path d="M38.3571 47.8H40.4048V49.8667H38.3571V47.8Z" fill="#DBDAD7"/>
<path d="M42.4524 47.8H44.5V49.8667H42.4524V47.8Z" fill="#DBDAD7"/>
<path d="M34.2619 47.8H36.3095V49.8667H34.2619V47.8Z" fill="#DBDAD7"/>
<path d="M30.1667 47.8H32.2143V49.8667H30.1667V47.8Z" fill="#DBDAD7"/>
<path d="M26.0714 47.8H28.119V49.8667H26.0714V47.8Z" fill="#DBDAD7"/>
<path d="M21.9762 47.8H24.0238V49.8667H21.9762V47.8Z" fill="#DBDAD7"/>
<path d="M17.881 47.8H19.9286V49.8667H17.881V47.8Z" fill="#DBDAD7"/>
<path d="M13.7857 47.8H15.8333V49.8667H13.7857V47.8Z" fill="#DBDAD7"/>
<path d="M9.69048 47.8H11.7381V49.8667H9.69048V47.8Z" fill="#DBDAD7"/>
<path d="M5.59524 47.8H7.64286V49.8667H5.59524V47.8Z" fill="#DBDAD7"/>
<path d="M1.5 47.8H3.54762V49.8667H1.5V47.8Z" fill="#DBDAD7"/>
<path d="M3.54762 45.7333H5.59524V47.8H3.54762V45.7333Z" fill="#DBDAD7"/>
<path d="M5.59524 43.6667H7.64286V45.7333H5.59524V43.6667Z" fill="#DBDAD7"/>
<path d="M5.59524 39.5333H7.64286V41.6H5.59524V39.5333Z" fill="#DBDAD7"/>
<path d="M13.7857 39.5333H15.8333V41.6H13.7857V39.5333Z" fill="#DBDAD7"/>
<path d="M21.9762 39.5333H24.0238V41.6H21.9762V39.5333Z" fill="#DBDAD7"/>
<path d="M30.1667 39.5333H32.2143V41.6H30.1667V39.5333Z" fill="#DBDAD7"/>
<path d="M9.69048 43.6667H11.7381V45.7333H9.69048V43.6667Z" fill="#DBDAD7"/>
<path d="M13.7857 43.6667H15.8333V45.7333H13.7857V43.6667Z" fill="#DBDAD7"/>
<path d="M17.881 43.6667H19.9286V45.7333H17.881V43.6667Z" fill="#DBDAD7"/>
<path d="M21.9762 43.6667H24.0238V45.7333H21.9762V43.6667Z" fill="#DBDAD7"/>
<path d="M26.0714 43.6667H28.119V45.7333H26.0714V43.6667Z" fill="#DBDAD7"/>
<path d="M30.1667 43.6667H32.2143V45.7333H30.1667V43.6667Z" fill="#DBDAD7"/>
<path d="M34.2619 43.6667H36.3095V45.7333H34.2619V43.6667Z" fill="#DBDAD7"/>
<path d="M38.3571 43.6667H40.4048V45.7333H38.3571V43.6667Z" fill="#DBDAD7"/>
<path d="M42.4524 43.6667H44.5V45.7333H42.4524V43.6667Z" fill="#DBDAD7"/>
<path d="M1.5 43.6667H3.54762V45.7333H1.5V43.6667Z" fill="#DBDAD7"/>
<path d="M1.5 39.5333H3.54762V41.6H1.5V39.5333Z" fill="#DBDAD7"/>
<path d="M1.5 35.4H3.54762V37.4667H1.5V35.4Z" fill="#DBDAD7"/>
<path d="M5.59524 31.2667H7.64286V33.3333H5.59524V31.2667Z" fill="#DBDAD7"/>
<path d="M13.7857 31.2667H15.8333V33.3333H13.7857V31.2667Z" fill="#DBDAD7"/>
<path d="M21.9762 31.2667H24.0238V33.3333H21.9762V31.2667Z" fill="#DBDAD7"/>
<path d="M30.1667 31.2667H32.2143V33.3333H30.1667V31.2667Z" fill="#DBDAD7"/>
<path d="M38.3571 31.2667H40.4048V33.3333H38.3571V31.2667Z" fill="#DBDAD7"/>
<path d="M9.69048 27.1333H11.7381V29.2H9.69048V27.1333Z" fill="#DBDAD7"/>
<path d="M13.7857 23H15.8333V25.0667H13.7857V23Z" fill="#DBDAD7"/>
<path d="M9.69048 35.4H11.7381V37.4667H9.69048V35.4Z" fill="#DBDAD7"/>
<path d="M17.881 35.4H19.9286V37.4667H17.881V35.4Z" fill="#DBDAD7"/>
<path d="M26.0714 35.4H28.119V37.4667H26.0714V35.4Z" fill="#DBDAD7"/>
<path d="M34.2619 35.4H36.3095V37.4667H34.2619V35.4Z" fill="#DBDAD7"/>
<path d="M9.69048 39.5333H11.7381V41.6H9.69048V39.5333Z" fill="#DBDAD7"/>
<path d="M17.881 39.5333H19.9286V41.6H17.881V39.5333Z" fill="#DBDAD7"/>
<path d="M26.0714 39.5333H28.119V41.6H26.0714V39.5333Z" fill="#DBDAD7"/>
<path d="M38.3571 39.5333H40.4048V41.6H38.3571V39.5333Z" fill="#DBDAD7"/>
<path d="M11.7381 45.7333H13.7857V47.8H11.7381V45.7333Z" fill="#DBDAD7"/>
<path d="M19.9286 45.7333H21.9762V47.8H19.9286V45.7333Z" fill="#DBDAD7"/>
<path d="M28.119 45.7333H30.1667V47.8H28.119V45.7333Z" fill="#DBDAD7"/>
<path d="M36.3095 45.7333H38.3571V47.8H36.3095V45.7333Z" fill="#DBDAD7"/>
<path d="M13.7857 51.9333H15.8333V54H13.7857V51.9333Z" fill="#DBDAD7"/>
<path d="M17.881 51.9333H19.9286V54H17.881V51.9333Z" fill="#DBDAD7"/>
<path d="M21.9762 51.9333H24.0238V54H21.9762V51.9333Z" fill="#DBDAD7"/>
<path d="M26.0714 51.9333H28.119V54H26.0714V51.9333Z" fill="#DBDAD7"/>
<path d="M30.1667 51.9333H32.2143V54H30.1667V51.9333Z" fill="#DBDAD7"/>
<path d="M34.2619 51.9333H36.3095V54H34.2619V51.9333Z" fill="#DBDAD7"/>
<path d="M38.3571 51.9333H40.4048V54H38.3571V51.9333Z" fill="#DBDAD7"/>
<path d="M42.4524 51.9333H44.5V54H42.4524V51.9333Z" fill="#DBDAD7"/>
<path d="M1 1.5H29.6499L45 16.2649V54.5H1V1.5Z" stroke="#C5C5C3" stroke-width="1.2"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

69
gitbutler-ui/src/lib/assets/empty-states/new-branch/top-sheet.svg
View File

@ -1,69 +0,0 @@
<svg width="46" height="55" viewBox="0 0 46 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 1H29.6499L45 15.7649V54H1V1Z" fill="#F5F5F3"/>
<path d="M29.1658 5.42114V16.8025H41.9698" stroke="#C5C5C3" stroke-width="1.2"/>
<path d="M1.5 51.4333H3.54762V53.5H1.5V51.4333Z" fill="#DBDAD7"/>
<path d="M5.59524 51.4333H7.64286V53.5H5.59524V51.4333Z" fill="#DBDAD7"/>
<path d="M9.69048 51.4333H11.7381V53.5H9.69048V51.4333Z" fill="#DBDAD7"/>
<path d="M7.64286 49.3667H9.69048V51.4333H7.64286V49.3667Z" fill="#DBDAD7"/>
<path d="M15.8333 49.3667H17.881V51.4333H15.8333V49.3667Z" fill="#DBDAD7"/>
<path d="M24.0238 49.3667H26.0714V51.4333H24.0238V49.3667Z" fill="#DBDAD7"/>
<path d="M32.2143 49.3667H34.2619V51.4333H32.2143V49.3667Z" fill="#DBDAD7"/>
<path d="M40.4048 49.3667H42.4524V51.4333H40.4048V49.3667Z" fill="#DBDAD7"/>
<path d="M38.3571 47.3H40.4048V49.3667H38.3571V47.3Z" fill="#DBDAD7"/>
<path d="M42.4524 47.3H44.5V49.3667H42.4524V47.3Z" fill="#DBDAD7"/>
<path d="M34.2619 47.3H36.3095V49.3667H34.2619V47.3Z" fill="#DBDAD7"/>
<path d="M30.1667 47.3H32.2143V49.3667H30.1667V47.3Z" fill="#DBDAD7"/>
<path d="M26.0714 47.3H28.119V49.3667H26.0714V47.3Z" fill="#DBDAD7"/>
<path d="M21.9762 47.3H24.0238V49.3667H21.9762V47.3Z" fill="#DBDAD7"/>
<path d="M17.881 47.3H19.9286V49.3667H17.881V47.3Z" fill="#DBDAD7"/>
<path d="M13.7857 47.3H15.8333V49.3667H13.7857V47.3Z" fill="#DBDAD7"/>
<path d="M9.69048 47.3H11.7381V49.3667H9.69048V47.3Z" fill="#DBDAD7"/>
<path d="M5.59524 47.3H7.64286V49.3667H5.59524V47.3Z" fill="#DBDAD7"/>
<path d="M1.5 47.3H3.54762V49.3667H1.5V47.3Z" fill="#DBDAD7"/>
<path d="M3.54762 45.2333H5.59524V47.3H3.54762V45.2333Z" fill="#DBDAD7"/>
<path d="M5.59524 43.1667H7.64286V45.2333H5.59524V43.1667Z" fill="#DBDAD7"/>
<path d="M5.59524 39.0333H7.64286V41.1H5.59524V39.0333Z" fill="#DBDAD7"/>
<path d="M13.7857 39.0333H15.8333V41.1H13.7857V39.0333Z" fill="#DBDAD7"/>
<path d="M21.9762 39.0333H24.0238V41.1H21.9762V39.0333Z" fill="#DBDAD7"/>
<path d="M30.1667 39.0333H32.2143V41.1H30.1667V39.0333Z" fill="#DBDAD7"/>
<path d="M9.69048 43.1667H11.7381V45.2333H9.69048V43.1667Z" fill="#DBDAD7"/>
<path d="M13.7857 43.1667H15.8333V45.2333H13.7857V43.1667Z" fill="#DBDAD7"/>
<path d="M17.881 43.1667H19.9286V45.2333H17.881V43.1667Z" fill="#DBDAD7"/>
<path d="M21.9762 43.1667H24.0238V45.2333H21.9762V43.1667Z" fill="#DBDAD7"/>
<path d="M26.0714 43.1667H28.119V45.2333H26.0714V43.1667Z" fill="#DBDAD7"/>
<path d="M30.1667 43.1667H32.2143V45.2333H30.1667V43.1667Z" fill="#DBDAD7"/>
<path d="M34.2619 43.1667H36.3095V45.2333H34.2619V43.1667Z" fill="#DBDAD7"/>
<path d="M38.3571 43.1667H40.4048V45.2333H38.3571V43.1667Z" fill="#DBDAD7"/>
<path d="M42.4524 43.1667H44.5V45.2333H42.4524V43.1667Z" fill="#DBDAD7"/>
<path d="M1.5 43.1667H3.54762V45.2333H1.5V43.1667Z" fill="#DBDAD7"/>
<path d="M1.5 39.0333H3.54762V41.1H1.5V39.0333Z" fill="#DBDAD7"/>
<path d="M1.5 34.9H3.54762V36.9667H1.5V34.9Z" fill="#DBDAD7"/>
<path d="M5.59524 30.7667H7.64286V32.8333H5.59524V30.7667Z" fill="#DBDAD7"/>
<path d="M13.7857 30.7667H15.8333V32.8333H13.7857V30.7667Z" fill="#DBDAD7"/>
<path d="M21.9762 30.7667H24.0238V32.8333H21.9762V30.7667Z" fill="#DBDAD7"/>
<path d="M30.1667 30.7667H32.2143V32.8333H30.1667V30.7667Z" fill="#DBDAD7"/>
<path d="M38.3571 30.7667H40.4048V32.8333H38.3571V30.7667Z" fill="#DBDAD7"/>
<path d="M9.69048 26.6333H11.7381V28.7H9.69048V26.6333Z" fill="#DBDAD7"/>
<path d="M13.7857 22.5H15.8333V24.5667H13.7857V22.5Z" fill="#DBDAD7"/>
<path d="M9.69048 34.9H11.7381V36.9667H9.69048V34.9Z" fill="#DBDAD7"/>
<path d="M17.881 34.9H19.9286V36.9667H17.881V34.9Z" fill="#DBDAD7"/>
<path d="M26.0714 34.9H28.119V36.9667H26.0714V34.9Z" fill="#DBDAD7"/>
<path d="M34.2619 34.9H36.3095V36.9667H34.2619V34.9Z" fill="#DBDAD7"/>
<path d="M9.69048 39.0333H11.7381V41.1H9.69048V39.0333Z" fill="#DBDAD7"/>
<path d="M17.881 39.0333H19.9286V41.1H17.881V39.0333Z" fill="#DBDAD7"/>
<path d="M26.0714 39.0333H28.119V41.1H26.0714V39.0333Z" fill="#DBDAD7"/>
<path d="M38.3571 39.0333H40.4048V41.1H38.3571V39.0333Z" fill="#DBDAD7"/>
<path d="M11.7381 45.2333H13.7857V47.3H11.7381V45.2333Z" fill="#DBDAD7"/>
<path d="M19.9286 45.2333H21.9762V47.3H19.9286V45.2333Z" fill="#DBDAD7"/>
<path d="M28.119 45.2333H30.1667V47.3H28.119V45.2333Z" fill="#DBDAD7"/>
<path d="M36.3095 45.2333H38.3571V47.3H36.3095V45.2333Z" fill="#DBDAD7"/>
<path d="M13.7857 51.4333H15.8333V53.5H13.7857V51.4333Z" fill="#DBDAD7"/>
<path d="M17.881 51.4333H19.9286V53.5H17.881V51.4333Z" fill="#DBDAD7"/>
<path d="M21.9762 51.4333H24.0238V53.5H21.9762V51.4333Z" fill="#DBDAD7"/>
<path d="M26.0714 51.4333H28.119V53.5H26.0714V51.4333Z" fill="#DBDAD7"/>
<path d="M30.1667 51.4333H32.2143V53.5H30.1667V51.4333Z" fill="#DBDAD7"/>
<path d="M34.2619 51.4333H36.3095V53.5H34.2619V51.4333Z" fill="#DBDAD7"/>
<path d="M38.3571 51.4333H40.4048V53.5H38.3571V51.4333Z" fill="#DBDAD7"/>
<path d="M42.4524 51.4333H44.5V53.5H42.4524V51.4333Z" fill="#DBDAD7"/>
<path d="M1 1H29.6499L45 15.7649V54H1V1Z" stroke="#C5C5C3" stroke-width="1.2"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 4.9 KiB

138
gitbutler-ui/src/routes/[projectId]/board/NewBranchDropZone.svelte
View File

@ -10,11 +10,6 @@
import Button from '$lib/components/Button.svelte'; import Button from '$lib/components/Button.svelte';
import HandImg from './empty-state-img/HandImg.svelte';
import TopSheetImg from './empty-state-img/TopSheetImg.svelte';
import MiddleSheetImg from './empty-state-img/MiddleSheetImg.svelte';
import BottomSheetImg from './empty-state-img/BottomSheetImg.svelte';
export let branchController: BranchController; export let branchController: BranchController;
function accepts(data: any) { function accepts(data: any) {
@ -44,21 +39,14 @@
<div id="new-branch-dz" class="new-virtual-branch"> <div id="new-branch-dz" class="new-virtual-branch">
<div class="new-virtual-branch__content"> <div class="new-virtual-branch__content">
<div class="stimg"> <div class="stimg">
<div class="stimg__hand"> <div class="stimg__hand"></div>
<HandImg /> <div class="stimg__top-sheet"></div>
</div> <div class="stimg__middle-sheet"></div>
<div class="stimg__top-sheet"> <div class="stimg__bottom-sheet"></div>
<TopSheetImg />
</div>
<div class="stimg__middle-sheet">
<MiddleSheetImg />
</div>
<div class="stimg__bottom-sheet">
<BottomSheetImg />
</div>
<div class="stimg__branch"> <div class="stimg__branch">
<div class="stimg__branch-plus" /> <div class="stimg__branch-plus" />
<div class="stimg__branch-back"></div>
</div> </div>
</div> </div>
@ -66,18 +54,21 @@
>Drag and drop files to create a new branch</span >Drag and drop files to create a new branch</span
> >
<Button <div class="new-branch-button">
color="neutral" <Button
kind="outlined" color="neutral"
icon="plus-small" kind="outlined"
on:click={() => branchController.createBranch({})}>New branch</Button icon="plus-small"
> on:click={() => branchController.createBranch({})}>New branch</Button
>
</div>
</div> </div>
</div> </div>
</div> </div>
<style lang="postcss"> <style lang="postcss">
.canvas-dropzone { .canvas-dropzone {
user-select: none;
display: flex; display: flex;
height: 100%; height: 100%;
} }
@ -100,6 +91,7 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: var(--space-16); gap: var(--space-16);
transition: transform var(--transition-medium);
} }
/* ILLUSTRATION */ /* ILLUSTRATION */
@ -113,31 +105,53 @@
position: absolute; position: absolute;
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
transition:
transform var(--transition-medium),
opacity var(--transition-medium),
filter var(--transition-medium);
} }
/* image variables */
--hand-src: url('$lib/assets/empty-states/new-branch/hand-light.svg');
--topsheet-src: url('$lib/assets/empty-states/new-branch/top-sheet-light.svg');
--middlesheet-src: url('$lib/assets/empty-states/new-branch/middle-sheet-light.svg');
--bottomsheet-src: url('$lib/assets/empty-states/new-branch/bottom-sheet-light.svg');
} }
.stimg__hand { .stimg__hand {
z-index: 5; z-index: 5;
top: 85px; top: 85px;
left: 25px; left: 25px;
width: 42px;
height: 42px;
background-image: var(--hand-src);
} }
.stimg__top-sheet { .stimg__top-sheet {
z-index: 4; z-index: 4;
top: 56px; top: 56px;
left: 8px; left: 8px;
width: 44px;
height: 53px;
background-image: var(--topsheet-src);
} }
.stimg__middle-sheet { .stimg__middle-sheet {
z-index: 3; z-index: 3;
top: 42px; top: 42px;
left: 29px; left: 29px;
width: 44px;
height: 40px;
background-image: var(--middlesheet-src);
} }
.stimg__bottom-sheet { .stimg__bottom-sheet {
z-index: 2; z-index: 2;
top: 66px; top: 66px;
left: 50px; left: 50px;
width: 44px;
height: 41px;
background-image: var(--bottomsheet-src);
} }
.stimg__branch { .stimg__branch {
@ -146,8 +160,17 @@
left: 45px; left: 45px;
width: 66px; width: 66px;
height: 95px; height: 95px;
background-color: color-mix(in srgb, var(--clr-core-pop-55) 12%, transparent); }
.stimg__branch-back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: color-mix(in srgb, var(--clr-core-pop-55) 20%, transparent);
border-radius: 12px; border-radius: 12px;
opacity: 0.5;
} }
.stimg__branch-plus { .stimg__branch-plus {
@ -157,7 +180,7 @@
transform: translateX(-50%); transform: translateX(-50%);
width: 34px; width: 34px;
height: 34px; height: 34px;
opacity: 0.2; opacity: 0.3;
&::before, &::before,
&::after { &::after {
@ -176,6 +199,16 @@
} }
} }
/* dark mode */
:global(.dark) {
& .stimg {
--hand-src: url('$lib/assets/empty-states/new-branch/hand-dark.svg');
--topsheet-src: url('$lib/assets/empty-states/new-branch/top-sheet-dark.svg');
--middlesheet-src: url('$lib/assets/empty-states/new-branch/middle-sheet-dark.svg');
--bottomsheet-src: url('$lib/assets/empty-states/new-branch/bottom-sheet-dark.svg');
}
}
/* OTHER */ /* OTHER */
.new-branch-caption { .new-branch-caption {
@ -185,12 +218,59 @@
max-width: 130px; max-width: 130px;
} }
.new-branch-button {
transition: opacity var(--transition-medium);
}
/* DRAGZONE MODIEFIERS */ /* DRAGZONE MODIEFIERS */
.canvas-dropzone { .canvas-dropzone {
&:global(.new-dz-active > .new-virtual-branch) { &:global(.new-dz-active) {
background-color: color-mix(in srgb, var(--clr-theme-scale-ntrl-50) 4%, transparent); & .new-virtual-branch {
/* border: 1px dashed color-mix(in srgb, var(--clr-theme-scale-ntrl-50) 100%, transparent); */ background-color: color-mix(in srgb, var(--clr-theme-scale-ntrl-50) 6%, transparent);
color: var(--clr-theme-scale-pop-50); border: 1px solid color-mix(in srgb, var(--clr-theme-scale-ntrl-50) 16%, transparent);
color: var(--clr-theme-scale-pop-50);
}
& .new-virtual-branch__content {
transform: translateY(0.5rem);
}
& .new-branch-button {
opacity: 0;
}
& .stimg {
opacity: 1;
}
& .stimg__hand {
transform: translate(0, -6px);
}
& .stimg__top-sheet {
transform: translate(3px, 2px);
}
& .stimg__middle-sheet {
transform: translate(-2px, 7px);
}
& .stimg__bottom-sheet {
transform: translate(-5px, 0);
}
& .stimg__branch-back {
opacity: 0.6;
transform: scale(1.2) translate(0, -5px);
/* filter: blur(30px); */
}
& .stimg__branch-plus {
&::before,
&::after {
width: 120%;
}
}
} }
} }
</style> </style>

30
gitbutler-ui/src/routes/[projectId]/board/empty-state-img/BottomSheetImg.svelte
View File

@ -1,30 +0,0 @@
<svg width="46" height="43" viewBox="0 0 46 43" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M1 1.06299H32.5895L45 13.1073V42.063H1V1.06299Z"
fill="var(--clr-theme-container-pale)"
/>
<path
d="M33 14.563V3.7701C33 3.32464 33.5386 3.10156 33.8536 3.41654L44.1464 13.7094C44.4614 14.0244 44.2383 14.563 43.7929 14.563H33Z"
fill="var(--clr-theme-container-pale)"
/>
<path d="M1 1.56299H6.62791V7.33222H1V1.56299Z" fill="var(--clr-theme-scale-ntrl-70)" />
<path
d="M17.3721 24.6399H12.2558V30.4091H17.3721V24.6399Z"
fill="var(--clr-theme-scale-ntrl-70)"
/>
<path
d="M22.4884 24.6399V30.4091H28.1163V24.6399H22.4884Z"
fill="var(--clr-theme-scale-ntrl-70)"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M12.2558 7.33222H6.62791V13.1015H1V18.8707H6.62791V24.6399H1V30.4091H6.62791V36.1784H1V41.563H6.62791V36.1784H12.2558V41.563H17.3721V36.1784H22.4884V41.563H28.1163V36.1784H33.7442V41.563H39.3721V36.1784H45V30.4091H39.3721V24.6399H45V18.8707H39.3721V13.8707H33.7442V18.8707H28.1163V13.1015H33V7.33222H28.1163V1.56299H22.4884V7.33222H17.3721V1.56299H12.2558V7.33222ZM12.2558 13.1015V7.33222H17.3721V13.1015H12.2558ZM12.2558 18.8707H6.62791V13.1015H12.2558V18.8707ZM17.3721 18.8707V13.1015H22.4884V18.8707H17.3721ZM17.3721 24.6399V18.8707H12.2558V24.6399H6.62791V30.4091H12.2558V36.1784H17.3721V30.4091H22.4884V36.1784H28.1163V30.4091H33.7442V36.1784H39.3721V30.4091H33.7442V24.6399H39.3721V18.8707H33.7442V24.6399H28.1163V18.8707H22.4884V24.6399H17.3721ZM22.4884 13.1015V7.33222H28.1163V13.1015H22.4884Z"
fill="var(--clr-theme-scale-ntrl-70)"
/>
<path
d="M32.5895 1.06299H1V42.063H45V13.563M32.5895 1.06299L45 13.563M32.5895 1.06299V13.563H45"
stroke="var(--clr-theme-scale-ntrl-60)"
stroke-width="1.2"
/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.7 KiB

30
gitbutler-ui/src/routes/[projectId]/board/empty-state-img/HandImg.svelte
View File

@ -1,30 +0,0 @@
<svg width="38" height="37" viewBox="0 0 38 37" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M11.8176 7.25915C8.60162 4.33553 2.49812 8.89075 7.43214 15.4454C4.85787 15.0162 3.06001 16.2699 3.06002 19.0587C3.06003 21.8474 6.87209 27.8377 15.0733 30.2139C20.0073 26.7815 25.156 26.3525 30.9481 27.2106C34.595 21.6329 34.3665 14.2676 34.038 10.1827C33.7095 6.09774 30.8778 1.18859 26.7288 4.62777C25.2668 1.99637 21.1736 1.41151 18.8347 4.92002C17.0804 2.28893 12.6948 2.87368 11.8176 7.25915Z"
fill="var(--clr-theme-container-pale)"
/>
<path
d="M9.7714 18.3688C5.6782 14.2756 4.50872 9.88994 6.84768 7.25872C8.7189 5.15368 11.8948 6.67386 12.9875 8.42809M11.8959 7.25872C12.1104 5.79675 12.8121 4.15951 14.4493 3.45782C16.0866 2.75613 17.9578 3.1654 20.0044 6.38149M19.1273 4.91963C19.712 3.75015 20.7061 2.52215 22.3434 2.28822C24.6823 1.95404 26.4366 4.0425 27.3137 5.79683M26.6159 4.62735C27.0213 3.75023 29.1915 3.0352 30.5298 3.45782C36.0848 5.21212 34.9153 20.123 31.6992 26.2627L15.3264 30.3559C5.97051 26.8476 2.75443 20.7078 3.04691 18.3688C3.33938 16.0298 5.67814 15.1527 7.14006 15.4451"
stroke="var(--clr-theme-scale-ntrl-60)"
stroke-width="1.2"
/>
<path
d="M14.8586 12.8375C15.6673 14.1082 16.3109 16.0389 16.5272 17.3425M21.2944 11.5504C21.8244 12.8587 22.103 14.9499 22.103 16.2535M27.4661 10.8904C27.8951 12.1775 27.8951 14.5373 27.7301 15.8409"
stroke="var(--clr-theme-scale-ntrl-60)"
stroke-width="1.2"
/>
<path
d="M22.5344 24.8633C30.2572 23.3564 34.1187 25.9358 34.1187 29.1537C34.1186 32.3716 29.8282 34.7313 25.1087 35.5894C20.3892 36.4475 14.2906 36.662 13.3099 33.2297C12.4518 30.2263 14.8116 26.3701 22.5344 24.8633Z"
fill="var(--clr-theme-container-pale)"
/>
<path
d="M22.5344 24.8634C20.4303 25.2739 18.7243 25.8589 17.373 26.5534C13.7646 28.4082 12.6856 31.0447 13.3099 33.2298C14.2906 36.6621 20.3892 36.4476 25.1087 35.5895C29.8282 34.7315 34.1186 32.3717 34.1187 29.1538C34.1187 26.9684 32.3376 25.0774 28.7755 24.561"
stroke="var(--clr-theme-scale-ntrl-60)"
stroke-width="1.2"
/>
<path
d="M18.9063 32.6742C21.0636 30.9091 25.7704 29.7324 28.5875 30.3707"
stroke="var(--clr-theme-scale-ntrl-60)"
stroke-width="1.2"
/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.2 KiB

13
gitbutler-ui/src/routes/[projectId]/board/empty-state-img/MiddleSheetImg.svelte
View File

@ -1,13 +0,0 @@
<svg width="47" height="43" viewBox="0 0 47 43" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M1.5 1.5H32.5L45.5 14V41.5H1.5V1.5Z"
fill="var(--clr-theme-container-pale)"
stroke="var(--clr-theme-scale-ntrl-60)"
stroke-width="1.2"
/>
<path
d="M10.6887 22.3516H38.0511M10.6887 27.104H27.2586M10.6887 31.8557H32.6548M10.6887 36.6083H21.8623M31.5 4V15H42.5"
stroke="var(--clr-theme-scale-ntrl-60)"
stroke-width="1.2"
/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 451 B

131
gitbutler-ui/src/routes/[projectId]/board/empty-state-img/TopSheetImg.svelte
View File

@ -1,131 +0,0 @@
<svg width="46" height="55" viewBox="0 0 46 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 1H29.6499L45 15.7649V54H1V1Z" fill="var(--clr-theme-container-pale)" />
<path
d="M29.1658 5.42114V16.8025H41.9698"
stroke="var(--clr-theme-scale-ntrl-60)"
stroke-width="1.2"
/>
<path d="M1.5 51.4333H3.54762V53.5H1.5V51.4333Z" fill="var(--clr-theme-scale-ntrl-70)" />
<path d="M5.59524 51.4333H7.64286V53.5H5.59524V51.4333Z" fill="var(--clr-theme-scale-ntrl-70)" />
<path d="M9.69048 51.4333H11.7381V53.5H9.69048V51.4333Z" fill="var(--clr-theme-scale-ntrl-70)" />
<path
d="M7.64286 49.3667H9.69048V51.4333H7.64286V49.3667Z"
fill="var(--clr-theme-scale-ntrl-70)"
/>
<path
d="M15.8333 49.3667H17.881V51.4333H15.8333V49.3667Z"
fill="var(--clr-theme-scale-ntrl-70)"
/>
<path
d="M24.0238 49.3667H26.0714V51.4333H24.0238V49.3667Z"
fill="var(--clr-theme-scale-ntrl-70)"
/>
<path
d="M32.2143 49.3667H34.2619V51.4333H32.2143V49.3667Z"
fill="var(--clr-theme-scale-ntrl-70)"
/>
<path
d="M40.4048 49.3667H42.4524V51.4333H40.4048V49.3667Z"
fill="var(--clr-theme-scale-ntrl-70)"
/>
<path d="M38.3571 47.3H40.4048V49.3667H38.3571V47.3Z" fill="var(--clr-theme-scale-ntrl-70)" />
<path d="M42.4524 47.3H44.5V49.3667H42.4524V47.3Z" fill="var(--clr-theme-scale-ntrl-70)" />
<path d="M34.2619 47.3H36.3095V49.3667H34.2619V47.3Z" fill="var(--clr-theme-scale-ntrl-70)" />
<path d="M30.1667 47.3H32.2143V49.3667H30.1667V47.3Z" fill="var(--clr-theme-scale-ntrl-70)" />
<path d="M26.0714 47.3H28.119V49.3667H26.0714V47.3Z" fill="var(--clr-theme-scale-ntrl-70)" />
<path d="M21.9762 47.3H24.0238V49.3667H21.9762V47.3Z" fill="var(--clr-theme-scale-ntrl-70)" />
<path d="M17.881 47.3H19.9286V49.3667H17.881V47.3Z" fill="var(--clr-theme-scale-ntrl-70)" />
<path d="M13.7857 47.3H15.8333V49.3667H13.7857V47.3Z" fill="var(--clr-theme-scale-ntrl-70)" />
<path d="M9.69048 47.3H11.7381V49.3667H9.69048V47.3Z" fill="var(--clr-theme-scale-ntrl-70)" />
<path d="M5.59524 47.3H7.64286V49.3667H5.59524V47.3Z" fill="var(--clr-theme-scale-ntrl-70)" />
<path d="M1.5 47.3H3.54762V49.3667H1.5V47.3Z" fill="var(--clr-theme-scale-ntrl-70)" />
<path d="M3.54762 45.2333H5.59524V47.3H3.54762V45.2333Z" fill="var(--clr-theme-scale-ntrl-70)" />
<path
d="M5.59524 43.1667H7.64286V45.2333H5.59524V43.1667Z"
fill="var(--clr-theme-scale-ntrl-70)"
/>
<path d="M5.59524 39.0333H7.64286V41.1H5.59524V39.0333Z" fill="var(--clr-theme-scale-ntrl-70)" />
<path d="M13.7857 39.0333H15.8333V41.1H13.7857V39.0333Z" fill="var(--clr-theme-scale-ntrl-70)" />
<path d="M21.9762 39.0333H24.0238V41.1H21.9762V39.0333Z" fill="var(--clr-theme-scale-ntrl-70)" />
<path d="M30.1667 39.0333H32.2143V41.1H30.1667V39.0333Z" fill="var(--clr-theme-scale-ntrl-70)" />
<path
d="M9.69048 43.1667H11.7381V45.2333H9.69048V43.1667Z"
fill="var(--clr-theme-scale-ntrl-70)"
/>
<path
d="M13.7857 43.1667H15.8333V45.2333H13.7857V43.1667Z"
fill="var(--clr-theme-scale-ntrl-70)"
/>
<path d="M17.881 43.1667H19.9286V45.2333H17.881V43.1667Z" fill="var(--clr-theme-scale-ntrl-70)" />
<path
d="M21.9762 43.1667H24.0238V45.2333H21.9762V43.1667Z"
fill="var(--clr-theme-scale-ntrl-70)"
/>
<path
d="M26.0714 43.1667H28.119V45.2333H26.0714V43.1667Z"
fill="var(--clr-theme-scale-ntrl-70)"
/>
<path
d="M30.1667 43.1667H32.2143V45.2333H30.1667V43.1667Z"
fill="var(--clr-theme-scale-ntrl-70)"
/>
<path
d="M34.2619 43.1667H36.3095V45.2333H34.2619V43.1667Z"
fill="var(--clr-theme-scale-ntrl-70)"
/>
<path
d="M38.3571 43.1667H40.4048V45.2333H38.3571V43.1667Z"
fill="var(--clr-theme-scale-ntrl-70)"
/>
<path d="M42.4524 43.1667H44.5V45.2333H42.4524V43.1667Z" fill="var(--clr-theme-scale-ntrl-70)" />
<path d="M1.5 43.1667H3.54762V45.2333H1.5V43.1667Z" fill="var(--clr-theme-scale-ntrl-70)" />
<path d="M1.5 39.0333H3.54762V41.1H1.5V39.0333Z" fill="var(--clr-theme-scale-ntrl-70)" />
<path d="M1.5 34.9H3.54762V36.9667H1.5V34.9Z" fill="var(--clr-theme-scale-ntrl-70)" />
<path
d="M5.59524 30.7667H7.64286V32.8333H5.59524V30.7667Z"
fill="var(--clr-theme-scale-ntrl-70)"
/>
<path
d="M13.7857 30.7667H15.8333V32.8333H13.7857V30.7667Z"
fill="var(--clr-theme-scale-ntrl-70)"
/>
<path
d="M21.9762 30.7667H24.0238V32.8333H21.9762V30.7667Z"
fill="var(--clr-theme-scale-ntrl-70)"
/>
<path
d="M30.1667 30.7667H32.2143V32.8333H30.1667V30.7667Z"
fill="var(--clr-theme-scale-ntrl-70)"
/>
<path
d="M38.3571 30.7667H40.4048V32.8333H38.3571V30.7667Z"
fill="var(--clr-theme-scale-ntrl-70)"
/>
<path d="M9.69048 26.6333H11.7381V28.7H9.69048V26.6333Z" fill="var(--clr-theme-scale-ntrl-70)" />
<path d="M13.7857 22.5H15.8333V24.5667H13.7857V22.5Z" fill="var(--clr-theme-scale-ntrl-70)" />
<path d="M9.69048 34.9H11.7381V36.9667H9.69048V34.9Z" fill="var(--clr-theme-scale-ntrl-70)" />
<path d="M17.881 34.9H19.9286V36.9667H17.881V34.9Z" fill="var(--clr-theme-scale-ntrl-70)" />
<path d="M26.0714 34.9H28.119V36.9667H26.0714V34.9Z" fill="var(--clr-theme-scale-ntrl-70)" />
<path d="M34.2619 34.9H36.3095V36.9667H34.2619V34.9Z" fill="var(--clr-theme-scale-ntrl-70)" />
<path d="M9.69048 39.0333H11.7381V41.1H9.69048V39.0333Z" fill="var(--clr-theme-scale-ntrl-70)" />
<path d="M17.881 39.0333H19.9286V41.1H17.881V39.0333Z" fill="var(--clr-theme-scale-ntrl-70)" />
<path d="M26.0714 39.0333H28.119V41.1H26.0714V39.0333Z" fill="var(--clr-theme-scale-ntrl-70)" />
<path d="M38.3571 39.0333H40.4048V41.1H38.3571V39.0333Z" fill="var(--clr-theme-scale-ntrl-70)" />
<path d="M11.7381 45.2333H13.7857V47.3H11.7381V45.2333Z" fill="var(--clr-theme-scale-ntrl-70)" />
<path d="M19.9286 45.2333H21.9762V47.3H19.9286V45.2333Z" fill="var(--clr-theme-scale-ntrl-70)" />
<path d="M28.119 45.2333H30.1667V47.3H28.119V45.2333Z" fill="var(--clr-theme-scale-ntrl-70)" />
<path d="M36.3095 45.2333H38.3571V47.3H36.3095V45.2333Z" fill="var(--clr-theme-scale-ntrl-70)" />
<path d="M13.7857 51.4333H15.8333V53.5H13.7857V51.4333Z" fill="var(--clr-theme-scale-ntrl-70)" />
<path d="M17.881 51.4333H19.9286V53.5H17.881V51.4333Z" fill="var(--clr-theme-scale-ntrl-70)" />
<path d="M21.9762 51.4333H24.0238V53.5H21.9762V51.4333Z" fill="var(--clr-theme-scale-ntrl-70)" />
<path d="M26.0714 51.4333H28.119V53.5H26.0714V51.4333Z" fill="var(--clr-theme-scale-ntrl-70)" />
<path d="M30.1667 51.4333H32.2143V53.5H30.1667V51.4333Z" fill="var(--clr-theme-scale-ntrl-70)" />
<path d="M34.2619 51.4333H36.3095V53.5H34.2619V51.4333Z" fill="var(--clr-theme-scale-ntrl-70)" />
<path d="M38.3571 51.4333H40.4048V53.5H38.3571V51.4333Z" fill="var(--clr-theme-scale-ntrl-70)" />
<path d="M42.4524 51.4333H44.5V53.5H42.4524V51.4333Z" fill="var(--clr-theme-scale-ntrl-70)" />
<path
d="M1 1H29.6499L45 15.7649V54H1V1Z"
stroke="var(--clr-theme-scale-ntrl-60)"
stroke-width="1.2"
/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 6.6 KiB

5
gitbutler-ui/src/routes/[projectId]/components/BranchCard.svelte
View File

@ -181,15 +181,16 @@
<div <div
class="cherrypick-dz-marker absolute z-10 hidden h-full w-full items-center justify-center rounded bg-blue-100/70 outline-dashed outline-2 -outline-offset-8 outline-light-600 dark:bg-blue-900/60 dark:outline-dark-300" class="cherrypick-dz-marker absolute z-10 hidden h-full w-full items-center justify-center rounded bg-blue-100/70 outline-dashed outline-2 -outline-offset-8 outline-light-600 dark:bg-blue-900/60 dark:outline-dark-300"
> >
<div class="hover-text invisible font-semibold">Apply here</div> <div class="hover-text font-semibold">Apply here</div>
</div> </div>
<!-- TODO: Figure out why z-10 is necessary for expand up/down to not come out on top --> <!-- TODO: Figure out why z-10 is necessary for expand up/down to not come out on top -->
<div <div
class="lane-dz-marker absolute z-10 hidden h-full w-full items-center justify-center rounded bg-blue-100/70 outline-dashed outline-2 -outline-offset-8 outline-light-600 dark:bg-blue-900/60 dark:outline-dark-300" class="lane-dz-marker absolute z-10 hidden h-full w-full items-center justify-center rounded bg-blue-100/70 outline-dashed outline-2 -outline-offset-8 outline-light-600 dark:bg-blue-900/60 dark:outline-dark-300"
> >
<div class="hover-text invisible font-semibold">Move here</div> <div class="hover-text font-semibold">Move here</div>
</div> </div>
{#if branch.files?.length > 0} {#if branch.files?.length > 0}
<BranchFiles <BranchFiles
{branch} {branch}

2
gitbutler-ui/src/routes/[projectId]/components/BranchLanePopupMenu.svelte
View File

@ -85,7 +85,7 @@
<TextBox label="Remote branch name" id="newRemoteName" bind:value={newRemoteName}></TextBox> <TextBox label="Remote branch name" id="newRemoteName" bind:value={newRemoteName}></TextBox>
<svelte:fragment slot="controls" let:close> <svelte:fragment slot="controls" let:close>
<Button kind="outlined" on:click={close}>Cancel</Button> <Button color="neutral" kind="outlined" on:click={close}>Cancel</Button>
<Button <Button
color="primary" color="primary"
on:click={() => { on:click={() => {

2
gitbutler-ui/src/styles/tokens.css
View File

@ -228,7 +228,7 @@
--space-48: 3rem; /* 48px / 16px = 3rem */ --space-48: 3rem; /* 48px / 16px = 3rem */
--space-56: 3.5rem; /* 56px / 16px = 3.5rem */ --space-56: 3.5rem; /* 56px / 16px = 3.5rem */
--space-64: 4rem; /* 64px / 16px = 4rem */ --space-64: 4rem; /* 64px / 16px = 4rem */
--transition-fast: 0.05s ease-in-out; --transition-fast: 0.06s ease-in-out;
--transition-medium: 0.1s ease-in-out; --transition-medium: 0.1s ease-in-out;
--transition-slow: 0.25s ease-in-out; --transition-slow: 0.25s ease-in-out;
--helpers-invert-0: 0; --helpers-invert-0: 0;