mirror of
https://github.com/penpot/penpot.git
synced 2025-03-21 04:01:24 -05:00
♻️ Update onboarding modals
This commit is contained in:
Eva Marco
Andrey Antukh
parent
5590210088
commit
7624797acf
109 changed files with 1054 additions and 836 deletions
frontend
resources
images
styles/common/refactor
src/app/main
ui.cljs
ui
comments.scss
components
color_bullet_new.scsscontext_menu_a11y.scsseditable_label.scssforms.cljsforms.scssradio_buttons.scssselect.cljsselect.scsstab_container.scsstitle_bar.scss
dashboard
debug
delete_shared.scssexport.scssmessages.scssonboarding.cljsonboarding.scssonboarding
settings
viewer.scssviewer
comments.scssheader.scss
inspect
interactions.scsslogin.scssshare_link.scssthumbnails.scssworkspace
color_palette.scsscolor_palette_ctx_menu.scsscolorpicker.scss
colorpicker
comments.scsscontext_menu.scssleft_header.scsslibraries.scssright_header.scsssidebar
assets.scssshortcuts.scsssitemap.scss
text_palette.scsstext_palette_ctx_menu.scssassets
debug.scssdebug_shape_info.scsshistory.scsslayer_name.scsslayers.scssoptions
menus
blur.scsscolor_selection.scsscomponent.scssconstraints.scssexports.scssgrid_cell.scssinteractions.scsslayout_container.scssmeasures.scsssvg_attrs.scsstext.scsstypography.scss
rows
viewport
translations
31
frontend/resources/images/beforeyoustartilustration.svg
Normal file
31
frontend/resources/images/beforeyoustartilustration.svg
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
<svg width="298" height="465" viewBox="0 0 298 465" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M256.587 294.103C256.624 294.558 256.641 294.799 256.641 294.799L256.444 294.813C256.496 294.581 256.544 294.344 256.587 294.103ZM255.605 285.129C253.657 270.317 248.493 242.558 236.319 231.397C229.105 224.78 221.428 220.177 214.544 216.049C202.283 208.698 192.541 202.856 192.425 189.839C192.314 176.709 196.697 169.435 201.311 161.776C203.84 157.579 206.438 153.267 208.405 147.812C217.62 122.245 205.79 106.194 203.559 103.482C203.586 103.509 203.614 103.536 203.643 103.565C206.173 106.026 218.488 118.011 217.662 145.916C216.68 179.047 255.008 194.386 266.953 166.971C266.953 166.971 248.455 177.745 245.747 139.008C245.222 131.544 245.695 124.94 246.12 118.997C247.123 104.972 247.863 94.6266 234.616 85.354C215.746 72.152 196.624 92.073 196.624 92.073C196.624 92.073 180.381 71.704 151.165 81.203C126.154 89.3363 126.199 104.009 126.238 116.477C126.254 121.758 126.269 126.643 124.379 130.468C122.561 134.147 120.822 136.77 119.349 138.992C115.675 144.535 113.661 147.573 116.229 158.237C119.456 171.655 128.083 179.877 136.638 187.358C153.606 195.534 162.345 213.98 158.514 230.171C153.3 252.251 137.279 261.251 127.187 266.746C136.47 264.969 147.656 264.187 158.108 263.456H158.109L158.255 263.446C215.831 259.42 222.788 279.034 224.573 284.066L224.573 284.066C224.711 284.453 224.817 284.754 224.914 284.951C227.055 279.159 232.461 275.145 238.702 274.708C245.708 274.218 252.779 278.842 255.605 285.129Z" fill="url(#paint0_linear_601_4202)"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M131.323 464.729C131.127 463.084 129.891 451.412 132.559 437.38C134.945 424.827 141.839 413.304 161.356 404.98C180.873 396.656 195.882 363.029 173.358 358.712C154.835 355.159 149.696 342.551 147.601 324.493C147.207 321.105 147.442 317.921 147.66 314.984C148.343 305.771 148.846 298.975 129.174 295.853C113.578 293.376 103.43 290.381 106.714 278.243C108.364 272.143 116.52 268.788 127.187 266.746C137.279 261.251 153.3 252.251 158.514 230.171C163.665 208.398 146.084 182.546 116.329 183.078C86.5675 183.611 78.8435 199.872 78.8435 199.872C78.8435 199.872 82.7735 188.622 72.2955 181.942C60.8665 174.652 48.2425 181.794 48.2225 193.69C48.2088 202.742 53.6237 207.565 57.7249 209.92C55.8975 209.264 53.3869 208.454 49.9755 207.504C39.9805 204.719 30.4195 209.602 29.1285 220.575C27.8775 231.188 35.9835 237.322 43.8025 236.969C43.8025 236.969 35.5005 238.773 33.4105 247.147C32.0065 252.772 31.9305 260.639 42.2455 263.422C47.5356 264.849 53.9706 262.22 57.6474 260.325C55.3482 262.102 52.6141 265.469 53.0335 271.3C53.6985 280.533 62.3465 283.511 69.1345 280.684C74.3115 278.527 77.2745 272.759 77.2745 272.759C77.2745 272.759 81.6815 282.392 80.0605 288.947C79.0568 293.007 75.9264 295.337 72.0061 298.256C64.1612 304.096 53.1531 312.291 49.6925 341.414C47.2429 361.995 44.9642 379.281 43.0549 393.765C35.4425 451.512 33.7003 464.729 50.3965 464.729H131.323Z" fill="url(#paint1_linear_601_4202)"/>
|
||||
<path d="M166.309 136.528C161.899 136.751 158.137 133.355 157.915 128.942C157.693 124.529 161.089 120.771 165.5 120.549C169.911 120.326 173.673 123.722 173.894 128.135C174.116 132.548 170.719 136.306 166.309 136.528Z" stroke="#151035" stroke-width="6"/>
|
||||
<path d="M129.366 148.837C130.409 157.769 139.231 172.81 158.987 171.819C178.744 170.828 183.496 155.105 184.308 146.081" stroke="#151035" stroke-width="6"/>
|
||||
<path d="M117.2 214.827C113.18 216.645 108.438 214.856 106.62 210.83C104.795 206.804 106.578 202.067 110.606 200.25C114.633 198.432 119.368 200.221 121.193 204.247C123.011 208.273 121.228 213.009 117.2 214.827Z" stroke="#151035" stroke-width="6"/>
|
||||
<path d="M83.212 236.931C87.279 244.537 100.532 254.824 118.079 246.899C135.619 238.974 134.422 223.24 131.999 214.892" stroke="#151035" stroke-width="6"/>
|
||||
<path d="M158.255 263.446C135.757 265.019 109.806 266.809 106.714 278.243C103.43 290.381 113.578 293.376 129.174 295.853C155.119 299.97 145.97 310.479 147.601 324.493C149.696 342.551 154.835 355.159 173.358 358.712C195.882 363.029 180.873 396.656 161.356 404.98C141.839 413.304 134.945 424.827 132.559 437.38C129.679 452.529 131.348 464.927 131.348 464.927C131.348 464.927 212.183 464.927 262.124 464.927C284.091 464.927 281.613 438.159 266.233 424.124C247.986 407.47 213.629 410.886 209.806 388.745C207.61 364.187 221.781 349.045 240.409 348.024C246.018 347.631 250.249 342.842 249.863 337.326C250.508 327.337 245.496 328.585 245.496 328.585C245.496 328.585 259.748 331.375 261.065 318.659C262.175 307.936 254.549 305.225 248.21 305.669C248.21 305.669 257.3 301.436 256.855 290.008C256.255 281.421 247.428 274.098 238.702 274.708C232.461 275.145 227.055 279.159 224.914 284.951C223.559 282.191 220.26 259.11 158.255 263.446Z" fill="url(#paint2_linear_601_4202)" fill-opacity="0.95"/>
|
||||
<path d="M158.255 263.446C135.757 265.019 109.806 266.809 106.714 278.243C103.43 290.381 113.578 293.376 129.174 295.853C155.119 299.97 145.97 310.479 147.601 324.493C149.696 342.551 154.835 355.159 173.358 358.712C195.882 363.029 180.873 396.656 161.356 404.98C141.839 413.304 134.945 424.827 132.559 437.38C129.679 452.529 131.348 464.927 131.348 464.927C131.348 464.927 212.183 464.927 262.124 464.927C284.091 464.927 281.613 438.159 266.233 424.124C247.986 407.47 213.629 410.886 209.806 388.745C207.61 364.187 221.781 349.045 240.409 348.024C246.018 347.631 250.249 342.842 249.863 337.326C250.508 327.337 245.496 328.585 245.496 328.585C245.496 328.585 259.748 331.375 261.065 318.659C262.175 307.936 254.549 305.225 248.21 305.669C248.21 305.669 257.3 301.436 256.855 290.008C256.255 281.421 247.428 274.098 238.702 274.708C232.461 275.145 227.055 279.159 224.914 284.951C223.559 282.191 220.26 259.11 158.255 263.446Z" fill="url(#paint3_linear_601_4202)" fill-opacity="0.95"/>
|
||||
<path d="M196.747 300.394C191.957 301.742 186.988 298.957 185.645 294.174C184.294 289.391 187.082 284.421 191.863 283.072C196.653 281.724 201.621 284.508 202.965 289.292C204.317 294.074 201.528 299.046 196.747 300.394Z" stroke="#151035" stroke-width="6"/>
|
||||
<path d="M161.337 322.014C164.155 330.167 175.417 342.375 193.41 337.185C211.408 331.994 212.518 316.221 211.385 307.58" stroke="#151035" stroke-width="6"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_601_4202" x1="266.953" y1="305.119" x2="298.574" y2="109.899" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#00D1B8" stop-opacity="0.9"/>
|
||||
<stop offset="1" stop-color="#25CBD9"/>
|
||||
<stop offset="1" stop-color="#25CBD9"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_601_4202" x1="201.539" y1="464.729" x2="248.093" y2="220.818" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="1" stop-color="white"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear_601_4202" x1="106.096" y1="464.927" x2="305.549" y2="295.022" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FF8CF4" stop-opacity="0.9"/>
|
||||
<stop offset="1" stop-color="#FFA9DE"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint3_linear_601_4202" x1="106.096" y1="464.927" x2="305.549" y2="295.022" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FF8CF4" stop-opacity="0.9"/>
|
||||
<stop offset="1" stop-color="#FFA9DE"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After 
(image error) Size: 7.1 KiB |
52
frontend/resources/images/welcomeilustration.svg
Normal file
52
frontend/resources/images/welcomeilustration.svg
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
<svg width="298" height="465" viewBox="0 0 298 465" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_601_4229)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M79.2219 102.163C157.357 22.2999 244.794 64.0886 265.258 122.593C280.958 167.477 268.628 223.726 234.634 265.968C231.904 264.191 229.34 261.998 226.624 259.676C220.696 254.606 214.046 248.919 203.367 245.6C173.77 236.402 136.99 244.712 151.184 271.904C142.962 303.525 147.228 325.432 160.734 339.191C165.023 343.561 170.429 345.89 175.722 347.526C175.47 348.217 175.219 348.906 174.97 349.592C164.506 378.364 155.961 401.86 113.639 397.47C21.708 387.935 1.08679 182.026 79.2219 102.163Z" fill="url(#paint0_linear_601_4229)"/>
|
||||
<path d="M314.418 269.573C296.73 262.1 281.568 259.818 264 266.693C231.671 279.345 231.399 254.312 203.367 245.6C173.77 236.402 136.99 244.712 151.184 271.904C142.962 303.525 147.228 325.432 160.734 339.191C166.728 345.298 174.902 347.418 181.901 349.233C190.672 351.508 197.597 353.304 196.071 361.869C192.021 384.596 168.278 378.99 160.236 398.576C152.406 417.646 157.084 467.798 157.084 467.798L284.039 467.661C284.417 396.137 266.28 416.95 232.617 382.978C220.177 370.424 226.332 343.294 229.419 329.457C229.419 329.457 237.98 337.832 260.523 337.133C283.065 336.433 301.464 359.694 301.464 359.694L301.646 339.498C301.646 339.498 292.049 327.312 273.544 323.03C255.039 318.749 248.411 325.346 234.689 309.881C250.52 313.396 259.056 312.821 266.859 312.295C277.152 311.601 293.037 311.062 300.246 319.825L308.201 303.411C295.574 293.295 282.118 292.859 270.056 294.159C257.995 295.458 243.766 296.572 237.652 290.318C265.042 290.04 266.727 282.761 282.092 280.889C290.934 280.01 302.017 282.633 310.16 285.633L314.418 269.573Z" fill="url(#paint1_linear_601_4229)" fill-opacity="0.95"/>
|
||||
<path d="M314.418 269.573C296.73 262.1 281.568 259.818 264 266.693C231.671 279.345 231.399 254.312 203.367 245.6C173.77 236.402 136.99 244.712 151.184 271.904C142.962 303.525 147.228 325.432 160.734 339.191C166.728 345.298 174.902 347.418 181.901 349.233C190.672 351.508 197.597 353.304 196.071 361.869C192.021 384.596 168.278 378.99 160.236 398.576C152.406 417.646 157.084 467.798 157.084 467.798L284.039 467.661C284.417 396.137 266.28 416.95 232.617 382.978C220.177 370.424 226.332 343.294 229.419 329.457C229.419 329.457 237.98 337.832 260.523 337.133C283.065 336.433 301.464 359.694 301.464 359.694L301.646 339.498C301.646 339.498 292.049 327.312 273.544 323.03C255.039 318.749 248.411 325.346 234.689 309.881C250.52 313.396 259.056 312.821 266.859 312.295C277.152 311.601 293.037 311.062 300.246 319.825L308.201 303.411C295.574 293.295 282.118 292.859 270.056 294.159C257.995 295.458 243.766 296.572 237.652 290.318C265.042 290.04 266.727 282.761 282.092 280.889C290.934 280.01 302.017 282.633 310.16 285.633L314.418 269.573Z" fill="url(#paint2_linear_601_4229)" fill-opacity="0.95"/>
|
||||
<path d="M190.515 288.997C186.93 291.61 181.905 290.813 179.292 287.218C176.679 283.623 177.467 278.59 181.052 275.977C184.637 273.364 189.661 274.16 192.274 277.756C194.888 281.351 194.1 286.384 190.515 288.997Z" stroke="#151035" stroke-width="6"/>
|
||||
<path d="M175.619 200.255C176.089 204.62 175.607 208.435 174.173 211.699C172.791 214.946 170.677 217.683 167.829 219.911C164.964 222.086 161.551 223.864 157.59 225.245C152.17 227.134 147.114 227.721 142.421 227.003C137.781 226.268 133.698 224.28 130.172 221.039C126.698 217.78 123.973 213.318 121.998 207.654C120.024 201.989 119.384 196.801 120.079 192.088C120.826 187.357 122.789 183.262 125.966 179.801C129.196 176.322 133.52 173.638 138.941 171.749C142.745 170.423 146.481 169.738 150.148 169.695C153.797 169.599 157.145 170.314 160.19 171.841C163.288 173.349 165.85 175.838 167.878 179.307L154.382 190.894C152.777 187.63 151.149 185.727 149.499 185.185C147.901 184.625 146.137 184.68 144.209 185.353C142.437 185.97 141.09 186.969 140.169 188.349C139.281 189.659 138.862 191.393 138.913 193.551C138.998 195.639 139.562 198.178 140.604 201.168C141.628 204.105 142.739 206.453 143.936 208.211C145.186 209.952 146.601 211.076 148.181 211.584C149.743 212.04 151.566 211.904 153.65 211.178C155.527 210.524 156.872 209.437 157.687 207.918C158.483 206.346 158.608 204.273 158.061 201.699L175.619 200.255Z" fill="url(#paint3_linear_601_4229)"/>
|
||||
<path d="M78.8776 200.592L103.533 201.884L102.794 215.984L58.9258 213.685L61.778 159.263L80.9908 160.269L78.8776 200.592Z" fill="url(#paint4_linear_601_4229)"/>
|
||||
<path d="M210.611 181.461C216.383 181.159 221.389 181.999 225.627 183.982C229.865 185.964 233.193 188.987 235.611 193.05C238.029 197.113 239.393 202.112 239.704 208.049C240.015 213.986 239.181 219.101 237.201 223.395C235.221 227.688 232.227 231.042 228.22 233.457C224.212 235.872 219.322 237.23 213.55 237.533C207.833 237.833 202.828 236.992 198.535 235.012C194.296 233.03 190.941 230.008 188.468 225.949C186.05 221.886 184.686 216.886 184.375 210.949C184.063 205.012 184.898 199.897 186.878 195.604C188.913 191.308 191.934 187.952 195.942 185.537C200.004 183.12 204.894 181.761 210.611 181.461ZM211.368 195.891C209.499 195.989 207.985 196.565 206.828 197.618C205.722 198.613 204.919 200.116 204.418 202.126C203.972 204.134 203.833 206.732 204 209.921C204.164 213.054 204.574 215.623 205.23 217.628C205.939 219.576 206.896 221.014 208.102 221.943C209.361 222.814 210.925 223.201 212.794 223.103C214.663 223.005 216.15 222.458 217.255 221.463C218.413 220.41 219.215 218.88 219.661 216.872C220.104 214.809 220.243 212.211 220.079 209.078C219.912 205.89 219.502 203.32 218.848 201.37C218.195 199.42 217.239 198.009 215.981 197.138C214.774 196.209 213.237 195.793 211.368 195.891Z" fill="#151035"/>
|
||||
<path d="M137.464 247.376L130.317 301.403L113.7 299.205L116.18 280.459L118.829 262.319L118.584 262.286L103.222 297.819L87.9966 295.805L82.5658 257.522L82.2384 257.479L80.0801 275.684L77.6005 294.429L60.9014 292.221L68.0479 238.194L94.7338 241.724L97.7824 266.531L98.8245 276.914L98.9882 276.936L102.694 267.181L112.088 244.019L137.464 247.376Z" fill="#151035"/>
|
||||
<path d="M100.875 374.634L87.6904 321.756L131.596 310.809L135.011 324.509L109.774 330.802L111.412 337.372L131.762 332.298L134.918 344.956L114.568 350.03L116.126 356.28L142.325 349.748L145.741 363.448L100.875 374.634Z" fill="url(#paint5_linear_601_4229)"/>
|
||||
<path d="M178.019 156.267L197.219 105.263L239.567 121.205L234.592 134.419L210.25 125.256L207.865 131.593L227.493 138.982L222.897 151.191L203.268 143.803L200.999 149.83L226.269 159.343L221.295 172.557L178.019 156.267Z" fill="url(#paint6_linear_601_4229)"/>
|
||||
<path d="M108.573 166.095L80.9019 116.672L101.061 111.86L116.39 148.694L114.715 108.601L130.778 104.767L147.735 140.958L144.672 101.451L164.109 96.8115L161.662 153.424L141.824 158.159L132.893 139.237L127.565 126.162L127.324 126.22L128.476 140.292L129.134 161.188L108.573 166.095Z" fill="#151035"/>
|
||||
<path d="M166.568 317.872C171.516 323.806 185.002 330.423 198.931 320.282C212.861 310.141 208.949 296.553 205.306 289.669" stroke="#151035" stroke-width="6"/>
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_601_4229" x1="272" y1="398" x2="319.653" y2="104.935" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="1" stop-color="white"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_601_4229" x1="147" y1="467.798" x2="363.058" y2="307.602" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FF8CF4" stop-opacity="0.9"/>
|
||||
<stop offset="1" stop-color="#FFA9DE"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear_601_4229" x1="147" y1="467.798" x2="363.058" y2="307.602" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FF8CF4" stop-opacity="0.9"/>
|
||||
<stop offset="1" stop-color="#FFA9DE"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint3_linear_601_4229" x1="131.323" y1="234.402" x2="167.273" y2="165.789" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FF8CF4" stop-opacity="0.9"/>
|
||||
<stop offset="1" stop-color="#FFA9DE"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint4_linear_601_4229" x1="102.794" y1="215.984" x2="112.013" y2="169.152" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#00D1B8" stop-opacity="0.9"/>
|
||||
<stop offset="1" stop-color="#25CBD9"/>
|
||||
<stop offset="1" stop-color="#25CBD9"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint5_linear_601_4229" x1="145.741" y1="363.448" x2="140.528" y2="315.956" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#00D1B8" stop-opacity="0.9"/>
|
||||
<stop offset="1" stop-color="#25CBD9"/>
|
||||
<stop offset="1" stop-color="#25CBD9"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint6_linear_601_4229" x1="221.295" y1="172.557" x2="243.992" y2="130.516" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#00D1B8" stop-opacity="0.9"/>
|
||||
<stop offset="1" stop-color="#25CBD9"/>
|
||||
<stop offset="1" stop-color="#25CBD9"/>
|
||||
</linearGradient>
|
||||
<clipPath id="clip0_601_4229">
|
||||
<rect width="298" height="465" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After 
(image error) Size: 8.6 KiB |
|
|
@ -39,7 +39,7 @@
|
|||
@include buttonStyle;
|
||||
@include flexCenter;
|
||||
@include focusPrimary;
|
||||
@include tabTitleTipography;
|
||||
@include uppercaseTitleTipography;
|
||||
background-color: var(--button-primary-background-color-rest);
|
||||
border: $s-1 solid var(--button-primary-border-color-rest);
|
||||
color: var(--button-primary-foreground-color-rest);
|
||||
|
|
@ -276,7 +276,7 @@
|
|||
// INPUTS
|
||||
.input-base {
|
||||
@include removeInputStyle;
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
@include textEllipsis;
|
||||
// @include focusInput;
|
||||
height: $s-28;
|
||||
|
|
@ -302,7 +302,7 @@
|
|||
}
|
||||
|
||||
.input-label {
|
||||
@include tabTitleTipography;
|
||||
@include uppercaseTitleTipography;
|
||||
@include flexCenter;
|
||||
width: $s-20;
|
||||
padding-left: $s-8;
|
||||
|
|
@ -311,7 +311,7 @@
|
|||
}
|
||||
|
||||
.input-element {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
@include focusInput;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -381,7 +381,7 @@
|
|||
}
|
||||
|
||||
.input-element-label {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: 0;
|
||||
|
|
@ -486,7 +486,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
label {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $s-6;
|
||||
|
|
@ -517,7 +517,7 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
label {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
|
|
@ -527,7 +527,7 @@
|
|||
|
||||
input {
|
||||
@extend .input-base;
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
border-radius: $br-8;
|
||||
height: $s-32;
|
||||
min-height: $s-32;
|
||||
|
|
@ -604,7 +604,7 @@
|
|||
}
|
||||
|
||||
.modal-hint-base {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
border-top: $s-1 solid var(--modal-hint-border-color);
|
||||
border-bottom: $s-1 solid var(--modal-hint-border-color);
|
||||
|
|
@ -618,7 +618,7 @@
|
|||
|
||||
.modal-cancel-btn {
|
||||
@extend .button-secondary;
|
||||
@include tabTitleTipography;
|
||||
@include uppercaseTitleTipography;
|
||||
padding: $s-8 $s-24;
|
||||
border-radius: $br-8;
|
||||
height: $s-32;
|
||||
|
|
@ -627,7 +627,7 @@
|
|||
|
||||
.modal-accept-btn {
|
||||
@extend .button-primary;
|
||||
@include tabTitleTipography;
|
||||
@include uppercaseTitleTipography;
|
||||
padding: $s-8 $s-24;
|
||||
border-radius: $br-8;
|
||||
height: $s-32;
|
||||
|
|
@ -636,7 +636,7 @@
|
|||
|
||||
.modal-danger-btn {
|
||||
@extend .button-primary;
|
||||
@include tabTitleTipography;
|
||||
@include uppercaseTitleTipography;
|
||||
padding: $s-8 $s-24;
|
||||
border-radius: $br-8;
|
||||
height: $s-32;
|
||||
|
|
@ -664,7 +664,7 @@
|
|||
}
|
||||
// UI ELEMENTS
|
||||
.asset-element {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: $s-32;
|
||||
|
|
@ -685,7 +685,7 @@
|
|||
}
|
||||
|
||||
.shortcut-key-base {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
@include flexCenter;
|
||||
height: $s-20;
|
||||
padding: $s-2 $s-6;
|
||||
|
|
@ -695,7 +695,7 @@
|
|||
|
||||
.user-icon {
|
||||
@include flexCenter;
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
height: $s-24;
|
||||
width: $s-24;
|
||||
border-radius: $br-circle;
|
||||
|
|
@ -707,7 +707,7 @@
|
|||
}
|
||||
|
||||
.mixed-bar {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
|
|
@ -783,7 +783,7 @@
|
|||
gap: $s-4;
|
||||
height: $s-32;
|
||||
:global(.attr-label) {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
@include twoLineTextEllipsis;
|
||||
width: $s-92;
|
||||
margin: auto 0;
|
||||
|
|
@ -795,12 +795,12 @@
|
|||
grid-area: content;
|
||||
display: flex;
|
||||
color: var(--entry-foreground-color-hover);
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
}
|
||||
}
|
||||
|
||||
.copy-button-children {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
color: var(--color-foreground-primary);
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
|
|
@ -814,7 +814,7 @@
|
|||
}
|
||||
|
||||
.comment-bubbles {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
@include flexCenter;
|
||||
height: $s-32;
|
||||
width: $s-32;
|
||||
|
|
@ -849,7 +849,7 @@
|
|||
}
|
||||
|
||||
.menu-item-base {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
|
@ -864,7 +864,7 @@
|
|||
}
|
||||
|
||||
.dropdown-element-base {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $s-8;
|
||||
|
|
@ -911,7 +911,7 @@
|
|||
}
|
||||
|
||||
.select-wrapper {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
// DARK
|
||||
// Dark background
|
||||
--db-primary: #18181a;
|
||||
--db-primary-60: #{color.change(#18181a, $alpha: 0.6)};
|
||||
--db-secondary: #000000;
|
||||
--db-secondary-30: #{color.change(#000000, $alpha: 0.3)};
|
||||
--db-secondary-80: #{color.change(#000000, $alpha: 0.8)};
|
||||
|
|
@ -33,6 +34,7 @@
|
|||
// LIGHT
|
||||
// Light background
|
||||
--lb-primary: #ffffff;
|
||||
--lb-primary-60: #{color.change(#ffffff, $alpha: 0.6)};
|
||||
--lb-secondary: #e8eaee;
|
||||
--lb-secondary-30: #{color.change(#e8eaee, $alpha: 0.3)};
|
||||
--lb-secondary-80: #{color.change(#e8eaee, $alpha: 0.8)};
|
||||
|
|
|
|||
|
|
@ -308,6 +308,7 @@
|
|||
--modal-button-foreground-color-error: var(--color-foreground-primary);
|
||||
--modal-link-foreground-color: var(--color-accent-primary);
|
||||
--modal-border-color: var(--color-background-quaternary);
|
||||
--modal-separator-backogrund-color: var(--color-background-quaternary);
|
||||
|
||||
// ALERTS NOTIFICATION TOAST & STATUS WIDGET
|
||||
--alert-background-color-success: var(--status-color-success-500);
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ $fs-12: math.div(12, $fs-base) + rem;
|
|||
$fs-14: math.div(14, $fs-base) + rem;
|
||||
$fs-16: math.div(16, $fs-base) + rem;
|
||||
$fs-18: math.div(18, $fs-base) + rem;
|
||||
$fs-20: math.div(20, $fs-base) + rem;
|
||||
$fs-24: math.div(24, $fs-base) + rem;
|
||||
$fs-36: math.div(36, $fs-base) + rem;
|
||||
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
outline: none;
|
||||
}
|
||||
|
||||
@mixin tabTitleTipography {
|
||||
@mixin uppercaseTitleTipography {
|
||||
font-family: "worksans", sans-serif;
|
||||
font-size: $fs-11;
|
||||
font-weight: $fw500;
|
||||
|
|
@ -42,20 +42,6 @@
|
|||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
@mixin titleTipography {
|
||||
font-family: "worksans", sans-serif;
|
||||
font-size: $fs-12;
|
||||
font-weight: $fw400;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
@mixin medTitleTipography {
|
||||
font-family: "worksans", sans-serif;
|
||||
font-size: $fs-14;
|
||||
font-weight: $fw400;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
@mixin bigTitleTipography {
|
||||
font-family: "worksans", sans-serif;
|
||||
font-size: $fs-24;
|
||||
|
|
@ -63,9 +49,16 @@
|
|||
line-height: 1.2;
|
||||
}
|
||||
|
||||
@mixin codeTypography {
|
||||
font-family: "robotomono", monospace;
|
||||
font-size: $fs-12;
|
||||
@mixin medTitleTipography {
|
||||
font-family: "worksans", sans-serif;
|
||||
font-size: $fs-20;
|
||||
font-weight: $fw400;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
@mixin smallTitleTipography {
|
||||
font-family: "worksans", sans-serif;
|
||||
font-size: $fs-14;
|
||||
font-weight: $fw400;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
|
@ -85,6 +78,20 @@
|
|||
font-weight: normal;
|
||||
}
|
||||
|
||||
@mixin bodyMedTipography {
|
||||
font-family: "worksans", sans-serif;
|
||||
font-size: $fs-12;
|
||||
font-weight: $fw400;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
@mixin codeTypography {
|
||||
font-family: "robotomono", monospace;
|
||||
font-size: $fs-12;
|
||||
font-weight: $fw400;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
@mixin textEllipsis {
|
||||
max-width: 99%;
|
||||
overflow: hidden;
|
||||
|
|
@ -103,7 +110,7 @@
|
|||
}
|
||||
|
||||
@mixin inspectValue {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
display: inline-block;
|
||||
width: fit-content;
|
||||
padding: 0;
|
||||
|
|
|
|||
|
|
@ -141,12 +141,21 @@ $s-496: #{0.25 * 124}rem;
|
|||
$s-500: #{0.25 * 125}rem;
|
||||
$s-512: #{0.25 * 128}rem;
|
||||
$s-520: #{0.25 * 130}rem;
|
||||
$s-536: #{0.25 * 134}rem;
|
||||
$s-540: #{0.25 * 135}rem;
|
||||
$s-548: #{0.25 * 137}rem;
|
||||
$s-580: #{0.25 * 145}rem;
|
||||
$s-612: #{0.25 * 153}rem;
|
||||
$s-632: #{0.25 * 158}rem;
|
||||
$s-640: #{0.25 * 160}rem;
|
||||
$s-648: #{0.25 * 162}rem;
|
||||
$s-664: #{0.25 * 166}rem;
|
||||
$s-688: #{0.25 * 172}rem;
|
||||
$s-712: #{0.25 * 178}rem;
|
||||
$s-736: #{0.25 * 184}rem;
|
||||
$s-744: #{0.25 * 186}rem;
|
||||
$s-800: #{0.25 * 200}rem;
|
||||
$s-908: #{0.25 * 227}rem;
|
||||
$s-960: #{0.25 * 240}rem;
|
||||
$s-968: #{0.25 * 242}rem;
|
||||
$s-1000: #{0.25 * 250}rem;
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
--color-accent-quaternary: var(--da-quaternary);
|
||||
--color-component-highlight: var(--da-secondary);
|
||||
|
||||
--overlay-color: rgba(0, 0, 0, 0.4);
|
||||
--overlay-color: var(--db-primary-60);
|
||||
|
||||
--shadow-color: var(--db-secondary-30);
|
||||
--radio-button-box-shadow: 0 0 0 1px var(--db-secondary-30) inset;
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
--color-accent-quaternary: var(--la-quaternary);
|
||||
--color-component-highlight: var(--la-secondary);
|
||||
|
||||
--overlay-color: var(--lf-secondary-50);
|
||||
--overlay-color: var(--lb-primary-60);
|
||||
--shadow-color: var(--lf-secondary-40);
|
||||
--radio-button-box-shadow: 0 0 0 1px var(--lb-secondary) inset;
|
||||
|
||||
|
|
|
|||
|
|
@ -16,7 +16,6 @@
|
|||
[app.main.ui.icons :as i]
|
||||
[app.main.ui.messages :as msgs]
|
||||
[app.main.ui.onboarding :refer [onboarding-modal]]
|
||||
[app.main.ui.onboarding.questions :refer [questions-modal]]
|
||||
[app.main.ui.releases :refer [release-notes-modal]]
|
||||
[app.main.ui.static :as static]
|
||||
[app.util.dom :as dom]
|
||||
|
|
@ -98,11 +97,6 @@
|
|||
#_[:& app.main.ui.onboarding.team-choice/onboarding-team-modal]
|
||||
(when-let [props (get profile :props)]
|
||||
(cond
|
||||
(and (contains? cf/flags :onboarding-questions)
|
||||
(not (:onboarding-questions-answered props false))
|
||||
(not (:onboarding-viewed props false)))
|
||||
[:& questions-modal]
|
||||
|
||||
(and (not (:onboarding-viewed props))
|
||||
(contains? cf/flags :onboarding))
|
||||
[:& onboarding-modal {}]
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
}
|
||||
|
||||
.section-title {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
height: $s-32;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
|
||||
// Comment-thread
|
||||
.comment {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $s-12;
|
||||
|
|
@ -98,7 +98,7 @@
|
|||
}
|
||||
|
||||
.content {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
color: var(--color-foreground-primary);
|
||||
}
|
||||
|
||||
|
|
@ -151,7 +151,7 @@
|
|||
.comment-container {
|
||||
position: relative;
|
||||
.comment {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
.author {
|
||||
display: flex;
|
||||
gap: $s-8;
|
||||
|
|
@ -195,7 +195,7 @@
|
|||
.content {
|
||||
position: relative;
|
||||
.text {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@
|
|||
|
||||
.color-text {
|
||||
@include twoLineTextEllipsis;
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
width: $s-80;
|
||||
text-align: center;
|
||||
margin-top: $s-2;
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@
|
|||
.context-menu-item {
|
||||
display: flex;
|
||||
.context-menu-action {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
.editable-label-input {
|
||||
@include textEllipsis;
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
@include removeInputStyle;
|
||||
flex-grow: 1;
|
||||
height: $s-28;
|
||||
|
|
|
|||
|
|
@ -214,7 +214,7 @@
|
|||
[:span {:class (stl/css :hint)} hint])]))
|
||||
|
||||
(mf/defc select
|
||||
[{:keys [options disabled form default] :as props
|
||||
[{:keys [options disabled form default dropdown-class] :as props
|
||||
:or {default ""}}]
|
||||
(let [input-name (get props :name)
|
||||
form (or form (mf/use-ctx form-ctx))
|
||||
|
|
@ -230,6 +230,7 @@
|
|||
{:default-value value
|
||||
:disabled disabled
|
||||
:options options
|
||||
:dropdown-class dropdown-class
|
||||
:on-change handle-change}]]))
|
||||
|
||||
(mf/defc radio-buttons
|
||||
|
|
@ -244,6 +245,7 @@
|
|||
on-change (unchecked-get props "on-change")
|
||||
options (unchecked-get props "options")
|
||||
trim? (unchecked-get props "trim")
|
||||
class (unchecked-get props "class")
|
||||
encode-fn (d/nilv (unchecked-get props "encode-fn") identity)
|
||||
decode-fn (d/nilv (unchecked-get props "decode-fn") identity)
|
||||
|
||||
|
|
@ -258,31 +260,39 @@
|
|||
|
||||
(when (fn? on-change)
|
||||
(on-change name value)))))]
|
||||
[:div {:class (stl/css :custom-radio)}
|
||||
(for [{:keys [image value label]} options]
|
||||
[:div {:class (dm/str class " " (stl/css :custom-radio))}
|
||||
(for [{:keys [image icon value label area]} options]
|
||||
(let [image? (some? image)
|
||||
icon? (some? icon)
|
||||
value' (encode-fn value)
|
||||
checked? (= value current-value)
|
||||
key (str/ffmt "%-%" (d/name name) (d/name value'))]
|
||||
[:label {:for key
|
||||
:key key
|
||||
:style {:background-image (when image? (str/ffmt "url(%)" image))}
|
||||
:style {:grid-area area}
|
||||
:class (stl/css-case :radio-label true
|
||||
:global/checked checked?
|
||||
:with-image image?)}
|
||||
:with-image (or image? icon?))}
|
||||
(cond
|
||||
image?
|
||||
[:span {:style {:background-image (str/ffmt "url(%)" image)}
|
||||
:class (stl/css :image-inside)}]
|
||||
icon?
|
||||
[:span {:class (stl/css :icon-inside)} icon]
|
||||
|
||||
:else
|
||||
[:span {:class (stl/css-case :radio-icon true
|
||||
:global/checked checked?)}
|
||||
(when checked? [:span {:class (stl/css :radio-dot)}])])
|
||||
|
||||
label
|
||||
[:input {:on-change on-change'
|
||||
:type "radio"
|
||||
:class (stl/css :radio-input)
|
||||
:id key
|
||||
:name name
|
||||
:value value'
|
||||
:checked checked?}]
|
||||
(when (not image?)
|
||||
[:span {:class (stl/css-case :radio-icon true
|
||||
:global/checked checked?)}
|
||||
(when checked? [:span {:class (stl/css :radio-dot)}])])
|
||||
|
||||
label]))]))
|
||||
:checked checked?}]]))]))
|
||||
|
||||
(mf/defc submit-button*
|
||||
{::mf/wrap-props false}
|
||||
|
|
|
|||
|
|
@ -12,46 +12,6 @@
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
.input-with-label {
|
||||
@include flexColumn;
|
||||
gap: $s-8;
|
||||
@include titleTipography;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
color: var(--modal-title-foreground-color);
|
||||
text-transform: uppercase;
|
||||
margin-bottom: $s-8;
|
||||
input {
|
||||
@extend .input-element;
|
||||
color: var(--input-foreground-color-active);
|
||||
margin-top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 $s-16;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border: $s-1 solid var(--input-border-color-focus);
|
||||
border-radius: $br-8;
|
||||
}
|
||||
}
|
||||
// Input autofill
|
||||
input:-webkit-autofill,
|
||||
input:-webkit-autofill:hover,
|
||||
input:-webkit-autofill:focus,
|
||||
input:-webkit-autofill:active {
|
||||
-webkit-text-fill-color: var(--input-foreground-color-active);
|
||||
-webkit-box-shadow: inset 0 0 20px 20px var(--input-background-color);
|
||||
border: $s-1 solid var(--input-border-color);
|
||||
-webkit-background-clip: text;
|
||||
transition: background-color 5000s ease-in-out 0s;
|
||||
caret-color: var(--input-foreground-color-active);
|
||||
}
|
||||
}
|
||||
&.valid {
|
||||
input {
|
||||
border: $s-1 solid var(--input-border-color-success);
|
||||
|
|
@ -78,11 +38,52 @@
|
|||
}
|
||||
}
|
||||
|
||||
.input-with-label {
|
||||
@include flexColumn;
|
||||
gap: $s-8;
|
||||
@include bodyMedTipography;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
color: var(--modal-title-foreground-color);
|
||||
text-transform: uppercase;
|
||||
margin-bottom: $s-8;
|
||||
input {
|
||||
@extend .input-element;
|
||||
color: var(--input-foreground-color-active);
|
||||
margin-top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 $s-8;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border: $s-1 solid var(--input-border-color-focus);
|
||||
border-radius: $br-8;
|
||||
}
|
||||
}
|
||||
// Input autofill
|
||||
input:-webkit-autofill,
|
||||
input:-webkit-autofill:hover,
|
||||
input:-webkit-autofill:focus,
|
||||
input:-webkit-autofill:active {
|
||||
-webkit-text-fill-color: var(--input-foreground-color-active);
|
||||
-webkit-box-shadow: inset 0 0 20px 20px var(--input-background-color);
|
||||
border: $s-1 solid var(--input-border-color);
|
||||
-webkit-background-clip: text;
|
||||
transition: background-color 5000s ease-in-out 0s;
|
||||
caret-color: var(--input-foreground-color-active);
|
||||
}
|
||||
}
|
||||
|
||||
.input-and-icon {
|
||||
position: relative;
|
||||
width: var(--input-width, calc(100% - $s-1));
|
||||
min-width: var(--input-min-width);
|
||||
height: var(--input-height, $s-40);
|
||||
height: var(--input-height, $s-32);
|
||||
}
|
||||
|
||||
.help-icon {
|
||||
|
|
@ -142,7 +143,7 @@
|
|||
}
|
||||
|
||||
.hint {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
color: var(--modal-text-foreground-color);
|
||||
width: 99%;
|
||||
}
|
||||
|
|
@ -150,7 +151,7 @@
|
|||
.checkbox {
|
||||
@extend .input-checkbox;
|
||||
.checkbox-label {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row-reverse;
|
||||
|
|
@ -185,7 +186,7 @@
|
|||
background-color: var(--input-background-color);
|
||||
.main-content {
|
||||
@include flexColumn;
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
flex-grow: 1;
|
||||
|
|
@ -230,7 +231,7 @@
|
|||
|
||||
select {
|
||||
@extend .menu-dropdown;
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
@ -246,7 +247,7 @@
|
|||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
option {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
color: var(--title-foreground-color-hover);
|
||||
background-color: var(--menu-background-color);
|
||||
appearance: none;
|
||||
|
|
@ -271,7 +272,7 @@
|
|||
overflow-y: hidden;
|
||||
.inside-input {
|
||||
@include removeInputStyle;
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
@include textEllipsis;
|
||||
width: 100%;
|
||||
max-width: calc(100% - $s-1);
|
||||
|
|
@ -281,6 +282,7 @@
|
|||
padding: $s-8;
|
||||
margin: 0;
|
||||
border-radius: $br-8;
|
||||
color: var(--input-foreground-color-active);
|
||||
background-color: var(--input-background-color);
|
||||
border: $s-1 solid var(--input-border-color-active);
|
||||
&:focus {
|
||||
|
|
@ -309,7 +311,7 @@
|
|||
border: $s-1 solid var(--pill-background-color);
|
||||
box-sizing: border-box;
|
||||
.text {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
padding-right: $s-8;
|
||||
color: var(--pill-foreground-color);
|
||||
}
|
||||
|
|
@ -342,15 +344,20 @@
|
|||
.custom-radio {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: $s-16;
|
||||
}
|
||||
|
||||
.radio-label {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
@include flexRow;
|
||||
align-items: flex-start;
|
||||
gap: $s-8;
|
||||
min-height: $s-32;
|
||||
height: fit-content;
|
||||
border-radius: $br-8;
|
||||
padding: $s-0 $s-2;
|
||||
padding: $s-8;
|
||||
color: var(--input-foreground-color);
|
||||
border: $s-1 solid transparent;
|
||||
&:focus,
|
||||
&:focus-within {
|
||||
outline: none;
|
||||
|
|
@ -376,18 +383,16 @@
|
|||
}
|
||||
|
||||
.radio-label.with-image {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: $s-120;
|
||||
width: $s-140;
|
||||
padding: $s-64 $s-4 0 $s-4;
|
||||
margin-top: $s-16;
|
||||
margin-right: 0;
|
||||
@include smallTitleTipography;
|
||||
display: grid;
|
||||
grid-template-rows: auto auto 0px;
|
||||
justify-items: center;
|
||||
gap: 0;
|
||||
height: $s-116;
|
||||
width: $s-92;
|
||||
border-radius: $br-8;
|
||||
margin: 0;
|
||||
border: 1px solid var(--color-background-tertiary);
|
||||
background-size: 50px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center 0.75rem;
|
||||
cursor: pointer;
|
||||
&:global(.checked) {
|
||||
border: 1px solid var(--color-accent-primary);
|
||||
|
|
@ -399,10 +404,28 @@
|
|||
}
|
||||
}
|
||||
|
||||
.image-inside {
|
||||
width: $s-60;
|
||||
height: $s-48;
|
||||
background-size: $s-48;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.icon-inside {
|
||||
width: $s-60;
|
||||
height: $s-48;
|
||||
svg {
|
||||
width: $s-60;
|
||||
height: $s-48;
|
||||
stroke: var(--icon-foreground);
|
||||
fill: none;
|
||||
}
|
||||
}
|
||||
//TEXTAREA
|
||||
|
||||
.textarea-label {
|
||||
@include tabTitleTipography;
|
||||
@include uppercaseTitleTipography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
text-transform: uppercase;
|
||||
margin-bottom: $s-8;
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
stroke: var(--radio-btn-foreground-color);
|
||||
}
|
||||
.title-name {
|
||||
@include tabTitleTipography;
|
||||
@include uppercaseTitleTipography;
|
||||
color: var(--radio-btn-foreground-color);
|
||||
}
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@
|
|||
[:span {:class (stl/css :dropdown-button)} i/arrow-refactor]
|
||||
[:& dropdown {:show is-open? :on-close close-dropdown}
|
||||
[:ul {:ref dropdown-element* :data-direction @dropdown-direction*
|
||||
:class (dm/str (stl/css :custom-select-dropdown) " " dropdown-class)}
|
||||
:class (dm/str dropdown-class " " (stl/css :custom-select-dropdown))}
|
||||
(for [[index item] (d/enumerate options)]
|
||||
(if (= :separator item)
|
||||
[:li {:class (dom/classnames (stl/css :separator) true)
|
||||
|
|
@ -116,9 +116,10 @@
|
|||
icon-ref (i/key->icon icon)]
|
||||
[:li
|
||||
{:key (dm/str current-id "-" index)
|
||||
:class (dom/classnames
|
||||
(stl/css :checked-element) true
|
||||
(stl/css :is-selected) (= value current-value))
|
||||
:class (stl/css-case
|
||||
:checked-element true
|
||||
:disabled (:disabled item)
|
||||
:is-selected (= value current-value))
|
||||
:data-value (pr-str value)
|
||||
:on-pointer-enter highlight-item
|
||||
:on-pointer-leave unhighlight-item
|
||||
|
|
|
|||
|
|
@ -7,7 +7,12 @@
|
|||
@import "refactor/common-refactor.scss";
|
||||
|
||||
.custom-select {
|
||||
@include titleTipography;
|
||||
--border-color: var(--menu-background-color);
|
||||
--bg-color: var(--menu-background-color);
|
||||
--icon-color: var(--icon-foreground);
|
||||
--text-color: var(--menu-foreground-color);
|
||||
@extend .new-scrollbar;
|
||||
@include bodyMedTipography;
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
|
|
@ -17,104 +22,105 @@
|
|||
margin: 0;
|
||||
padding: $s-8;
|
||||
border-radius: $br-8;
|
||||
background-color: var(--menu-background-color);
|
||||
border: $s-1 solid var(--menu-background-color);
|
||||
color: var(--menu-foreground-color);
|
||||
background-color: var(--bg-color);
|
||||
border: $s-1 solid var(--border-color);
|
||||
color: var(--text-color);
|
||||
cursor: pointer;
|
||||
|
||||
&.icon {
|
||||
grid-template-columns: auto 1fr auto;
|
||||
}
|
||||
|
||||
.current-icon {
|
||||
&:hover {
|
||||
--bg-color: var(--menu-background-color-hover);
|
||||
--border-color: var(--menu-background-color);
|
||||
--icon-color: var(--menu-foreground-color-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
--bg-color: var(--menu-background-color-focus);
|
||||
--border-color: var(--menu-background-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.disabled {
|
||||
--bg-color: var(--menu-background-color-disabled);
|
||||
--border-color: var(--menu-border-color-disabled);
|
||||
--icon-color: var(--menu-foreground-color-disabled);
|
||||
--text-color: var(--menu-foreground-color-disabled);
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.dropdown-button {
|
||||
@include flexCenter;
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
transform: rotate(90deg);
|
||||
stroke: var(--icon-color);
|
||||
}
|
||||
}
|
||||
|
||||
.current-icon {
|
||||
@include flexCenter;
|
||||
width: $s-24;
|
||||
padding-right: $s-4;
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.custom-select-dropdown {
|
||||
@extend .dropdown-wrapper;
|
||||
.separator {
|
||||
margin: 0;
|
||||
height: $s-12;
|
||||
border-block-start: $s-1 solid var(--dropdown-separator-color);
|
||||
}
|
||||
}
|
||||
|
||||
.custom-select-dropdown[data-direction="up"] {
|
||||
bottom: $s-32;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
.checked-element {
|
||||
@extend .dropdown-element-base;
|
||||
.icon {
|
||||
@include flexCenter;
|
||||
height: $s-24;
|
||||
width: $s-24;
|
||||
padding-right: $s-4;
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
@extend .button-icon;
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
}
|
||||
.dropdown-button {
|
||||
|
||||
.label {
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.check-icon {
|
||||
@include flexCenter;
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
transform: rotate(90deg);
|
||||
visibility: hidden;
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
}
|
||||
.custom-select-dropdown {
|
||||
@extend .dropdown-wrapper;
|
||||
.separator {
|
||||
margin: 0;
|
||||
height: $s-12;
|
||||
border-top: $s-1 solid var(--dropdown-separator-color);
|
||||
}
|
||||
}
|
||||
|
||||
.custom-select-dropdown[data-direction="up"] {
|
||||
bottom: $s-32;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
.checked-element {
|
||||
@extend .dropdown-element-base;
|
||||
.icon {
|
||||
@include flexCenter;
|
||||
height: $s-24;
|
||||
width: $s-24;
|
||||
padding-right: $s-4;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
&.is-selected {
|
||||
color: var(--menu-foreground-color);
|
||||
.check-icon svg {
|
||||
stroke: var(--menu-foreground-color);
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.label {
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.check-icon {
|
||||
@include flexCenter;
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
visibility: hidden;
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-selected {
|
||||
color: var(--menu-foreground-color);
|
||||
.check-icon svg {
|
||||
stroke: var(--menu-foreground-color);
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--menu-background-color-hover);
|
||||
border: $s-1 solid var(--menu-background-color-hover);
|
||||
.dropdown-button {
|
||||
svg {
|
||||
stroke: var(--menu-foreground-color-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
&:focus {
|
||||
background-color: var(--menu-background-color-focus);
|
||||
border: $s-1 solid var(--menu-border-color-focus);
|
||||
}
|
||||
&.disabled {
|
||||
background-color: var(--menu-background-color-disabled);
|
||||
color: var(--menu-foreground-color-disabled);
|
||||
border: $s-1 solid var(--menu-border-color-disabled);
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
.dropdown-button svg {
|
||||
stroke: var(--menu-foreground-color-disabled);
|
||||
}
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
width: 100%;
|
||||
.tab-container-tab-title {
|
||||
@include flexCenter;
|
||||
@include tabTitleTipography;
|
||||
@include uppercaseTitleTipography;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 0 $s-8;
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
.title,
|
||||
.title-only,
|
||||
.inspect-title {
|
||||
@include tabTitleTipography;
|
||||
@include uppercaseTitleTipography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
|
|
@ -119,7 +119,7 @@
|
|||
|
||||
.title,
|
||||
.title-only {
|
||||
@include tabTitleTipography;
|
||||
@include uppercaseTitleTipography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
}
|
||||
|
||||
.modal-title {
|
||||
@include tabTitleTipography;
|
||||
@include uppercaseTitleTipography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
}
|
||||
|
||||
.modal-content {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
margin-bottom: $s-24;
|
||||
}
|
||||
|
||||
|
|
|
|||
10
frontend/src/app/main/ui/dashboard/import.scss
vendored
10
frontend/src/app/main/ui/dashboard/import.scss
vendored
|
|
@ -19,7 +19,7 @@
|
|||
}
|
||||
|
||||
.modal-title {
|
||||
@include tabTitleTipography;
|
||||
@include uppercaseTitleTipography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
}
|
||||
|
||||
.modal-content {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
margin-bottom: $s-24;
|
||||
}
|
||||
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
}
|
||||
}
|
||||
.message {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
}
|
||||
&.warning {
|
||||
background-color: var(--alert-background-color-warning);
|
||||
|
|
@ -79,7 +79,7 @@
|
|||
.modal-scd-msg,
|
||||
.modal-subtitle,
|
||||
.modal-msg {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
color: var(--modal-text-foreground-color);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
|
@ -105,7 +105,7 @@
|
|||
flex-grow: 1;
|
||||
}
|
||||
.file-name-label {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $s-12;
|
||||
|
|
|
|||
|
|
@ -612,7 +612,7 @@
|
|||
}
|
||||
}
|
||||
.message {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
color: var(--alert-foreground-color-error);
|
||||
}
|
||||
}
|
||||
|
|
@ -636,7 +636,7 @@
|
|||
}
|
||||
}
|
||||
.message {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
color: var(--alert-foreground-color-warning);
|
||||
}
|
||||
}
|
||||
|
|
@ -683,7 +683,7 @@
|
|||
}
|
||||
|
||||
.modal-title {
|
||||
@include tabTitleTipography;
|
||||
@include uppercaseTitleTipography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
|
|
@ -694,7 +694,7 @@
|
|||
.modal-content {
|
||||
@include flexColumn;
|
||||
gap: $s-24;
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
margin-bottom: $s-24;
|
||||
}
|
||||
|
||||
|
|
@ -703,7 +703,7 @@
|
|||
}
|
||||
|
||||
.select-title {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
}
|
||||
|
||||
.modal-title {
|
||||
@include tabTitleTipography;
|
||||
@include uppercaseTitleTipography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
@extend .input-element-label;
|
||||
label {
|
||||
@include flexColumn;
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
border: none;
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
height: 100%;
|
||||
|
||||
input {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
margin-top: $s-8;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@
|
|||
flex-direction: column;
|
||||
border-radius: $s-8;
|
||||
h3 {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
font-size: $fs-24;
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -65,7 +65,7 @@
|
|||
max-height: $s-80;
|
||||
margin-bottom: $s-16;
|
||||
.component-name {
|
||||
@include tabTitleTipography;
|
||||
@include uppercaseTitleTipography;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
}
|
||||
|
||||
.modal-content {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
margin-bottom: $s-24;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@
|
|||
}
|
||||
.retry-btn {
|
||||
@extend .button-tertiary;
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
}
|
||||
|
||||
.modal-close-button {
|
||||
|
|
@ -96,10 +96,10 @@
|
|||
|
||||
.modal-content,
|
||||
.no-selection {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
margin-bottom: $s-24;
|
||||
.modal-hint {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
color: var(--modal-text-foreground-color);
|
||||
}
|
||||
.modal-link {
|
||||
|
|
@ -243,7 +243,6 @@
|
|||
label {
|
||||
align-items: flex-start;
|
||||
.modal-subtitle {
|
||||
// @include tabTitleTipography;
|
||||
@include bodyLargeTypography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -102,12 +102,12 @@
|
|||
}
|
||||
|
||||
.text {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.link {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
color: var(--modal-link-foreground-color);
|
||||
margin: 0;
|
||||
}
|
||||
|
|
@ -119,7 +119,7 @@
|
|||
|
||||
.action-btn {
|
||||
@extend .button-tertiary;
|
||||
@include tabTitleTipography;
|
||||
@include uppercaseTitleTipography;
|
||||
min-height: $s-32;
|
||||
min-width: $s-32;
|
||||
svg {
|
||||
|
|
|
|||
|
|
@ -38,48 +38,39 @@
|
|||
(next))]
|
||||
[:div {:class (stl/css :modal-container)}
|
||||
[:div {:class (stl/css :modal-left)}
|
||||
[:img {:src "images/onboarding-welcome.png"
|
||||
[:img {:src "images/welcomeilustration.svg"
|
||||
:border "0"
|
||||
:alt (tr "onboarding.welcome.alt")}]]
|
||||
[:div {:class (stl/css :modal-right)}
|
||||
[:div {:class (stl/css :release)}
|
||||
"Version " (:main cf/version)]
|
||||
[:div {:class (stl/css :modal-content)}
|
||||
[:div {:class (stl/css :modal-header)}
|
||||
[:h2 {:class (stl/css :modal-title)
|
||||
:data-test "onboarding-welcome"}
|
||||
(tr "onboarding-v2.welcome.title")]]
|
||||
[:h1 {:class (stl/css :modal-title)
|
||||
:data-test "onboarding-welcome"}
|
||||
(tr "onboarding-v2.welcome.title")]
|
||||
[:p {:class (stl/css :modal-text)}
|
||||
(tr "onboarding-v2.welcome.desc1")]
|
||||
|
||||
[:div {:class (stl/css :modal-info)}
|
||||
[:p {:class (stl/css :modal-text)}
|
||||
(tr "onboarding-v2.welcome.desc1")]
|
||||
[:div {:class (stl/css :property-block)}
|
||||
[:img {:src "images/community.svg"
|
||||
:border "0"}]
|
||||
[:div {:class (stl/css :text-wrapper)}
|
||||
[:div {:class (stl/css :property-title)}
|
||||
[:a {:href "https://community.penpot.app/"
|
||||
:target "_blank"
|
||||
:on-click #(send-event "onboarding-community-link")}
|
||||
(tr "onboarding-v2.welcome.desc2.title")]]
|
||||
[:div {:class (stl/css :property-description)}
|
||||
(tr "onboarding-v2.welcome.desc2")]]]
|
||||
[:div {:class (stl/css :text-wrapper)}
|
||||
[:div {:class (stl/css :property-title)}
|
||||
[:a {:href "https://community.penpot.app/"
|
||||
:target "_blank"
|
||||
:on-click #(send-event "onboarding-community-link")}
|
||||
(tr "onboarding-v2.welcome.desc2.title")]]
|
||||
[:div {:class (stl/css :property-description)}
|
||||
(tr "onboarding-v2.welcome.desc2")]]
|
||||
|
||||
[:div {:class (stl/css :property-block)}
|
||||
[:img {:src "images/contributing.svg"
|
||||
:border "0"}]
|
||||
[:div {:class (stl/css :text-wrapper)}
|
||||
[:div {:class (stl/css :property-title)}
|
||||
[:a {:href "https://help.penpot.app/contributing-guide/"
|
||||
:target "_blank" :on-click #(send-event "onboarding-contributing-link")}
|
||||
(tr "onboarding-v2.welcome.desc3.title")]]
|
||||
[:div {:class (stl/css :property-description)}
|
||||
(tr "onboarding-v2.welcome.desc3")]]]]]
|
||||
[:div {:class (stl/css :text-wrapper)}
|
||||
[:div {:class (stl/css :property-title)}
|
||||
[:a {:href "https://help.penpot.app/contributing-guide/"
|
||||
:target "_blank" :on-click #(send-event "onboarding-contributing-link")}
|
||||
(tr "onboarding-v2.welcome.desc3.title")]]
|
||||
[:div {:class (stl/css :property-description)}
|
||||
(tr "onboarding-v2.welcome.desc3")]]
|
||||
|
||||
[:div {:class (stl/css :modal-footer)}
|
||||
[:button {:on-click go-next
|
||||
:data-test "onboarding-next-btn"}
|
||||
(tr "labels.continue")]]]]))
|
||||
[:button {:on-click go-next
|
||||
:class (stl/css :accept-btn)
|
||||
:data-test "onboarding-next-btn"}
|
||||
(tr "labels.continue")]]]))
|
||||
|
||||
(mf/defc onboarding-before-start
|
||||
[{:keys [next] :as props}]
|
||||
|
|
@ -89,49 +80,44 @@
|
|||
(next))]
|
||||
[:div {:class (stl/css :modal-container)}
|
||||
[:div {:class (stl/css :modal-left)}
|
||||
[:img {:src "images/onboarding-people.png"
|
||||
[:img {:src "images/beforeyoustartilustration.svg"
|
||||
:border "0"
|
||||
:alt (tr "onboarding.welcome.alt")}]]
|
||||
[:div {:class (stl/css :modal-right)}
|
||||
[:div {:class (stl/css :release)}
|
||||
"Version " (:main cf/version)]
|
||||
[:div {:class (stl/css :modal-content)}
|
||||
[:div {:class (stl/css :modal-header)}
|
||||
[:h2 {:class (stl/css :modal-title)
|
||||
:data-test "onboarding-welcome"}
|
||||
(tr "onboarding-v2.before-start.title")]]
|
||||
|
||||
[:div {:class (stl/css :modal-info)}
|
||||
[:p {:class (stl/css :modal-text)}
|
||||
(tr "onboarding-v2.before-start.desc1")]
|
||||
[:div {:class (stl/css :property-block)}
|
||||
[:img {:src "images/user-guide.svg" :border "0"}]
|
||||
[:div {:class (stl/css :text-wrapper)}
|
||||
[:div {:class (stl/css :property-title)}
|
||||
[:a {:class (stl/css :modal-link)
|
||||
:href "https://help.penpot.app/user-guide/"
|
||||
:target "_blank"
|
||||
:on-click #(send-event "onboarding-user-guide-link")}
|
||||
(tr "onboarding-v2.before-start.desc2.title")]]
|
||||
[:div {:class (stl/css :property-description)}
|
||||
(tr "onboarding-v2.before-start.desc2")]]]
|
||||
[:h1 {:class (stl/css :modal-title)
|
||||
:data-test "onboarding-welcome"}
|
||||
(tr "onboarding-v2.before-start.title")]
|
||||
[:p {:class (stl/css :modal-text)}
|
||||
(tr "onboarding-v2.before-start.desc1")]
|
||||
|
||||
[:div {:class (stl/css :property-block)}
|
||||
[:img {:src "images/video-tutorials.svg" :border "0"}]
|
||||
[:div {:class (stl/css :text-wrapper)}
|
||||
[:div {:class (stl/css :property-title)}
|
||||
[:a {:class (stl/css :modal-link)
|
||||
:href "https://www.youtube.com/c/Penpot"
|
||||
:target "_blank"
|
||||
:on-click #(send-event "onboarding-video-tutorials-link")}
|
||||
(tr "onboarding-v2.before-start.desc3.title")]]
|
||||
[:div {:class (stl/css :property-description)}
|
||||
(tr "onboarding-v2.before-start.desc3")]]]]]
|
||||
[:div {:class (stl/css :text-wrapper)}
|
||||
[:div {:class (stl/css :property-title)}
|
||||
[:a {:class (stl/css :modal-link)
|
||||
:href "https://help.penpot.app/user-guide/"
|
||||
:target "_blank"
|
||||
:on-click #(send-event "onboarding-user-guide-link")}
|
||||
(tr "onboarding-v2.before-start.desc2.title")]]
|
||||
[:div {:class (stl/css :property-description)}
|
||||
(tr "onboarding-v2.before-start.desc2")]]
|
||||
|
||||
[:div {:class (stl/css :modal-footer)}
|
||||
[:button {:on-click go-next
|
||||
:data-test "onboarding-next-btn"}
|
||||
(tr "labels.continue")]]]]))
|
||||
[:div {:class (stl/css :text-wrapper)}
|
||||
[:div {:class (stl/css :property-title)}
|
||||
[:a {:class (stl/css :modal-link)
|
||||
:href "https://www.youtube.com/c/Penpot"
|
||||
:target "_blank"
|
||||
:on-click #(send-event "onboarding-video-tutorials-link")}
|
||||
(tr "onboarding-v2.before-start.desc3.title")]]
|
||||
[:div {:class (stl/css :property-description)}
|
||||
(tr "onboarding-v2.before-start.desc3")]]
|
||||
|
||||
|
||||
[:button {:on-click go-next
|
||||
:class (stl/css :accept-btn)
|
||||
:data-test "onboarding-next-btn"}
|
||||
(tr "labels.continue")]]]))
|
||||
|
||||
(mf/defc onboarding-modal
|
||||
{::mf/register modal/components
|
||||
|
|
@ -149,8 +135,11 @@
|
|||
(st/emit! (modal/hide)
|
||||
(du/mark-onboarding-as-viewed))
|
||||
(cond
|
||||
(contains? cf/flags :onboarding-questions)
|
||||
(modal/show! {:type :onboarding-questions})
|
||||
|
||||
(contains? cf/flags :onboarding-newsletter)
|
||||
(modal/show! {:type :onboarding-newsletter-modal})
|
||||
(modal/show! {:type :onboarding-newsletter})
|
||||
|
||||
(contains? cf/flags :onboarding-team)
|
||||
(modal/show! {:type :onboarding-team}))))]
|
||||
|
|
|
|||
|
|
@ -13,70 +13,58 @@
|
|||
.modal-container {
|
||||
@extend .modal-container-base;
|
||||
position: relative;
|
||||
display: flex;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
gap: $s-32;
|
||||
padding-inline: $s-100;
|
||||
padding-block-start: $s-100;
|
||||
padding-block-end: $s-72;
|
||||
margin: 0;
|
||||
min-width: $s-712;
|
||||
width: $s-960;
|
||||
height: $s-632;
|
||||
max-width: $s-960;
|
||||
max-height: $s-632;
|
||||
}
|
||||
|
||||
.modal-left {
|
||||
width: $s-284;
|
||||
width: $s-240;
|
||||
margin-block-end: $s-64;
|
||||
img {
|
||||
width: $s-284;
|
||||
width: $s-240;
|
||||
height: 100%;
|
||||
border-radius: $br-8 0 0 $br-8;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-right {
|
||||
@include flexColumn;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: $s-40 auto auto auto $s-32;
|
||||
gap: $s-24;
|
||||
position: relative;
|
||||
flex-grow: 1;
|
||||
padding: $s-32;
|
||||
}
|
||||
|
||||
.release {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
top: calc(-1 * $s-28);
|
||||
right: 0;
|
||||
padding: $s-8;
|
||||
color: var(--modal-text-foreground-color);
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
@include flexColumn;
|
||||
@include titleTipography;
|
||||
gap: $s-24;
|
||||
flex-grow: 1;
|
||||
margin-bottom: $s-24;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include bigTitleTipography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
.modal-info {
|
||||
@include flexColumn;
|
||||
}
|
||||
|
||||
.modal-text {
|
||||
@include titleTipography;
|
||||
.modal-text,
|
||||
.property-description {
|
||||
@include bodyLargeTypography;
|
||||
margin: 0;
|
||||
color: var(--modal-text-foreground-color);
|
||||
}
|
||||
|
||||
.property-block {
|
||||
@include flexRow;
|
||||
gap: $s-16;
|
||||
margin-bottom: $s-24;
|
||||
img {
|
||||
@include flexCenter;
|
||||
height: $s-40;
|
||||
width: $s-40;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-link {
|
||||
@include bodyLargeTypography;
|
||||
color: var(--modal-link-foreground-color);
|
||||
|
|
@ -88,19 +76,11 @@
|
|||
}
|
||||
|
||||
.property-title a {
|
||||
@include titleTipography;
|
||||
@include medTitleTipography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
.property-description {
|
||||
@include titleTipography;
|
||||
color: var(--modal-text-foreground-color);
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
button {
|
||||
@extend .modal-accept-btn;
|
||||
}
|
||||
.accept-btn {
|
||||
@extend .modal-accept-btn;
|
||||
justify-self: flex-end;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,9 +15,9 @@
|
|||
[app.util.i18n :as i18n :refer [tr]]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
(mf/defc onboarding-newsletter-modal
|
||||
(mf/defc onboarding-newsletter
|
||||
{::mf/register modal/components
|
||||
::mf/register-as :onboarding-newsletter-modal}
|
||||
::mf/register-as :onboarding-newsletter}
|
||||
[]
|
||||
(let [message (tr "onboarding.newsletter.acceptance-message")
|
||||
newsletter-updates (mf/use-state false)
|
||||
|
|
@ -39,13 +39,18 @@
|
|||
|
||||
[:div {:class (stl/css :modal-overlay)}
|
||||
[:div.animated.fadeInDown {:class (stl/css :modal-container)}
|
||||
[:div {:class (stl/css :modal-header)}
|
||||
[:div {:class (stl/css :modal-left)}
|
||||
[:img {:src "images/deco-newsletter.png"
|
||||
:border "0"}]]
|
||||
|
||||
[:div {:class (stl/css :modal-right)}
|
||||
[:h2 {:class (stl/css :modal-title)
|
||||
:data-test "onboarding-newsletter-title"}
|
||||
(tr "onboarding.newsletter.title")]
|
||||
[:p {:class (stl/css :modal-text)}
|
||||
(tr "onboarding-v2.newsletter.desc")]]
|
||||
[:div {:class (stl/css :modal-content)}
|
||||
(tr "onboarding-v2.newsletter.desc")]
|
||||
|
||||
|
||||
[:div {:class (stl/css :newsletter-options)}
|
||||
[:div {:class (stl/css :input-wrapper)}
|
||||
[:label {:for "newsletter-updates"}
|
||||
|
|
@ -67,19 +72,14 @@
|
|||
:id "newsletter-news"
|
||||
:on-change #(toggle newsletter-news)}]]]]
|
||||
|
||||
[:div {:class (stl/css :modal-info)}
|
||||
[:p {:class (stl/css :modal-text)}
|
||||
(tr "onboarding-v2.newsletter.privacy1")
|
||||
[:a {:class (stl/css :modal-link)
|
||||
:target "_blank"
|
||||
:href "https://penpot.app/privacy"}
|
||||
(tr "onboarding.newsletter.policy")]]
|
||||
[:p {:class (stl/css :modal-text)}
|
||||
(tr "onboarding-v2.newsletter.privacy2")]]]
|
||||
[:p {:class (stl/css :modal-text)}
|
||||
(tr "onboarding-v2.newsletter.privacy1")
|
||||
[:a {:class (stl/css :modal-link)
|
||||
:target "_blank"
|
||||
:href "https://penpot.app/privacy"}
|
||||
(tr "onboarding.newsletter.policy")]]
|
||||
[:p {:class (stl/css :modal-text)}
|
||||
(tr "onboarding-v2.newsletter.privacy2")]
|
||||
|
||||
[:div {:class (stl/css :modal-footer)}
|
||||
[:button {:on-click accept} (tr "labels.continue")]]
|
||||
|
||||
[:img {:class (stl/css-case :deco true
|
||||
:top true)
|
||||
:src "images/deco-newsletter.png" :border "0"}]]]))
|
||||
[:button {:on-click accept
|
||||
:class (stl/css :accept-btn)} (tr "labels.continue")]]]]))
|
||||
|
|
|
|||
|
|
@ -13,69 +13,64 @@
|
|||
.modal-container {
|
||||
@extend .modal-container-base;
|
||||
position: relative;
|
||||
min-width: $s-712;
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
gap: $s-32;
|
||||
padding-inline: $s-100;
|
||||
padding-block-start: $s-100;
|
||||
padding-block-end: $s-72;
|
||||
margin: 0;
|
||||
width: $s-960;
|
||||
height: $s-632;
|
||||
max-width: $s-960;
|
||||
max-height: $s-632;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-top: $s-80;
|
||||
margin-bottom: $s-32;
|
||||
.modal-left {
|
||||
width: $s-172;
|
||||
margin-block-end: $s-64;
|
||||
img {
|
||||
width: $s-172;
|
||||
border-radius: $br-8 0 0 $br-8;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-right {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: $s-40 auto auto auto auto $s-32;
|
||||
gap: $s-24;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include bigTitleTipography;
|
||||
text-align: center;
|
||||
color: var(--modal-title-foreground-color);
|
||||
margin-bottom: $s-16;
|
||||
}
|
||||
|
||||
.modal-text {
|
||||
@include titleTipography;
|
||||
@include bodyLargeTypography;
|
||||
color: var(--modal-text-foreground-color);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
@include flexColumn;
|
||||
@include titleTipography;
|
||||
gap: $s-32;
|
||||
margin-bottom: $s-24;
|
||||
}
|
||||
|
||||
.newsletter-options {
|
||||
@include flexColumn;
|
||||
display: grid;
|
||||
gap: $s-16;
|
||||
margin-inline-start: $s-16;
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
@extend .input-checkbox;
|
||||
}
|
||||
|
||||
.modal-info {
|
||||
@include flexColumn;
|
||||
gap: $s-16;
|
||||
margin-bottom: $s-32;
|
||||
}
|
||||
|
||||
.modal-link {
|
||||
@include bodyLargeTypography;
|
||||
color: var(--modal-link-foreground-color);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
button {
|
||||
@extend .modal-accept-btn;
|
||||
}
|
||||
}
|
||||
|
||||
.deco {
|
||||
position: absolute;
|
||||
width: 183px;
|
||||
top: -106px;
|
||||
left: 261px;
|
||||
.accept-btn {
|
||||
@extend .modal-accept-btn;
|
||||
justify-self: flex-end;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,18 +10,21 @@
|
|||
(:require
|
||||
[app.common.data :as d]
|
||||
[app.common.data.macros :as dm]
|
||||
[app.config :as cf]
|
||||
[app.main.data.modal :as modal]
|
||||
[app.main.data.users :as du]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.components.forms :as fm]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.util.i18n :as i18n :refer [tr]]
|
||||
[cljs.spec.alpha :as s]
|
||||
[cuerdas.core :as str]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
(mf/defc step-container
|
||||
[{:keys [form step on-next on-prev children] :as props}]
|
||||
[{:keys [form step on-next on-prev children class] :as props}]
|
||||
|
||||
[:& fm/form {:form form :on-submit on-next}
|
||||
[:& fm/form {:form form :on-submit on-next :class (dm/str class " " (stl/css :form-wrapper))}
|
||||
[:div {:class (stl/css :paginator)} (str/ffmt "%/4" step)]
|
||||
|
||||
children
|
||||
|
|
@ -41,39 +44,42 @@
|
|||
|
||||
(mf/defc step-1
|
||||
[{:keys [on-next form] :as props}]
|
||||
[:& step-container {:form form :step 1 :on-next on-next}
|
||||
[:& step-container {:form form :step 1 :on-next on-next :class (stl/css :step-1)}
|
||||
[:img {:class (stl/css :header-image)
|
||||
:src "images/form/use-for-1.png" :alt (tr "questions.lets-get-started")}]
|
||||
[:h1 {:class (stl/css :modal-title)} (tr "questions.lets-get-started")]
|
||||
[:p {:class (stl/css :modal-text)} (tr "questions.your-feedback-will-help-us")]
|
||||
[:h3 {:class (stl/css :modal-subtitle)} (tr "questions.questions-how-are-you-planning-to-use-penpot")]
|
||||
[:& fm/select
|
||||
{:options [{:label (tr "questions.select-option")
|
||||
:value "" :key "questions-how-are-you-planning-to-use-penpot"
|
||||
:disabled true}
|
||||
{:label (tr "questions.discover-more-about-penpot")
|
||||
:value "discover-more-about-penpot"
|
||||
:key "discover-more-about-penpot"}
|
||||
{:label (tr "questions.test-penpot-to-see-if-its-a-fit-for-team")
|
||||
:value "test-penpot-to-see-if-its-a-fit-for-team"
|
||||
:key "test-penpot-to-see-if-its-a-fit-for-team"}
|
||||
{:label (tr "questions.start-to-work-on-my-project")
|
||||
:value "start-to-work-on-my-project"
|
||||
:key "start-to-work-on-my-project"}
|
||||
{:label (tr "questions.get-the-code-from-my-team-project")
|
||||
:value "get-the-code-from-my-team-project"
|
||||
:key "get-the-code-from-my-team-project"}
|
||||
{:label (tr "questions.leave-feedback-for-my-team-project")
|
||||
:value "leave-feedback-for-my-team-project"
|
||||
:key "leave-feedback-for-my-team-project"}
|
||||
{:label (tr "questions.work-in-concept-ideas")
|
||||
:value "work-in-concept-ideas"
|
||||
:key "work-in-concept-ideas"}
|
||||
{:label (tr "questions.try-out-before-using-penpot-on-premise")
|
||||
:value "try-out-before-using-penpot-on-premise"
|
||||
:key "try-out-before-using-penpot-on-premise"}]
|
||||
:default ""
|
||||
:name :planning}]])
|
||||
|
||||
[:div {:class (stl/css :modal-question)}
|
||||
[:h3 {:class (stl/css :modal-subtitle)} (tr "questions.questions-how-are-you-planning-to-use-penpot")]
|
||||
[:& fm/select
|
||||
{:options [{:label (tr "questions.select-option")
|
||||
:value "" :key "questions-how-are-you-planning-to-use-penpot"
|
||||
:disabled true}
|
||||
{:label (tr "questions.discover-more-about-penpot")
|
||||
:value "discover-more-about-penpot"
|
||||
:key "discover-more-about-penpot"}
|
||||
{:label (tr "questions.test-penpot-to-see-if-its-a-fit-for-team")
|
||||
:value "test-penpot-to-see-if-its-a-fit-for-team"
|
||||
:key "test-penpot-to-see-if-its-a-fit-for-team"}
|
||||
{:label (tr "questions.start-to-work-on-my-project")
|
||||
:value "start-to-work-on-my-project"
|
||||
:key "start-to-work-on-my-project"}
|
||||
{:label (tr "questions.get-the-code-from-my-team-project")
|
||||
:value "get-the-code-from-my-team-project"
|
||||
:key "get-the-code-from-my-team-project"}
|
||||
{:label (tr "questions.leave-feedback-for-my-team-project")
|
||||
:value "leave-feedback-for-my-team-project"
|
||||
:key "leave-feedback-for-my-team-project"}
|
||||
{:label (tr "questions.work-in-concept-ideas")
|
||||
:value "work-in-concept-ideas"
|
||||
:key "work-in-concept-ideas"}
|
||||
{:label (tr "questions.try-out-before-using-penpot-on-premise")
|
||||
:value "try-out-before-using-penpot-on-premise"
|
||||
:key "try-out-before-using-penpot-on-premise"}]
|
||||
:default ""
|
||||
:name :planning
|
||||
:dropdown-class (stl/css :question-dropdown)}]]])
|
||||
|
||||
(s/def ::questions-form-step-2
|
||||
(s/keys :req-un [::experience-branding-illustrations-marketing-pieces
|
||||
|
|
@ -82,33 +88,42 @@
|
|||
|
||||
(mf/defc step-2
|
||||
[{:keys [on-next on-prev form] :as props}]
|
||||
[:& step-container {:form form :step 2 :on-next on-next :on-prev on-prev}
|
||||
[:h3 {:class (stl/css :modal-subtitle)}
|
||||
[:& step-container {:form form :step 2 :on-next on-next :on-prev on-prev :class (stl/css :step-2)}
|
||||
[:h1 {:class (stl/css :modal-title)}
|
||||
(tr "questions.describe-your-experience-working-on")]
|
||||
|
||||
[:div {:class (stl/css :modal-question)}
|
||||
[:div {:class (stl/css :modal-text)}
|
||||
[:div {:class (stl/css-case :modal-question true
|
||||
:question-centered true)}
|
||||
[:div {:class (stl/css-case :modal-subtitle true
|
||||
:centered true)}
|
||||
(tr "branding-illustrations-marketing-pieces")]
|
||||
[:& fm/radio-buttons {:options [{:label (tr "questions.none") :value "none"}
|
||||
{:label (tr "questions.some") :value "some"}
|
||||
{:label (tr "questions.a-lot") :value "a-lot"}]
|
||||
:name :experience-branding-illustrations-marketing-pieces}]]
|
||||
:name :experience-branding-illustrations-marketing-pieces
|
||||
:class (stl/css :radio-btns)}]]
|
||||
|
||||
[:div {:class (stl/css :modal-question)}
|
||||
[:div {:class (stl/css :modal-text)}
|
||||
[:div {:class (stl/css-case :modal-question true
|
||||
:question-centered true)}
|
||||
[:div {:class (stl/css-case :modal-subtitle true
|
||||
:centered true)}
|
||||
(tr "questions.interface-design-visual-assets-design-systems")]
|
||||
[:& fm/radio-buttons {:options [{:label (tr "questions.none") :value "none"}
|
||||
{:label (tr "questions.some") :value "some"}
|
||||
{:label (tr "questions.a-lot") :value "a-lot"}]
|
||||
:name :experience-interface-design-visual-assets-design-systems}]]
|
||||
:name :experience-interface-design-visual-assets-design-systems
|
||||
:class (stl/css :radio-btns)}]]
|
||||
|
||||
[:div {:class (stl/css :modal-question)}
|
||||
[:div {:class (stl/css :modal-text)}
|
||||
[:div {:class (stl/css-case :modal-question true
|
||||
:question-centered true)}
|
||||
[:div {:class (stl/css-case :modal-subtitle true
|
||||
:centered true)}
|
||||
(tr "questions.wireframes-user-journeys-flows-navigation-trees")]
|
||||
[:& fm/radio-buttons {:options [{:label (tr "questions.none") :value "none"}
|
||||
{:label (tr "questions.some") :value "some"}
|
||||
{:label (tr "questions.a-lot") :value "a-lot"}]
|
||||
:name :experience-interface-wireframes-user-journeys-flows-navigation-trees}]]])
|
||||
:name :experience-interface-wireframes-user-journeys-flows-navigation-trees
|
||||
:class (stl/css :radio-btns)}]]])
|
||||
|
||||
(s/def ::questions-form-step-3
|
||||
(s/keys :req-un [::experience-design-tool]
|
||||
|
|
@ -140,23 +155,26 @@
|
|||
(swap! form d/dissoc-in [:data :experience-design-tool-other])
|
||||
(swap! form d/dissoc-in [:errors :experience-design-tool-other])))))]
|
||||
|
||||
[:& step-container {:form form :step 3 :on-next on-next :on-prev on-prev}
|
||||
[:h3 {:class (stl/css :modal-subtitle)}
|
||||
[:& step-container {:form form :step 3 :on-next on-next :on-prev on-prev :class (stl/css :step-3)}
|
||||
[:h1 {:class (stl/css :modal-title)}
|
||||
(tr "question.design-tool-more-experienced-with")]
|
||||
[:& fm/radio-buttons {:options [{:label (tr "questions.figma") :value "figma" :image "images/form/figma.png"}
|
||||
{:label (tr "questions.sketch") :value "sketch" :image "images/form/sketch.png"}
|
||||
{:label (tr "questions.adobe-xd") :value "adobe-xd" :image "images/form/adobe-xd.png"}
|
||||
{:label (tr "questions.canva") :value "canva" :image "images/form/canva.png"}
|
||||
{:label (tr "questions.invision") :value "invision" :image "images/form/invision.png"}
|
||||
{:label (tr "questions.never-used-a-tool") :value "never-used-a-tool" :image "images/form/never-used.png"}
|
||||
{:label (tr "questions.other") :value "other"}]
|
||||
:name :experience-design-tool
|
||||
:on-change on-design-tool-change}]
|
||||
[:div {:class (stl/css :radio-wrapper)}
|
||||
[:& fm/radio-buttons {:options [{:label (tr "questions.figma") :value "figma" :image "images/form/figma.png" :area "image1"}
|
||||
{:label (tr "questions.sketch") :value "sketch" :image "images/form/sketch.png" :area "image2"}
|
||||
{:label (tr "questions.adobe-xd") :value "adobe-xd" :image "images/form/adobe-xd.png" :area "image3"}
|
||||
{:label (tr "questions.canva") :value "canva" :image "images/form/canva.png" :area "image4"}
|
||||
{:label (tr "questions.invision") :value "invision" :image "images/form/invision.png" :area "image5"}
|
||||
{:label (tr "questions.never-used-one") :area "image6" :value "never-used-a-tool" :icon i/curve-refactor}
|
||||
{:label (tr "questions.other") :value "other" :area "other"}]
|
||||
:name :experience-design-tool
|
||||
:class (stl/css :image-radio)
|
||||
:on-change on-design-tool-change}]
|
||||
|
||||
[:& fm/input {:name :experience-design-tool-other
|
||||
:placeholder (tr "questions.other")
|
||||
:label ""
|
||||
:disabled (not= experience-design-tool "other")}]]))
|
||||
[:& fm/input {:name :experience-design-tool-other
|
||||
:class (stl/css :input-spacing)
|
||||
:placeholder (tr "questions.other")
|
||||
:label ""
|
||||
:disabled (not= experience-design-tool "other")}]]]))
|
||||
|
||||
(s/def ::questions-form-step-4
|
||||
(s/keys :req-un [::team-size ::role]
|
||||
|
|
@ -181,18 +199,23 @@
|
|||
(swap! form d/dissoc-in [:data :role-other])
|
||||
(swap! form d/dissoc-in [:errors :role-other])))))]
|
||||
|
||||
[:& step-container {:form form :step 4 :on-next on-next :on-prev on-prev}
|
||||
[:h3 {:class (stl/css :modal-subtitle)} (tr "questions.role")]
|
||||
[:& fm/radio-buttons {:options [{:label (tr "questions.designer") :value "designer"}
|
||||
{:label (tr "questions.developer") :value "developer"}
|
||||
{:label (tr "questions.manager") :value "manager"}
|
||||
{:label (tr "questions.founder") :value "founder"}
|
||||
{:label (tr "questions.marketing") :value "marketing"}
|
||||
{:label (tr "questions.student-teacher") :value "student-teacher"}
|
||||
{:label (tr "questions.other") :value "other"}]
|
||||
:name :role
|
||||
:on-change on-role-change}]
|
||||
[:& fm/input {:name :role-other :label "" :placeholder (tr "questions.other") :disabled (not= role "other")}]
|
||||
[:& step-container {:form form :step 4 :on-next on-next :on-prev on-prev :class (stl/css :step-4)}
|
||||
[:h1 {:class (stl/css :modal-title)} (tr "questions.role")]
|
||||
[:div {:class (stl/css :radio-wrapper)}
|
||||
[:& fm/radio-buttons {:options [{:label (tr "questions.designer") :value "designer"}
|
||||
{:label (tr "questions.developer") :value "developer"}
|
||||
{:label (tr "questions.manager") :value "manager"}
|
||||
{:label (tr "questions.founder") :value "founder"}
|
||||
{:label (tr "questions.marketing") :value "marketing"}
|
||||
{:label (tr "questions.student-teacher") :value "student-teacher"}
|
||||
{:label (tr "questions.other") :value "other"}]
|
||||
:name :role
|
||||
:on-change on-role-change}]
|
||||
[:& fm/input {:name :role-other
|
||||
:class (stl/css :input-spacing)
|
||||
:label ""
|
||||
:placeholder (tr "questions.other")
|
||||
:disabled (not= role "other")}]]
|
||||
|
||||
[:div {:class (stl/css :modal-question)}
|
||||
[:h3 {:class (stl/css :modal-subtitle)} (tr "questions.team-size")]
|
||||
|
|
@ -210,6 +233,8 @@
|
|||
;; this modal directly on the ui namespace.
|
||||
|
||||
(mf/defc questions-modal
|
||||
{::mf/register modal/components
|
||||
::mf/register-as :onboarding-questions}
|
||||
[]
|
||||
(let [container (mf/use-ref)
|
||||
step (mf/use-state 1)
|
||||
|
|
@ -251,7 +276,17 @@
|
|||
(fn [form]
|
||||
(let [questionnaire (merge @clean-data (:clean-data @form))]
|
||||
(reset! clean-data questionnaire)
|
||||
(st/emit! (du/mark-questions-as-answered questionnaire)))))]
|
||||
(st/emit! (du/mark-questions-as-answered questionnaire))
|
||||
|
||||
(cond
|
||||
(contains? cf/flags :onboarding-newsletter)
|
||||
(modal/show! {:type :onboarding-newsletter})
|
||||
|
||||
(contains? cf/flags :onboarding-team)
|
||||
(modal/show! {:type :onboarding-team})
|
||||
|
||||
:else
|
||||
(modal/hide!)))))]
|
||||
|
||||
[:div {:class (stl/css :modal-overlay)}
|
||||
[:div {:class (stl/css :modal-container)
|
||||
|
|
|
|||
|
|
@ -11,25 +11,33 @@
|
|||
}
|
||||
|
||||
.modal-container {
|
||||
@extend .modal-container-base;
|
||||
min-width: $s-512;
|
||||
position: relative;
|
||||
max-width: $s-744;
|
||||
max-height: fit-content;
|
||||
width: $s-744;
|
||||
padding-inline: $s-100;
|
||||
padding-block-start: $s-40;
|
||||
padding-block-end: $s-72;
|
||||
border-radius: $br-8;
|
||||
border: $s-2 solid var(--modal-border-color);
|
||||
background-color: var(--modal-background-color);
|
||||
}
|
||||
|
||||
.form-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: $s-24;
|
||||
}
|
||||
|
||||
// STEP CONTAINER
|
||||
.paginator {
|
||||
@include titleTipography;
|
||||
position: absolute;
|
||||
top: $s-8;
|
||||
right: $s-8;
|
||||
padding: $s-4;
|
||||
border-radius: $br-6;
|
||||
color: var(--color-foreground-secondary);
|
||||
@include smallTitleTipography;
|
||||
height: $s-20;
|
||||
text-align: right;
|
||||
color: var(--modal-text-foreground-color);
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
@extend .modal-action-btns;
|
||||
margin-top: $s-32;
|
||||
}
|
||||
.next-button {
|
||||
@extend .modal-accept-btn;
|
||||
|
|
@ -41,31 +49,89 @@
|
|||
|
||||
// STEP 1
|
||||
|
||||
// .step-1 {
|
||||
// max-height: $s-468;
|
||||
// height: $s-468;
|
||||
// }
|
||||
|
||||
.header-image {
|
||||
height: auto;
|
||||
width: $s-200;
|
||||
height: $s-112;
|
||||
width: auto;
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include bigTitleTipography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
margin: $s-32 0 $s-8 0;
|
||||
min-height: $s-32;
|
||||
margin-block: auto;
|
||||
}
|
||||
|
||||
.modal-subtitle {
|
||||
@include titleTipography;
|
||||
@include bodyLargeTypography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// STEP-2
|
||||
|
||||
.modal-text {
|
||||
@include titleTipography;
|
||||
@include bodyLargeTypography;
|
||||
color: var(--modal-text-foreground-color);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.modal-question {
|
||||
@include flexColumn;
|
||||
margin-top: $s-32;
|
||||
// STEP-2
|
||||
|
||||
.step-2 {
|
||||
grid-template-rows: $s-20 auto auto auto auto $s-32;
|
||||
}
|
||||
|
||||
.modal-question {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: $s-16 $s-32;
|
||||
gap: $s-16;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.question-centered {
|
||||
width: $s-424;
|
||||
grid-template-rows: auto $s-32;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.radio-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: $s-8;
|
||||
}
|
||||
|
||||
// STEP-3
|
||||
.step-3 {
|
||||
grid-template-rows: $s-20 auto auto $s-32;
|
||||
}
|
||||
|
||||
.image-radio {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr 1fr $s-32;
|
||||
grid-template-columns: $s-88 $s-92 $s-92 $s-92 $s-88;
|
||||
grid-template-areas:
|
||||
". image1 image2 image3 ."
|
||||
". image4 image5 image6 ."
|
||||
"other other other other other";
|
||||
row-gap: $s-16;
|
||||
column-gap: $s-24;
|
||||
}
|
||||
|
||||
.input-spacing {
|
||||
height: $s-32;
|
||||
width: calc(100% - $s-24);
|
||||
margin-inline-start: $s-24;
|
||||
}
|
||||
|
||||
// STEP-4
|
||||
|
||||
.step-4 {
|
||||
grid-template-rows: $s-20 auto auto auto $s-32;
|
||||
row-gap: $s-16;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
(ns app.main.ui.onboarding.team-choice
|
||||
(:require-macros [app.main.style :as stl])
|
||||
(:require
|
||||
[app.common.data.macros :as dmc]
|
||||
[app.common.spec :as us]
|
||||
[app.main.data.dashboard :as dd]
|
||||
[app.main.data.events :as ev]
|
||||
|
|
@ -27,33 +28,36 @@
|
|||
(s/def ::team-form
|
||||
(s/keys :req-un [::name]))
|
||||
|
||||
(mf/defc team-modal-right
|
||||
(mf/defc team-modal-left
|
||||
[]
|
||||
[:div {:class (stl/css :modal-right)}
|
||||
[:div {:class (stl/css :modal-left)}
|
||||
[:h1 {:class (stl/css :modal-title)}
|
||||
(tr "onboarding-v2.welcome.title")]
|
||||
|
||||
[:h2 {:class (stl/css :modal-subtitle)}
|
||||
(tr "onboarding.team-modal.create-team")]
|
||||
(tr "onboarding.team-modal.team-definition")]
|
||||
[:p {:class (stl/css :modal-text)}
|
||||
(tr "onboarding.team-modal.create-team-desc")]
|
||||
[:ul {:class (stl/css :team-features)}
|
||||
[:li {:class (stl/css :feature)}
|
||||
[:span {:class (stl/css :icon)} i/document-refactor]
|
||||
[:p {:class (stl/css :modal-text)}
|
||||
[:p {:class (stl/css :modal-desc)}
|
||||
(tr "onboarding.team-modal.create-team-feature-1")]]
|
||||
[:li {:class (stl/css :feature)}
|
||||
[:span {:class (stl/css :icon)} i/move-refactor]
|
||||
[:p {:class (stl/css :modal-text)}
|
||||
[:p {:class (stl/css :modal-desc)}
|
||||
(tr "onboarding.team-modal.create-team-feature-2")]]
|
||||
[:li {:class (stl/css :feature)}
|
||||
[:span {:class (stl/css :icon)} i/tree-refactor]
|
||||
[:p {:class (stl/css :modal-text)}
|
||||
[:p {:class (stl/css :modal-desc)}
|
||||
(tr "onboarding.team-modal.create-team-feature-3")]]
|
||||
[:li {:class (stl/css :feature)}
|
||||
[:span {:class (stl/css :icon)} i/user-refactor]
|
||||
[:p {:class (stl/css :modal-text)}
|
||||
[:p {:class (stl/css :modal-desc)}
|
||||
(tr "onboarding.team-modal.create-team-feature-4")]]
|
||||
[:li {:class (stl/css :feature)}
|
||||
[:span {:class (stl/css :icon)} i/tick-refactor]
|
||||
[:p {:class (stl/css :modal-text)}
|
||||
[:p {:class (stl/css :modal-desc)}
|
||||
(tr "onboarding.team-modal.create-team-feature-5")]]]])
|
||||
|
||||
(mf/defc onboarding-team-modal
|
||||
|
|
@ -65,7 +69,7 @@
|
|||
:validators [(fm/validate-not-empty :name (tr "auth.name.not-all-space"))
|
||||
(fm/validate-length :name fm/max-length-allowed (tr "auth.name.too-long"))])
|
||||
on-submit
|
||||
(mf/use-callback
|
||||
(mf/use-fn
|
||||
(fn [form _]
|
||||
(let [tname (get-in @form [:clean-data :name])]
|
||||
(st/emit! (modal/show {:type :onboarding-team-invitations :name tname})
|
||||
|
|
@ -82,12 +86,18 @@
|
|||
|
||||
teams (mf/deref refs/teams)]
|
||||
|
||||
(if (< (count teams) 2)
|
||||
(mf/with-effect [teams]
|
||||
(when (> (count teams) 1)
|
||||
(st/emit! (modal/hide))))
|
||||
|
||||
(when (< (count teams) 2)
|
||||
[:div {:class (stl/css :modal-overlay)}
|
||||
[:div.animated.fadeIn {:class (stl/css :modal-container)}
|
||||
[:div {:class (stl/css :modal-left)}
|
||||
[:& team-modal-left]
|
||||
[:div {:class (stl/css :separator)}]
|
||||
[:div {:class (stl/css :modal-right)}
|
||||
[:div {:class (stl/css :first-block)}
|
||||
[:h2 {:class (stl/css :modal-title)}
|
||||
[:h2 {:class (stl/css :modal-subtitle)}
|
||||
(tr "onboarding.team-modal.create-team")]
|
||||
[:p {:class (stl/css :modal-text)}
|
||||
(tr "onboarding.choice.team-up.create-team-desc")]
|
||||
|
|
@ -106,7 +116,7 @@
|
|||
{:class (stl/css :accept-button)
|
||||
:label (tr "onboarding.choice.team-up.continue-creating-team")}]]]]
|
||||
[:div {:class (stl/css :second-block)}
|
||||
[:h2 {:class (stl/css :modal-title)}
|
||||
[:h2 {:class (stl/css :modal-subtitle)}
|
||||
(tr "onboarding.choice.team-up.start-without-a-team")]
|
||||
[:p {:class (stl/css :modal-text)}
|
||||
(tr "onboarding.choice.team-up.start-without-a-team-description")]
|
||||
|
|
@ -115,10 +125,8 @@
|
|||
[:button {:class (stl/css :accept-button)
|
||||
:on-click on-skip}
|
||||
(tr "onboarding.choice.team-up.continue-without-a-team")]]]]
|
||||
[:& team-modal-right]
|
||||
[:div {:class (stl/css :paginator)} "1/2"]]]
|
||||
|
||||
(st/emit! (modal/hide)))))
|
||||
[:div {:class (stl/css :paginator)} "1/2"]]])))
|
||||
|
||||
(defn get-available-roles
|
||||
[]
|
||||
|
|
@ -135,8 +143,9 @@
|
|||
|
||||
(mf/defc onboarding-team-invitations-modal
|
||||
{::mf/register modal/components
|
||||
::mf/register-as :onboarding-team-invitations}
|
||||
[{:keys [name] :as props}]
|
||||
::mf/register-as :onboarding-team-invitations
|
||||
::mf/props :obj}
|
||||
[{:keys [name]}]
|
||||
(let [initial (mf/use-memo (constantly
|
||||
{:role "editor"
|
||||
:name name}))
|
||||
|
|
@ -148,7 +157,7 @@
|
|||
roles (mf/use-memo #(get-available-roles))
|
||||
|
||||
on-success
|
||||
(mf/use-callback
|
||||
(mf/use-fn
|
||||
(fn [_form response]
|
||||
(let [team-id (:id response)]
|
||||
(st/emit!
|
||||
|
|
@ -158,13 +167,13 @@
|
|||
(modal/hide))))))
|
||||
|
||||
on-error
|
||||
(mf/use-callback
|
||||
(mf/use-fn
|
||||
(fn [_form _response]
|
||||
(st/emit! (dm/error "Error on creating team."))))
|
||||
|
||||
;; The SKIP branch only creates the team, without invitations
|
||||
on-invite-later
|
||||
(mf/use-callback
|
||||
(mf/use-fn
|
||||
(fn [_]
|
||||
(let [mdata {:on-success (partial on-success form)
|
||||
:on-error (partial on-error form)}
|
||||
|
|
@ -177,8 +186,8 @@
|
|||
|
||||
;; The SUBMIT branch creates the team with the invitations
|
||||
on-invite-now
|
||||
(mf/use-callback
|
||||
(fn [_]
|
||||
(mf/use-fn
|
||||
(fn [form]
|
||||
(let [mdata {:on-success (partial on-success form)
|
||||
:on-error (partial on-error form)}
|
||||
params (:clean-data @form)
|
||||
|
|
@ -196,36 +205,39 @@
|
|||
:step 2})))))
|
||||
|
||||
on-submit
|
||||
(mf/use-callback
|
||||
(fn [_]
|
||||
(mf/use-fn
|
||||
(fn [form]
|
||||
(let [params (:clean-data @form)
|
||||
emails (:emails params)]
|
||||
(if (> (count emails) 0)
|
||||
(on-invite-now form)
|
||||
(on-invite-later form)))))]
|
||||
(on-invite-later form))
|
||||
(modal/hide!))))]
|
||||
|
||||
[:div {:class (stl/css :modal-overlay)}
|
||||
[:div.animated.fadeIn {:class (stl/css :modal-container)}
|
||||
[:div {:class (stl/css :modal-left)}
|
||||
[:h2 {:class (stl/css :modal-title)} (tr "onboarding.choice.team-up.invite-members")]
|
||||
[:& team-modal-left]
|
||||
|
||||
[:div {:class (stl/css :separator)}]
|
||||
[:div {:class (stl/css :modal-right-invitations)}
|
||||
[:h2 {:class (stl/css :modal-subtitle)} (tr "onboarding.choice.team-up.invite-members")]
|
||||
[:p {:class (stl/css :modal-text)} (tr "onboarding.choice.team-up.invite-members-info")]
|
||||
[:& fm/form {:form form
|
||||
:class (stl/css :modal-form-invitations)
|
||||
:on-submit on-submit}
|
||||
[:div {:class (stl/css :role-select)}
|
||||
[:p {:class (stl/css :role-title)} (tr "onboarding.choice.team-up.roles")]
|
||||
[:& fm/select {:name :role :options roles}]]
|
||||
|
||||
[:div {:class (stl/css :modal-form)}
|
||||
[:& fm/form {:form form
|
||||
:on-submit on-submit}
|
||||
[:div {:class (stl/css :role-select)}
|
||||
[:p {:class (stl/css :role-title)} (tr "onboarding.choice.team-up.roles")]
|
||||
[:& fm/select {:name :role :options roles}]]
|
||||
|
||||
[:div {:class (stl/css :invitation-row)}
|
||||
[:& fm/multi-input {:type "email"
|
||||
:name :emails
|
||||
:auto-focus? true
|
||||
:trim true
|
||||
:valid-item-fn us/parse-email
|
||||
:caution-item-fn #{}
|
||||
:label (tr "modals.invite-member.emails")
|
||||
:on-submit on-submit}]]]
|
||||
[:div {:class (stl/css :invitation-row)}
|
||||
[:& fm/multi-input {:type "email"
|
||||
:name :emails
|
||||
:auto-focus? true
|
||||
:trim true
|
||||
:valid-item-fn us/parse-email
|
||||
:caution-item-fn #{}
|
||||
:label (tr "modals.invite-member.emails")
|
||||
:on-submit on-submit}]]
|
||||
|
||||
[:div {:class (stl/css :action-buttons)}
|
||||
[:button {:class (stl/css :back-button)
|
||||
|
|
@ -242,9 +254,9 @@
|
|||
(tr "onboarding.choice.team-up.create-team-and-invite")
|
||||
(tr "onboarding.choice.team-up.create-team-without-invite"))}]]
|
||||
[:div {:class (stl/css :modal-hint)}
|
||||
(tr "onboarding.choice.team-up.create-team-and-send-invites-description")]]]
|
||||
(dmc/str "(" (tr "onboarding.choice.team-up.create-team-and-send-invites-description") ")")]]]
|
||||
|
||||
|
||||
[:& team-modal-right]
|
||||
[:div {:class (stl/css :paginator)} "2/2"]]]))
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -11,32 +11,38 @@
|
|||
}
|
||||
|
||||
.modal-container {
|
||||
@extend .modal-container-base;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
position: relative;
|
||||
min-width: $s-712;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr $s-32 1fr;
|
||||
gap: $s-24;
|
||||
width: $s-908;
|
||||
height: $s-632;
|
||||
padding-inline: $s-100;
|
||||
padding-block-start: $s-40;
|
||||
padding-block-end: $s-72;
|
||||
border-radius: $br-8;
|
||||
background-color: var(--modal-background-color);
|
||||
border: $s-2 solid var(--modal-border-color);
|
||||
}
|
||||
|
||||
.paginator {
|
||||
@include bodyMedTipography;
|
||||
position: absolute;
|
||||
top: $s-40;
|
||||
right: $s-100;
|
||||
padding: $s-4;
|
||||
border-radius: $br-6;
|
||||
color: var(--color-foreground-secondary);
|
||||
}
|
||||
|
||||
// MODAL LEFT
|
||||
.modal-left {
|
||||
width: $s-356;
|
||||
padding: $s-48 $s-28 $s-48 $s-48;
|
||||
}
|
||||
|
||||
.first-block,
|
||||
.second-block {
|
||||
@include flexColumn;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.first-block {
|
||||
margin-bottom: $s-72;
|
||||
}
|
||||
|
||||
.modal-right {
|
||||
width: $s-356;
|
||||
padding: $s-48;
|
||||
background-color: var(--color-background-tertiary);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: $s-32 auto auto 1fr;
|
||||
gap: $s-16;
|
||||
max-height: $s-512;
|
||||
padding-block-start: $s-44;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
|
|
@ -46,70 +52,48 @@
|
|||
}
|
||||
|
||||
.modal-subtitle {
|
||||
@include tabTitleTipography;
|
||||
@include medTitleTipography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
margin-bottom: $s-8;
|
||||
}
|
||||
|
||||
.modal-text,
|
||||
.modal-hint {
|
||||
@include titleTipography;
|
||||
.modal-text {
|
||||
@include bodyLargeTypography;
|
||||
color: var(--modal-text-foreground-color);
|
||||
margin: 0;
|
||||
}
|
||||
.modal-hint {
|
||||
margin-top: $s-24;
|
||||
}
|
||||
.modal-form {
|
||||
margin: $s-24 0;
|
||||
|
||||
.modal-desc {
|
||||
@include smallTitleTipography;
|
||||
margin: 0;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
.team-name-input {
|
||||
@extend .input-element-label;
|
||||
label {
|
||||
@include flexColumn;
|
||||
@include titleTipography;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
height: 100%;
|
||||
|
||||
input {
|
||||
@include titleTipography;
|
||||
margin-top: $s-8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.role-select {
|
||||
.team-features {
|
||||
@include flexColumn;
|
||||
.role-title {
|
||||
@include titleTipography;
|
||||
margin: 0;
|
||||
color: var(--modal-title-foreground-color);
|
||||
gap: $s-16;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.feature {
|
||||
@include flexRow;
|
||||
gap: $s-16;
|
||||
}
|
||||
|
||||
.icon {
|
||||
@include flexCenter;
|
||||
height: $s-32;
|
||||
width: $s-32;
|
||||
border-radius: $br-circle;
|
||||
border: $s-1 solid var(--color-accent-primary);
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
stroke: var(--color-accent-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.invitation-row {
|
||||
margin-top: $s-8;
|
||||
margin-bottom: $s-24;
|
||||
}
|
||||
|
||||
.paginator {
|
||||
@include titleTipography;
|
||||
position: absolute;
|
||||
top: $s-8;
|
||||
right: $s-8;
|
||||
padding: $s-4;
|
||||
border-radius: $br-6;
|
||||
color: var(--color-foreground-secondary);
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
@extend .modal-action-btns;
|
||||
justify-content: flex-start;
|
||||
margin-top: $s-24;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.accept-button {
|
||||
|
|
@ -120,25 +104,88 @@
|
|||
@extend .modal-cancel-btn;
|
||||
}
|
||||
|
||||
.team-features {
|
||||
@include flexColumn;
|
||||
gap: $s-24;
|
||||
margin-top: $s-24;
|
||||
// SEPARATOR
|
||||
.separator {
|
||||
width: $s-8;
|
||||
height: $s-420;
|
||||
border-radius: $br-8;
|
||||
margin-block-start: $s-92;
|
||||
opacity: 42%;
|
||||
background-color: var(--modal-separator-backogrund-color);
|
||||
}
|
||||
|
||||
.feature {
|
||||
@include flexRow;
|
||||
// MODAL RIGHT TEAM
|
||||
.modal-right {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 1fr auto;
|
||||
gap: $s-24;
|
||||
max-height: $s-512;
|
||||
margin-block-start: $s-92;
|
||||
}
|
||||
|
||||
.first-block,
|
||||
.second-block {
|
||||
@include flexColumn;
|
||||
gap: $s-16;
|
||||
}
|
||||
|
||||
.modal-form {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: $s-16;
|
||||
}
|
||||
|
||||
.team-name-input {
|
||||
@extend .input-element-label;
|
||||
label {
|
||||
@include flexColumn;
|
||||
@include bodyMedTipography;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
height: 100%;
|
||||
|
||||
input {
|
||||
@include bodyMedTipography;
|
||||
margin-top: $s-8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// MODAL RIGHT INVITATIONS
|
||||
|
||||
.modal-right-invitations {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto auto 1fr;
|
||||
gap: $s-16;
|
||||
max-height: $s-512;
|
||||
margin-block-start: $s-92;
|
||||
}
|
||||
|
||||
.modal-form-invitations {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto 1fr auto auto;
|
||||
margin-block-end: $s-72;
|
||||
gap: $s-8;
|
||||
}
|
||||
|
||||
.icon {
|
||||
@include flexCenter;
|
||||
height: $s-32;
|
||||
width: $s-32;
|
||||
border-radius: $br-circle;
|
||||
background-color: var(--color-accent-primary);
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
stroke: var(--color-background-tertiary);
|
||||
}
|
||||
.role-title {
|
||||
@include uppercaseTitleTipography;
|
||||
margin-block-end: $s-8;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
.invitation-row {
|
||||
margin: 0;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
.modal-hint {
|
||||
@include bodyMedTipography;
|
||||
color: var(--modal-text-foreground-color);
|
||||
text-align: right;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -180,7 +180,7 @@
|
|||
.modal-header {
|
||||
margin-bottom: $s-24;
|
||||
.modal-title {
|
||||
@include tabTitleTipography;
|
||||
@include uppercaseTitleTipography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
.modal-close-btn {
|
||||
|
|
@ -191,7 +191,7 @@
|
|||
.modal-content {
|
||||
@include flexColumn;
|
||||
gap: $s-24;
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
margin-bottom: $s-24;
|
||||
}
|
||||
|
||||
|
|
@ -200,7 +200,7 @@
|
|||
}
|
||||
|
||||
.select-title {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
|
|
@ -223,7 +223,7 @@
|
|||
|
||||
.token-value {
|
||||
@include textEllipsis;
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
}
|
||||
|
||||
.modal-title {
|
||||
@include tabTitleTipography;
|
||||
@include uppercaseTitleTipography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
|
||||
.modal-content {
|
||||
@include flexColumn;
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
gap: $s-24;
|
||||
margin-bottom: $s-24;
|
||||
}
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
}
|
||||
|
||||
.select-title {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
}
|
||||
|
||||
.modal-title {
|
||||
@include tabTitleTipography;
|
||||
@include uppercaseTitleTipography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
|
||||
.modal-content {
|
||||
@include flexColumn;
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
gap: $s-24;
|
||||
margin-bottom: $s-24;
|
||||
}
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
}
|
||||
|
||||
.select-title {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
}
|
||||
|
||||
.empty-state {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
color: var(--empty-message-foreground-color);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
|
|
@ -133,7 +133,7 @@
|
|||
|
||||
.counter {
|
||||
@include flexCenter;
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
border-radius: $br-8;
|
||||
width: $s-64;
|
||||
height: $s-32;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
// COMMENT DROPDOWN ON HEADER
|
||||
.view-options {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
}
|
||||
|
||||
.dropdown-title {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
flex-grow: 1;
|
||||
color: var(--input-foreground-color-active);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@
|
|||
}
|
||||
|
||||
.project-name {
|
||||
@include tabTitleTipography;
|
||||
@include uppercaseTitleTipography;
|
||||
color: var(--title-foreground-color);
|
||||
}
|
||||
|
||||
|
|
@ -62,7 +62,7 @@
|
|||
}
|
||||
|
||||
.breadcrumb {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
@include flexRow;
|
||||
color: var(--title-foreground-color);
|
||||
cursor: pointer;
|
||||
|
|
@ -114,7 +114,7 @@
|
|||
}
|
||||
|
||||
.current-frame {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
@include flexRow;
|
||||
flex-grow: 1;
|
||||
color: var(--title-foreground-color-hover);
|
||||
|
|
@ -198,7 +198,7 @@
|
|||
|
||||
.go-log-btn {
|
||||
@extend .button-tertiary;
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
height: $s-32;
|
||||
padding: 0 $s-8;
|
||||
border-radius: $br-8;
|
||||
|
|
@ -213,7 +213,7 @@
|
|||
min-width: $s-64;
|
||||
border-radius: $br-8;
|
||||
.label {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
color: var(--button-tertiary-foreground-color-rest);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -15,6 +15,6 @@
|
|||
}
|
||||
|
||||
.annotation-content {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
color: var(--entry-foreground-color);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
}
|
||||
|
||||
.image-format {
|
||||
@include tabTitleTipography;
|
||||
@include uppercaseTitleTipography;
|
||||
height: $s-32;
|
||||
padding: $s-8 0;
|
||||
color: var(--menu-foreground-color-rest);
|
||||
|
|
@ -42,7 +42,7 @@
|
|||
}
|
||||
|
||||
.format-info {
|
||||
@include tabTitleTipography;
|
||||
@include uppercaseTitleTipography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
|
|
@ -78,7 +78,7 @@
|
|||
grid-template-rows: 1fr 1fr;
|
||||
}
|
||||
.color-name-wrapper {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
@include flexColumn;
|
||||
padding: $s-8 $s-4 $s-8 $s-8;
|
||||
height: $s-32;
|
||||
|
|
@ -89,21 +89,21 @@
|
|||
max-width: $s-124;
|
||||
}
|
||||
.color-name-library {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
@include textEllipsis;
|
||||
text-align: left;
|
||||
height: $s-16;
|
||||
color: var(--menu-foreground-color-rest);
|
||||
}
|
||||
.color-value-wrapper {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
height: $s-16;
|
||||
color: var(--menu-foreground-color);
|
||||
}
|
||||
}
|
||||
|
||||
.opacity-info {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
color: var(--menu-foreground-color);
|
||||
padding: $s-8 0;
|
||||
}
|
||||
|
|
@ -160,7 +160,7 @@
|
|||
|
||||
.download-button {
|
||||
@extend .button-secondary;
|
||||
@include tabTitleTipography;
|
||||
@include uppercaseTitleTipography;
|
||||
height: $s-32;
|
||||
width: 100%;
|
||||
margin-top: $s-4;
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
|
||||
.download-button {
|
||||
@extend .button-secondary;
|
||||
@include tabTitleTipography;
|
||||
@include uppercaseTitleTipography;
|
||||
height: $s-32;
|
||||
margin-top: $s-4;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
}
|
||||
|
||||
.attributes-subtitle {
|
||||
@include tabTitleTipography;
|
||||
@include uppercaseTitleTipography;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: $s-32;
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@
|
|||
border: $s-1 solid var(--menu-border-color-disabled);
|
||||
margin-top: $s-4;
|
||||
.content {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
width: 100%;
|
||||
padding: $s-4 0;
|
||||
color: var(--color-foreground-secondary);
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
|
||||
.download-button {
|
||||
@extend .button-secondary;
|
||||
@include tabTitleTipography;
|
||||
@include uppercaseTitleTipography;
|
||||
height: $s-32;
|
||||
width: 100%;
|
||||
margin: $s-8 0;
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
}
|
||||
|
||||
.code-lang {
|
||||
@include tabTitleTipography;
|
||||
@include uppercaseTitleTipography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
|
@ -82,14 +82,14 @@
|
|||
max-width: $s-108;
|
||||
}
|
||||
.code-lang-select {
|
||||
@include tabTitleTipography;
|
||||
@include uppercaseTitleTipography;
|
||||
width: $s-72;
|
||||
border: $s-1 solid transparent;
|
||||
background-color: transparent;
|
||||
color: var(--menu-foreground-color-disabled);
|
||||
}
|
||||
.code-lang-option {
|
||||
@include tabTitleTipography;
|
||||
@include uppercaseTitleTipography;
|
||||
width: $s-72;
|
||||
height: $s-32;
|
||||
padding: $s-8;
|
||||
|
|
|
|||
|
|
@ -94,7 +94,7 @@
|
|||
|
||||
.export-btn {
|
||||
@extend .button-secondary;
|
||||
@include tabTitleTipography;
|
||||
@include uppercaseTitleTipography;
|
||||
height: $s-32;
|
||||
width: $s-252;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@
|
|||
}
|
||||
|
||||
.layer-title {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
@include text-ellipsis;
|
||||
height: $s-32;
|
||||
padding: $s-8 0;
|
||||
|
|
@ -75,7 +75,7 @@
|
|||
}
|
||||
|
||||
.placeholder-label {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
text-align: center;
|
||||
width: $s-200;
|
||||
color: var(--empty-message-foreground-color);
|
||||
|
|
@ -83,7 +83,7 @@
|
|||
|
||||
.more-info-btn {
|
||||
@extend .button-secondary;
|
||||
@include tabTitleTipography;
|
||||
@include uppercaseTitleTipography;
|
||||
height: $s-32;
|
||||
padding: $s-8 $s-24;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
@use "common/refactor/common-refactor.scss" as *;
|
||||
|
||||
.view-options {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
.dropdown-title {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
flex-grow: 1;
|
||||
color: var(--input-foreground-color-active);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
}
|
||||
|
||||
.modal-title {
|
||||
@include tabTitleTipography;
|
||||
@include uppercaseTitleTipography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
|
||||
.modal-content {
|
||||
@include flexColumn;
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
gap: $s-24;
|
||||
max-height: $s-400;
|
||||
width: $s-368;
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
}
|
||||
|
||||
.share-link-title {
|
||||
@include tabTitleTipography;
|
||||
@include uppercaseTitleTipography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
}
|
||||
|
||||
.modal-content {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
@include flexColumn;
|
||||
gap: $s-24;
|
||||
}
|
||||
|
|
@ -86,7 +86,7 @@
|
|||
}
|
||||
|
||||
.description {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
color: var(--modal-text-foreground-color);
|
||||
margin-bottom: $s-24;
|
||||
}
|
||||
|
|
@ -115,7 +115,7 @@
|
|||
|
||||
.manage-permissions {
|
||||
@include buttonStyle;
|
||||
@include tabTitleTipography;
|
||||
@include uppercaseTitleTipography;
|
||||
color: var(--menu-foreground-color-rest);
|
||||
height: $s-32;
|
||||
display: flex;
|
||||
|
|
@ -181,7 +181,7 @@
|
|||
}
|
||||
.count-pages,
|
||||
.current-tag {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
color: var(--input-foreground-color);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@
|
|||
}
|
||||
|
||||
.counter {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
color: var(--viewer-thumbnails-control-foreground-color);
|
||||
}
|
||||
|
||||
|
|
@ -142,7 +142,7 @@
|
|||
}
|
||||
|
||||
.thumbnail-info {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
@include textEllipsis;
|
||||
text-align: center;
|
||||
color: var(--viewer-thumbnails-control-foreground-color);
|
||||
|
|
|
|||
|
|
@ -97,6 +97,6 @@
|
|||
}
|
||||
|
||||
.color-palette-empty {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
color: var(--palette-text-color);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@
|
|||
.option-wrapper {
|
||||
width: 100%;
|
||||
.library-name {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
color: var(--context-menu-foreground-color);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr $s-24;
|
||||
|
|
|
|||
|
|
@ -108,7 +108,7 @@
|
|||
}
|
||||
|
||||
.accept-color {
|
||||
@include tabTitleTipography;
|
||||
@include uppercaseTitleTipography;
|
||||
@extend .button-secondary;
|
||||
width: 100%;
|
||||
height: $s-32;
|
||||
|
|
@ -161,7 +161,7 @@
|
|||
|
||||
.choose-image {
|
||||
@extend .button-secondary;
|
||||
@include tabTitleTipography;
|
||||
@include uppercaseTitleTipography;
|
||||
width: 100%;
|
||||
margin-top: $s-12;
|
||||
height: $s-32;
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
}
|
||||
|
||||
.hsva-selector-label {
|
||||
@include tabTitleTipography;
|
||||
@include uppercaseTitleTipography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
|
||||
.comments-section-title {
|
||||
@include flexCenter;
|
||||
@include tabTitleTipography;
|
||||
@include uppercaseTitleTipography;
|
||||
position: relative;
|
||||
height: $s-32;
|
||||
min-height: $s-32;
|
||||
|
|
@ -96,7 +96,7 @@
|
|||
}
|
||||
}
|
||||
.label {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
}
|
||||
&:hover {
|
||||
.icon svg {
|
||||
|
|
@ -150,7 +150,7 @@
|
|||
}
|
||||
|
||||
.placeholder-label {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
text-align: center;
|
||||
width: $s-184;
|
||||
color: var(--empty-message-foreground-color);
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@
|
|||
cursor: pointer;
|
||||
|
||||
.title {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
color: var(--menu-foreground-color);
|
||||
}
|
||||
.shortcut {
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
gap: $s-2;
|
||||
color: var(--menu-shortcut-foreground-color);
|
||||
.shortcut-key {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
@include flexCenter;
|
||||
height: $s-20;
|
||||
padding: $s-2 $s-6;
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@
|
|||
|
||||
.project-name,
|
||||
.file-name {
|
||||
@include tabTitleTipography;
|
||||
@include uppercaseTitleTipography;
|
||||
@include textEllipsis;
|
||||
height: $s-16;
|
||||
width: 100%;
|
||||
|
|
@ -47,7 +47,7 @@
|
|||
}
|
||||
|
||||
.file-name {
|
||||
@include medTitleTipography;
|
||||
@include smallTitleTipography;
|
||||
text-transform: none;
|
||||
color: var(--title-foreground-color-hover);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -85,7 +85,7 @@
|
|||
.item-publish,
|
||||
.item-unpublish {
|
||||
@extend .button-primary;
|
||||
@include tabTitleTipography;
|
||||
@include uppercaseTitleTipography;
|
||||
height: $s-32;
|
||||
min-width: $s-92;
|
||||
padding: $s-8 $s-24;
|
||||
|
|
@ -308,7 +308,7 @@
|
|||
justify-content: flex-end;
|
||||
.primary-button {
|
||||
@extend .button-primary;
|
||||
@include tabTitleTipography;
|
||||
@include uppercaseTitleTipography;
|
||||
padding: $s-0 $s-16;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@
|
|||
width: $s-48;
|
||||
border-radius: $br-8;
|
||||
.label {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
color: var(--button-tertiary-foreground-color-rest);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
.libraries-button {
|
||||
@extend .button-secondary;
|
||||
@include tabTitleTipography;
|
||||
@include uppercaseTitleTipography;
|
||||
gap: $s-2;
|
||||
height: $s-32;
|
||||
width: 100%;
|
||||
|
|
@ -113,7 +113,7 @@
|
|||
}
|
||||
|
||||
.section-item {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@
|
|||
border: $s-1 solid var(--input-border-color-focus);
|
||||
input.element-name {
|
||||
@include textEllipsis;
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
@include removeInputStyle;
|
||||
flex-grow: 1;
|
||||
height: $s-28;
|
||||
|
|
@ -67,7 +67,7 @@
|
|||
}
|
||||
|
||||
.name-block {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
margin: 0;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
@import "refactor/common-refactor.scss";
|
||||
|
||||
.title-name {
|
||||
@include tabTitleTipography;
|
||||
@include uppercaseTitleTipography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
cursor: pointer;
|
||||
|
||||
.cell-name {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
@include textEllipsis;
|
||||
display: none;
|
||||
position: absolute;
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
color: var(--assets-item-name-foreground-color);
|
||||
input {
|
||||
@include textEllipsis;
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
@include removeInputStyle;
|
||||
height: auto;
|
||||
padding: 0;
|
||||
|
|
@ -132,13 +132,13 @@
|
|||
}
|
||||
|
||||
.item-name {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
@include textEllipsis;
|
||||
order: 2;
|
||||
color: var(--assets-item-name-foreground-color);
|
||||
input {
|
||||
@include textEllipsis;
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
@include removeInputStyle;
|
||||
height: $s-32;
|
||||
padding: $s-4;
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
}
|
||||
|
||||
.file-name {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
|
@ -71,6 +71,6 @@
|
|||
}
|
||||
|
||||
.no-found-text {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
color: var(--not-found-foreground-color);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@
|
|||
height: 10vh;
|
||||
}
|
||||
.cell-name {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
@include textEllipsis;
|
||||
display: none;
|
||||
position: absolute;
|
||||
|
|
@ -110,7 +110,7 @@
|
|||
}
|
||||
|
||||
.item-name {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
@include textEllipsis;
|
||||
padding-left: $s-8;
|
||||
color: var(--assets-item-name-foreground-color);
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@
|
|||
}
|
||||
|
||||
.modal-title {
|
||||
@include tabTitleTipography;
|
||||
@include uppercaseTitleTipography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
.modal-close-btn {
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
}
|
||||
|
||||
.modal-content {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
margin-bottom: $s-24;
|
||||
}
|
||||
.input-wrapper {
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
|
||||
.panel-title {
|
||||
@include flexCenter;
|
||||
@include tabTitleTipography;
|
||||
@include uppercaseTitleTipography;
|
||||
position: relative;
|
||||
height: $s-32;
|
||||
min-height: $s-32;
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
|
||||
.shape-info-title {
|
||||
@include flexCenter;
|
||||
@include tabTitleTipography;
|
||||
@include uppercaseTitleTipography;
|
||||
position: relative;
|
||||
height: $s-32;
|
||||
min-height: $s-32;
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
|
||||
.history-toolbox-title {
|
||||
@include flexCenter;
|
||||
@include tabTitleTipography;
|
||||
@include uppercaseTitleTipography;
|
||||
position: relative;
|
||||
height: $s-32;
|
||||
min-height: $s-32;
|
||||
|
|
@ -59,7 +59,7 @@
|
|||
}
|
||||
|
||||
.history-entry-empty-msg {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
color: var(--empty-message-foreground-color);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
.element-name {
|
||||
@include textEllipsis;
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
flex-grow: 1;
|
||||
color: var(--context-hover-color, var(--layer-row-foreground-color));
|
||||
&.selected {
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
}
|
||||
.element-name-input {
|
||||
@include textEllipsis;
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
@include removeInputStyle;
|
||||
flex-grow: 1;
|
||||
height: $s-28;
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@
|
|||
}
|
||||
|
||||
.page-name {
|
||||
@include tabTitleTipography;
|
||||
@include uppercaseTitleTipography;
|
||||
padding: 0 $s-12;
|
||||
color: var(--title-foreground-color);
|
||||
}
|
||||
|
|
@ -108,7 +108,7 @@
|
|||
}
|
||||
|
||||
.focus-name {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
|
|
@ -124,7 +124,7 @@
|
|||
|
||||
.focus-mode-tag {
|
||||
@include flexCenter;
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
height: $s-20;
|
||||
padding: $s-4 $s-6;
|
||||
border: $s-1 solid var(--tag-background-color);
|
||||
|
|
@ -160,7 +160,7 @@
|
|||
|
||||
.layer-filter-name {
|
||||
@include flexCenter;
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
color: var(--pill-foreground-color);
|
||||
}
|
||||
|
||||
|
|
@ -170,7 +170,7 @@
|
|||
left: $s-12;
|
||||
width: $s-192;
|
||||
.filter-menu-item {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@
|
|||
}
|
||||
}
|
||||
.label {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -35,6 +35,6 @@
|
|||
|
||||
.more-colors-btn {
|
||||
@extend .button-secondary;
|
||||
@include tabTitleTipography;
|
||||
@include uppercaseTitleTipography;
|
||||
height: $s-32;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
}
|
||||
|
||||
.title-back {
|
||||
@include tabTitleTipography;
|
||||
@include uppercaseTitleTipography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $s-4;
|
||||
|
|
@ -87,7 +87,7 @@
|
|||
}
|
||||
|
||||
.component-name {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
@include textEllipsis;
|
||||
direction: rtl;
|
||||
text-align: left;
|
||||
|
|
@ -95,7 +95,7 @@
|
|||
}
|
||||
|
||||
.component-parent-name {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
@include textEllipsis;
|
||||
direction: rtl;
|
||||
text-align: left;
|
||||
|
|
@ -134,7 +134,7 @@
|
|||
}
|
||||
|
||||
.copy-text {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -235,7 +235,7 @@
|
|||
}
|
||||
|
||||
.path-name {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
@include textEllipsis;
|
||||
direction: rtl;
|
||||
height: $s-32;
|
||||
|
|
@ -243,7 +243,7 @@
|
|||
}
|
||||
|
||||
.path-name-last {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
@include textEllipsis;
|
||||
height: $s-32;
|
||||
padding: $s-8 0 $s-8 $s-2;
|
||||
|
|
@ -251,7 +251,7 @@
|
|||
}
|
||||
|
||||
.component-list-empty {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
margin: 0 $s-4 0 $s-8;
|
||||
color: $df-secondary;
|
||||
}
|
||||
|
|
@ -337,7 +337,7 @@
|
|||
object-fit: contain;
|
||||
}
|
||||
.component-name {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
@include textEllipsis;
|
||||
display: none;
|
||||
position: absolute;
|
||||
|
|
@ -383,7 +383,7 @@
|
|||
}
|
||||
|
||||
.element-set-title {
|
||||
@include tabTitleTipography;
|
||||
@include uppercaseTitleTipography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: $s-32;
|
||||
|
|
@ -422,7 +422,7 @@
|
|||
}
|
||||
|
||||
.library-name {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
@include textEllipsis;
|
||||
color: var(--title-foreground-color);
|
||||
padding: $s-8 0 $s-8 $s-2;
|
||||
|
|
@ -443,7 +443,7 @@
|
|||
}
|
||||
|
||||
.component-group {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr $s-12;
|
||||
height: $s-32;
|
||||
|
|
@ -486,7 +486,7 @@
|
|||
// Component annotation
|
||||
|
||||
.component-annotation {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
color: var(--entry-foreground-color);
|
||||
border-radius: $br-8;
|
||||
|
||||
|
|
@ -604,7 +604,7 @@
|
|||
}
|
||||
|
||||
.counter {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
text-align: right;
|
||||
color: var(--entry-foreground-color);
|
||||
margin: 0 $s-8 $s-8 0;
|
||||
|
|
|
|||
|
|
@ -134,7 +134,7 @@
|
|||
}
|
||||
|
||||
label {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $s-2;
|
||||
|
|
|
|||
|
|
@ -96,7 +96,7 @@
|
|||
|
||||
.export-btn {
|
||||
@extend .button-secondary;
|
||||
@include tabTitleTipography;
|
||||
@include uppercaseTitleTipography;
|
||||
height: $s-32;
|
||||
width: $s-252;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
|
||||
.edit-grid-btn {
|
||||
@extend .button-secondary;
|
||||
@include tabTitleTipography;
|
||||
@include uppercaseTitleTipography;
|
||||
width: 100%;
|
||||
padding: $s-8;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -55,12 +55,12 @@
|
|||
}
|
||||
|
||||
.after {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
margin-top: $s-1;
|
||||
}
|
||||
|
||||
.interactions-help {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
text-align: center;
|
||||
color: var(--title-foreground-color);
|
||||
}
|
||||
|
|
@ -120,7 +120,7 @@
|
|||
}
|
||||
.interaction-name {
|
||||
@include twoLineTextEllipsis;
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
padding-left: $s-4;
|
||||
width: $s-92;
|
||||
margin: auto 0;
|
||||
|
|
@ -287,7 +287,7 @@
|
|||
}
|
||||
|
||||
.flow-name-wrapper {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
@include focusInput;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -324,7 +324,7 @@
|
|||
}
|
||||
|
||||
.flow-input-wrapper {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: $s-28;
|
||||
|
|
|
|||
|
|
@ -176,14 +176,14 @@
|
|||
|
||||
.edit-mode-btn {
|
||||
@extend .button-secondary;
|
||||
@include tabTitleTipography;
|
||||
@include uppercaseTitleTipography;
|
||||
width: 100%;
|
||||
padding: $s-8;
|
||||
}
|
||||
|
||||
.exit-btn {
|
||||
@extend .button-secondary;
|
||||
@include tabTitleTipography;
|
||||
@include uppercaseTitleTipography;
|
||||
padding: $s-8 $s-20;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@
|
|||
}
|
||||
|
||||
.select-name {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
}
|
||||
|
||||
.attr-name {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
@include twoLineTextEllipsis;
|
||||
width: $s-88;
|
||||
margin: auto $s-4;
|
||||
|
|
@ -60,7 +60,7 @@
|
|||
}
|
||||
|
||||
.attr-title {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
font-size: $fs-10;
|
||||
text-transform: uppercase;
|
||||
margin-inline-start: $s-4;
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@
|
|||
}
|
||||
|
||||
.multiple-text {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
flex-grow: 1;
|
||||
color: var(--input-foreground-color-active);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@
|
|||
|
||||
.typography-name,
|
||||
.typography-font {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
@include textEllipsis;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -90,7 +90,7 @@
|
|||
}
|
||||
|
||||
.font-name-wrapper {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: $s-32;
|
||||
|
|
@ -169,7 +169,7 @@
|
|||
color: var(--assets-item-name-foreground-color-hover);
|
||||
}
|
||||
.typography-name {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
@include textEllipsis;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -178,7 +178,7 @@
|
|||
color: var(--assets-item-name-foreground-color-hover);
|
||||
}
|
||||
.typography-font {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
@include textEllipsis;
|
||||
margin-left: $s-6;
|
||||
display: flex;
|
||||
|
|
@ -207,14 +207,14 @@
|
|||
--calcualted-width: calc(var(--width) - $s-48);
|
||||
padding-left: $s-2;
|
||||
.info-label {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
@include textEllipsis;
|
||||
width: calc(var(--calcualted-width) / 2);
|
||||
padding-top: $s-8;
|
||||
color: var(--assets-item-name-foreground-color);
|
||||
}
|
||||
.info-content {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
@include textEllipsis;
|
||||
padding-top: $s-8;
|
||||
width: calc(var(--calcualted-width) / 2);
|
||||
|
|
@ -223,7 +223,7 @@
|
|||
}
|
||||
|
||||
.link-btn {
|
||||
@include tabTitleTipography;
|
||||
@include uppercaseTitleTipography;
|
||||
@extend .button-secondary;
|
||||
width: 100%;
|
||||
height: $s-32;
|
||||
|
|
@ -254,7 +254,7 @@
|
|||
position: relative;
|
||||
}
|
||||
.font-option {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
@extend .asset-element;
|
||||
padding: $s-8 0 $s-8 $s-8;
|
||||
cursor: pointer;
|
||||
|
|
@ -277,7 +277,7 @@
|
|||
gap: $s-4;
|
||||
.font-size-options {
|
||||
@extend .asset-element;
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
flex-grow: 1;
|
||||
width: $s-60;
|
||||
margin: 0;
|
||||
|
|
@ -331,7 +331,7 @@
|
|||
|
||||
.font-size-select {
|
||||
@include removeInputStyle;
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
height: $s-32;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
|
@ -373,7 +373,7 @@
|
|||
display: grid;
|
||||
row-gap: $s-2;
|
||||
.title {
|
||||
@include tabTitleTipography;
|
||||
@include uppercaseTitleTipography;
|
||||
color: var(--title-foreground-color);
|
||||
margin: 0;
|
||||
padding: $s-12;
|
||||
|
|
@ -410,7 +410,7 @@
|
|||
}
|
||||
|
||||
.label {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@
|
|||
}
|
||||
}
|
||||
.color-name {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
@include textEllipsis;
|
||||
padding-inline: $s-6;
|
||||
border-radius: $br-8;
|
||||
|
|
@ -80,7 +80,7 @@
|
|||
stroke: var(--detach-icon-foreground-color);
|
||||
}
|
||||
.color-input-wrapper {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: $s-28;
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@
|
|||
|
||||
.shortcuts-header {
|
||||
@include flexCenter;
|
||||
@include tabTitleTipography;
|
||||
@include uppercaseTitleTipography;
|
||||
position: relative;
|
||||
height: $s-32;
|
||||
padding: $s-2 $s-2 $s-2 0;
|
||||
|
|
@ -112,7 +112,7 @@
|
|||
}
|
||||
|
||||
.not-found {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
color: var(--empty-message-foreground-color);
|
||||
margin: $s-12;
|
||||
}
|
||||
|
|
@ -128,7 +128,7 @@
|
|||
|
||||
.section-title,
|
||||
.subsection-title {
|
||||
@include tabTitleTipography;
|
||||
@include uppercaseTitleTipography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
|
|
@ -181,7 +181,7 @@
|
|||
background-color: var(--pill-background-color);
|
||||
|
||||
.command-name {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
margin-left: $s-2;
|
||||
color: var(--pill-foreground-color);
|
||||
}
|
||||
|
|
@ -191,7 +191,7 @@
|
|||
color: var(--pill-foreground-color);
|
||||
|
||||
.key {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
@include flexCenter;
|
||||
text-transform: capitalize;
|
||||
height: $s-20;
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@
|
|||
|
||||
.view-only-mode {
|
||||
@include flexCenter;
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
height: $s-20;
|
||||
padding: $s-4 $s-6;
|
||||
margin-right: $s-12;
|
||||
|
|
@ -75,7 +75,7 @@
|
|||
}
|
||||
|
||||
.page-element {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
min-height: $s-32;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
|
|
@ -139,7 +139,7 @@
|
|||
}
|
||||
input.element-name {
|
||||
@include textEllipsis;
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
@include removeInputStyle;
|
||||
flex-grow: 1;
|
||||
height: $s-28;
|
||||
|
|
|
|||
|
|
@ -80,7 +80,7 @@
|
|||
}
|
||||
|
||||
.typography-item {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
|
@ -135,6 +135,6 @@
|
|||
}
|
||||
|
||||
.text-palette-empty {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
color: var(--palette-text-color);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
margin-bottom: 0;
|
||||
}
|
||||
.library-name {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
color: var(--context-menu-foreground-color);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr $s-24;
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
cursor: pointer;
|
||||
display: flex;
|
||||
.content {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: $s-24;
|
||||
|
|
|
|||
|
|
@ -4768,10 +4768,6 @@ msgstr "InVision"
|
|||
msgid "questions.leave-feedback-for-my-team-project"
|
||||
msgstr "Zanechte zpětnou vazbu pro můj týmový projekt"
|
||||
|
||||
#: src/app/main/ui/onboarding/questions.cljs
|
||||
msgid "questions.never-used-a-tool"
|
||||
msgstr "Nikdy jsem nepoužil žádný designový nástroj"
|
||||
|
||||
#: src/app/main/ui/onboarding/questions.cljs
|
||||
msgid "questions.next"
|
||||
msgstr "Další"
|
||||
|
|
|
|||
|
|
@ -4990,10 +4990,6 @@ msgstr[1] "Sie sind in keiner Datei aktiviert."
|
|||
msgid "questions.other"
|
||||
msgstr "Sonstiges (bitte angeben)"
|
||||
|
||||
#: src/app/main/ui/onboarding/questions.cljs
|
||||
msgid "questions.never-used-a-tool"
|
||||
msgstr "Ich habe noch nie ein Design-Tool verwendet"
|
||||
|
||||
#: src/app/main/ui/onboarding/questions.cljs
|
||||
msgid "questions.test-penpot-to-see-if-its-a-fit-for-team"
|
||||
msgstr "Testen Sie Penpot, um zu sehen, ob es für das Team geeignet ist "
|
||||
|
|
|
|||
|
|
@ -2306,6 +2306,9 @@ msgstr "Want to receive Penpot news?"
|
|||
msgid "onboarding.team-modal.create-team"
|
||||
msgstr "Create a team"
|
||||
|
||||
msgid "onboarding.team-modal.team-definition"
|
||||
msgstr "What's a team?"
|
||||
|
||||
msgid "onboarding.team-modal.create-team-desc"
|
||||
msgstr ""
|
||||
"A team allows you to collaborate with other Penpot users working in the "
|
||||
|
|
@ -2428,8 +2431,8 @@ msgid "questions.more-than-50"
|
|||
msgstr "More than 50"
|
||||
|
||||
#: src/app/main/ui/onboarding/questions.cljs
|
||||
msgid "questions.never-used-a-tool"
|
||||
msgstr "I've never used a design tool before"
|
||||
msgid "questions.never-used-one"
|
||||
msgstr "None"
|
||||
|
||||
#: src/app/main/ui/onboarding/questions.cljs
|
||||
msgid "questions.next"
|
||||
|
|
|
|||
|
|
@ -2346,6 +2346,9 @@ msgstr "¿Quieres recibir noticias sobre Penpot?"
|
|||
msgid "onboarding.team-modal.create-team"
|
||||
msgstr "Crea un equipo"
|
||||
|
||||
msgid "onboarding.team-modal.team-definition"
|
||||
msgstr "¿Qué es un equipo?"
|
||||
|
||||
msgid "onboarding.team-modal.create-team-desc"
|
||||
msgstr ""
|
||||
"Un equipo permite colaborar en Penpot trabajando en los mismos archivos y "
|
||||
|
|
@ -2468,8 +2471,8 @@ msgid "questions.more-than-50"
|
|||
msgstr "Más de 50"
|
||||
|
||||
#: src/app/main/ui/onboarding/questions.cljs
|
||||
msgid "questions.never-used-a-tool"
|
||||
msgstr "Nunca antes he usado una herramienta de diseño"
|
||||
msgid "questions.never-used-one"
|
||||
msgstr "Ninguna"
|
||||
|
||||
#: src/app/main/ui/onboarding/questions.cljs
|
||||
msgid "questions.next"
|
||||
|
|
|
|||
|
|
@ -4909,10 +4909,6 @@ msgstr "Sortie de la souris"
|
|||
msgid "workspace.assets.typography.text-styles"
|
||||
msgstr "Styles de texte"
|
||||
|
||||
#: src/app/main/ui/onboarding/questions.cljs
|
||||
msgid "questions.never-used-a-tool"
|
||||
msgstr "Je n'ai jamais utilisé d'outil de design avant"
|
||||
|
||||
#: src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs
|
||||
msgid "workspace.options.stroke-cap.circle-marker"
|
||||
msgstr "Marqueur cercle"
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Reference in a new issue