docs: redesign notes (#8661)
* docs: redesign notes * fix color for warning notes * allow optional links * show links in a note * allow line code in notes
This commit is contained in:
Shahed Nasser
@@ -32,214 +32,301 @@ export const ShadedBgIcon = ({
|
||||
|
||||
return (
|
||||
<svg
|
||||
width="33"
|
||||
height="20"
|
||||
viewBox="0 0 33 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height="100%"
|
||||
width="100%"
|
||||
{...props}
|
||||
>
|
||||
<g clipPath="url(#clip0_7397_14857)">
|
||||
<g clipPath="url(#clip0_10402_37468)">
|
||||
<rect
|
||||
x="10.136"
|
||||
y="-41.6187"
|
||||
x="32.3379"
|
||||
y="-66.5442"
|
||||
width="1.5"
|
||||
height="64"
|
||||
transform="rotate(45 10.136 -41.6187)"
|
||||
fill={color}
|
||||
height="96"
|
||||
transform="rotate(45 32.3379 -66.5442)"
|
||||
fill="#BFDBFE"
|
||||
/>
|
||||
<rect
|
||||
x="12.6109"
|
||||
y="-39.1439"
|
||||
x="34.813"
|
||||
y="-64.0694"
|
||||
width="1.5"
|
||||
height="64"
|
||||
transform="rotate(45 12.6109 -39.1439)"
|
||||
fill={color}
|
||||
height="96"
|
||||
transform="rotate(45 34.813 -64.0694)"
|
||||
fill="#BFDBFE"
|
||||
/>
|
||||
<rect
|
||||
x="15.0858"
|
||||
y="-36.6689"
|
||||
x="37.2876"
|
||||
y="-61.5945"
|
||||
width="1.5"
|
||||
height="64"
|
||||
transform="rotate(45 15.0858 -36.6689)"
|
||||
fill={color}
|
||||
height="96"
|
||||
transform="rotate(45 37.2876 -61.5945)"
|
||||
fill="#BFDBFE"
|
||||
/>
|
||||
<rect
|
||||
x="17.5607"
|
||||
y="-34.1941"
|
||||
x="39.7627"
|
||||
y="-59.1196"
|
||||
width="1.5"
|
||||
height="64"
|
||||
transform="rotate(45 17.5607 -34.1941)"
|
||||
fill={color}
|
||||
height="96"
|
||||
transform="rotate(45 39.7627 -59.1196)"
|
||||
fill="#BFDBFE"
|
||||
/>
|
||||
<rect
|
||||
x="20.0355"
|
||||
y="-31.7192"
|
||||
x="42.2373"
|
||||
y="-56.6447"
|
||||
width="1.5"
|
||||
height="64"
|
||||
transform="rotate(45 20.0355 -31.7192)"
|
||||
fill={color}
|
||||
height="96"
|
||||
transform="rotate(45 42.2373 -56.6447)"
|
||||
fill="#BFDBFE"
|
||||
/>
|
||||
<rect
|
||||
x="22.5104"
|
||||
y="-29.2443"
|
||||
x="44.7124"
|
||||
y="-54.1699"
|
||||
width="1.5"
|
||||
height="64"
|
||||
transform="rotate(45 22.5104 -29.2443)"
|
||||
fill={color}
|
||||
height="96"
|
||||
transform="rotate(45 44.7124 -54.1699)"
|
||||
fill="#BFDBFE"
|
||||
/>
|
||||
<rect
|
||||
x="24.9853"
|
||||
y="-26.7695"
|
||||
x="47.187"
|
||||
y="-51.695"
|
||||
width="1.5"
|
||||
height="64"
|
||||
transform="rotate(45 24.9853 -26.7695)"
|
||||
fill={color}
|
||||
height="96"
|
||||
transform="rotate(45 47.187 -51.695)"
|
||||
fill="#BFDBFE"
|
||||
/>
|
||||
<rect
|
||||
x="27.4602"
|
||||
y="-24.2946"
|
||||
x="49.6621"
|
||||
y="-49.2201"
|
||||
width="1.5"
|
||||
height="64"
|
||||
transform="rotate(45 27.4602 -24.2946)"
|
||||
fill={color}
|
||||
height="96"
|
||||
transform="rotate(45 49.6621 -49.2201)"
|
||||
fill="#BFDBFE"
|
||||
/>
|
||||
<rect
|
||||
x="29.935"
|
||||
y="-21.8197"
|
||||
x="52.1367"
|
||||
y="-46.7452"
|
||||
width="1.5"
|
||||
height="64"
|
||||
transform="rotate(45 29.935 -21.8197)"
|
||||
fill={color}
|
||||
height="96"
|
||||
transform="rotate(45 52.1367 -46.7452)"
|
||||
fill="#BFDBFE"
|
||||
/>
|
||||
<rect
|
||||
x="32.4099"
|
||||
y="-19.3448"
|
||||
x="54.6118"
|
||||
y="-44.2704"
|
||||
width="1.5"
|
||||
height="64"
|
||||
transform="rotate(45 32.4099 -19.3448)"
|
||||
fill={color}
|
||||
height="96"
|
||||
transform="rotate(45 54.6118 -44.2704)"
|
||||
fill="#BFDBFE"
|
||||
/>
|
||||
<rect
|
||||
x="34.8848"
|
||||
y="-16.87"
|
||||
x="57.0869"
|
||||
y="-41.7955"
|
||||
width="1.5"
|
||||
height="64"
|
||||
transform="rotate(45 34.8848 -16.87)"
|
||||
fill={color}
|
||||
height="96"
|
||||
transform="rotate(45 57.0869 -41.7955)"
|
||||
fill="#BFDBFE"
|
||||
/>
|
||||
<rect
|
||||
x="37.3597"
|
||||
y="-14.3951"
|
||||
x="59.5615"
|
||||
y="-39.3206"
|
||||
width="1.5"
|
||||
height="64"
|
||||
transform="rotate(45 37.3597 -14.3951)"
|
||||
fill={color}
|
||||
height="96"
|
||||
transform="rotate(45 59.5615 -39.3206)"
|
||||
fill="#BFDBFE"
|
||||
/>
|
||||
<rect
|
||||
x="39.8345"
|
||||
y="-11.9202"
|
||||
x="62.0366"
|
||||
y="-36.8458"
|
||||
width="1.5"
|
||||
height="64"
|
||||
transform="rotate(45 39.8345 -11.9202)"
|
||||
fill={color}
|
||||
height="96"
|
||||
transform="rotate(45 62.0366 -36.8458)"
|
||||
fill="#BFDBFE"
|
||||
/>
|
||||
<rect
|
||||
x="42.3094"
|
||||
y="-9.44537"
|
||||
x="64.5112"
|
||||
y="-34.3709"
|
||||
width="1.5"
|
||||
height="64"
|
||||
transform="rotate(45 42.3094 -9.44537)"
|
||||
fill={color}
|
||||
height="96"
|
||||
transform="rotate(45 64.5112 -34.3709)"
|
||||
fill="#BFDBFE"
|
||||
/>
|
||||
<rect
|
||||
x="44.7843"
|
||||
y="-6.97046"
|
||||
x="66.9863"
|
||||
y="-31.896"
|
||||
width="1.5"
|
||||
height="64"
|
||||
transform="rotate(45 44.7843 -6.97046)"
|
||||
fill={color}
|
||||
height="96"
|
||||
transform="rotate(45 66.9863 -31.896)"
|
||||
fill="#BFDBFE"
|
||||
/>
|
||||
<rect
|
||||
x="47.2592"
|
||||
y="-4.49561"
|
||||
x="69.4609"
|
||||
y="-29.4211"
|
||||
width="1.5"
|
||||
height="64"
|
||||
transform="rotate(45 47.2592 -4.49561)"
|
||||
fill={color}
|
||||
height="96"
|
||||
transform="rotate(45 69.4609 -29.4211)"
|
||||
fill="#BFDBFE"
|
||||
/>
|
||||
<rect
|
||||
x="49.734"
|
||||
y="-2.02075"
|
||||
x="71.936"
|
||||
y="-26.9463"
|
||||
width="1.5"
|
||||
height="64"
|
||||
transform="rotate(45 49.734 -2.02075)"
|
||||
fill={color}
|
||||
height="96"
|
||||
transform="rotate(45 71.936 -26.9463)"
|
||||
fill="#BFDBFE"
|
||||
/>
|
||||
<rect
|
||||
x="52.2089"
|
||||
y="0.454163"
|
||||
x="74.4106"
|
||||
y="-24.4714"
|
||||
width="1.5"
|
||||
height="64"
|
||||
transform="rotate(45 52.2089 0.454163)"
|
||||
fill={color}
|
||||
height="96"
|
||||
transform="rotate(45 74.4106 -24.4714)"
|
||||
fill="#BFDBFE"
|
||||
/>
|
||||
<rect
|
||||
x="54.6838"
|
||||
y="2.92902"
|
||||
x="76.8857"
|
||||
y="-21.9965"
|
||||
width="1.5"
|
||||
height="64"
|
||||
transform="rotate(45 54.6838 2.92902)"
|
||||
fill={color}
|
||||
height="96"
|
||||
transform="rotate(45 76.8857 -21.9965)"
|
||||
fill="#BFDBFE"
|
||||
/>
|
||||
<rect
|
||||
x="57.1586"
|
||||
y="5.40387"
|
||||
x="79.3604"
|
||||
y="-19.5216"
|
||||
width="1.5"
|
||||
height="64"
|
||||
transform="rotate(45 57.1586 5.40387)"
|
||||
fill={color}
|
||||
height="96"
|
||||
transform="rotate(45 79.3604 -19.5216)"
|
||||
fill="#BFDBFE"
|
||||
/>
|
||||
<rect
|
||||
x="59.6335"
|
||||
y="7.87878"
|
||||
x="81.8354"
|
||||
y="-17.0468"
|
||||
width="1.5"
|
||||
height="64"
|
||||
transform="rotate(45 59.6335 7.87878)"
|
||||
fill={color}
|
||||
height="96"
|
||||
transform="rotate(45 81.8354 -17.0468)"
|
||||
fill="#BFDBFE"
|
||||
/>
|
||||
<rect
|
||||
x="62.1084"
|
||||
y="10.3536"
|
||||
x="84.3105"
|
||||
y="-14.5719"
|
||||
width="1.5"
|
||||
height="64"
|
||||
transform="rotate(45 62.1084 10.3536)"
|
||||
fill={color}
|
||||
height="96"
|
||||
transform="rotate(45 84.3105 -14.5719)"
|
||||
fill="#BFDBFE"
|
||||
/>
|
||||
<rect
|
||||
x="64.5833"
|
||||
y="12.8285"
|
||||
x="86.7852"
|
||||
y="-12.097"
|
||||
width="1.5"
|
||||
height="64"
|
||||
transform="rotate(45 64.5833 12.8285)"
|
||||
fill={color}
|
||||
height="96"
|
||||
transform="rotate(45 86.7852 -12.097)"
|
||||
fill="#BFDBFE"
|
||||
/>
|
||||
<rect
|
||||
x="67.0581"
|
||||
y="15.3034"
|
||||
x="89.2603"
|
||||
y="-9.62215"
|
||||
width="1.5"
|
||||
height="64"
|
||||
transform="rotate(45 67.0581 15.3034)"
|
||||
fill={color}
|
||||
height="96"
|
||||
transform="rotate(45 89.2603 -9.62215)"
|
||||
fill="#BFDBFE"
|
||||
/>
|
||||
<rect
|
||||
x="91.7349"
|
||||
y="-7.14726"
|
||||
width="1.5"
|
||||
height="96"
|
||||
transform="rotate(45 91.7349 -7.14726)"
|
||||
fill="#BFDBFE"
|
||||
/>
|
||||
<rect
|
||||
x="94.21"
|
||||
y="-4.67239"
|
||||
width="1.5"
|
||||
height="96"
|
||||
transform="rotate(45 94.21 -4.67239)"
|
||||
fill="#BFDBFE"
|
||||
/>
|
||||
<rect
|
||||
x="96.6846"
|
||||
y="-2.19753"
|
||||
width="1.5"
|
||||
height="96"
|
||||
transform="rotate(45 96.6846 -2.19753)"
|
||||
fill="#BFDBFE"
|
||||
/>
|
||||
<rect
|
||||
x="99.1597"
|
||||
y="0.277344"
|
||||
width="1.5"
|
||||
height="96"
|
||||
transform="rotate(45 99.1597 0.277344)"
|
||||
fill="#BFDBFE"
|
||||
/>
|
||||
<rect
|
||||
x="101.634"
|
||||
y="2.75223"
|
||||
width="1.5"
|
||||
height="96"
|
||||
transform="rotate(45 101.634 2.75223)"
|
||||
fill="#BFDBFE"
|
||||
/>
|
||||
<rect
|
||||
x="104.109"
|
||||
y="5.2271"
|
||||
width="1.5"
|
||||
height="96"
|
||||
transform="rotate(45 104.109 5.2271)"
|
||||
fill="#BFDBFE"
|
||||
/>
|
||||
<rect
|
||||
x="106.584"
|
||||
y="7.70197"
|
||||
width="1.5"
|
||||
height="96"
|
||||
transform="rotate(45 106.584 7.70197)"
|
||||
fill="#BFDBFE"
|
||||
/>
|
||||
<rect
|
||||
x="109.059"
|
||||
y="10.1768"
|
||||
width="1.5"
|
||||
height="96"
|
||||
transform="rotate(45 109.059 10.1768)"
|
||||
fill="#BFDBFE"
|
||||
/>
|
||||
<rect
|
||||
x="111.534"
|
||||
y="12.6517"
|
||||
width="1.5"
|
||||
height="96"
|
||||
transform="rotate(45 111.534 12.6517)"
|
||||
fill="#BFDBFE"
|
||||
/>
|
||||
<rect
|
||||
x="114.009"
|
||||
y="15.1266"
|
||||
width="1.5"
|
||||
height="96"
|
||||
transform="rotate(45 114.009 15.1266)"
|
||||
fill="#BFDBFE"
|
||||
/>
|
||||
<rect
|
||||
x="116.484"
|
||||
y="17.6015"
|
||||
width="1.5"
|
||||
height="96"
|
||||
transform="rotate(45 116.484 17.6015)"
|
||||
fill="#BFDBFE"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_7397_14857">
|
||||
<clipPath id="clip0_10402_37468">
|
||||
<rect
|
||||
width="82"
|
||||
height="64"
|
||||
width="148.5"
|
||||
height="96"
|
||||
fill="white"
|
||||
transform="translate(10.136 -41.6187) rotate(45)"
|
||||
transform="translate(22.4385 -76.4437) rotate(45)"
|
||||
/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
|
||||
Reference in New Issue
Block a user