3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-08-03 17:38:28 +02:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #2116 from penpot/palba-review-info-slides

Browse source 
🎉 New style and content for onboarding slides
This commit is contained in:
Andrey Antukh 2022-07-28 15:24:30 +02:00 • committed by GitHub
commit 26fd1a261c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 272 additions and 137 deletions
Download patch file Download diff file Expand all files Collapse all files

1
frontend/resources/images/community.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="48" xmlns="http://www.w3.org/2000/svg" height="48" id="screenshot-4c303e10-f7a4-11ec-a5eb-5b34f1b9a5f8" viewBox="0 0 48 48" style="-webkit-print-color-adjust: exact;" fill="none" version="1.1"><g id="shape-4c303e10-f7a4-11ec-a5eb-5b34f1b9a5f8" rx="0" ry="0"><g id="shape-4c303e11-f7a4-11ec-a5eb-5b34f1b9a5f8"><g id="fills-4c303e11-f7a4-11ec-a5eb-5b34f1b9a5f8"><rect rx="24" ry="24" x="0" y="0" transform="" width="48" height="48" style="fill: rgb(49, 239, 184); fill-opacity: 1;"/></g></g><g id="shape-fd4cc483-02bb-11ed-9a39-e16fc89e0613" rx="0" ry="0"><g id="shape-fd4cc484-02bb-11ed-9a39-e16fc89e0613"><g id="fills-fd4cc484-02bb-11ed-9a39-e16fc89e0613"><path rx="0" ry="0" d="M46,23.509699812659164C46,13.839405665317372,36.37388034188007,6,24.5,6C12.626119658119023,6,3,13.839405665317372,3,23.509699812659164C3,28.169402480873487,5.8043350427342375,34.21014187922765,12.347538461537624,37.128363452956364C10.478324786324265,42.964954748528726,6.739162393161678,44.91050987173867,6.739162393161678,44.91050987173867C16.08670085470112,48.80154604410063,23.565025641025386,41.01947369937625,23.565025641025386,41.01947369937625C38.521675213674825,41.01947369937625,46,32.158142335227694,46,23.509699812659164ZZ" style="fill: rgb(255, 255, 255);"/></g></g><g id="shape-fd4cc485-02bb-11ed-9a39-e16fc89e0613"><g id="fills-fd4cc485-02bb-11ed-9a39-e16fc89e0613"><path fill-rule="evenodd" clip-rule="evenodd" rx="0" ry="0" d="M16.410854700854543,35.29523734014356L15.495726495726558,38.15234631352496C14.940034188033678,39.8859746460289,14.238068376067531,41.348788366345616,13.489059829060352,42.57108374810332C14.859179487179063,42.38700981175589,16.1183076923071,41.95115828601456,17.234837606836663,41.41501053901948C18.48367521367436,40.81501098794752,19.504649572649214,40.108122627962985,20.211025641025117,39.55056748957804C20.56090598290575,39.274049177954566,20.825521367521105,39.04086416724158,20.99384615384588,38.88590132022409C21.077641025640332,38.80864211877133,21.13717948717931,38.75153105039135,21.170256410256115,38.71893848218497C21.18422222222216,38.70501256667876,21.19377777777754,38.69560516631009,21.198188034187297,38.69116072519091C21.198923076923165,38.69041998500461,21.199658119658125,38.68982739285548,21.199658119658125,38.689382948743514L22.16403418803384,37.68612444013661L23.565025641025386,37.68612444013661C37.124358974358984,37.68612444013661,42.69230769230671,29.912426552824854,42.69230769230671,23.50969060270245C42.69230769230671,16.30843673152458,35.24044444444371,9.333330839287555,24.5,9.333330839287555C13.75955555555447,9.333330839287555,6.307692307691468,16.30843673152458,6.307692307691468,23.50969060270245C6.307692307691468,26.957688022861475,8.4346119658112,31.73798074247452,13.686786324786226,34.08020121221398L16.410854700854543,35.29523734014356ZZM10.806888888888352,45.93982196830575C9.50586324786309,45.81619243117757,8.143608547008625,45.49508156032607,6.739162393161678,44.91048940513383C6.739162393161678,44.91048940513383,8.100755555555224,44.20204549075697,9.591128205127461,42.35760242635115C10.570940170940048,41.14552925916769,11.606615384614997,39.4428638664599,12.347538461537624,37.128347079695686C5.8043350427342375,34.210127040927546,3,28.16931674593343,3,23.50969060270245C3,13.839401541855068,12.626119658119023,6,24.5,6C36.37388034188007,6,46,13.839401541855068,46,23.50969060270245C46,32.15812857626224,38.521675213674825,41.019455279424164,23.565025641025386,41.019455279424164C23.565025641025386,41.019455279424164,18.165401709400612,46.63871033427631,10.806888888888352,45.93982196830575ZZ" style="fill: rgb(0, 0, 0);"/></g></g></g></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 3.6 KiB

1
frontend/resources/images/contributing.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 5.8 KiB

1
frontend/resources/images/deco-circle.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="-webkit-print-color-adjust:exact" viewBox="0 0 24 24"><circle cx="12" cy="12" r="12"/><g class="inner-stroke-shape"><defs><clipPath id="b"><use href="#a"/></clipPath><circle id="a" cx="12" cy="12" r="12" fill="none" stroke="#31efb8" stroke-opacity="1" stroke-width="4"/></defs><use clip-path="url('#b')" href="#a"/></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 384 B

