Add new SVG icons for "learned" and "next steps" features (#109)
- Introduced icon-thin-learned.svg with detailed path definitions and color styling. - Added icon-thin-next-steps.svg featuring a unique design and color scheme.
This commit is contained in:
Alex Newman
@@ -0,0 +1,8 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!-- Generated by Pixelmator Pro 3.6.17 -->
|
||||
<svg width="328" height="327" viewBox="0 0 328 327" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="icon-thick-completed">
|
||||
<path id="Path" fill="#ee9443" stroke="none" d="M 102.143021 15.109985 C 124.399521 6.597839 146.838608 0.814148 170.500641 1.142517 C 178.716675 1.256592 184.928009 4.778809 188.221222 12.564148 C 192.131836 21.809204 187.675385 32.968201 178.308319 36.536194 C 174.499176 37.987122 170.210297 39.14447 166.207672 38.960144 C 145.084 37.987 126.251495 45.816895 108.085022 54.783447 C 101.013763 58.273621 94.376038 64.903625 90.303864 71.747437 C 81.249969 86.963745 68.683197 98.688721 56.224823 110.687927 C 45.194839 121.311401 37.752762 133.868042 36.270981 149.298157 C 35.333755 159.057739 38.918953 168.018066 43.269821 176.487732 C 48.642563 186.946594 49.607574 198.020325 49.348831 209.462341 C 49.229034 214.759338 49.297974 220.136719 50.076202 225.359192 C 51.13385 232.456848 55.144928 237.91803 61.378815 241.596008 C 63.383698 242.778992 65.430359 243.940247 67.574722 244.829956 C 83.763855 251.546753 97.238754 261.650269 108.032684 275.601196 C 114.748367 284.281067 123.325409 290.831177 135.135101 289.901917 C 140.699997 289.464111 146.271561 287.914001 151.622803 286.192444 C 165.21907 281.818298 178.989075 280.611023 193.001343 283.258057 C 210.095184 286.487305 222.947113 280.610168 232.088593 265.940796 C 239.656372 253.796753 250.168091 244.837585 262.412537 237.534668 C 267.629059 234.42334 272.271271 230.168091 276.676208 225.916443 C 284.850586 218.026672 283.26178 207.977478 281.815948 198.196411 C 280.216736 187.377869 282.084747 177.171692 285.330505 166.805542 C 287.769135 159.01709 289.746948 150.571228 289.354858 142.543823 C 288.898254 133.196045 281.958679 126.555603 274.813629 120.722412 C 262.907257 111.002075 253.400421 99.691772 251.609131 83.625122 C 251.074951 78.833923 250.541107 74.030701 250.329742 69.21875 C 250.08316 63.604675 247.759796 59.19043 243.079437 56.287903 C 238.852234 53.666321 234.389679 51.398193 229.921539 49.196228 C 216.848724 42.753784 213.950043 27.349976 224.305084 18.449036 C 229.938202 13.606995 236.862122 13.132141 243.201904 15.625 C 262.293976 23.132446 277.067566 35.448792 283.134338 55.910461 C 284.725006 61.275391 285.178131 67.024841 285.728149 72.639404 C 286.461243 80.122681 289.553528 86.273743 294.768616 91.602539 C 301.394287 98.372742 308.7612 104.675049 314.152252 112.343567 C 326.11319 129.357178 329.543671 148.192627 322.225342 168.220764 C 318.505066 178.402039 316.802551 188.827332 317.877289 199.604309 C 320.515808 226.062927 309.154083 246.001892 289.051666 261.865967 C 283.568481 266.193054 277.323334 269.67511 272.349426 274.495911 C 266.423248 280.239441 261.273407 286.837769 256.165253 293.361694 C 240.566223 313.284546 220.852509 323.559692 195.203339 318.922852 C 181.849915 316.508789 169.312592 318.014526 156.549927 322.340332 C 128.791275 331.749023 105.282944 322.742676 84.499405 304.061523 C 77.946136 298.171021 72.037766 291.539246 65.29071 285.896729 C 61.008255 282.315308 55.838928 279.71698 50.867279 277.050842 C 31.686432 266.764404 18.30217 251.817322 13.808723 230.139771 C 12.550957 224.072021 12.645752 217.592896 13.001595 211.352783 C 13.513565 202.374756 12.749832 193.795959 9.017151 185.506409 C 4.141502 174.678528 0.361565 163.461487 0.147591 151.46405 C -0.268478 128.135742 8.54351 108.351929 24.183197 91.418823 C 28.588943 86.648743 33.638489 82.456482 37.878265 77.55426 C 43.191925 71.4104 48.86821 65.311707 52.818863 58.30835 C 64.201996 38.129456 80.781326 24.276245 102.143021 15.109985 Z"/>
|
||||
<path id="path1" fill="#ee9443" stroke="none" d="M 177.816132 152.815186 C 191.282013 135.84552 204.424072 119.072571 217.830627 102.513794 C 222.283875 97.013489 228.385834 94.391418 235.566132 95.916077 C 243.398834 97.579224 248.658691 102.725464 249.203705 110.510254 C 249.534729 115.238892 248.017639 120.987549 245.313232 124.874084 C 236.577667 137.427856 227.077362 149.466003 217.560394 161.455688 C 201.420685 181.788879 185.291229 202.139771 168.680969 222.086487 C 157.115097 235.975647 140.902039 236.160095 129.093536 222.542542 C 123.268402 215.825012 118.55864 208.046204 113.969971 200.373413 C 107.730713 189.940674 101.93927 179.349426 93.154266 170.614319 C 84.420303 161.930115 82.955887 151.667053 88.21373 143.463806 C 94.485153 133.679199 108.943008 130.570801 117.990814 138.286194 C 123.506119 142.989258 127.616531 149.584167 131.544327 155.840088 C 136.043503 163.006226 139.188934 171.028992 143.759659 178.141602 C 148.237061 185.108887 151.258911 185.276123 156.6017 179.125671 C 163.907013 170.715942 170.625488 161.796448 177.816132 152.815186 Z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.7 KiB |
@@ -0,0 +1,8 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!-- Generated by Pixelmator Pro 3.6.17 -->
|
||||
<svg width="295" height="339" viewBox="0 0 295 339" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="icon-thick-investigated">
|
||||
<path id="Path" fill="#ee9443" stroke="none" d="M 229.062531 225.062622 C 215.534576 231.309692 201.815216 234.810913 187.17041 233.883606 C 178.072418 233.307495 169.25061 234.487427 160.747803 237.888306 C 145.74324 243.889832 130.520584 242.407349 115.103485 239.659485 C 109.520187 238.664368 103.463379 238.559448 97.913162 239.599182 C 91.193512 240.858032 89.857742 246.409546 94.159653 251.608093 C 108.427109 268.849121 103.655029 289.726685 82.846451 298.619263 C 75.620636 301.707153 67.625809 303.104218 59.888016 304.85791 C 50.282639 307.034882 42.764755 311.295197 38.593872 320.941223 C 36.690849 325.342377 33.301422 329.377228 29.783783 332.738495 C 24.606377 337.685913 18.155121 338.136719 11.659698 335.23761 C 5.209885 332.358826 1.559677 327.350647 0.947311 320.210785 C 0.345543 313.194427 1.801857 306.664551 5.316139 300.567902 C 15.429329 283.023499 30.555946 273.203247 50.673309 270.968628 C 53.301224 270.676636 55.950958 270.209106 58.475998 269.444458 C 62.971725 268.08313 63.602158 266.009277 60.836716 262.152527 C 58.420456 258.782776 55.391068 255.764587 53.461945 252.14856 C 44.128372 234.653442 57.2845 217.667847 72.544739 212.954956 C 79.150009 210.915039 86.189026 210.282532 93.028107 208.995117 C 95.427124 208.543579 97.817413 208.045532 101.645859 207.283081 C 99.327225 204.565735 97.793701 202.596069 96.082932 200.794678 C 90.028107 194.41925 83.471466 188.463745 77.908737 181.689087 C 64.844833 165.779236 59.591553 146.643127 58.248764 126.666382 C 56.229111 96.620117 63.289093 68.849243 82.57254 44.979126 C 101.736938 21.256409 126.399551 6.920532 156.699341 3.060181 C 182.104431 -0.176514 207.001221 1.754333 230.040924 14.175964 C 263.505798 32.21814 284.351563 60.22937 290.406555 97.555054 C 294.291138 121.501221 294.880157 146.098694 284.244659 169.16748 C 272.668884 194.275696 254.271667 212.81134 229.062531 225.062622 M 244.872559 167.361755 C 246.057373 165.964722 247.295471 164.60907 248.418304 163.163879 C 255.00592 154.684448 259.361908 145.55304 258.956238 134.328857 C 258.616425 124.927002 259.09082 115.463867 259.744476 106.06543 C 260.732086 91.865112 257.144501 79.826782 245.442902 70.771606 C 239.933441 66.508179 235.032104 61.463989 229.57312 57.128784 C 223.865021 52.595825 218.260376 47.610107 211.829315 44.375488 C 197.484528 37.160461 182.032745 35.63031 166.134003 37.822998 C 133.72908 42.292175 111.445908 59.614502 99.478043 90.057617 C 88.486908 118.016174 92.658325 152.151917 119.026199 172.237122 C 128.423401 179.395264 135.325684 188.393066 138.320084 199.993469 C 139.583832 204.889343 142.883499 205.848633 147.055222 204.817383 C 150.593048 203.942871 153.99028 202.495239 157.443268 201.282898 C 166.797211 197.998596 176.204132 196.039429 186.293915 197.625366 C 200.123383 199.799133 212.669403 197.077393 223.127808 186.812866 C 229.893097 180.172974 237.269012 174.155273 244.872559 167.361755 Z"/>
|
||||
<path id="path1" fill="#ee9544" stroke="none" d="M 194.897339 64.336914 C 206.583221 62.468262 215.635437 67.409302 224.302734 73.749695 C 238.771729 84.334229 245.725098 99.028931 246.693542 116.427734 C 247.490143 130.739807 244.072723 144.22644 234.096741 155.157959 C 231.991882 157.464417 228.721863 159.032837 225.692261 160.098389 C 220.342163 161.980103 215.459534 160.512878 211.675232 156.238647 C 208.011444 152.100525 207.832611 147.407654 209.515137 142.262695 C 211.309143 136.776733 213.460236 131.214111 213.99173 125.547668 C 215.227661 112.370483 209.723846 103.750244 197.700653 98.094055 C 196.345306 97.456421 195.014587 96.766052 193.65506 96.137695 C 186.781982 92.961365 182.817017 87.529785 183.136108 80.035217 C 183.449127 72.68335 187.378235 67.224609 194.897339 64.336914 Z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.9 KiB |
@@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!-- Generated by Pixelmator Pro 3.6.17 -->
|
||||
<svg width="353" height="364" viewBox="0 0 353 364" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="icon-thick-learned">
|
||||
<path id="Path" fill="#ee9443" stroke="none" d="M 271.450684 172.584045 C 273.343445 194.098389 270.338623 213.959534 256.262817 230.760376 C 252.104553 235.723694 247.645813 240.591919 242.633789 244.650269 C 232.838013 252.582214 229.652893 262.937012 229.050354 274.968018 C 228.661987 282.721924 226.516724 290.377747 225.94397 298.135498 C 225.449341 304.836121 225.212036 311.767395 226.361206 318.334229 C 228.871155 332.677612 225.07959 343.24469 212.557495 350.703888 C 207.639648 353.633392 202.04071 356.192383 196.458435 357.085266 C 181.075195 359.545837 165.563293 361.335999 150.04187 362.707977 C 145.997742 363.06546 141.407715 361.596954 137.642151 359.778809 C 131.365173 356.747955 128.71936 350.93808 129.12146 344.070404 C 129.577759 336.276611 133.243103 330.086884 140.756226 327.561218 C 146.495178 325.631989 152.669922 324.627563 158.727783 324.105865 C 167.84021 323.321045 177.024475 323.407349 186.169434 322.949463 C 191.91217 322.661987 195.344666 320.123352 194.87439 316.190308 C 194.651306 314.324951 192.947021 311.528442 191.41864 311.149231 C 187.805725 310.252808 183.879272 310.225464 180.109924 310.423889 C 164.817383 311.229126 149.53717 312.139893 134.361572 309.125916 C 126.080383 307.481201 121.892212 303.087891 122.043091 294.73584 C 122.186279 286.804382 123.350037 278.892029 124.047974 270.969788 C 125.085876 259.190063 119.776184 250.632141 110.74762 243.601074 C 87.049316 225.145813 79.709412 200.221619 82.73822 171.335754 C 84.429932 155.201782 90.26416 140.769165 100.286255 127.994385 C 116.374084 107.487671 136.94043 94.488403 162.88501 90.460144 C 210.062683 83.135254 254.294556 110.859192 268.11322 156.55188 C 269.643311 161.611084 270.288879 166.937805 271.450684 172.584045 M 229.007874 152.54834 C 226.673096 149.528137 224.618286 146.232605 221.960144 143.530518 C 196.655273 117.807373 141.948364 118.612122 121.780273 161.978516 C 113.200989 180.426147 114.518372 198.947449 131.426208 214.280396 C 135.984802 218.414429 140.783691 222.509155 144.377563 227.422607 C 148.632446 233.239502 152.880615 239.557251 154.981812 246.325378 C 157.495972 254.423828 157.874573 263.211731 158.882996 271.735962 C 159.210083 274.501221 159.49585 276.862671 162.831787 276.897949 C 170.791077 276.981995 178.7771 277.295837 186.704102 276.778931 C 192.626343 276.3927 193.906555 274.412476 194.184692 268.340576 C 195.02771 249.935364 201.677063 234.233765 215.025269 221.240723 C 221.435242 215.001343 228.310364 208.625122 232.63623 200.98645 C 241.793823 184.815918 238.45636 168.581177 229.007874 152.54834 Z"/>
|
||||
<path id="path1" fill="#ee9544" stroke="none" d="M 158.952759 45.972473 C 158.945435 36.99884 158.837341 28.518555 158.958923 20.041565 C 159.11438 9.20166 166.629822 1.291138 176.675232 1.163452 C 187.241089 1.029175 194.853088 8.555664 195.05896 19.830017 C 195.268127 31.288025 195.33667 42.761047 194.987427 54.212891 C 194.707092 63.401917 187.224182 69.711426 177.172668 69.998657 C 167.616699 70.271729 160.188049 64.1026 159.223083 54.933838 C 158.928345 52.13324 159.032532 49.290649 158.952759 45.972473 Z"/>
|
||||
<path id="path2" fill="#ee9545" stroke="none" d="M 240.151184 71.347107 C 246.59021 62.467346 252.821167 53.886292 259.300049 45.496765 C 262.225586 41.708618 265.23053 37.781555 268.930237 34.835205 C 275.682922 29.457458 285.254028 30.138916 290.921997 35.658813 C 297.144104 41.718323 298.258545 50.611267 292.924316 57.851807 C 285.630554 67.752258 278.067322 77.481018 270.14032 86.879028 C 264.368225 93.722168 255.518311 94.755554 247.930908 90.422729 C 241.237549 86.600525 238.141602 79.260254 240.151184 71.347107 Z"/>
|
||||
<path id="path3" fill="#ee9545" stroke="none" d="M 94.416748 92.876099 C 90.227112 90.332947 85.729736 88.465088 82.824646 85.186401 C 75.340088 76.739258 68.420776 67.77478 61.542114 58.812439 C 55.871338 51.42395 56.928345 40.84552 63.497803 35.31958 C 70.645935 29.306885 81.690857 29.472839 87.88501 36.621399 C 96.041443 46.034546 103.694641 55.912842 111.109131 65.92804 C 115.180664 71.427734 115.128906 77.757874 111.843018 83.856567 C 108.197205 90.623291 102.277527 93.223328 94.416748 92.876099 Z"/>
|
||||
<path id="path4" fill="#ee9545" stroke="none" d="M 327.237671 111.158447 C 339.058167 106.002991 350.032959 112.776855 351.524292 123.386963 C 352.453918 130.000122 348.8396 138.183655 342.590576 140.844788 C 331.583923 145.53186 320.502625 150.078064 309.278198 154.209351 C 298.968567 158.004028 290.227539 154.146057 286.725098 144.919678 C 283.136841 135.467163 287.600891 126.236633 297.930237 122.201233 C 307.530823 118.450562 317.217163 114.919128 327.237671 111.158447 Z"/>
|
||||
<path id="path5" fill="#ee9545" stroke="none" d="M 60.526978 150.6521 C 54.4599 155.095764 48.345764 154.328491 42.21698 151.939087 C 32.62677 148.200134 23.100098 144.298462 13.517639 140.539246 C 3.66449 136.673767 -0.680115 127.512268 2.923706 118.00708 C 6.397583 108.844604 15.713013 104.776245 25.429688 108.514954 C 36.124695 112.630127 46.721008 117.005798 57.320618 121.364258 C 68.805969 126.086914 70.452515 143.709595 60.526978 150.6521 Z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.2 KiB |
@@ -0,0 +1,8 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!-- Generated by Pixelmator Pro 3.6.17 -->
|
||||
<svg width="357" height="313" viewBox="0 0 357 313" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="icon-thick-next-steps">
|
||||
<path id="Path" fill="#ee9443" stroke="none" d="M 200.028198 247.999878 C 203.073303 243.603943 206.331726 239.728516 208.700806 235.36969 C 218.712036 216.950195 234.256958 205.057983 253.007629 196.675293 C 261.606873 192.830933 269.038208 187.471008 275.130615 180.018494 C 279.957092 174.114502 285.902893 169.137756 291.181824 163.587646 C 295.72467 158.811523 295.22168 156.284851 290.264404 152.069214 C 283.299316 146.146301 277.047729 139.305542 269.71405 133.914185 C 259.545471 126.438721 248.661316 119.935608 238.07312 113.032043 C 225.191956 104.633545 215.358826 93.802551 209.51947 79.301819 C 205.608276 69.589478 198.034119 62.773132 189.394409 57.04071 C 183.433105 53.085449 177.413147 49.111145 171.991882 44.475891 C 164.665039 38.211365 161.635071 30.016052 163.611877 20.313538 C 165.687683 10.125061 172.308899 4.53772 182.131592 2.495544 C 188.943298 1.079346 195.326477 3.127258 200.339233 7.435852 C 217.818848 22.459961 236.578552 36.260437 246.636597 58.263916 C 252.342773 70.746948 262.274841 79.434937 274.695679 85.635864 C 288.199707 92.377563 299.427551 101.974426 309.528381 113.447876 C 316.54425 121.417175 326.085815 127.183044 334.598694 133.805176 C 338.40448 136.765747 342.611755 139.21698 346.364075 142.238159 C 356.84729 150.679016 358.031616 163.997253 348.114685 173.076172 C 340.322327 180.209961 331.37793 186.165588 322.568237 192.083252 C 315.148804 197.066956 308.533325 202.696533 303.18103 209.862244 C 296.429993 218.900635 287.445496 225.226379 277.306519 229.781006 C 259.982971 237.562988 247.425415 250.171631 237.15509 265.963928 C 226.294312 282.664246 212.651855 297.092407 196.101624 308.432434 C 189.276978 313.108704 181.674683 314.306396 173.818054 310.920776 C 161.332764 305.540527 157.06665 286.928406 166.708801 276.03363 C 172.108887 269.932007 179.637939 265.744568 186.038635 260.48877 C 190.777893 256.597168 195.244507 252.373657 200.028198 247.999878 Z"/>
|
||||
<path id="path1" fill="#ee9443" stroke="none" d="M 182.439697 114.401611 C 192.385376 116.187073 200.552246 120.709717 208.724854 125.747681 C 218.74353 131.923584 229.402832 137.083313 239.908691 142.440063 C 251.755737 148.480591 255.919739 160.852478 249.511841 171.751831 C 245.387085 178.7677 234.322571 182.39679 224.101135 180.377991 C 214.380859 178.458069 206.876282 172.931091 199.753052 166.476563 C 195.467896 162.593628 191.099548 158.587891 186.145752 155.709106 C 179.250549 151.702148 175.2099 152.796387 169.784729 158.514954 C 163.854492 164.765686 158.470825 171.658264 151.925659 177.175903 C 139.299438 187.819885 121.911133 184.144409 111.615967 174.971741 C 107.548035 171.347229 104.287842 166.814453 100.674744 162.682129 C 99.471436 161.305847 98.377991 159.829102 97.126526 158.499878 C 88.845886 149.704407 80.265747 149.49585 71.393799 157.672119 C 66.258667 162.40448 61.163147 167.222351 55.667725 171.512207 C 45.10083 179.76123 32.94519 183.092163 19.60321 181.742432 C 10.085205 180.779602 2.704285 174.59082 0.872681 166.334473 C -1.18573 157.055786 1.656006 148.790833 8.964783 144.524475 C 11.899231 142.811523 15.435059 141.362427 18.758667 141.219116 C 31.253113 140.680237 40.451477 134.163147 49.517212 126.429016 C 55.239807 121.546997 61.704163 116.61322 68.694397 114.319214 C 86.340393 108.528625 102.878235 111.76001 117.033264 124.4021 C 120.881348 127.838867 124.439758 131.600647 128.299622 135.023376 C 133.139954 139.31543 136.620483 139.065918 141.27771 134.542419 C 144.860046 131.062988 148.452271 127.588074 152.164551 124.249634 C 160.650452 116.618225 170.508057 112.989624 182.439697 114.401611 Z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.7 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 11 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 7.9 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 14 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.3 KiB |
+297
-51
@@ -19,7 +19,7 @@
|
||||
:root,
|
||||
[data-theme="light"] {
|
||||
--color-bg-primary: #ffffff;
|
||||
--color-bg-secondary: #f6f8fa;
|
||||
--color-bg-secondary: #efebe4;
|
||||
--color-bg-tertiary: #f0f0f0;
|
||||
--color-bg-header: #f6f8fa;
|
||||
--color-bg-card: #ffffff;
|
||||
@@ -30,6 +30,7 @@
|
||||
--color-bg-button-active: #0860ca;
|
||||
--color-bg-summary: #fffbf0;
|
||||
--color-bg-prompt: #f6f3fb;
|
||||
--color-bg-observation: #f0f6fb;
|
||||
--color-bg-stat: #f6f8fa;
|
||||
--color-bg-scrollbar-track: #ffffff;
|
||||
--color-bg-scrollbar-thumb: #d1d5da;
|
||||
@@ -43,17 +44,20 @@
|
||||
--color-border-summary-hover: #c29d29;
|
||||
--color-border-prompt: #8250df;
|
||||
--color-border-prompt-hover: #6e40c9;
|
||||
--color-border-observation: #0969da;
|
||||
--color-border-observation-hover: #0550ae;
|
||||
|
||||
--color-text-primary: #24292f;
|
||||
--color-text-secondary: #57606a;
|
||||
--color-text-tertiary: #6e7781;
|
||||
--color-text-muted: #8b949e;
|
||||
--color-text-header: #24292f;
|
||||
--color-text-title: #24292f;
|
||||
--color-text-subtitle: #57606a;
|
||||
--color-text-primary: #2b2520;
|
||||
--color-text-secondary: #5a5248;
|
||||
--color-text-tertiary: #726b5f;
|
||||
--color-text-muted: #8f8a7e;
|
||||
--color-text-header: #2b2520;
|
||||
--color-text-title: #2b2520;
|
||||
--color-text-subtitle: #5a5248;
|
||||
--color-text-button: #ffffff;
|
||||
--color-text-summary: #8a6116;
|
||||
--color-text-logo: #24292f;
|
||||
--color-text-observation: #2b2520;
|
||||
--color-text-logo: #2b2520;
|
||||
|
||||
--color-accent-primary: #0969da;
|
||||
--color-accent-focus: #0969da;
|
||||
@@ -61,6 +65,7 @@
|
||||
--color-accent-error: #d1242f;
|
||||
--color-accent-summary: #9a6700;
|
||||
--color-accent-prompt: #8250df;
|
||||
--color-accent-observation: #0550ae;
|
||||
|
||||
--color-type-badge-bg: rgba(9, 105, 218, 0.12);
|
||||
--color-type-badge-text: #0969da;
|
||||
@@ -68,6 +73,8 @@
|
||||
--color-summary-badge-text: #9a6700;
|
||||
--color-prompt-badge-bg: rgba(130, 80, 223, 0.12);
|
||||
--color-prompt-badge-text: #8250df;
|
||||
--color-observation-badge-bg: rgba(9, 105, 218, 0.12);
|
||||
--color-observation-badge-text: #0550ae;
|
||||
|
||||
--color-skeleton-base: #d0d7de;
|
||||
--color-skeleton-highlight: #e8ecef;
|
||||
@@ -77,59 +84,66 @@
|
||||
|
||||
/* Theme Variables - Dark Mode */
|
||||
[data-theme="dark"] {
|
||||
--color-bg-primary: #1e1e1e;
|
||||
--color-bg-secondary: #2d2d2d;
|
||||
--color-bg-tertiary: #252526;
|
||||
--color-bg-header: #252526;
|
||||
--color-bg-card: #2d2d2d;
|
||||
--color-bg-card-hover: #333333;
|
||||
--color-bg-input: #2d2d2d;
|
||||
--color-bg-primary: #1a1916;
|
||||
--color-bg-secondary: #252320;
|
||||
--color-bg-tertiary: #1f1d1a;
|
||||
--color-bg-header: #1f1d1a;
|
||||
--color-bg-card: #252320;
|
||||
--color-bg-card-hover: #2d2a26;
|
||||
--color-bg-input: #252320;
|
||||
--color-bg-button: #0969da;
|
||||
--color-bg-button-hover: #1177e6;
|
||||
--color-bg-button-active: #0860ca;
|
||||
--color-bg-summary: #3d2f00;
|
||||
--color-bg-prompt: #2d1b4e;
|
||||
--color-bg-stat: #2d2d2d;
|
||||
--color-bg-scrollbar-track: #1e1e1e;
|
||||
--color-bg-scrollbar-thumb: #424242;
|
||||
--color-bg-scrollbar-thumb-hover: #4e4e4e;
|
||||
--color-bg-summary: #2a2724;
|
||||
--color-bg-prompt: #262033;
|
||||
--color-bg-observation: #1a2332;
|
||||
--color-bg-stat: #252320;
|
||||
--color-bg-scrollbar-track: #1a1916;
|
||||
--color-bg-scrollbar-thumb: #3a3834;
|
||||
--color-bg-scrollbar-thumb-hover: #4a4540;
|
||||
|
||||
--color-border-primary: #404040;
|
||||
--color-border-secondary: #404040;
|
||||
--color-border-hover: #505050;
|
||||
--color-border-primary: #3a3834;
|
||||
--color-border-secondary: #3a3834;
|
||||
--color-border-hover: #4a4540;
|
||||
--color-border-focus: #58a6ff;
|
||||
--color-border-summary: #9e6a03;
|
||||
--color-border-summary-hover: #ae7a13;
|
||||
--color-border-prompt: #6e40c9;
|
||||
--color-border-prompt-hover: #8e6cdb;
|
||||
--color-border-summary: #7a6a50;
|
||||
--color-border-summary-hover: #8b7960;
|
||||
--color-border-prompt: #6e5b9e;
|
||||
--color-border-prompt-hover: #7e6bae;
|
||||
--color-border-observation: #527aa0;
|
||||
--color-border-observation-hover: #6a8eb8;
|
||||
|
||||
--color-text-primary: #cccccc;
|
||||
--color-text-secondary: #a0a0a0;
|
||||
--color-text-tertiary: #6e7681;
|
||||
--color-text-muted: #8b949e;
|
||||
--color-text-header: #e0e0e0;
|
||||
--color-text-title: #e0e0e0;
|
||||
--color-text-subtitle: #a0a0a0;
|
||||
--color-text-primary: #dcd6cc;
|
||||
--color-text-secondary: #b8b0a4;
|
||||
--color-text-tertiary: #938a7e;
|
||||
--color-text-muted: #7a7266;
|
||||
--color-text-header: #e8e2d8;
|
||||
--color-text-title: #e8e2d8;
|
||||
--color-text-subtitle: #b8b0a4;
|
||||
--color-text-button: #ffffff;
|
||||
--color-text-summary: #f2cc60;
|
||||
--color-text-logo: #dadada;
|
||||
--color-text-summary: #d4b888;
|
||||
--color-text-observation: #a8b8c8;
|
||||
--color-text-logo: #e0dad0;
|
||||
|
||||
--color-accent-primary: #58a6ff;
|
||||
--color-accent-focus: #58a6ff;
|
||||
--color-accent-success: #16c60c;
|
||||
--color-accent-error: #e74856;
|
||||
--color-accent-summary: #f2cc60;
|
||||
--color-accent-prompt: #8e6cdb;
|
||||
--color-accent-summary: #d4b888;
|
||||
--color-accent-prompt: #8e7cbc;
|
||||
--color-accent-observation: #79b8ff;
|
||||
|
||||
--color-type-badge-bg: rgba(88, 166, 255, 0.125);
|
||||
--color-type-badge-text: #58a6ff;
|
||||
--color-summary-badge-bg: rgba(242, 204, 96, 0.125);
|
||||
--color-summary-badge-text: #f2cc60;
|
||||
--color-prompt-badge-bg: rgba(110, 64, 201, 0.125);
|
||||
--color-prompt-badge-text: #8e6cdb;
|
||||
--color-summary-badge-bg: rgba(212, 184, 136, 0.15);
|
||||
--color-summary-badge-text: #d4b888;
|
||||
--color-prompt-badge-bg: rgba(142, 124, 188, 0.15);
|
||||
--color-prompt-badge-text: #9e8ccc;
|
||||
--color-observation-badge-bg: rgba(121, 184, 255, 0.15);
|
||||
--color-observation-badge-text: #79b8ff;
|
||||
|
||||
--color-skeleton-base: #404040;
|
||||
--color-skeleton-highlight: #505050;
|
||||
--color-skeleton-base: #3a3834;
|
||||
--color-skeleton-highlight: #4a4540;
|
||||
|
||||
--shadow-focus: 0 0 0 2px rgba(88, 166, 255, 0.2);
|
||||
}
|
||||
@@ -149,6 +163,7 @@
|
||||
--color-bg-button-active: #0860ca;
|
||||
--color-bg-summary: #fffbf0;
|
||||
--color-bg-prompt: #f6f3fb;
|
||||
--color-bg-observation: #f0f6fb;
|
||||
--color-bg-stat: #f6f8fa;
|
||||
--color-bg-scrollbar-track: #ffffff;
|
||||
--color-bg-scrollbar-thumb: #d1d5da;
|
||||
@@ -162,6 +177,8 @@
|
||||
--color-border-summary-hover: #c29d29;
|
||||
--color-border-prompt: #8250df;
|
||||
--color-border-prompt-hover: #6e40c9;
|
||||
--color-border-observation: #0969da;
|
||||
--color-border-observation-hover: #0550ae;
|
||||
|
||||
--color-text-primary: #24292f;
|
||||
--color-text-secondary: #57606a;
|
||||
@@ -172,6 +189,7 @@
|
||||
--color-text-subtitle: #57606a;
|
||||
--color-text-button: #ffffff;
|
||||
--color-text-summary: #8a6116;
|
||||
--color-text-observation: #24292f;
|
||||
--color-text-logo: #24292f;
|
||||
|
||||
--color-accent-primary: #0969da;
|
||||
@@ -180,6 +198,7 @@
|
||||
--color-accent-error: #d1242f;
|
||||
--color-accent-summary: #9a6700;
|
||||
--color-accent-prompt: #8250df;
|
||||
--color-accent-observation: #0550ae;
|
||||
|
||||
--color-type-badge-bg: rgba(9, 105, 218, 0.12);
|
||||
--color-type-badge-text: #0969da;
|
||||
@@ -187,6 +206,8 @@
|
||||
--color-summary-badge-text: #9a6700;
|
||||
--color-prompt-badge-bg: rgba(130, 80, 223, 0.12);
|
||||
--color-prompt-badge-text: #8250df;
|
||||
--color-observation-badge-bg: rgba(9, 105, 218, 0.12);
|
||||
--color-observation-badge-text: #0550ae;
|
||||
|
||||
--color-skeleton-base: #d0d7de;
|
||||
--color-skeleton-highlight: #e8ecef;
|
||||
@@ -209,6 +230,7 @@
|
||||
--color-bg-button-active: #0860ca;
|
||||
--color-bg-summary: #3d2f00;
|
||||
--color-bg-prompt: #2d1b4e;
|
||||
--color-bg-observation: #1a2332;
|
||||
--color-bg-stat: #2d2d2d;
|
||||
--color-bg-scrollbar-track: #1e1e1e;
|
||||
--color-bg-scrollbar-thumb: #424242;
|
||||
@@ -222,6 +244,8 @@
|
||||
--color-border-summary-hover: #ae7a13;
|
||||
--color-border-prompt: #6e40c9;
|
||||
--color-border-prompt-hover: #8e6cdb;
|
||||
--color-border-observation: #527aa0;
|
||||
--color-border-observation-hover: #6a8eb8;
|
||||
|
||||
--color-text-primary: #cccccc;
|
||||
--color-text-secondary: #a0a0a0;
|
||||
@@ -232,6 +256,7 @@
|
||||
--color-text-subtitle: #a0a0a0;
|
||||
--color-text-button: #ffffff;
|
||||
--color-text-summary: #f2cc60;
|
||||
--color-text-observation: #a8b8c8;
|
||||
--color-text-logo: #dadada;
|
||||
|
||||
--color-accent-primary: #58a6ff;
|
||||
@@ -240,6 +265,7 @@
|
||||
--color-accent-error: #e74856;
|
||||
--color-accent-summary: #f2cc60;
|
||||
--color-accent-prompt: #8e6cdb;
|
||||
--color-accent-observation: #79b8ff;
|
||||
|
||||
--color-type-badge-bg: rgba(88, 166, 255, 0.125);
|
||||
--color-type-badge-text: #58a6ff;
|
||||
@@ -247,6 +273,8 @@
|
||||
--color-summary-badge-text: #f2cc60;
|
||||
--color-prompt-badge-bg: rgba(110, 64, 201, 0.125);
|
||||
--color-prompt-badge-text: #8e6cdb;
|
||||
--color-observation-badge-bg: rgba(121, 184, 255, 0.15);
|
||||
--color-observation-badge-text: #79b8ff;
|
||||
|
||||
--color-skeleton-base: #404040;
|
||||
--color-skeleton-highlight: #505050;
|
||||
@@ -521,6 +549,24 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-width: 10%;
|
||||
}
|
||||
|
||||
.card-subheading-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
|
||||
.card-subheading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 14px;
|
||||
font-size: 12px;
|
||||
color: var(--color-text-muted);
|
||||
font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
|
||||
}
|
||||
|
||||
.card-type {
|
||||
@@ -623,17 +669,31 @@
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.card-subtitle {
|
||||
.card-section {
|
||||
font-size: 14px;
|
||||
color: var(--color-text-subtitle);
|
||||
line-height: 1.7;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.card-subtitle:last-child {
|
||||
.card-section:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.card-section pre {
|
||||
white-space: pre-wrap;
|
||||
font-size: 13px;
|
||||
/* word-wrap: break-word; */
|
||||
}
|
||||
|
||||
/*
|
||||
.card-section h4 {
|
||||
font-size: 12px;
|
||||
margin-bottom: 8px;
|
||||
margin-top: 16px;
|
||||
color: var(--color-text-title);
|
||||
font-weight: 500;
|
||||
} */
|
||||
|
||||
.card-meta {
|
||||
font-size: 11px;
|
||||
@@ -668,8 +728,7 @@
|
||||
|
||||
|
||||
/* Stack single column on narrow screens (removed - no longer using card-files) */
|
||||
@media (max-width: 600px) {
|
||||
}
|
||||
@media (max-width: 600px) {}
|
||||
|
||||
|
||||
/* Project badge styling */
|
||||
@@ -695,6 +754,176 @@
|
||||
color: var(--color-text-summary);
|
||||
}
|
||||
|
||||
/* Enhanced Summary Card Styles - Editorial/Archival Aesthetic */
|
||||
.summary-card {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.summary-card-header {
|
||||
margin-bottom: 24px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid var(--color-border-summary);
|
||||
border-bottom-style: dashed;
|
||||
}
|
||||
|
||||
.summary-badge-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.summary-badge {
|
||||
font-family: 'Monaspace Radon', 'Monaco', 'Menlo', monospace;
|
||||
font-weight: 600;
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
padding: 4px 10px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.summary-project-badge {
|
||||
font-family: 'Monaspace Radon', 'Monaco', 'Menlo', monospace;
|
||||
font-size: 11px;
|
||||
color: var(--color-text-muted);
|
||||
font-weight: 400;
|
||||
padding: 3px 8px;
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
border-radius: 2px;
|
||||
border: 1px solid var(--color-border-primary);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .summary-project-badge {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
.summary-title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
color: var(--color-text-summary);
|
||||
letter-spacing: -0.02em;
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
}
|
||||
|
||||
.summary-sections {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.summary-section {
|
||||
animation: summaryFadeIn 0.4s ease-out backwards;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
@keyframes summaryFadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(8px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.summary-section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.summary-section-icon {
|
||||
position: relative;
|
||||
width: auto;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.summary-section-icon--investigated {
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.summary-section-icon--learned {
|
||||
height: 18px;
|
||||
left: -1px;
|
||||
top: -3px;
|
||||
}
|
||||
|
||||
.summary-section-icon--completed {
|
||||
height: 17px;
|
||||
}
|
||||
|
||||
.summary-section-icon--next_steps {
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
.summary-section-label {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--color-accent-summary);
|
||||
text-transform: uppercase;
|
||||
margin: 0;
|
||||
font-family: 'Monaspace Radon', 'Monaco', 'Menlo', monospace;
|
||||
}
|
||||
|
||||
.summary-section-content {
|
||||
margin-left: 26px;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
}
|
||||
|
||||
.summary-card-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid var(--color-border-primary);
|
||||
font-family: 'Monaspace Radon', 'Monaco', 'Menlo', monospace;
|
||||
font-size: 11px;
|
||||
color: var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
.summary-meta-id {
|
||||
font-weight: 500;
|
||||
color: var(--color-accent-summary);
|
||||
}
|
||||
|
||||
.summary-meta-divider {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.summary-meta-date {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* Responsive adjustments for summary cards */
|
||||
@media (max-width: 600px) {
|
||||
.summary-title {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.summary-section-content {
|
||||
margin-left: 0;
|
||||
padding-left: 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.summary-section-header {
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.settings-section {
|
||||
padding: 18px;
|
||||
border-bottom: 1px solid var(--color-border-primary);
|
||||
@@ -797,6 +1026,21 @@
|
||||
color: var(--color-prompt-badge-text);
|
||||
}
|
||||
|
||||
.observation-card {
|
||||
border-color: var(--color-border-observation);
|
||||
background: var(--color-bg-observation);
|
||||
color: var(--color-text-observation);
|
||||
}
|
||||
|
||||
.observation-card:hover {
|
||||
border-color: var(--color-border-observation-hover);
|
||||
}
|
||||
|
||||
.observation-card .card-type {
|
||||
background: var(--color-observation-badge-bg);
|
||||
color: var(--color-observation-badge-text);
|
||||
}
|
||||
|
||||
.card-content {
|
||||
margin-top: 14px;
|
||||
margin-bottom: 12px;
|
||||
@@ -867,6 +1111,7 @@
|
||||
0% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
@@ -909,6 +1154,7 @@
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import { Summary } from '../types';
|
||||
import { formatDate } from '../utils/formatters';
|
||||
import React from "react";
|
||||
import { Summary } from "../types";
|
||||
import { formatDate } from "../utils/formatters";
|
||||
|
||||
interface SummaryCardProps {
|
||||
summary: Summary;
|
||||
@@ -9,32 +9,54 @@ interface SummaryCardProps {
|
||||
export function SummaryCard({ summary }: SummaryCardProps) {
|
||||
const date = formatDate(summary.created_at_epoch);
|
||||
|
||||
const sections = [
|
||||
{ key: "investigated", label: "Investigated", content: summary.investigated, icon: "/icon-thick-investigated.svg" },
|
||||
{ key: "learned", label: "Learned", content: summary.learned, icon: "/icon-thick-learned.svg" },
|
||||
{ key: "completed", label: "Completed", content: summary.completed, icon: "/icon-thick-completed.svg" },
|
||||
{ key: "next_steps", label: "Next Steps", content: summary.next_steps, icon: "/icon-thick-next-steps.svg" },
|
||||
].filter((section) => section.content);
|
||||
|
||||
return (
|
||||
<div className="card summary-card">
|
||||
<div className="card-header">
|
||||
<div className="card-header-left">
|
||||
<span className="card-type">SUMMARY</span>
|
||||
<span className="card-project">{summary.project}</span>
|
||||
<article className="card summary-card">
|
||||
<header className="summary-card-header">
|
||||
<div className="summary-badge-row">
|
||||
<span className="card-type summary-badge">Session Summary</span>
|
||||
<span className="summary-project-badge">{summary.project}</span>
|
||||
</div>
|
||||
{summary.request && (
|
||||
<h2 className="summary-title">{summary.request}</h2>
|
||||
)}
|
||||
</header>
|
||||
|
||||
<div className="summary-sections">
|
||||
{sections.map((section, index) => (
|
||||
<section
|
||||
key={section.key}
|
||||
className="summary-section"
|
||||
style={{ animationDelay: `${index * 50}ms` }}
|
||||
>
|
||||
<div className="summary-section-header">
|
||||
<img
|
||||
src={section.icon}
|
||||
alt={section.label}
|
||||
className={`summary-section-icon summary-section-icon--${section.key}`}
|
||||
/>
|
||||
<h3 className="summary-section-label">{section.label}</h3>
|
||||
</div>
|
||||
<div className="summary-section-content">
|
||||
{section.content}
|
||||
</div>
|
||||
</section>
|
||||
))}
|
||||
</div>
|
||||
{summary.request && (
|
||||
<div className="card-title">Request: {summary.request}</div>
|
||||
)}
|
||||
{summary.investigated && (
|
||||
<div className="card-subtitle">Investigated: {summary.investigated}</div>
|
||||
)}
|
||||
{summary.learned && (
|
||||
<div className="card-subtitle">Learned: {summary.learned}</div>
|
||||
)}
|
||||
{summary.completed && (
|
||||
<div className="card-subtitle">Completed: {summary.completed}</div>
|
||||
)}
|
||||
{summary.next_steps && (
|
||||
<div className="card-subtitle">Next: {summary.next_steps}</div>
|
||||
)}
|
||||
<div className="card-meta">
|
||||
<span className="meta-date">#{summary.id} • {date}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer className="summary-card-footer">
|
||||
<span className="summary-meta-id">Session #{summary.id}</span>
|
||||
<span className="summary-meta-divider">•</span>
|
||||
<time className="summary-meta-date" dateTime={new Date(summary.created_at_epoch).toISOString()}>
|
||||
{date}
|
||||
</time>
|
||||
</footer>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user