mirror of
https://github.com/filecoin-project/slate.git
synced 2025-01-09 02:47:35 +03:00
combined svgs and updated to new svg icons
This commit is contained in:
Martina
parent
2579d754b4
commit
7241995bd1
518
common/svg.js
518
common/svg.js
@ -25,7 +25,7 @@ export const Directory = (props) => {
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
height={props.height}
|
||||
@ -37,28 +37,28 @@ export const Directory = (props) => {
|
||||
);
|
||||
};
|
||||
|
||||
export const Layers = (props) => {
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height={props.height}
|
||||
style={props.style}
|
||||
>
|
||||
<g
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="1"
|
||||
>
|
||||
<path d="m22.917 6.2-10.209-5.278.00000004.00000002c-.444136-.229361-.971863-.229361-1.416-.0000001l-10.209 5.278-.00000007.00000003c-.3021.156451-.420172.528179-.263721.830279.058544.113046.150675.205177.263721.263721l10.209 5.281h.00000001c.444136.229361.971863.229361 1.416.00000005l10.209-5.275.00000002-.00000001c.3021-.156451.420172-.528179.263721-.830279-.058544-.113046-.150675-.205177-.263721-.263721z" />
|
||||
<path d="m5.1 9.375-4.017 2.078-.00000007.00000003c-.3021.156451-.420172.528179-.263721.830279.058544.113046.150675.205177.263721.263721l10.209 5.281h.00000001c.444136.229361.971863.229361 1.416.00000005l10.209-5.281.00000002-.00000001c.3021-.156451.420172-.528179.263721-.830279-.058544-.113046-.150675-.205177-.263721-.263721l-4.017-2.078" />
|
||||
<path d="m5.1 14.625-4.017 2.075-.00000007.00000003c-.3021.156451-.420172.528179-.263721.830279.058544.113046.150675.205177.263721.263721l10.209 5.281h.00000001c.444136.229361.971863.229361 1.416.00000005l10.209-5.275.00000002-.00000001c.3021-.156451.420172-.528179.263721-.830279-.058544-.113046-.150675-.205177-.263721-.263721l-4.017-2.081" />
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
// export const Layers = (props) => {
|
||||
// return (
|
||||
// <svg
|
||||
// viewBox="0 0 24 24"
|
||||
// xmlns="http://www.w3.org/2000/svg"
|
||||
// height={props.height}
|
||||
// style={props.style}
|
||||
// >
|
||||
// <g
|
||||
// fill="none"
|
||||
// stroke="currentColor"
|
||||
// strokeLinecap="round"
|
||||
// strokeLinejoin="round"
|
||||
// strokeWidth="1"
|
||||
// >
|
||||
// <path d="m22.917 6.2-10.209-5.278.00000004.00000002c-.444136-.229361-.971863-.229361-1.416-.0000001l-10.209 5.278-.00000007.00000003c-.3021.156451-.420172.528179-.263721.830279.058544.113046.150675.205177.263721.263721l10.209 5.281h.00000001c.444136.229361.971863.229361 1.416.00000005l10.209-5.275.00000002-.00000001c.3021-.156451.420172-.528179.263721-.830279-.058544-.113046-.150675-.205177-.263721-.263721z" />
|
||||
// <path d="m5.1 9.375-4.017 2.078-.00000007.00000003c-.3021.156451-.420172.528179-.263721.830279.058544.113046.150675.205177.263721.263721l10.209 5.281h.00000001c.444136.229361.971863.229361 1.416.00000005l10.209-5.281.00000002-.00000001c.3021-.156451.420172-.528179.263721-.830279-.058544-.113046-.150675-.205177-.263721-.263721l-4.017-2.078" />
|
||||
// <path d="m5.1 14.625-4.017 2.075-.00000007.00000003c-.3021.156451-.420172.528179-.263721.830279.058544.113046.150675.205177.263721.263721l10.209 5.281h.00000001c.444136.229361.971863.229361 1.416.00000005l10.209-5.275.00000002-.00000001c.3021-.156451.420172-.528179.263721-.830279-.058544-.113046-.150675-.205177-.263721-.263721l-4.017-2.081" />
|
||||
// </g>
|
||||
// </svg>
|
||||
// );
|
||||
// };
|
||||
|
||||
export const Search = (props) => {
|
||||
return (
|
||||
@ -168,6 +168,27 @@ export const Slates = (props) => (
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const Layers = (props) => (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height={props.height}
|
||||
style={props.style}
|
||||
>
|
||||
<g
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M12 2L2 7L12 12L22 7L12 2Z" />
|
||||
<path d="M2 17L12 22L22 17" />
|
||||
<path d="M2 12L12 17L22 12" />
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const HardDrive = (props) => (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
@ -223,37 +244,37 @@ export const ExpandArrow = (props) => (
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const Wallet = (props) => (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height={props.height}
|
||||
style={props.style}
|
||||
>
|
||||
<g
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<rect height="21" rx="1.5" width="22.5" x=".75" y=".75" />
|
||||
<rect height="15" rx="1.5" width="15" x="5.25" y="3.75" />
|
||||
<path d="m3.75 21.75v1.5" />
|
||||
<path d="m20.25 21.75v1.5" />
|
||||
<path d="m3.75 8.25h3" />
|
||||
<path d="m3.75 14.25h3" />
|
||||
<circle cx="12.75" cy="11.25" r="2.7" />
|
||||
<path d="m12.75 8.55v-1.8" />
|
||||
<path d="m12.75 15.75v-1.8" />
|
||||
<path d="m15.45 11.25h1.8" />
|
||||
<path d="m8.25 11.25h1.8" />
|
||||
<path d="m9.986 14.432 1.075-1.075" />
|
||||
<path d="m9.986 8.068 1.075 1.075" />
|
||||
<path d="m15.514 14.432-1.075-1.075" />
|
||||
<path d="m15.514 8.068-1.075 1.075" />
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
// export const Wallet = (props) => (
|
||||
// <svg
|
||||
// viewBox="0 0 24 24"
|
||||
// xmlns="http://www.w3.org/2000/svg"
|
||||
// height={props.height}
|
||||
// style={props.style}
|
||||
// >
|
||||
// <g
|
||||
// fill="none"
|
||||
// stroke="currentColor"
|
||||
// strokeLinecap="round"
|
||||
// strokeLinejoin="round"
|
||||
// >
|
||||
// <rect height="21" rx="1.5" width="22.5" x=".75" y=".75" />
|
||||
// <rect height="15" rx="1.5" width="15" x="5.25" y="3.75" />
|
||||
// <path d="m3.75 21.75v1.5" />
|
||||
// <path d="m20.25 21.75v1.5" />
|
||||
// <path d="m3.75 8.25h3" />
|
||||
// <path d="m3.75 14.25h3" />
|
||||
// <circle cx="12.75" cy="11.25" r="2.7" />
|
||||
// <path d="m12.75 8.55v-1.8" />
|
||||
// <path d="m12.75 15.75v-1.8" />
|
||||
// <path d="m15.45 11.25h1.8" />
|
||||
// <path d="m8.25 11.25h1.8" />
|
||||
// <path d="m9.986 14.432 1.075-1.075" />
|
||||
// <path d="m9.986 8.068 1.075 1.075" />
|
||||
// <path d="m15.514 14.432-1.075-1.075" />
|
||||
// <path d="m15.514 8.068-1.075 1.075" />
|
||||
// </g>
|
||||
// </svg>
|
||||
// );
|
||||
|
||||
export const NavigationArrow = (props) => (
|
||||
<svg viewBox="0 0 24 24" height={props.height} style={props.style}>
|
||||
@ -270,15 +291,29 @@ export const NavigationArrow = (props) => (
|
||||
</svg>
|
||||
);
|
||||
|
||||
// export const Home = (props) => (
|
||||
// <svg viewBox="0 0 24 24" height={props.height} style={props.style}>
|
||||
// <path
|
||||
// d="m19.5 8.4v-4.9a.5.5 0 0 0 -.5-.5h-2a.5.5 0 0 0 -.5.5v2.14l-4.162-3.829a.5.5 0 0 0 -.678 0l-11 10.321a.5.5 0 0 0 .34.868h2.5v9.5a1 1 0 0 0 1 1h15a1 1 0 0 0 1-1v-9.5h2.5a.5.5 0 0 0 .339-.868z"
|
||||
// fill="none"
|
||||
// stroke="currentColor"
|
||||
// strokeLinecap="round"
|
||||
// strokeLinejoin="round"
|
||||
// />
|
||||
// </svg>
|
||||
// );
|
||||
|
||||
export const Home = (props) => (
|
||||
<svg viewBox="0 0 24 24" height={props.height} style={props.style}>
|
||||
<path
|
||||
d="m19.5 8.4v-4.9a.5.5 0 0 0 -.5-.5h-2a.5.5 0 0 0 -.5.5v2.14l-4.162-3.829a.5.5 0 0 0 -.678 0l-11 10.321a.5.5 0 0 0 .34.868h2.5v9.5a1 1 0 0 0 1 1h15a1 1 0 0 0 1-1v-9.5h2.5a.5.5 0 0 0 .339-.868z"
|
||||
<g
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
strokeWidth="2"
|
||||
>
|
||||
<path d="M3 9L12 2L21 9V20C21 20.5304 20.7893 21.0391 20.4142 21.4142C20.0391 21.7893 19.5304 22 19 22H5C4.46957 22 3.96086 21.7893 3.58579 21.4142C3.21071 21.0391 3 20.5304 3 20V9Z" />
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
|
||||
@ -302,22 +337,22 @@ export const Image = (props) => (
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const Folder = (props) => (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height={props.height}
|
||||
style={props.style}
|
||||
>
|
||||
<path
|
||||
d="m11.236 6h.00000005c-.378666-.0002022-.724736-.214271-.894-.553l-.948-1.894.00000002.00000003c-.169264-.338729-.515334-.552798-.894-.553h-6.5-.00000004c-.552285.00000002-1 .447715-1 1v16 .00000015c.00000008.552285.447715 1 1 1h20-.00000004c.552285.00000002 1-.447715 1-1v-13c0-.552285-.447715-1-1-1z"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
// export const Folder = (props) => (
|
||||
// <svg
|
||||
// viewBox="0 0 24 24"
|
||||
// xmlns="http://www.w3.org/2000/svg"
|
||||
// height={props.height}
|
||||
// style={props.style}
|
||||
// >
|
||||
// <path
|
||||
// d="m11.236 6h.00000005c-.378666-.0002022-.724736-.214271-.894-.553l-.948-1.894.00000002.00000003c-.169264-.338729-.515334-.552798-.894-.553h-6.5-.00000004c-.552285.00000002-1 .447715-1 1v16 .00000015c.00000008.552285.447715 1 1 1h20-.00000004c.552285.00000002 1-.447715 1-1v-13c0-.552285-.447715-1-1-1z"
|
||||
// fill="none"
|
||||
// stroke="currentColor"
|
||||
// strokeLinecap="round"
|
||||
// strokeLinejoin="round"
|
||||
// />
|
||||
// </svg>
|
||||
// );
|
||||
|
||||
export const Channels = (props) => (
|
||||
<svg viewBox="0 0 24 24" height={props.height} style={props.style}>
|
||||
@ -524,21 +559,7 @@ export const Bell = (props) => (
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const Logo = (props) => (
|
||||
<svg
|
||||
viewBox="0 0 127 127"
|
||||
height={props.height}
|
||||
style={props.style}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="m71.4 57.6c-.7 3.3-1.3 6.4-2 9.8 5.9.9 11.7 1.7 17.7 2.6-.5 1.6-.9 3.1-1.4 4.8-5.8-.8-11.5-1.7-17.3-2.5-1.1 4.2-2 8.3-3.3 12.2-1.4 4.4-3 8.7-5 12.9-2.6 5.2-6.8 8.9-12.7 10.1-3.5.7-7 .4-10-1.9-.9-.7-1.8-1.8-1.9-2.8-.1-1.1.5-2.7 1.4-3.3.6-.5 2.3-.1 3.1.5 1.1.8 1.8 2.1 2.6 3.3 1.8 2.5 4.4 2.9 6.8.8 2.9-2.5 4.4-5.8 5.3-9.3 1.9-7.3 3.6-14.8 5.3-22.2.1-.3 0-.7 0-1.3-5.4-.8-10.8-1.7-16.5-2.5.2-1.6.4-3 .6-4.8 5.6.8 11.1 1.6 17 2.4.8-3.2 1.5-6.4 2.3-9.7-6-.9-11.7-1.8-17.8-2.7.2-1.6.4-3.2.6-4.8 6.1.9 12 1.7 18.2 2.6.5-1.8.9-3.5 1.4-5.1 1.7-5.6 3.2-11.3 6.8-16.2s8.1-8.1 14.5-7.8c2.8.1 5.5.9 7.5 3.2.4.5 1 1.1 1 1.6-.1 1.2 0 2.9-.8 3.6-1.1 1.1-2.8.5-4-.6-.9-.9-1.6-1.9-2.3-2.9-1.8-2.4-4.7-2.9-6.8-.7-1.6 1.7-3.2 3.7-3.9 5.9-2.1 6.6-3.8 13.2-5.8 20.2 5.9.9 11.4 1.7 17.1 2.5-.5 1.6-.9 3.1-1.3 4.7-5.5-1.1-10.9-1.9-16.4-2.6z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const Slate2 = (props) => (
|
||||
export const Slate = (props) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height={props.height}
|
||||
@ -556,7 +577,7 @@ export const Slate2 = (props) => (
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const Folder2 = (props) => (
|
||||
export const Folder = (props) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height={props.height}
|
||||
@ -572,7 +593,7 @@ export const Folder2 = (props) => (
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const Tool2 = (props) => (
|
||||
export const Tool = (props) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height={props.height}
|
||||
@ -588,7 +609,7 @@ export const Tool2 = (props) => (
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const Wallet2 = (props) => (
|
||||
export const Wallet = (props) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height={props.height}
|
||||
@ -736,6 +757,112 @@ export const NoImage = (props) => (
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const Eye = (props) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
height={props.height}
|
||||
style={props.style}
|
||||
>
|
||||
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
|
||||
<circle cx="12" cy="12" r="3"></circle>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const Dismiss = (props) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
tabIndex="0"
|
||||
height={props.height}
|
||||
style={props.style}
|
||||
{...props}
|
||||
>
|
||||
<line x1="18" y1="6" x2="6" y2="18" />
|
||||
<line x1="6" y1="6" x2="18" y2="18" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const Settings = (props) => (
|
||||
<svg
|
||||
height={props.height}
|
||||
style={props.style}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<circle cx="12" cy="12" r="3" />
|
||||
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const Privacy = (props) => (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height={props.height}
|
||||
style={props.style}
|
||||
{...props}
|
||||
>
|
||||
<g
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="1.5"
|
||||
>
|
||||
<path d="m22.823 8.611c.570278-.632425.570278-1.59357 0-2.226-2.623-2.885-6.792-5.701-10.823-5.634-4.031-.067-8.2 2.749-10.821 5.634l-.00000003.00000004c-.569817.632603-.569817 1.5934.00000007 2.226 2.563 2.824 6.721 5.706 10.821 5.638" />
|
||||
<path d="m15.75 7.5c0 2.07107-1.67893 3.75-3.75 3.75s-3.75-1.67893-3.75-3.75 1.67893-3.75 3.75-3.75h-.00000016c2.07107-.00000009 3.75 1.67893 3.75 3.75z" />
|
||||
<path d="m15.75 23.25c-.82842 0-1.5-.67158-1.5-1.5v-4.5c0-.82842.67158-1.5 1.5-1.5h6c.82842 0 1.5.67158 1.5 1.5v4.5c0 .82842-.67158 1.5-1.5 1.5z" />
|
||||
<path d="m18.75 11.25h-.00000013c-1.65685.00000007-3 1.34315-3 3v1.5h6v-1.5-.00000013c0-1.65685-1.34315-3-3-3-.00000004 0-.00000009 0-.00000013 0z" />
|
||||
<path d="m18.75 19.154h-.00000002c.207107-.00000001.375.167893.375.375.00000001.207107-.167893.375-.375.375-.207107.00000001-.375-.167893-.375-.375v.00000006c-.00000003-.207107.167893-.375.375-.375" />
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const FileImage = (props) => (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height={props.height}
|
||||
style={props.style}
|
||||
{...props}
|
||||
>
|
||||
<g
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="m21.207 4.5-.00000002-.00000002c.187549.187493.292943.441805.293.707v17.293c0 .552285-.447715 1-1 1h-17-.00000004c-.552285-.00000002-1-.447715-1-1v-21 .00000015c-.00000008-.552285.447715-1 1-1h13.293.00000001c.265195.00005664.519507.105451.707.293z" />
|
||||
<path d="m12.826 12.366-2.8-3.74.00000001.00000002c-.165798-.22083-.479221-.265442-.700051-.0996437-.0578698.0434484-.105619.0989405-.139949.162644l-3.276 6.074.00000001-.00000002c-.130892.24315-.0398879.546371.203262.677262.0727636.0391698.154101.0596942.236738.0597376h4.181" />
|
||||
<path d="m17.3284 13.1716c1.5621 1.5621 1.5621 4.09476 0 5.65685-1.5621 1.5621-4.09476 1.5621-5.65685 0-1.5621-1.5621-1.5621-4.09476 0-5.65685 1.5621-1.5621 4.09476-1.5621 5.65685 0" />
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const Information = (props) => (
|
||||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="m12 0h-.00000052c-6.62742.00000029-12 5.37258-12 12 .00000029 6.62742 5.37258 12 12 12 6.62742-.00000029 12-5.37258 12-12l-.00000013-.00012266c-.00723277-6.62445-5.37568-11.9928-12.0001-11.9999zm0 19h-.00000007c-.828427-.00000004-1.5-.671573-1.5-1.5.00000004-.828427.671573-1.5 1.5-1.5.828427.00000004 1.5.671573 1.5 1.5v-.00000007c0 .828427-.671573 1.5-1.5 1.5zm1.6-6.08h.00000001c-.364588.159119-.600193.519202-.6.917 0 .552285-.447715 1-1 1s-1-.447715-1-1l-.00000003-.00045412c-.00000018-1.19303.706913-2.27268 1.80042-2.74973l.00000001-.00000001c1.01225-.442058 1.47449-1.62101 1.03243-2.63326-.442058-1.01225-1.62101-1.47449-2.63326-1.03243-.728973.318347-1.19999 1.03843-1.19958 1.83388 0 .552285-.447715 1-1 1s-1-.447715-1-1v-.00005995c-.00000033-2.20914 1.79086-4 4-4 2.20914-.00000033 4 1.79086 4 4 .00000024 1.59051-.942318 3.0299-2.40005 3.66609z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const Plus = (props) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
@ -751,3 +878,212 @@ export const Plus = (props) => (
|
||||
<line x1="5" y1="12" x2="19" y2="12" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const Logo = (props) => (
|
||||
<svg
|
||||
viewBox="0 0 127 127"
|
||||
height={props.height}
|
||||
style={props.style}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
d="m71.4 57.6c-.7 3.3-1.3 6.4-2 9.8 5.9.9 11.7 1.7 17.7 2.6-.5 1.6-.9 3.1-1.4 4.8-5.8-.8-11.5-1.7-17.3-2.5-1.1 4.2-2 8.3-3.3 12.2-1.4 4.4-3 8.7-5 12.9-2.6 5.2-6.8 8.9-12.7 10.1-3.5.7-7 .4-10-1.9-.9-.7-1.8-1.8-1.9-2.8-.1-1.1.5-2.7 1.4-3.3.6-.5 2.3-.1 3.1.5 1.1.8 1.8 2.1 2.6 3.3 1.8 2.5 4.4 2.9 6.8.8 2.9-2.5 4.4-5.8 5.3-9.3 1.9-7.3 3.6-14.8 5.3-22.2.1-.3 0-.7 0-1.3-5.4-.8-10.8-1.7-16.5-2.5.2-1.6.4-3 .6-4.8 5.6.8 11.1 1.6 17 2.4.8-3.2 1.5-6.4 2.3-9.7-6-.9-11.7-1.8-17.8-2.7.2-1.6.4-3.2.6-4.8 6.1.9 12 1.7 18.2 2.6.5-1.8.9-3.5 1.4-5.1 1.7-5.6 3.2-11.3 6.8-16.2s8.1-8.1 14.5-7.8c2.8.1 5.5.9 7.5 3.2.4.5 1 1.1 1 1.6-.1 1.2 0 2.9-.8 3.6-1.1 1.1-2.8.5-4-.6-.9-.9-1.6-1.9-2.3-2.9-1.8-2.4-4.7-2.9-6.8-.7-1.6 1.7-3.2 3.7-3.9 5.9-2.1 6.6-3.8 13.2-5.8 20.2 5.9.9 11.4 1.7 17.1 2.5-.5 1.6-.9 3.1-1.3 4.7-5.5-1.1-10.9-1.9-16.4-2.6z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const ChevronDown = (props) => {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
{...props}
|
||||
>
|
||||
<polyline points="6 9 12 15 18 9" />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export const CheckBox = (props) => {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
{...props}
|
||||
>
|
||||
<polyline points="20 6 9 17 4 12" />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export const CopyAndPaste = (props) => {
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
{...props}
|
||||
>
|
||||
<path d="m9.5 21.5h-8-.00000004c-.552285-.00000002-1-.447715-1-1v-16 .00000015c-.00000008-.552285.447715-1 1-1h2" />
|
||||
<path d="m13.5 3.5h2-.00000004c.552285-.00000002 1 .447715 1 1v3.5" />
|
||||
<path d="m9.56066.93834c.585786.585786.585786 1.53553 0 2.12132-.585786.585786-1.53553.585786-2.12132 0-.585786-.585786-.585786-1.53553 0-2.12132.585786-.585786 1.53553-.585786 2.12132 0" />
|
||||
<path d="m9.915 2.5h2.585-.00000004c.552285-.00000002 1 .447715 1 1v1c0 .552285-.447715 1-1 1h-8-.00000004c-.552285-.00000002-1-.447715-1-1v-1 .00000015c-.00000008-.552285.447715-1 1-1h2.585" />
|
||||
<path d="m22.5 22.5c0 .552285-.447715 1-1 1h-9-.00000004c-.552285-.00000002-1-.447715-1-1v-11.5.00000015c-.00000008-.552285.447715-1 1-1h7.086.00000001c.265195.00005664.519507.105451.707.293l1.914 1.914-.00000002-.00000002c.187549.187493.292943.441805.293.707z" />
|
||||
<path d="m14.5 14.5h5" />
|
||||
<path d="m14.5 17.5h5" />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export const BandwidthDown = (props) => {
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="1.5"
|
||||
{...props}
|
||||
>
|
||||
<path d="m20.25 17.25h-.00000013c1.65685-.00000007 3 1.34315 3 3 .00000007 1.65685-1.34315 3-3 3h-16.5-.00000013c-1.65685-.00000007-3-1.34315-3-3 .00000007-1.65685 1.34315-3 3-3z" />
|
||||
<path d="m7.5 6.751h-1.356-.00000002c-1.39991-.00004099-2.61375.968129-2.925 2.333l-2.394 10.499" />
|
||||
<path d="m23.175 19.583-2.394-10.5.00000014.0000006c-.311246-1.36487-1.52509-2.33304-2.925-2.333h-1.356" />
|
||||
<path d="m19.125 19.875h-.00000002c-.207107.00000001-.375.167893-.375.375.00000001.207107.167893.375.375.375.207107-.00000001.375-.167893.375-.375 0-.207107-.167893-.375-.375-.375" />
|
||||
<path d="m9.75 20.25h-5.25" />
|
||||
<path d="m9 9.75 3 3 3-3" />
|
||||
<path d="m12 12.75v-12" />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export const BandwidthUp = (props) => {
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="1.5"
|
||||
{...props}
|
||||
>
|
||||
<path d="m20.25 17.25h-.00000013c1.65685-.00000007 3 1.34315 3 3 .00000007 1.65685-1.34315 3-3 3h-16.5-.00000013c-1.65685-.00000007-3-1.34315-3-3 .00000007-1.65685 1.34315-3 3-3z" />
|
||||
<path d="m7.5 6.751h-1.356-.00000002c-1.39991-.00004099-2.61375.968129-2.925 2.333l-2.394 10.499" />
|
||||
<path d="m23.175 19.583-2.394-10.5.00000014.0000006c-.311246-1.36487-1.52509-2.33304-2.925-2.333h-1.356" />
|
||||
<path d="m19.125 19.875h-.00000002c-.207107.00000001-.375.167893-.375.375.00000001.207107.167893.375.375.375.207107-.00000001.375-.167893.375-.375 0-.207107-.167893-.375-.375-.375" />
|
||||
<path d="m9.75 20.25h-5.25" />
|
||||
<path d="m15 3.75-3-3-3 3" />
|
||||
<path d="m12 .75v12" />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export const Reorder = (props) => {
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 14 14"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="1.5"
|
||||
{...props}
|
||||
>
|
||||
<path d="M2 10C2.55228 10 3 9.55228 3 9C3 8.44772 2.55228 8 2 8C1.44772 8 1 8.44772 1 9C1 9.55228 1.44772 10 2 10Z" />
|
||||
<path d="M2 3C2.55228 3 3 2.55228 3 2C3 1.44772 2.55228 1 2 1C1.44772 1 1 1.44772 1 2C1 2.55228 1.44772 3 2 3Z" />
|
||||
<path d="M9 10C9.55228 10 10 9.55228 10 9C10 8.44772 9.55228 8 9 8C8.44772 8 8 8.44772 8 9C8 9.55228 8.44772 10 9 10Z" />
|
||||
<path d="M9 3C9.55228 3 10 2.55228 10 2C10 1.44772 9.55228 1 9 1C8.44772 1 8 1.44772 8 2C8 2.55228 8.44772 3 9 3Z" />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export const Calendar = (props) => {
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="1.5"
|
||||
{...props}
|
||||
>
|
||||
<rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
|
||||
<line x1="16" y1="2" x2="16" y2="6" />
|
||||
<line x1="8" y1="2" x2="8" y2="6" />
|
||||
<line x1="3" y1="10" x2="21" y2="10" />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export const ChevronRight = (props) => {
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="1.5"
|
||||
{...props}
|
||||
>
|
||||
<polyline points="9 18 15 12 9 6" />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export const ChevronLeft = (props) => {
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="1.5"
|
||||
{...props}
|
||||
>
|
||||
<polyline points="15 18 9 12 15 6" />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export const LocationPin = (props) => {
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="1.5"
|
||||
{...props}
|
||||
>
|
||||
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
|
||||
<circle cx="12" cy="10" r="3" />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import * as React from "react";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as SVG from "~/components/system/svg";
|
||||
import * as SVG from "~/common/svg";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
import { GlobalTooltip } from "~/components/system/components/fragments/GlobalTooltip";
|
||||
|
||||
@ -15,10 +15,10 @@ const IconMap = {
|
||||
WALLET: <SVG.Wallet height="20px" />,
|
||||
DEALS: <SVG.Deals height="20px" />,
|
||||
SLATES: <SVG.Layers height="20px" />,
|
||||
SLATE: <SVG.Slates height="20px" />,
|
||||
SLATE: <SVG.Slate height="20px" />,
|
||||
LOCAL_DATA: <SVG.HardDrive height="20px" />,
|
||||
PROFILE_PAGE: <SVG.ProfileUser height="20px" />,
|
||||
SETTINGS_DEVELOPER: <SVG.SettingsDeveloper height="20px" />,
|
||||
SETTINGS_DEVELOPER: <SVG.Tool height="20px" />,
|
||||
DIRECTORY: <SVG.Directory height="20px" />,
|
||||
};
|
||||
|
||||
@ -64,7 +64,7 @@ const STYLES_CHILDREN = css`
|
||||
height: 100%;
|
||||
overflow-wrap: break-word;
|
||||
padding: 11px 0px 14px 8px;
|
||||
font-family: ${Constants.font.semiBold};
|
||||
font-family: ${Constants.font.text};
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 1.225;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import * as React from "react";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as OldSVG from "~/components/system/svg";
|
||||
import * as SVG from "~/common/svg";
|
||||
|
||||
import {
|
||||
TooltipWrapper,
|
||||
@ -189,7 +189,7 @@ export default class ApplicationUserControls extends React.Component {
|
||||
color: this.state.visible ? Constants.system.white : null,
|
||||
}}
|
||||
>
|
||||
<OldSVG.ChevronDown height="20px" />
|
||||
<SVG.ChevronDown height="20px" />
|
||||
</CircleButtonLight>
|
||||
</div>
|
||||
</TooltipWrapper>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import * as React from "react";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as SVG from "~/components/system/svg";
|
||||
import * as SVG from "~/common/svg";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
|
||||
@ -93,7 +93,7 @@ const SlateEntry = ({ item }) => {
|
||||
<div css={STYLES_ENTRY}>
|
||||
<div css={STYLES_SLATE_ENTRY_CONTAINER}>
|
||||
<div css={STYLES_ICON_CIRCLE}>
|
||||
<SVG.Slate2 height="16px" />
|
||||
<SVG.Slate height="16px" />
|
||||
</div>
|
||||
<div css={STYLES_TITLE}>{item.data.name}</div>
|
||||
{item.owner && item.owner.username ? (
|
||||
@ -114,7 +114,7 @@ const FileEntry = ({ item }) => {
|
||||
<div css={STYLES_ENTRY}>
|
||||
<div css={STYLES_USER_ENTRY_CONTAINER}>
|
||||
<div css={STYLES_ICON_CIRCLE}>
|
||||
<SVG.Folder2 height="16px" />
|
||||
<SVG.Folder height="16px" />
|
||||
</div>
|
||||
<div css={STYLES_TITLE}>
|
||||
{item.data.file.title || item.data.file.name}
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
import * as React from "react";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as SVG from "~/components/system/svg";
|
||||
import * as SVG from "~/common/svg";
|
||||
import * as Actions from "~/common/actions";
|
||||
import * as OldSVG from "~/common/svg";
|
||||
|
||||
import { Responsive, WidthProvider } from "react-grid-layout";
|
||||
import { css } from "@emotion/react";
|
||||
@ -194,7 +193,8 @@ export default class Slate extends React.Component {
|
||||
<CircleButtonGray
|
||||
style={{ margin: 8 }}
|
||||
onMouseUp={(e) => this._handleSelect(e, index)}
|
||||
onTouchEnd={(e) => this._handleSelect(e, index)}>
|
||||
onTouchEnd={(e) => this._handleSelect(e, index)}
|
||||
>
|
||||
<SVG.Eye height="16px" />
|
||||
</CircleButtonGray>
|
||||
|
||||
@ -202,8 +202,9 @@ export default class Slate extends React.Component {
|
||||
<CircleButtonGray
|
||||
style={{ margin: 8 }}
|
||||
onMouseUp={(e) => this._handleDeepLink(e, data)}
|
||||
onTouchEnd={(e) => this._handleDeepLink(e, data)}>
|
||||
<OldSVG.DeepLink height="16px" />
|
||||
onTouchEnd={(e) => this._handleDeepLink(e, data)}
|
||||
>
|
||||
<SVG.DeepLink height="16px" />
|
||||
</CircleButtonGray>
|
||||
) : null}
|
||||
</figure>
|
||||
@ -236,7 +237,8 @@ export default class Slate extends React.Component {
|
||||
useCSSTransforms={false}
|
||||
compactType={this.state.compactType}
|
||||
preventCollision={false}
|
||||
margin={[24, 24]}>
|
||||
margin={[24, 24]}
|
||||
>
|
||||
{this.generateDOM()}
|
||||
</ResponsiveReactGridLayout>
|
||||
|
||||
@ -252,7 +254,8 @@ export default class Slate extends React.Component {
|
||||
style={{
|
||||
backgroundColor:
|
||||
this.props.saving === "IDLE" ? Constants.system.brand : null,
|
||||
}}>
|
||||
}}
|
||||
>
|
||||
{this.props.saving === "SAVING" ? (
|
||||
<LoaderSpinner style={{ height: 16, width: 16 }} />
|
||||
) : this.props.saving === "IDLE" ? (
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import * as React from "react";
|
||||
import * as Strings from "~/common/strings";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as SVG from "~/components/system/svg";
|
||||
import * as SVG from "~/common/svg";
|
||||
import * as System from "~/components/system";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import * as React from "react";
|
||||
import * as Strings from "~/common/strings";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as SVG from "~/components/system/svg";
|
||||
import * as SVG from "~/common/svg";
|
||||
import * as System from "~/components/system";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import * as React from "react";
|
||||
import * as Strings from "~/common/strings";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as SVG from "~/components/system/svg";
|
||||
import * as SVG from "~/common/svg";
|
||||
import * as System from "~/components/system";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import * as React from "react";
|
||||
import * as Strings from "~/common/strings";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as SVG from "~/components/system/svg";
|
||||
import * as SVG from "~/common/svg";
|
||||
import * as System from "~/components/system";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import * as React from "react";
|
||||
import * as Strings from "~/common/strings";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as SVG from "~/components/system/svg";
|
||||
import * as SVG from "~/common/svg";
|
||||
import * as System from "~/components/system";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import * as React from "react";
|
||||
import * as Strings from "~/common/strings";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as SVG from "~/components/system/svg";
|
||||
import * as SVG from "~/common/svg";
|
||||
import * as System from "~/components/system";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import * as React from "react";
|
||||
import * as Strings from "~/common/strings";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as SVG from "~/components/system/svg";
|
||||
import * as SVG from "~/common/svg";
|
||||
import * as System from "~/components/system";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import * as React from "react";
|
||||
import * as Strings from "~/common/strings";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as SVG from "~/components/system/svg";
|
||||
import * as SVG from "~/common/svg";
|
||||
import * as System from "~/components/system";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import * as React from "react";
|
||||
import * as Strings from "~/common/strings";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as SVG from "~/components/system/svg";
|
||||
import * as SVG from "~/common/svg";
|
||||
import * as System from "~/components/system";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
@ -2,7 +2,7 @@ import * as React from "react";
|
||||
import * as Strings from "~/common/strings";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as Actions from "~/common/actions";
|
||||
import * as SVG from "~/components/system/svg";
|
||||
import * as SVG from "~/common/svg";
|
||||
import * as System from "~/components/system";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import * as React from "react";
|
||||
import * as Strings from "~/common/strings";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as SVG from "~/components/system/svg";
|
||||
import * as SVG from "~/common/svg";
|
||||
import * as System from "~/components/system";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import * as React from "react";
|
||||
import * as Strings from "~/common/strings";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as SVG from "~/components/system/svg";
|
||||
import * as SVG from "~/common/svg";
|
||||
import * as System from "~/components/system";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import * as React from "react";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as SVG from "~/components/system/svg";
|
||||
import * as SVG from "~/common/svg";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
@ -74,7 +74,9 @@ export class CheckBox extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<label css={STYLES_CHECKBOX} style={this.props.style}>
|
||||
<figure css={STYLES_CHECKBOX_FIGURE}>{this.props.value ? <SVG.CheckBox height="20px" /> : null}</figure>
|
||||
<figure css={STYLES_CHECKBOX_FIGURE}>
|
||||
{this.props.value ? <SVG.CheckBox height="20px" /> : null}
|
||||
</figure>
|
||||
<input
|
||||
css={STYLES_CHECKBOX_INPUT}
|
||||
name={this.props.name}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import * as React from "react";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as SVG from "~/components/system/svg";
|
||||
import * as SVG from "~/common/svg";
|
||||
|
||||
import { css, keyframes } from "@emotion/react";
|
||||
import moment from "moment";
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import * as React from "react";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as SVG from "~/components/system/svg";
|
||||
import * as SVG from "~/common/svg";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import * as React from "react";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as SVG from "~/components/system/svg";
|
||||
import * as SVG from "~/common/svg";
|
||||
import * as Strings from "~/common/strings";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import * as React from "react";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as SVG from "~/components/system/svg";
|
||||
import * as SVG from "~/common/svg";
|
||||
import * as Strings from "~/common/strings";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import * as React from "react";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as SVG from "~/components/system/svg";
|
||||
import * as SVG from "~/common/svg";
|
||||
import * as Strings from "~/common/strings";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import * as React from "react";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as SVG from "~/components/system/svg";
|
||||
import * as SVG from "~/common/svg";
|
||||
|
||||
import { css, keyframes } from "@emotion/react";
|
||||
import Draggable from "react-draggable";
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import * as React from "react";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as SVG from "~/components/system/svg";
|
||||
import * as SVG from "~/common/svg";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import * as React from "react";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as SVG from "~/components/system/svg";
|
||||
import * as SVG from "~/common/svg";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import * as React from "react";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as SVG from "~/components/system/svg";
|
||||
import * as Strings from "~/common/strings"
|
||||
import * as SVG from "~/common/svg";
|
||||
import * as Strings from "~/common/strings";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
@ -17,21 +17,19 @@ const STYLES_BANDWIDTH = css`
|
||||
`;
|
||||
|
||||
export const StatUpload = (props) => {
|
||||
const size = Strings.bytesToSize(props.size, props.decimal || 2)
|
||||
const size = Strings.bytesToSize(props.size, props.decimal || 2);
|
||||
return (
|
||||
<div css={STYLES_BANDWIDTH} style={props.style}>
|
||||
<SVG.BandwidthUp height="16px" style={{ marginRight: 8 }} />{" "}
|
||||
{size}
|
||||
<SVG.BandwidthUp height="16px" style={{ marginRight: 8 }} /> {size}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const StatDownload = (props) => {
|
||||
const size = Strings.bytesToSize(props.size, props.decimal || 2)
|
||||
const size = Strings.bytesToSize(props.size, props.decimal || 2);
|
||||
return (
|
||||
<div css={STYLES_BANDWIDTH} style={props.style}>
|
||||
<SVG.BandwidthDown height="16px" style={{ marginRight: 8 }} />{" "}
|
||||
{size}
|
||||
<SVG.BandwidthDown height="16px" style={{ marginRight: 8 }} /> {size}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -10,7 +10,7 @@ import * as SubSystem from "~/components/system/components/fragments/TableCompon
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
import { P } from "~/components/system/components/Typography";
|
||||
import * as SVG from "~/components/system/svg";
|
||||
import * as SVG from "~/common/svg";
|
||||
|
||||
const TABLE_COLUMN_WIDTH_DEFAULTS = {
|
||||
1: "100%",
|
||||
@ -132,7 +132,11 @@ export class Table extends React.Component {
|
||||
{this.props.noLabel ? null : (
|
||||
<div css={STYLES_TABLE_TOP_ROW}>
|
||||
{data.columns.map((c, cIndex) => {
|
||||
const text = c.hideLabel ? "" : Strings.isEmpty(c.name) ? c.key : c.name;
|
||||
const text = c.hideLabel
|
||||
? ""
|
||||
: Strings.isEmpty(c.name)
|
||||
? c.key
|
||||
: c.name;
|
||||
let localWidth = c.width ? c.width : width;
|
||||
let flexShrink = c.width && c.width !== "100%" ? "0" : null;
|
||||
if (cIndex === 0 && !c.width) {
|
||||
@ -148,12 +152,15 @@ export class Table extends React.Component {
|
||||
backgroundColor: ac[c.key].color,
|
||||
flexShrink,
|
||||
}}
|
||||
tooltip={c.tooltip}>
|
||||
tooltip={c.tooltip}
|
||||
>
|
||||
{text}
|
||||
</SubSystem.TableColumn>
|
||||
);
|
||||
})}
|
||||
{this.props.onClick ? <div css={STYLES_TABLE_EXPAND_SECTION} /> : null}
|
||||
{this.props.onClick ? (
|
||||
<div css={STYLES_TABLE_EXPAND_SECTION} />
|
||||
) : null}
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -168,7 +175,8 @@ export class Table extends React.Component {
|
||||
const text = r[each];
|
||||
|
||||
let localWidth = field.width ? field.width : width;
|
||||
let flexShrink = field.width && field.width !== "100%" ? "0" : null;
|
||||
let flexShrink =
|
||||
field.width && field.width !== "100%" ? "0" : null;
|
||||
if (cIndex === 0 && !field.width) {
|
||||
localWidth = "100%";
|
||||
}
|
||||
@ -178,11 +186,14 @@ export class Table extends React.Component {
|
||||
key={`${each}-${i}-${cIndex}`}
|
||||
style={{
|
||||
width: localWidth,
|
||||
backgroundColor: this.props.noColor ? null : field.color,
|
||||
backgroundColor: this.props.noColor
|
||||
? null
|
||||
: field.color,
|
||||
flexShrink,
|
||||
}}
|
||||
contentStyle={field.contentStyle}
|
||||
copyable={field.copyable}>
|
||||
copyable={field.copyable}
|
||||
>
|
||||
<div style={field.style}>
|
||||
<SubSystem.TableContent
|
||||
data={r}
|
||||
@ -204,14 +215,16 @@ export class Table extends React.Component {
|
||||
alignItems: "center",
|
||||
alignSelf: "center",
|
||||
justifyContent: "flex-start",
|
||||
}}>
|
||||
}}
|
||||
>
|
||||
<div
|
||||
css={STYLES_TABLE_EXPAND_SECTION}
|
||||
onClick={() => this._handleClick(r.id)}
|
||||
style={{
|
||||
cursor: r.children ? "pointer" : "default",
|
||||
display: "inline-flex",
|
||||
}}>
|
||||
}}
|
||||
>
|
||||
{r.children ? (
|
||||
<SVG.Plus
|
||||
height="16px"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import * as React from "react";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as SVG from "~/components/system/svg";
|
||||
import * as SVG from "~/common/svg";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import * as React from "react";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as SVG from "~/components/system/svg";
|
||||
import * as SVG from "~/common/svg";
|
||||
|
||||
import { css, keyframes } from "@emotion/react";
|
||||
import { dispatchCustomEvent } from "~/common/custom-events";
|
||||
@ -33,8 +33,12 @@ export class GlobalTooltip extends React.Component {
|
||||
};
|
||||
|
||||
getStyle = (rect, bubbleRect, vertical, horizontal) => {
|
||||
let yOffset = this.props.elementRef ? this.props.elementRef.scrollTop : window.pageYOffset;
|
||||
let xOffset = this.props.elementRef ? this.props.elementRef.scrollLeft : window.pageXOffset;
|
||||
let yOffset = this.props.elementRef
|
||||
? this.props.elementRef.scrollTop
|
||||
: window.pageYOffset;
|
||||
let xOffset = this.props.elementRef
|
||||
? this.props.elementRef.scrollLeft
|
||||
: window.pageXOffset;
|
||||
let style = { position: "absolute" };
|
||||
switch (vertical) {
|
||||
case "above":
|
||||
@ -44,7 +48,9 @@ export class GlobalTooltip extends React.Component {
|
||||
style.top = `${rect.bottom - bubbleRect.height + yOffset}px`;
|
||||
break;
|
||||
case "center":
|
||||
style.top = `${rect.top + 0.5 * rect.height - 0.5 * bubbleRect.height + yOffset}px`;
|
||||
style.top = `${
|
||||
rect.top + 0.5 * rect.height - 0.5 * bubbleRect.height + yOffset
|
||||
}px`;
|
||||
break;
|
||||
case "down":
|
||||
style.top = `${rect.top + yOffset}px`;
|
||||
@ -61,7 +67,9 @@ export class GlobalTooltip extends React.Component {
|
||||
style.left = `${rect.right - bubbleRect.width + xOffset}px`;
|
||||
break;
|
||||
case "center":
|
||||
style.left = `${rect.left + 0.5 * rect.width - 0.5 * bubbleRect.width + xOffset}px`;
|
||||
style.left = `${
|
||||
rect.left + 0.5 * rect.width - 0.5 * bubbleRect.width + xOffset
|
||||
}px`;
|
||||
break;
|
||||
case "right":
|
||||
style.left = `${rect.left + xOffset}px`;
|
||||
@ -74,8 +82,12 @@ export class GlobalTooltip extends React.Component {
|
||||
};
|
||||
|
||||
getOrientation = (rect, bubbleRect, vertical, horizontal) => {
|
||||
let yOffset = this.props.elementRef ? this.props.elementRef.scrollTop : window.pageYOffset;
|
||||
let xOffset = this.props.elementRef ? this.props.elementRef.scrollLeft : window.pageXOffset;
|
||||
let yOffset = this.props.elementRef
|
||||
? this.props.elementRef.scrollTop
|
||||
: window.pageYOffset;
|
||||
let xOffset = this.props.elementRef
|
||||
? this.props.elementRef.scrollLeft
|
||||
: window.pageXOffset;
|
||||
if (!vertical) {
|
||||
if (bubbleRect.height > rect.top + yOffset) {
|
||||
vertical = "below";
|
||||
@ -104,7 +116,10 @@ export class GlobalTooltip extends React.Component {
|
||||
};
|
||||
|
||||
_handleAdd = (e) => {
|
||||
if (this.props.allowedTypes && !this.props.allowedTypes.includes(e.detail.type)) {
|
||||
if (
|
||||
this.props.allowedTypes &&
|
||||
!this.props.allowedTypes.includes(e.detail.type)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -123,7 +138,10 @@ export class GlobalTooltip extends React.Component {
|
||||
};
|
||||
|
||||
_handleRemove = (e) => {
|
||||
if (this.props.allowedTypes && !this.props.allowedTypes.includes(e.detail.type)) {
|
||||
if (
|
||||
this.props.allowedTypes &&
|
||||
!this.props.allowedTypes.includes(e.detail.type)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -225,7 +243,8 @@ export class TooltipWrapper extends React.Component {
|
||||
this._bubble = c;
|
||||
}}
|
||||
style={{ display: "inline-flex" }}
|
||||
css={STYLES_INVISIBLE}>
|
||||
css={STYLES_INVISIBLE}
|
||||
>
|
||||
{this.props.content}
|
||||
</div>
|
||||
) : null}
|
||||
@ -233,7 +252,8 @@ export class TooltipWrapper extends React.Component {
|
||||
ref={(c) => {
|
||||
this._root = c;
|
||||
}}
|
||||
style={{ display: "inline-flex" }}>
|
||||
style={{ display: "inline-flex" }}
|
||||
>
|
||||
{this.props.children}
|
||||
</div>
|
||||
</div>
|
||||
@ -304,16 +324,20 @@ export class TooltipAnchor extends React.Component {
|
||||
content={content}
|
||||
horizontal={this.props.horizontal}
|
||||
vertical={this.props.vertical}
|
||||
type={this.props.type}>
|
||||
type={this.props.type}
|
||||
>
|
||||
<span
|
||||
css={STYLES_TOOLTIP_ANCHOR}
|
||||
style={this.props.anchorStyle}
|
||||
onMouseEnter={this._handleMouseEnter}
|
||||
onMouseLeave={this._handleMouseLeave}>
|
||||
onMouseLeave={this._handleMouseLeave}
|
||||
>
|
||||
{this.props.children ? (
|
||||
this.props.children
|
||||
) : (
|
||||
<SVG.Information height={this.props.height ? this.props.height : "24px"} />
|
||||
<SVG.Information
|
||||
height={this.props.height ? this.props.height : "24px"}
|
||||
/>
|
||||
)}
|
||||
</span>
|
||||
</TooltipWrapper>
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import * as React from "react";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as SVG from "~/components/system/svg";
|
||||
import * as OldSVG from "~/common/svg";
|
||||
import * as SVG from "~/common/svg";
|
||||
import * as Strings from "~/common/strings";
|
||||
|
||||
import { LoaderSpinner } from "~/components/system/components/Loaders";
|
||||
@ -34,7 +33,7 @@ const COMPONENTS_ICON = {
|
||||
PNG: <SVG.FileImage height="24px" />,
|
||||
["image/png"]: <SVG.FileImage height="24px" />,
|
||||
["image/jpeg"]: <SVG.FileImage height="24px" />,
|
||||
FOLDER: <OldSVG.Folder height="24px" />,
|
||||
FOLDER: <SVG.Folder height="24px" />,
|
||||
};
|
||||
|
||||
const STYLES_TABLE_TAG = css`
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import * as React from "react";
|
||||
import * as SVG from "~/components/system/svg";
|
||||
import * as SVG from "~/common/svg";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
@ -20,7 +20,9 @@ export class TooltipAnchor extends React.Component {
|
||||
{this.props.children ? (
|
||||
this.props.children
|
||||
) : (
|
||||
<SVG.Information height={this.props.height ? this.props.height : "24px"} />
|
||||
<SVG.Information
|
||||
height={this.props.height ? this.props.height : "24px"}
|
||||
/>
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
|
||||
@ -85,8 +85,7 @@ import {
|
||||
|
||||
import { AvatarGroup } from "~/components/system/components/AvatarGroup";
|
||||
|
||||
import * as SVG from "~/components/system/svg";
|
||||
import * as OldSVG from "~/common/svg";
|
||||
import * as SVG from "~/common/svg";
|
||||
|
||||
// NOTE(jim): Export everything.
|
||||
export {
|
||||
@ -151,7 +150,6 @@ export {
|
||||
// NOTE(jim): System values
|
||||
Constants,
|
||||
SVG,
|
||||
OldSVG,
|
||||
LoaderCircles,
|
||||
LoaderDiamonds,
|
||||
LoaderMoon,
|
||||
|
||||
@ -1,14 +1,13 @@
|
||||
import * as React from "react";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as Strings from "~/common/strings";
|
||||
import * as SVG from "~/components/system/svg";
|
||||
import * as SVG from "~/common/svg";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
import { Table } from "~/components/system/components/Table";
|
||||
import { StatUpload, StatDownload } from "~/components/system/components/Stat";
|
||||
|
||||
let genericImg =
|
||||
`https://bafybeiblly23jomdjjiq7ilth667npcfm5llqb5xfstodbbfa5pxtoek7u.${Constants.gateways.ipfs}`;
|
||||
let genericImg = `https://bafybeiblly23jomdjjiq7ilth667npcfm5llqb5xfstodbbfa5pxtoek7u.${Constants.gateways.ipfs}`;
|
||||
|
||||
const STYLES_BUTTON = `
|
||||
font-family: ${Constants.font.text};
|
||||
|
||||
@ -1,287 +0,0 @@
|
||||
export const Eye = (props) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
height={props.height}
|
||||
style={props.style}>
|
||||
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
|
||||
<circle cx="12" cy="12" r="3"></circle>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const Dismiss = (props) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
tabIndex="0"
|
||||
height={props.height}
|
||||
style={props.style}
|
||||
{...props}>
|
||||
<line x1="18" y1="6" x2="6" y2="18" />
|
||||
<line x1="6" y1="6" x2="18" y2="18" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const Settings = (props) => (
|
||||
<svg
|
||||
height={props.height}
|
||||
style={props.style}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round">
|
||||
<circle cx="12" cy="12" r="3" />
|
||||
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const Privacy = (props) => (
|
||||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" height={props.height} style={props.style} {...props}>
|
||||
<g fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5">
|
||||
<path d="m22.823 8.611c.570278-.632425.570278-1.59357 0-2.226-2.623-2.885-6.792-5.701-10.823-5.634-4.031-.067-8.2 2.749-10.821 5.634l-.00000003.00000004c-.569817.632603-.569817 1.5934.00000007 2.226 2.563 2.824 6.721 5.706 10.821 5.638" />
|
||||
<path d="m15.75 7.5c0 2.07107-1.67893 3.75-3.75 3.75s-3.75-1.67893-3.75-3.75 1.67893-3.75 3.75-3.75h-.00000016c2.07107-.00000009 3.75 1.67893 3.75 3.75z" />
|
||||
<path d="m15.75 23.25c-.82842 0-1.5-.67158-1.5-1.5v-4.5c0-.82842.67158-1.5 1.5-1.5h6c.82842 0 1.5.67158 1.5 1.5v4.5c0 .82842-.67158 1.5-1.5 1.5z" />
|
||||
<path d="m18.75 11.25h-.00000013c-1.65685.00000007-3 1.34315-3 3v1.5h6v-1.5-.00000013c0-1.65685-1.34315-3-3-3-.00000004 0-.00000009 0-.00000013 0z" />
|
||||
<path d="m18.75 19.154h-.00000002c.207107-.00000001.375.167893.375.375.00000001.207107-.167893.375-.375.375-.207107.00000001-.375-.167893-.375-.375v.00000006c-.00000003-.207107.167893-.375.375-.375" />
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const FileImage = (props) => (
|
||||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" height={props.height} style={props.style} {...props}>
|
||||
<g fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="m21.207 4.5-.00000002-.00000002c.187549.187493.292943.441805.293.707v17.293c0 .552285-.447715 1-1 1h-17-.00000004c-.552285-.00000002-1-.447715-1-1v-21 .00000015c-.00000008-.552285.447715-1 1-1h13.293.00000001c.265195.00005664.519507.105451.707.293z" />
|
||||
<path d="m12.826 12.366-2.8-3.74.00000001.00000002c-.165798-.22083-.479221-.265442-.700051-.0996437-.0578698.0434484-.105619.0989405-.139949.162644l-3.276 6.074.00000001-.00000002c-.130892.24315-.0398879.546371.203262.677262.0727636.0391698.154101.0596942.236738.0597376h4.181" />
|
||||
<path d="m17.3284 13.1716c1.5621 1.5621 1.5621 4.09476 0 5.65685-1.5621 1.5621-4.09476 1.5621-5.65685 0-1.5621-1.5621-1.5621-4.09476 0-5.65685 1.5621-1.5621 4.09476-1.5621 5.65685 0" />
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const Information = (props) => (
|
||||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="m12 0h-.00000052c-6.62742.00000029-12 5.37258-12 12 .00000029 6.62742 5.37258 12 12 12 6.62742-.00000029 12-5.37258 12-12l-.00000013-.00012266c-.00723277-6.62445-5.37568-11.9928-12.0001-11.9999zm0 19h-.00000007c-.828427-.00000004-1.5-.671573-1.5-1.5.00000004-.828427.671573-1.5 1.5-1.5.828427.00000004 1.5.671573 1.5 1.5v-.00000007c0 .828427-.671573 1.5-1.5 1.5zm1.6-6.08h.00000001c-.364588.159119-.600193.519202-.6.917 0 .552285-.447715 1-1 1s-1-.447715-1-1l-.00000003-.00045412c-.00000018-1.19303.706913-2.27268 1.80042-2.74973l.00000001-.00000001c1.01225-.442058 1.47449-1.62101 1.03243-2.63326-.442058-1.01225-1.62101-1.47449-2.63326-1.03243-.728973.318347-1.19999 1.03843-1.19958 1.83388 0 .552285-.447715 1-1 1s-1-.447715-1-1v-.00005995c-.00000033-2.20914 1.79086-4 4-4 2.20914-.00000033 4 1.79086 4 4 .00000024 1.59051-.942318 3.0299-2.40005 3.66609z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const Plus = (props) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
{...props}>
|
||||
<line x1="12" y1="5" x2="12" y2="19" />
|
||||
<line x1="5" y1="12" x2="19" y2="12" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const Logo = (props) => (
|
||||
<svg viewBox="0 0 127 127" height={props.height} style={props.style} xmlns="http://www.w3.org/2000/svg" {...props}>
|
||||
<path
|
||||
d="m71.4 57.6c-.7 3.3-1.3 6.4-2 9.8 5.9.9 11.7 1.7 17.7 2.6-.5 1.6-.9 3.1-1.4 4.8-5.8-.8-11.5-1.7-17.3-2.5-1.1 4.2-2 8.3-3.3 12.2-1.4 4.4-3 8.7-5 12.9-2.6 5.2-6.8 8.9-12.7 10.1-3.5.7-7 .4-10-1.9-.9-.7-1.8-1.8-1.9-2.8-.1-1.1.5-2.7 1.4-3.3.6-.5 2.3-.1 3.1.5 1.1.8 1.8 2.1 2.6 3.3 1.8 2.5 4.4 2.9 6.8.8 2.9-2.5 4.4-5.8 5.3-9.3 1.9-7.3 3.6-14.8 5.3-22.2.1-.3 0-.7 0-1.3-5.4-.8-10.8-1.7-16.5-2.5.2-1.6.4-3 .6-4.8 5.6.8 11.1 1.6 17 2.4.8-3.2 1.5-6.4 2.3-9.7-6-.9-11.7-1.8-17.8-2.7.2-1.6.4-3.2.6-4.8 6.1.9 12 1.7 18.2 2.6.5-1.8.9-3.5 1.4-5.1 1.7-5.6 3.2-11.3 6.8-16.2s8.1-8.1 14.5-7.8c2.8.1 5.5.9 7.5 3.2.4.5 1 1.1 1 1.6-.1 1.2 0 2.9-.8 3.6-1.1 1.1-2.8.5-4-.6-.9-.9-1.6-1.9-2.3-2.9-1.8-2.4-4.7-2.9-6.8-.7-1.6 1.7-3.2 3.7-3.9 5.9-2.1 6.6-3.8 13.2-5.8 20.2 5.9.9 11.4 1.7 17.1 2.5-.5 1.6-.9 3.1-1.3 4.7-5.5-1.1-10.9-1.9-16.4-2.6z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const ChevronDown = (props) => {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
{...props}>
|
||||
<polyline points="6 9 12 15 18 9" />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export const CheckBox = (props) => {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
{...props}>
|
||||
<polyline points="20 6 9 17 4 12" />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export const CopyAndPaste = (props) => {
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
{...props}>
|
||||
<path d="m9.5 21.5h-8-.00000004c-.552285-.00000002-1-.447715-1-1v-16 .00000015c-.00000008-.552285.447715-1 1-1h2" />
|
||||
<path d="m13.5 3.5h2-.00000004c.552285-.00000002 1 .447715 1 1v3.5" />
|
||||
<path d="m9.56066.93834c.585786.585786.585786 1.53553 0 2.12132-.585786.585786-1.53553.585786-2.12132 0-.585786-.585786-.585786-1.53553 0-2.12132.585786-.585786 1.53553-.585786 2.12132 0" />
|
||||
<path d="m9.915 2.5h2.585-.00000004c.552285-.00000002 1 .447715 1 1v1c0 .552285-.447715 1-1 1h-8-.00000004c-.552285-.00000002-1-.447715-1-1v-1 .00000015c-.00000008-.552285.447715-1 1-1h2.585" />
|
||||
<path d="m22.5 22.5c0 .552285-.447715 1-1 1h-9-.00000004c-.552285-.00000002-1-.447715-1-1v-11.5.00000015c-.00000008-.552285.447715-1 1-1h7.086.00000001c.265195.00005664.519507.105451.707.293l1.914 1.914-.00000002-.00000002c.187549.187493.292943.441805.293.707z" />
|
||||
<path d="m14.5 14.5h5" />
|
||||
<path d="m14.5 17.5h5" />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export const BandwidthDown = (props) => {
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="1.5"
|
||||
{...props}>
|
||||
<path d="m20.25 17.25h-.00000013c1.65685-.00000007 3 1.34315 3 3 .00000007 1.65685-1.34315 3-3 3h-16.5-.00000013c-1.65685-.00000007-3-1.34315-3-3 .00000007-1.65685 1.34315-3 3-3z" />
|
||||
<path d="m7.5 6.751h-1.356-.00000002c-1.39991-.00004099-2.61375.968129-2.925 2.333l-2.394 10.499" />
|
||||
<path d="m23.175 19.583-2.394-10.5.00000014.0000006c-.311246-1.36487-1.52509-2.33304-2.925-2.333h-1.356" />
|
||||
<path d="m19.125 19.875h-.00000002c-.207107.00000001-.375.167893-.375.375.00000001.207107.167893.375.375.375.207107-.00000001.375-.167893.375-.375 0-.207107-.167893-.375-.375-.375" />
|
||||
<path d="m9.75 20.25h-5.25" />
|
||||
<path d="m9 9.75 3 3 3-3" />
|
||||
<path d="m12 12.75v-12" />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export const BandwidthUp = (props) => {
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="1.5"
|
||||
{...props}>
|
||||
<path d="m20.25 17.25h-.00000013c1.65685-.00000007 3 1.34315 3 3 .00000007 1.65685-1.34315 3-3 3h-16.5-.00000013c-1.65685-.00000007-3-1.34315-3-3 .00000007-1.65685 1.34315-3 3-3z" />
|
||||
<path d="m7.5 6.751h-1.356-.00000002c-1.39991-.00004099-2.61375.968129-2.925 2.333l-2.394 10.499" />
|
||||
<path d="m23.175 19.583-2.394-10.5.00000014.0000006c-.311246-1.36487-1.52509-2.33304-2.925-2.333h-1.356" />
|
||||
<path d="m19.125 19.875h-.00000002c-.207107.00000001-.375.167893-.375.375.00000001.207107.167893.375.375.375.207107-.00000001.375-.167893.375-.375 0-.207107-.167893-.375-.375-.375" />
|
||||
<path d="m9.75 20.25h-5.25" />
|
||||
<path d="m15 3.75-3-3-3 3" />
|
||||
<path d="m12 .75v12" />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export const Reorder = (props) => {
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 14 14"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="1.5"
|
||||
{...props}>
|
||||
<path d="M2 10C2.55228 10 3 9.55228 3 9C3 8.44772 2.55228 8 2 8C1.44772 8 1 8.44772 1 9C1 9.55228 1.44772 10 2 10Z" />
|
||||
<path d="M2 3C2.55228 3 3 2.55228 3 2C3 1.44772 2.55228 1 2 1C1.44772 1 1 1.44772 1 2C1 2.55228 1.44772 3 2 3Z" />
|
||||
<path d="M9 10C9.55228 10 10 9.55228 10 9C10 8.44772 9.55228 8 9 8C8.44772 8 8 8.44772 8 9C8 9.55228 8.44772 10 9 10Z" />
|
||||
<path d="M9 3C9.55228 3 10 2.55228 10 2C10 1.44772 9.55228 1 9 1C8.44772 1 8 1.44772 8 2C8 2.55228 8.44772 3 9 3Z" />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export const Calendar = (props) => {
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="1.5"
|
||||
{...props}>
|
||||
<rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
|
||||
<line x1="16" y1="2" x2="16" y2="6" />
|
||||
<line x1="8" y1="2" x2="8" y2="6" />
|
||||
<line x1="3" y1="10" x2="21" y2="10" />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export const ChevronRight = (props) => {
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="1.5"
|
||||
{...props}>
|
||||
<polyline points="9 18 15 12 9 6" />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export const ChevronLeft = (props) => {
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="1.5"
|
||||
{...props}>
|
||||
<polyline points="15 18 9 12 15 6" />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export const LocationPin = (props) => {
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="1.5"
|
||||
{...props}>
|
||||
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
|
||||
<circle cx="12" cy="10" r="3" />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
@ -1,7 +1,6 @@
|
||||
import * as React from "react";
|
||||
import * as System from "~/components/system";
|
||||
import * as SVG from "~/components/system/svg";
|
||||
import * as OldSVG from "~/common/svg";
|
||||
import * as SVG from "~/common/svg";
|
||||
import * as Constants from "~/common/constants";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
@ -19,17 +18,17 @@ const ICONS = [
|
||||
<SVG.CopyAndPaste height={DEFAULT_SYSTEM_ICON_SIZE} />,
|
||||
<SVG.Plus height={DEFAULT_SYSTEM_ICON_SIZE} />,
|
||||
<SVG.CheckBox height={DEFAULT_SYSTEM_ICON_SIZE} />,
|
||||
<OldSVG.Layers height={DEFAULT_SYSTEM_ICON_SIZE} />,
|
||||
<OldSVG.Slates height={DEFAULT_SYSTEM_ICON_SIZE} />,
|
||||
<OldSVG.Home height={DEFAULT_SYSTEM_ICON_SIZE} />,
|
||||
<OldSVG.Activity height={DEFAULT_SYSTEM_ICON_SIZE} />,
|
||||
<OldSVG.Directory height={DEFAULT_SYSTEM_ICON_SIZE} />,
|
||||
<OldSVG.Folder height={DEFAULT_SYSTEM_ICON_SIZE} />,
|
||||
<OldSVG.Wallet height={DEFAULT_SYSTEM_ICON_SIZE} />,
|
||||
<OldSVG.Deals height={DEFAULT_SYSTEM_ICON_SIZE} />,
|
||||
<OldSVG.HardDrive height={DEFAULT_SYSTEM_ICON_SIZE} />,
|
||||
<OldSVG.ProfileUser height={DEFAULT_SYSTEM_ICON_SIZE} />,
|
||||
<OldSVG.SettingsDeveloper height={DEFAULT_SYSTEM_ICON_SIZE} />,
|
||||
<SVG.Layers height={DEFAULT_SYSTEM_ICON_SIZE} />,
|
||||
<SVG.Slates height={DEFAULT_SYSTEM_ICON_SIZE} />,
|
||||
<SVG.Home height={DEFAULT_SYSTEM_ICON_SIZE} />,
|
||||
<SVG.Activity height={DEFAULT_SYSTEM_ICON_SIZE} />,
|
||||
<SVG.Directory height={DEFAULT_SYSTEM_ICON_SIZE} />,
|
||||
<SVG.Folder height={DEFAULT_SYSTEM_ICON_SIZE} />,
|
||||
<SVG.Wallet height={DEFAULT_SYSTEM_ICON_SIZE} />,
|
||||
<SVG.Deals height={DEFAULT_SYSTEM_ICON_SIZE} />,
|
||||
<SVG.HardDrive height={DEFAULT_SYSTEM_ICON_SIZE} />,
|
||||
<SVG.ProfileUser height={DEFAULT_SYSTEM_ICON_SIZE} />,
|
||||
<SVG.SettingsDeveloper height={DEFAULT_SYSTEM_ICON_SIZE} />,
|
||||
];
|
||||
|
||||
const STYLES_ICON = css`
|
||||
@ -67,10 +66,7 @@ export default class SystemPageIcons extends React.Component {
|
||||
<System.P>Import the SVG Components.</System.P>
|
||||
<br />
|
||||
<br />
|
||||
<CodeBlock>
|
||||
{`import { SVG } from "slate-react-system";
|
||||
import { OldSVG } from "slate-react-system";`}
|
||||
</CodeBlock>
|
||||
<CodeBlock>{`import { SVG } from "slate-react-system";`}</CodeBlock>
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Usage</System.H2>
|
||||
@ -79,20 +75,20 @@ import { OldSVG } from "slate-react-system";`}
|
||||
<System.P>Declare the SVG icons.</System.P>
|
||||
<br />
|
||||
<CodeBlock>
|
||||
{`<OldSVG.Home height='88px' />
|
||||
<OldSVG.Folder height='88px' />
|
||||
<OldSVG.Wallet height='88px' />
|
||||
<OldSVG.Channels height='88px' />
|
||||
<OldSVG.Deals height='88px' />
|
||||
<OldSVG.Peers height='88px' />
|
||||
<OldSVG.Deals height='88px' />
|
||||
<OldSVG.Status height='88px' />
|
||||
<OldSVG.Stats height='88px' />
|
||||
<OldSVG.DataTransfer height='88px' />
|
||||
<OldSVG.Logs height='88px' />
|
||||
<OldSVG.Miners height='88px' />
|
||||
<OldSVG.StorageMarket height='88px' />
|
||||
<OldSVG.Slates height='88px' />
|
||||
{`<SVG.Home height='88px' />
|
||||
<SVG.Folder height='88px' />
|
||||
<SVG.Wallet height='88px' />
|
||||
<SVG.Channels height='88px' />
|
||||
<SVG.Deals height='88px' />
|
||||
<SVG.Peers height='88px' />
|
||||
<SVG.Deals height='88px' />
|
||||
<SVG.Status height='88px' />
|
||||
<SVG.Stats height='88px' />
|
||||
<SVG.DataTransfer height='88px' />
|
||||
<SVG.Logs height='88px' />
|
||||
<SVG.Miners height='88px' />
|
||||
<SVG.StorageMarket height='88px' />
|
||||
<SVG.Slates height='88px' />
|
||||
<SVG.BandwidthUp height='88px' />
|
||||
<SVG.BandwidthDown height='88px' />
|
||||
<SVG.Information height='88px' />
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import * as React from "react";
|
||||
import * as System from "~/components/system";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as SVG from "~/components/system/svg";
|
||||
import * as SVG from "~/common/svg";
|
||||
|
||||
import Group from "~/components/system/Group";
|
||||
import SystemPage from "~/components/system/SystemPage";
|
||||
|
||||
@ -2,7 +2,7 @@ import * as React from "react";
|
||||
import * as System from "~/components/system";
|
||||
import * as Actions from "~/common/actions";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as SVG from "~/components/system/svg";
|
||||
import * as SVG from "~/common/svg";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
import { TabGroup } from "~/components/core/TabGroup";
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import * as React from "react";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as SVG from "~/components/system/svg";
|
||||
import * as SVG from "~/common/svg";
|
||||
import * as Strings from "~/common/strings";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
@ -2,7 +2,7 @@ import * as React from "react";
|
||||
import * as System from "~/components/system";
|
||||
import * as Actions from "~/common/actions";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as SVG from "~/components/system/svg";
|
||||
import * as SVG from "~/common/svg";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
import {
|
||||
|
||||
@ -2,7 +2,7 @@ import * as React from "react";
|
||||
import * as Actions from "~/common/actions";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as System from "~/components/system";
|
||||
import * as SVG from "~/components/system/svg";
|
||||
import * as SVG from "~/common/svg";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@ import * as React from "react";
|
||||
import * as System from "~/components/system";
|
||||
import * as Actions from "~/common/actions";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as SVG from "~/components/system/svg";
|
||||
import * as SVG from "~/common/svg";
|
||||
import * as Window from "~/common/window";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import * as React from "react";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as System from "~/components/system";
|
||||
import * as SVG from "~/components/system/svg";
|
||||
import * as SVG from "~/common/svg";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
import { TabGroup } from "~/components/core/TabGroup";
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import * as React from "react";
|
||||
import * as Strings from "~/common/strings";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as SVG from "~/components/system/svg";
|
||||
import * as SVG from "~/common/svg";
|
||||
import * as System from "~/components/system";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
Loading…
Reference in New Issue
Block a user