1
frontend/resources/images/deco-line1.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="-webkit-print-color-adjust:exact" viewBox="2877 1278 16 49"><path d="m2893 1278-12 10 8 10-10 8 10 12-12 9"/><path stroke="#31efb8" stroke-width="2" d="m2893 1278-12 10 8 10-10 8 10 12-12 9" class="stroke-shape"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 278 B

1
frontend/resources/images/deco-line2.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="-webkit-print-color-adjust:exact" viewBox="3622 1608 45 42"><path d="M3632 1608v15h12l-1 13h15l-1 14"/><path stroke="#31efb8" stroke-width="2" d="M3632 1608v15h12l-1 13h15l-1 14" class="stroke-shape"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 266 B

1
frontend/resources/images/deco-square.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="-webkit-print-color-adjust:exact" viewBox="3492 1152 23 23"><path d="m3492 1159 16-7 7 16-15 7-8-16Z"/><g class="inner-stroke-shape"><defs><clipPath id="b"><use href="#a"/></clipPath><path id="a" fill="none" stroke="#31efb8" stroke-opacity="1" stroke-width="4" d="m3492 1159 16-7 7 16-15 7-8-16Z"/></defs><use clip-path="url('#b')" href="#a"/></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 412 B

1
frontend/resources/images/onboarding-people.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 14 KiB

1
frontend/resources/images/user-guide.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="-webkit-print-color-adjust:exact" viewBox="0 0 48 48"><rect width="48" height="48" fill="#31efb8" rx="24" ry="24"/><g class="inner-stroke-shape"><defs><clipPath id="a"><use href="#stroke-shape-3fe79320-0e5a-11ed-8ef6-85a75a2eae6b--0"/></clipPath></defs><use clip-path="url('#a')" href="#stroke-shape-3fe79320-0e5a-11ed-8ef6-85a75a2eae6b--0"/></g><path fill="#fff" d="m4 8 2-2 15 4h6l15-4 2 2v28l-1 1-16 5h-6L5 37l-1-1V8Z"/><path fill="#000" fill-rule="evenodd" d="M20 38V13L7 9v26l13 3Zm1 4L5 37l-1-1V8l2-2 15 4h6l15-4 2 2v28l-1 1-16 5h-6Zm2-3h2V13h-2v26Zm5-26v25l13-3V9l-13 4Z" clip-rule="evenodd"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 665 B

1
frontend/resources/images/video-tutorials.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="-webkit-print-color-adjust:exact" viewBox="0 0 48 48"><rect width="48" height="48" fill="#31efb8" rx="24" ry="24"/><g fill="#000"><rect width="31" height="31" x="9" y="9" fill="none" rx="0" ry="0"/><path fill="#f5f7ff" d="M18 13v22l15-11-15-11Z"/><path d="M17 13v23l1 1 2-1 13-10 2-1-1-1-14-12h-2l-1 1Zm3 3 11 9h-1l-10 8Z"/></g><path fill="#fff" d="m5 9 1-1h36l2 1v30l-2 2H6l-1-2V9Z"/><path fill="#000" d="M21 18c-1-1-2 0-2 1v10c0 1 1 2 2 1l9-5v-2l-9-5Z"/><path fill="#000" fill-rule="evenodd" d="m5 9 1-1h36l2 1v30l-2 2H6l-1-2V9Zm2 29V10h34v28H7Z" clip-rule="evenodd"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 635 B

118
frontend/resources/styles/main/partials/modal.scss
View file

@ -868,6 +868,92 @@
}
}
&.onboarding-v2 {
min-height: 464px;
min-width: 752px;
.modal-left {
background-color: $color-gray-50;
width: 297px;
}
.welcome img {
width: 260.9px;
height: 402.96px;
position: absolute;
bottom: -10px;
}
.modal-right {
padding: 0;
}
.release-container {
width: 100%;
text-align: right;
position: relative;
height: 2rem;
}
.release {
background-color: $color-primary;
border-radius: 4px;
color: #1f1f1f;
padding: 4px $size-1;
display: inline-block;
margin-top: 1rem;
margin-right: 1rem;
}
.right-content {
padding: $size-6;
.modal-content {
padding: $size-1 0;
p {
margin-top: 0.4rem;
}
}
.welcome-card {
display: flex;
color: $color-black;
margin-top: $size-5;
width: 90%;
.title a {
font-weight: bold;
color: $color-black;
text-decoration: none;
&:hover {
color: $color-primary-dark;
}
}
.description {
font-size: 12px;
text-decoration: none;
text-transform: none;
}
img {
width: 48px;
height: 48px;
margin-right: 6px;
}
}
}
.modal-navigation {
width: 100%;
padding: 0 2rem 2rem 0;
button {
margin-left: auto;
padding: 0 0.5rem;
}
}
}
&.black {
.modal-left {
background-color: $color-black;
@ -1056,6 +1142,38 @@
top: -18px;
width: 60px;
&.square {
top: -18px;
left: 631px;
width: 24px;
height: 24px;
color: $color-primary;
}
&.circle {
top: -16px;
left: 21px;
width: 24px;
height: 24px;
color: $color-primary;
}
&.line1 {
top: 110px;
left: -12px;
width: 16px;
height: 49px;
color: $color-primary;
}
&.line2 {
top: 440px;
left: 733px;
width: 46px;
height: 43px;
color: $color-primary;
}
&.top {
width: 183px;
top: -106px;