Browse Source

Polishes SVGs on Welcome

Replaces "path" icons with codicons or glicons
main
Eric Amodio 1 year ago
parent
commit
798a64dba6
2 changed files with 50 additions and 95 deletions
  1. +31
    -76
      src/webviews/apps/welcome/welcome.html
  2. +19
    -19
      src/webviews/apps/welcome/welcome.scss

+ 31
- 76
src/webviews/apps/welcome/welcome.html View File

@ -68,15 +68,15 @@
xmlns="http://www.w3.org/2000/svg"
>
<rect width="340" height="177" rx="3"></rect>
<text x="9" y="41" text-anchor="start"><tspan class="hover__codicon" font-size="32">&#xeb99;</tspan></text>
<text x="9" y="41" text-anchor="start"><tspan class="codicon" font-size="32">&#xeb99;</tspan></text>
<text>
<tspan class="hover__author hover__link" x="47" y="23">You</tspan><tspan>, 6 years ago via PR&nbsp;</tspan><tspan class="hover__author hover__link">#1</tspan><tspan class="hover__date" dx="9">(November 12th, 2016 3:41pm)</tspan><tspan x="47" y="57">Supercharge Git</tspan>
<tspan class="hover__author hover__link" x="47" y="30">You</tspan><tspan>, 6 years ago via PR&nbsp;</tspan><tspan class="hover__author hover__link">#1</tspan><tspan class="hover__date" dx="9">(November 12th, 2016 3:41pm)</tspan><tspan x="47" y="55">Supercharge Git</tspan>
</text>
<line x1="0" y1="70" x2="341" y2="70" />
<text y="89">
<tspan x="9" dy="1.5" class="hover__codicon hover__link">&#xeafc;</tspan><tspan dx="2" dy="-1.5" class="hover__link">29ad3a0</tspan><tspan dx="9" opacity="0.6">|</tspan><tspan dx="9" dy="1.5" class="hover__codicon hover__link">&#xeafd;</tspan><tspan dx="9" dy="-1.5" opacity="0.6">|</tspan><tspan dx="9" dy="1.5" class="hover__codicon hover__link">&#xea82;</tspan><tspan dx="9" dy="-1.5" opacity="0.6">|</tspan><tspan dx="9" dy="1.5" class="hover__codicon hover__link">&#xeb01;</tspan><tspan dx="9" dy="-1.5" opacity="0.6">|</tspan><tspan dx="9" dy="1.5" class="hover__codicon hover__link">&#xea7c;</tspan>
<tspan x="9" dy="1.5" class="codicon hover__link">&#xeafc;</tspan><tspan dx="2" dy="-1.5" class="hover__link">29ad3a0</tspan><tspan dx="9" opacity="0.6">|</tspan><tspan dx="9" dy="1.5" class="codicon hover__link">&#xeafd;</tspan><tspan dx="9" dy="-1.5" opacity="0.6">|</tspan><tspan dx="9" dy="1.5" class="codicon hover__link">&#xea82;</tspan><tspan dx="9" dy="-1.5" opacity="0.6">|</tspan><tspan dx="9" dy="1.5" class="codicon hover__link">&#xeb01;</tspan><tspan dx="9" dy="-1.5" opacity="0.6">|</tspan><tspan dx="9" dy="1.5" class="codicon hover__link">&#xea7c;</tspan>
</text>
<line x1="0" y1="99" x2="341" y2="99" />
@ -89,7 +89,7 @@
<line x1="0" y1="147" x2="341" y2="147" />
<text y="166">
<tspan x="9">Changes</tspan><tspan dx="12" dy="1.5" class="hover__codicon hover__link">&#xeafc;</tspan><tspan dx="2" dy="-1.5" class="hover__link">3ac1d3f</tspan><tspan dx="9" dy="1.5" class="hover__codicon">&#xea99;</tspan><tspan dx="6" class="hover__codicon hover__link">&#xeafc;</tspan><tspan dx="2" dy="-1.5" class="hover__link">29ad3a0</tspan><tspan dx="9" opacity="0.6">|</tspan><tspan dx="9" dy="1.5" class="hover__codicon hover__link">&#xeafd;</tspan>
<tspan x="9">Changes</tspan><tspan dx="12" dy="1.5" class="codicon hover__link">&#xeafc;</tspan><tspan dx="2" dy="-1.5" class="hover__link">3ac1d3f</tspan><tspan dx="9" dy="1.5" class="codicon">&#xea99;</tspan><tspan dx="6" class="codicon hover__link">&#xeafc;</tspan><tspan dx="2" dy="-1.5" class="hover__link">29ad3a0</tspan><tspan dx="9" opacity="0.6">|</tspan><tspan dx="9" dy="1.5" class="codicon hover__link">&#xeafd;</tspan>
</text>
</svg>
@ -130,32 +130,22 @@
<h3>File Annotations</h3>
<p class="welcome__toolbar">
<span>On-demand whole file annotations to see authorship, recent changes, and a heatmap</span>
<!-- Don't reformat or let prettier reformat the SVG otherwise whitespace will get added incorrect and screw up the positioning -->
<!-- prettier-ignore -->
<svg
class="toolbar"
width="143"
height="16"
viewBox="0 0 143 16"
height="20"
viewBox="0 -2 143 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g class="toolbar-icon inactive">
<path
d="M5.2747 7.5C5.5256 4.9733 7.6573 3 10.25 3C12.8427 3 14.9745 4.9733 15.2253 7.5H16V8.5H15.2253C14.9745 11.0267 12.8427 13 10.25 13C7.6573 13 5.5255 11.0267 5.2747 8.5H1.5642L4 10.9358L3.2929 11.6429L0 8.35V7.6429L3.2929 4.35L4 5.0571L1.5607 7.4964V7.5H5.2747ZM10.25 4C8.0409 4 6.25 5.7909 6.25 8C6.25 10.2091 8.0409 12 10.25 12C12.4591 12 14.25 10.2091 14.25 8C14.25 5.7909 12.4591 4 10.25 4Z"
/>
<path
d="M34.5 13C31.9073 13 29.7755 11.0267 29.5247 8.5H27V7.5H29.5247C29.7755 4.9733 31.9073 3 34.5 3C37.0927 3 39.2245 4.9733 39.4753 7.5H42V8.5H39.4753C39.2245 11.0267 37.0927 13 34.5 13ZM30.5 8C30.5 10.2091 32.2909 12 34.5 12C36.7091 12 38.5 10.2091 38.5 8C38.5 5.7909 36.7091 4 34.5 4C32.2909 4 30.5 5.7909 30.5 8Z"
/>
<path
d="M63.7253 7.5C63.4744 4.9733 61.3427 3 58.75 3C56.1573 3 54.0256 4.9733 53.7747 7.5H53V8.5H53.7747C54.0256 11.0267 56.1573 13 58.75 13C61.3427 13 63.4745 11.0267 63.7253 8.5H67.4358L65 10.9358L65.7071 11.6429L69 8.35V7.6429L65.7071 4.35L65 5.0571L67.4393 7.4964V7.5H63.7253ZM58.75 4C60.9591 4 62.75 5.7909 62.75 8C62.75 10.2091 60.9591 12 58.75 12C56.5409 12 54.75 10.2091 54.75 8C54.75 5.7909 56.5409 4 58.75 4Z"
/>
</g>
<text y="16" class="toolbar-icon">
<tspan class="glicon inactive">&#xf105;</tspan><tspan dx="9" class="glicon inactive">&#xf101;</tspan><tspan dx="9" class="glicon inactive">&#xf103;</tspan><tspan dx="32" class="codicon inactive">&#xeb56;</tspan><tspan dx="9" class="codicon inactive">&#xea7c;</tspan>
</text>
<g class="toolbar-icon toolbar-icon__annotations">
<path
d="M95.5 8C95.5 12.1421 92.1421 15.5 88 15.5C83.8579 15.5 80.5 12.1421 80.5 8C80.5 3.85786 83.8579 0.5 88 0.5C92.1421 0.5 95.5 3.85786 95.5 8Z"
></path>
<path
d="M89.2583 4.71315C89.4119 4.44544 89.4999 4.13329 89.4999 3.79998C89.4999 2.80588 88.7165 2 87.75 2C86.7835 2 86 2.80588 86 3.79998C86 4.62503 86.5397 5.32043 87.2757 5.53309V10.4669C86.5397 10.6796 86 11.375 86 12.2C86 13.1941 86.7835 14 87.75 14C88.7165 14 89.4999 13.1941 89.4999 12.2C89.4999 11.3747 88.96 10.6792 88.2236 10.4667V5.53326C88.3465 5.49782 88.4638 5.44893 88.5741 5.38824L90.2151 7.07621C90.1305 7.26617 90.0834 7.47746 90.0834 7.70007C90.0834 8.52849 90.7363 9.20005 91.5417 9.20005C92.3471 9.20005 93 8.52849 93 7.70007C93 6.87165 92.3471 6.20008 91.5417 6.20008C91.2988 6.20008 91.0697 6.26117 90.8683 6.36922L89.2583 4.71315Z"
/>
<circle cx="83" cy="8" r="7.5"/>
<path d="M84.2583 4.71315C84.4119 4.44544 84.4999 4.13329 84.4999 3.79998C84.4999 2.80588 83.7165 2 82.75 2C81.7835 2 81 2.80588 81 3.79998C81 4.62503 81.5397 5.32043 82.2757 5.53309V10.4669C81.5397 10.6796 81 11.375 81 12.2C81 13.1941 81.7835 14 82.75 14C83.7165 14 84.4999 13.1941 84.4999 12.2C84.4999 11.3747 83.96 10.6792 83.2236 10.4667V5.53326C83.3465 5.49782 83.4638 5.44893 83.5741 5.38824L85.2151 7.07621C85.1305 7.26617 85.0834 7.47746 85.0834 7.70007C85.0834 8.52849 85.7363 9.20005 86.5417 9.20005C87.3471 9.20005 88 8.52849 88 7.70007C88 6.87165 87.3471 6.20008 86.5417 6.20008C86.2988 6.20008 86.0697 6.26117 85.8683 6.36922L84.2583 4.71315Z"/>
</g>
<rect
class="toolbar-icon__interactive"
@ -167,14 +157,6 @@
fill="transparent"
stroke="none"
></rect>
<g class="toolbar-icon inactive">
<path
d="M119 1.5H108L107 2.5V13.5L108 14.5H119L120 13.5V2.5L119 1.5ZM113 13.5H108V2.5H113V13.5ZM119 13.5H114V2.5H119V13.5Z"
/>
<path
d="M133 8C133 8.2652 132.895 8.5196 132.707 8.7071C132.52 8.8946 132.265 9 132 9C131.735 9 131.48 8.8946 131.293 8.7071C131.105 8.5196 131 8.2652 131 8C131 7.7348 131.105 7.4804 131.293 7.2929C131.48 7.1054 131.735 7 132 7C132.265 7 132.52 7.1054 132.707 7.2929C132.895 7.4804 133 7.7348 133 8ZM138 8C138 8.2652 137.895 8.5196 137.707 8.7071C137.52 8.8946 137.265 9 137 9C136.735 9 136.48 8.8946 136.293 8.7071C136.105 8.5196 136 8.2652 136 8C136 7.7348 136.105 7.4804 136.293 7.2929C136.48 7.1054 136.735 7 137 7C137.265 7 137.52 7.1054 137.707 7.2929C137.895 7.4804 138 7.7348 138 8ZM143 8C143 8.2652 142.895 8.5196 142.707 8.7071C142.52 8.8946 142.265 9 142 9C141.735 9 141.48 8.8946 141.293 8.7071C141.105 8.5196 141 8.2652 141 8C141 7.7348 141.105 7.4804 141.293 7.2929C141.48 7.1054 141.735 7 142 7C142.265 7 142.52 7.1054 142.707 7.2929C142.895 7.4804 143 7.7348 143 8Z"
/>
</g>
</svg>
</p>
@ -220,6 +202,8 @@
<h3>Revision Navigation</h3>
<p class="welcome__toolbar">
<span>Effortlessly explore the history of a file to see how the code evolved over time</span>
<!-- Don't reformat or let prettier reformat the SVG otherwise whitespace will get added incorrect and screw up the positioning -->
<!-- prettier-ignore -->
<svg
class="toolbar"
width="147"
@ -236,20 +220,13 @@
height="calc(100% + 4px)"
rx="4"
/>
<g class="toolbar-icon toolbar-icon__revision">
<path
class="toolbar-icon active"
d="M5.2747 7.5C5.5256 4.9733 7.6573 3 10.25 3C12.8427 3 14.9745 4.9733 15.2253 7.5H16V8.5H15.2253C14.9745 11.0267 12.8427 13 10.25 13C7.6573 13 5.5255 11.0267 5.2747 8.5H1.5642L4 10.9358L3.2929 11.6429L0 8.35V7.6429L3.2929 4.35L4 5.0571L1.5607 7.4964V7.5H5.2747ZM10.25 4C8.0409 4 6.25 5.7909 6.25 8C6.25 10.2091 8.0409 12 10.25 12C12.4591 12 14.25 10.2091 14.25 8C14.25 5.7909 12.4591 4 10.25 4Z"
/>
</g>
<g class="toolbar-icon">
<path
d="M34.5 13C31.9073 13 29.7755 11.0267 29.5247 8.5H27V7.5H29.5247C29.7755 4.9733 31.9073 3 34.5 3C37.0927 3 39.2245 4.9733 39.4753 7.5H42V8.5H39.4753C39.2245 11.0267 37.0927 13 34.5 13ZM30.5 8C30.5 10.2091 32.2909 12 34.5 12C36.7091 12 38.5 10.2091 38.5 8C38.5 5.7909 36.7091 4 34.5 4C32.2909 4 30.5 5.7909 30.5 8Z"
/>
<path
d="M63.7253 7.5C63.4744 4.9733 61.3427 3 58.75 3C56.1573 3 54.0256 4.9733 53.7747 7.5H53V8.5H53.7747C54.0256 11.0267 56.1573 13 58.75 13C61.3427 13 63.4745 11.0267 63.7253 8.5H67.4358L65 10.9358L65.7071 11.6429L69 8.35V7.6429L65.7071 4.35L65 5.0571L67.4393 7.4964V7.5H63.7253ZM58.75 4C60.9591 4 62.75 5.7909 62.75 8C62.75 10.2091 60.9591 12 58.75 12C56.5409 12 54.75 10.2091 54.75 8C54.75 5.7909 56.5409 4 58.75 4Z"
/>
</g>
<text y="16" class="toolbar-icon toolbar-icon__revision">
<tspan class="toolbar-icon__revision glicon">&#xf105;</tspan>
</text>
<text y="16" class="toolbar-icon">
<tspan dx="25" class="glicon inactive">&#xf101;</tspan><tspan dx="9" class="glicon inactive">&#xf103;</tspan><tspan dx="9" class="glicon inactive">&#xf113;</tspan><tspan dx="9" class="codicon inactive">&#xeb56;</tspan><tspan dx="9" class="codicon inactive">&#xea7c;</tspan>
</text>
<rect
class="toolbar-icon__interactive"
data-feature="revision"
@ -260,23 +237,6 @@
fill="transparent"
stroke="none"
></rect>
<g class="toolbar-icon toolbar-icon__annotations inactive">
<path
d="M95.5 8C95.5 12.1421 92.1421 15.5 88 15.5C83.8579 15.5 80.5 12.1421 80.5 8C80.5 3.85786 83.8579 0.5 88 0.5C92.1421 0.5 95.5 3.85786 95.5 8Z"
/>
<path
d="M89.2583 4.71315C89.4119 4.44544 89.4999 4.13329 89.4999 3.79998C89.4999 2.80588 88.7165 2 87.75 2C86.7835 2 86 2.80588 86 3.79998C86 4.62503 86.5397 5.32043 87.2757 5.53309V10.4669C86.5397 10.6796 86 11.375 86 12.2C86 13.1941 86.7835 14 87.75 14C88.7165 14 89.4999 13.1941 89.4999 12.2C89.4999 11.3747 88.96 10.6792 88.2236 10.4667V5.53326C88.3465 5.49782 88.4638 5.44893 88.5741 5.38824L90.2151 7.07621C90.1305 7.26617 90.0834 7.47746 90.0834 7.70007C90.0834 8.52849 90.7363 9.20005 91.5417 9.20005C92.3471 9.20005 93 8.52849 93 7.70007C93 6.87165 92.3471 6.20008 91.5417 6.20008C91.2988 6.20008 91.0697 6.26117 90.8683 6.36922L89.2583 4.71315Z"
/>
</g>
<g class="toolbar-icon inactive">
<path
d="M119 1.5H108L107 2.5V13.5L108 14.5H119L120 13.5V2.5L119 1.5ZM113 13.5H108V2.5H113V13.5ZM119 13.5H114V2.5H119V13.5Z"
/>
<path
d="M133 8C133 8.2652 132.895 8.5196 132.707 8.7071C132.52 8.8946 132.265 9 132 9C131.735 9 131.48 8.8946 131.293 8.7071C131.105 8.5196 131 8.2652 131 8C131 7.7348 131.105 7.4804 131.293 7.2929C131.48 7.1054 131.735 7 132 7C132.265 7 132.52 7.1054 132.707 7.2929C132.895 7.4804 133 7.7348 133 8ZM138 8C138 8.2652 137.895 8.5196 137.707 8.7071C137.52 8.8946 137.265 9 137 9C136.735 9 136.48 8.8946 136.293 8.7071C136.105 8.5196 136 8.2652 136 8C136 7.7348 136.105 7.4804 136.293 7.2929C136.48 7.1054 136.735 7 137 7C137.265 7 137.52 7.1054 137.707 7.2929C137.895 7.4804 138 7.7348 138 8ZM143 8C143 8.2652 142.895 8.5196 142.707 8.7071C142.52 8.8946 142.265 9 142 9C141.735 9 141.48 8.8946 141.293 8.7071C141.105 8.5196 141 8.2652 141 8C141 7.7348 141.105 7.4804 141.293 7.2929C141.48 7.1054 141.735 7 142 7C142.265 7 142.52 7.1054 142.707 7.2929C142.895 7.4804 143 7.7348 143 8Z"
/>
</g>
</svg>
</p>
@ -329,21 +289,17 @@
<svg class="graph welcome__illustration" width="850" height="290" viewBox="0 0 850 290" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect class="graph__container" width="850" height="290" rx="14"/>
<rect class="graph__lane-2-background" x="82" y="47" width="114" height="18" rx="4"/>
<text class="graph__branch graph__branch-current"><tspan x="99.375" y="59.5">&nbsp;main</tspan></text>
<path class="graph__checkmark-icon" d="M95.6475 51.2055C96.0887 51.5417 96.1739 52.1718 95.8377 52.613L90.4814 59.6432C90.2914 59.8925 89.996 60.0389 89.6825 60.0389C89.3691 60.0389 89.0736 59.8925 88.8837 59.6432L86.2055 56.1281C85.8694 55.6869 85.9545 55.0567 86.3957 54.7206C86.8369 54.3844 87.4671 54.4696 87.8032 54.9108L89.6825 57.3774L94.24 51.3957C94.5761 50.9545 95.2063 50.8694 95.6475 51.2055Z"/>
<rect class="graph__lane-2-background" x="70" y="46" width="126" height="19" rx="4"/>
<text class="graph__branch graph__branch-current" x="74" y="59"><tspan dy="1" class="codicon">&#xeab2;</tspan><tspan dx="4" class="codicon">&#xea7a;</tspan><tspan dx="6" dy="-1">main</tspan></text>
<rect class="graph__lane-3-background" opacity="0.5" x="82" y="74" width="114" height="18" rx="4"/>
<text class="graph__branch"><tspan x="87" y="86.5">feature/onboard</tspan></text>
<path class="graph__pr-icon" d="M187.231 78.7236C186.228 78.7236 185.423 79.4911 185.423 80.4472C185.423 81.0801 185.79 81.6322 186.327 81.9284V82.1708C186.327 83.0326 185.423 83.8944 184.519 83.8944C183.771 83.8944 183.178 84.0425 182.712 84.2849V80.2048C183.248 79.9086 183.616 79.3565 183.616 78.7236C183.616 77.7675 182.811 77 181.808 77C180.805 77 180 77.7675 180 78.7236C180 79.3565 180.367 79.9086 180.904 80.2048V85.8469C180.367 86.1432 180 86.6952 180 87.3281C180 88.2842 180.805 89.0517 181.808 89.0517C182.811 89.0517 183.616 88.2842 183.616 87.3281C183.616 86.8703 183.432 86.4663 183.135 86.1566C183.404 85.8469 183.827 85.6045 184.519 85.6045C186.327 85.6045 188.135 83.8809 188.135 82.1573V81.9149C188.672 81.6187 189.039 81.0666 189.039 80.4337C189.039 79.4777 188.234 78.7101 187.231 78.7101V78.7236ZM181.808 77.8618C182.302 77.8618 182.712 78.2523 182.712 78.7236C182.712 79.1949 182.302 79.5854 181.808 79.5854C181.313 79.5854 180.904 79.1949 180.904 78.7236C180.904 78.2523 181.313 77.8618 181.808 77.8618ZM181.808 88.2034C181.313 88.2034 180.904 87.8129 180.904 87.3416C180.904 86.8703 181.313 86.4798 181.808 86.4798C182.302 86.4798 182.712 86.8703 182.712 87.3416C182.712 87.8129 182.302 88.2034 181.808 88.2034ZM187.231 81.309C186.737 81.309 186.327 80.9185 186.327 80.4472C186.327 79.9759 186.737 79.5854 187.231 79.5854C187.725 79.5854 188.135 79.9759 188.135 80.4472C188.135 80.9185 187.725 81.309 187.231 81.309Z"/>
<rect class="graph__lane-3-background" opacity="0.5" x="70" y="73" width="126" height="19" rx="4"/>
<text class="graph__branch" x="74" y="87"><tspan dy="1" class="codicon">&#xebaa;</tspan><tspan dx="4" class="codicon">&#xea64;</tspan><tspan dx="6" dy="-1">feature/onboard</tspan></text>
<rect class="graph__lane-4-background" opacity="0.5" x="82" y="100" width="114" height="18" rx="4"/>
<text class="graph__branch"><tspan x="87" y="112.5">feature/graph</tspan></text>
<path class="graph__pr-icon" d="M187.231 104.724C186.228 104.724 185.423 105.491 185.423 106.447C185.423 107.08 185.79 107.632 186.327 107.928V108.171C186.327 109.033 185.423 109.894 184.519 109.894C183.771 109.894 183.178 110.043 182.712 110.285V106.205C183.248 105.909 183.616 105.356 183.616 104.724C183.616 103.768 182.811 103 181.808 103C180.805 103 180 103.768 180 104.724C180 105.356 180.367 105.909 180.904 106.205V111.847C180.367 112.143 180 112.695 180 113.328C180 114.284 180.805 115.052 181.808 115.052C182.811 115.052 183.616 114.284 183.616 113.328C183.616 112.87 183.432 112.466 183.135 112.157C183.404 111.847 183.827 111.605 184.519 111.605C186.327 111.605 188.135 109.881 188.135 108.157V107.915C188.672 107.619 189.039 107.067 189.039 106.434C189.039 105.478 188.234 104.71 187.231 104.71V104.724ZM181.808 103.862C182.302 103.862 182.712 104.252 182.712 104.724C182.712 105.195 182.302 105.585 181.808 105.585C181.313 105.585 180.904 105.195 180.904 104.724C180.904 104.252 181.313 103.862 181.808 103.862ZM181.808 114.203C181.313 114.203 180.904 113.813 180.904 113.342C180.904 112.87 181.313 112.48 181.808 112.48C182.302 112.48 182.712 112.87 182.712 113.342C182.712 113.813 182.302 114.203 181.808 114.203ZM187.231 107.309C186.737 107.309 186.327 106.918 186.327 106.447C186.327 105.976 186.737 105.585 187.231 105.585C187.725 105.585 188.135 105.976 188.135 106.447C188.135 106.918 187.725 107.309 187.231 107.309Z"/>
<rect class="graph__lane-4-background" opacity="0.5" x="70" y="99" width="126" height="19" rx="4"/>
<text class="graph__branch" x="74" y="113"><tspan dy="1" class="codicon">&#xea7a;</tspan><tspan dx="4" class="codicon">&#xea64;</tspan><tspan dx="6" dy="-1">feature/graph</tspan></text>
<rect class="graph__lane-5-background" opacity="0.5" x="82" y="238" width="114" height="18" rx="4"/>
<text class="graph__branch"><tspan x="87" y="250.5">bug/crash</tspan></text>
<path class="graph__pr-icon" d="M187.231 242.724C186.228 242.724 185.423 243.491 185.423 244.447C185.423 245.08 185.79 245.632 186.327 245.928V246.171C186.327 247.033 185.423 247.894 184.519 247.894C183.771 247.894 183.178 248.043 182.712 248.285V244.205C183.248 243.909 183.616 243.356 183.616 242.724C183.616 241.768 182.811 241 181.808 241C180.805 241 180 241.768 180 242.724C180 243.356 180.367 243.909 180.904 244.205V249.847C180.367 250.143 180 250.695 180 251.328C180 252.284 180.805 253.052 181.808 253.052C182.811 253.052 183.616 252.284 183.616 251.328C183.616 250.87 183.432 250.466 183.135 250.157C183.404 249.847 183.827 249.605 184.519 249.605C186.327 249.605 188.135 247.881 188.135 246.157V245.915C188.672 245.619 189.039 245.067 189.039 244.434C189.039 243.478 188.234 242.71 187.231 242.71V242.724ZM181.808 241.862C182.302 241.862 182.712 242.252 182.712 242.724C182.712 243.195 182.302 243.585 181.808 243.585C181.313 243.585 180.904 243.195 180.904 242.724C180.904 242.252 181.313 241.862 181.808 241.862ZM181.808 252.203C181.313 252.203 180.904 251.813 180.904 251.342C180.904 250.87 181.313 250.48 181.808 250.48C182.302 250.48 182.712 250.87 182.712 251.342C182.712 251.813 182.302 252.203 181.808 252.203ZM187.231 245.309C186.737 245.309 186.327 244.918 186.327 244.447C186.327 243.976 186.737 243.585 187.231 243.585C187.725 243.585 188.135 243.976 188.135 244.447C188.135 244.918 187.725 245.309 187.231 245.309Z"/>
<rect class="graph__lane-5-background" opacity="0.5" x="70" y="237" width="126" height="19" rx="4"/>
<text class="graph__branch" x="74" y="251"><tspan dy="1" class="codicon">&#xea7a;</tspan><tspan dx="6" dy="-1">bug/crash</tspan></text>
<rect class="graph__lane-1-background" opacity="0.2" x="216" y="20" width="128" height="18"/>
<rect class="graph__lane-1-background" x="342" y="20" width="2" height="18"/>
@ -399,8 +355,7 @@
<circle class="graph__lane-5-foreground graph__container" cx="305" cy="245" r="8" stroke-width="2"/>
<text class="graph__foreground graph__wip"><tspan x="391" y="33.5">Work in progress</tspan></text>
<path class="graph__foreground graph__wip graph__wip-icon" d="M368 34.1919H367.5C367.5 34.468 367.724 34.6919 368 34.6919V34.1919ZM378.192 34.6919C378.468 34.6919 378.692 34.468 378.692 34.1919C378.692 33.9157 378.468 33.6919 378.192 33.6919V34.6919ZM368 31.5762L367.642 31.2273C367.551 31.3207 367.5 31.4459 367.5 31.5762H368ZM374.923 24.469L374.565 24.1201L374.565 24.1201L374.923 24.469ZM376.365 24.469L376.006 24.8178L376.006 24.8178L376.365 24.469ZM377.471 25.605L377.829 25.2561L377.829 25.2561L377.471 25.605ZM377.471 27.0846L377.113 26.7358L377.113 26.7358L377.471 27.0846ZM370.548 34.1919L370.548 34.6919C370.683 34.6919 370.812 34.6374 370.906 34.5407L370.548 34.1919ZM377.897 26.1428L378.374 25.9919L378.374 25.9919L377.897 26.1428ZM377.897 26.5469L377.42 26.396L377.42 26.396L377.897 26.5469ZM375.447 24.032L375.289 23.5577L375.289 23.5577L375.447 24.032ZM375.841 24.032L375.999 23.5577L375.999 23.5577L375.841 24.032ZM373.454 25.9959C373.261 25.7981 372.945 25.794 372.747 25.9867C372.549 26.1794 372.545 26.4959 372.738 26.6937L373.454 25.9959ZM375.286 29.3094C375.478 29.5072 375.795 29.5114 375.993 29.3187C376.191 29.126 376.195 28.8094 376.002 28.6116L375.286 29.3094ZM368 34.6919H378.192V33.6919H368V34.6919ZM368.5 34.1919V31.5762H367.5V34.1919H368.5ZM368.358 31.9251L375.281 24.8178L374.565 24.1201L367.642 31.2273L368.358 31.9251ZM376.006 24.8178L377.113 25.9539L377.829 25.2561L376.723 24.1201L376.006 24.8178ZM377.113 26.7358L370.19 33.843L370.906 34.5407L377.829 27.4335L377.113 26.7358ZM370.548 33.6919L368 33.6919L368 34.6919L370.548 34.6919L370.548 33.6919ZM377.113 25.9539C377.245 26.0892 377.323 26.1696 377.376 26.2336C377.425 26.293 377.424 26.3054 377.42 26.2937L378.374 25.9919C378.323 25.8308 378.235 25.7039 378.146 25.5964C378.061 25.4936 377.95 25.3797 377.829 25.2561L377.113 25.9539ZM377.829 27.4335C377.95 27.3099 378.061 27.196 378.146 27.0933C378.235 26.9858 378.323 26.8588 378.374 26.6977L377.42 26.396C377.424 26.3843 377.425 26.3967 377.376 26.456C377.323 26.5201 377.245 26.6004 377.113 26.7358L377.829 27.4335ZM377.42 26.2937C377.431 26.3268 377.431 26.3628 377.42 26.396L378.374 26.6977C378.446 26.4682 378.446 26.2214 378.374 25.9919L377.42 26.2937ZM375.281 24.8179C375.413 24.6824 375.491 24.6027 375.554 24.5485C375.612 24.4979 375.622 24.5008 375.605 24.5063L375.289 23.5577C375.127 23.6117 375.001 23.7036 374.897 23.7946C374.796 23.882 374.685 23.9965 374.565 24.1201L375.281 24.8179ZM376.723 24.1201C376.602 23.9966 376.491 23.882 376.391 23.7947C376.287 23.7037 376.161 23.6117 375.999 23.5577L375.683 24.5063C375.666 24.5008 375.676 24.4979 375.734 24.5485C375.796 24.6027 375.874 24.6824 376.006 24.8178L376.723 24.1201ZM375.605 24.5063C375.631 24.4979 375.657 24.4979 375.683 24.5063L375.999 23.5577C375.768 23.4808 375.519 23.4808 375.289 23.5577L375.605 24.5063ZM372.738 26.6937L375.286 29.3094L376.002 28.6116L373.454 25.9959L372.738 26.6937Z"/>
<text x="366" y="33.5" class="graph__foreground graph__wip"><tspan>Work in progress</tspan><tspan dx="9" dy="1" class="codicon">&#xea73;</tspan><tspan dx="3" dy="-1">2</tspan><tspan dx="9" dy="1" class="codicon">&#xea60;</tspan><tspan dx="3" dy="-1">1</tspan></text>
<text class="graph__foreground graph__messages">
<tspan x="366" y="59.5">Improves performance &amp; reduces bundle size</tspan>
<tspan x="366" y="86.5">Adds brand new welcome experience</tspan>

+ 19
- 19
src/webviews/apps/welcome/welcome.scss View File

@ -521,11 +521,24 @@ gk-card p {
}
}
.codicon {
font-family: codicon;
cursor: default;
user-select: none;
}
.glicon {
font-family: glicons;
cursor: default;
user-select: none;
}
.toolbar {
fill: var(--vscode-menu-background);
&-icon {
fill: var(--vscode-icon-foreground);
font-size: 16px;
&__annotations {
&:not(.inactive) {
@ -537,23 +550,23 @@ gk-card p {
animation-timing-function: steps(8);
}
path:first-child {
circle {
fill: #f05133;
stroke: none;
}
path:last-child {
path {
fill: var(--vscode-menu-background);
}
body[data-feature-annotations='off'] &,
&.inactive {
path:first-child {
circle {
fill: none;
stroke: var(--vscode-icon-foreground);
}
path:last-child {
path {
fill: var(--vscode-icon-foreground);
}
}
@ -591,7 +604,8 @@ gk-card p {
fill: var(--color-foreground);
}
&.inactive {
&.inactive,
& .inactive {
opacity: 0.6;
}
}
@ -622,15 +636,6 @@ gk-card p {
font-weight: 700 !important;
}
&__checkmark-icon,
&__pr-icon {
fill: white;
}
&__wip-icon {
fill: var(--vscode-editor-foreground);
}
&__messages {
opacity: 0.7;
}
@ -737,11 +742,6 @@ gk-card p {
font-style: italic;
}
&__codicon {
fill: var(--vscode-editorHoverWidget-foreground);
font-family: codicon;
}
&__link {
fill: #3794ff !important;
}

Loading…
Cancel
Save