small ui fixes

This commit is contained in:
Joni Juup
2022-02-07 16:23:39 +02:00
parent 94e126782b
commit ca3d60cfb8
15 changed files with 240 additions and 33 deletions

View File

@@ -1,7 +1,7 @@
import { styled } from "../stitches.config";
const SVG = styled("svg", {
"& #path-one, & #path-two": {
"& #path": {
fill: "$text",
},
});
@@ -16,19 +16,15 @@ function Logo({
<SVG
width={width || "1em"}
height={height || "1em"}
viewBox="0 0 28 22"
viewBox="0 0 31 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
id="path-one"
d="M19.603 3.87h2.3l-4.786 4.747a4.466 4.466 0 01-6.276 0L6.054 3.871h2.3l3.636 3.605a2.828 2.828 0 003.975 0l3.638-3.605zM8.325 17.069h-2.3l4.816-4.776a4.466 4.466 0 016.276 0l4.816 4.776h-2.3l-3.665-3.635a2.828 2.828 0 00-3.975 0l-3.668 3.635z"
/>
<path
id="path-two"
fillRule="evenodd"
clipRule="evenodd"
d="M1.556 9.769h4.751v1.555H1.556v10.072H0V0h1.556v9.769zM26.444 9.769h-4.751v1.555h4.751v10.072H28V0h-1.556v9.769z"
id="path"
d="M27.3592 0H30.9723L31 0.0223244L23.1184 9.80415L30.7749 19.3066H27.116L20.6074 11.2287H12.9394L19.5082 19.3066H15.8361L9.75411 11.8274L3.67217 19.3066H0L7.91803 9.56953L0.136216 0H3.80838L9.75411 7.31164L15.6998 0H19.372L12.5578 8.37963H20.6074L27.3592 0Z"
/>
</SVG>
);

View File

@@ -61,7 +61,7 @@ const Navigation = () => {
pr: "$4",
}}
>
<Link href="/" passHref>
<Link href={gistId ? `/develop/${gistId}` : "/develop"} passHref>
<Box
as="a"
css={{
@@ -91,10 +91,25 @@ const Navigation = () => {
css={{ fontSize: "$xs", color: "$mauve10", lineHeight: 1 }}
>
{snap.files.length > 0 ? "Gist: " : "Playground"}
<Text css={{ color: "$mauve12" }}>
{snap.files.length > 0 &&
`${snap.gistOwner || "-"}/${truncate(snap.gistId || "")}`}
</Text>
{snap.files.length > 0 && (
<Link
href={`https://gist.github.com/${snap.gistOwner || ""}/${
snap.gistId || ""
}`}
passHref
>
<Text
as="a"
target="_blank"
rel="noreferrer noopener"
css={{ color: "$mauve12" }}
>
{`${snap.gistOwner || "-"}/${truncate(
snap.gistId || ""
)}`}
</Text>
</Link>
)}
</Text>
</>
)}
@@ -391,9 +406,13 @@ const Navigation = () => {
</Button>
</Link>
</ButtonGroup>
<Button outline disabled>
<BookOpen size="15px" />
</Button>
<Link href="https://xrpl-hooks.readme.io/" passHref>
<a target="_blank" rel="noreferrer noopener">
<Button outline>
<BookOpen size="15px" />
</Button>
</a>
</Link>
</Stack>
</Flex>
</Container>

View File

@@ -18,6 +18,9 @@ function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps) {
const slug = router.query?.slug;
const gistId = (Array.isArray(slug) && slug[0]) ?? null;
const origin = "https://xrpl-hooks-ide.vercel.app"; // TODO: Change when site is deployed
const shareImg = "/share-image.png";
useEffect(() => {
if (gistId && router.isReady) {
fetchFiles(gistId);
@@ -31,7 +34,72 @@ function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps) {
return (
<>
<Head>
<title>XRPL Hooks Playground</title>
<meta charSet="utf-8" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<meta name="format-detection" content="telephone=no" />
<meta property="og:url" content={`${origin}${router.asPath}`} />
<title>XRPL Hooks Editor</title>
<meta property="og:title" content="XRPL Hooks Editor" />
<meta name="twitter:title" content="XRPL Hooks Editor" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@xrpllabs" />
<meta
name="description"
content="Playground for buildings Hooks, that add smart contract functionality to the XRP Ledger."
/>
<meta
property="og:description"
content="Playground for buildings Hooks, that add smart contract functionality to the XRP Ledger."
/>
<meta
name="twitter:description"
content="Playground for buildings Hooks, that add smart contract functionality to the XRP Ledger.."
/>
<meta property="og:image" content={`${origin}${shareImg}`} />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:image" content={`${origin}${shareImg}`} />
<link
rel="apple-touch-icon"
sizes="180x180"
href="/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="/favicon-16x16.png"
/>
<link rel="manifest" href="/site.webmanifest" />
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#161618" />
<meta name="application-name" content="XRPL Hooks Editor" />
<meta name="msapplication-TileColor" content="#c10ad0" />
<meta
name="theme-color"
content="#161618"
media="(prefers-color-scheme: dark)"
/>
<meta
name="theme-color"
content="#FDFCFD"
media="(prefers-color-scheme: light)"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link
rel="preconnect"
href="https://fonts.gstatic.com"
crossOrigin=""
/>
<link
href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital@0;1&family=Work+Sans:wght@400;600;700&display=swap"
rel="stylesheet"
/>
</Head>
<IdProvider>
<SessionProvider session={session}>

View File

@@ -16,21 +16,10 @@ class MyDocument extends Document {
}
render() {
globalStyles();
return (
<Html>
<Head>
<meta name="description" content="Playground for XRPL Hooks" />
<link rel="icon" href="/favicon.ico" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link
rel="preconnect"
href="https://fonts.gstatic.com"
crossOrigin=""
/>
<link
href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital@0;1&family=Work+Sans:wght@400;600;700&display=swap"
rel="stylesheet"
/>
<style
id="stitches"
dangerouslySetInnerHTML={{ __html: getCssText() }}

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.9 KiB

BIN
public/apple-touch-icon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

9
public/browserconfig.xml Normal file
View File

@@ -0,0 +1,9 @@
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square150x150logo src="/mstile-150x150.png"/>
<TileColor>#c10ad0</TileColor>
</tile>
</msapplication>
</browserconfig>

BIN
public/favicon-16x16.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 859 B

BIN
public/favicon-32x32.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 15 KiB

BIN
public/mstile-150x150.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

View File

@@ -0,0 +1,111 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="992.000000pt" height="992.000000pt" viewBox="0 0 992.000000 992.000000"
preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.14, written by Peter Selinger 2001-2017
</metadata>
<g transform="translate(0.000000,992.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M50 8152 c0 -4 9 -14 20 -22 11 -8 20 -19 20 -25 0 -5 15 -26 33 -45
18 -19 48 -55 67 -80 19 -25 40 -51 48 -58 7 -8 25 -30 40 -50 15 -20 34 -44
42 -53 8 -9 31 -35 50 -59 19 -24 49 -60 65 -80 17 -21 42 -52 57 -71 23 -30
40 -51 76 -95 8 -8 85 -103 242 -298 8 -10 20 -23 25 -30 6 -6 38 -45 70 -86
33 -41 62 -77 65 -80 4 -3 33 -39 65 -80 33 -41 62 -77 65 -80 3 -3 35 -41 70
-85 36 -44 69 -85 75 -91 5 -6 21 -26 35 -44 14 -18 30 -38 35 -44 6 -6 41
-49 78 -96 37 -47 76 -94 85 -105 10 -11 36 -42 57 -70 22 -27 42 -52 45 -55
3 -3 53 -63 111 -135 154 -192 282 -348 294 -361 5 -6 24 -28 40 -50 41 -52
429 -530 471 -579 19 -22 34 -42 34 -45 0 -4 -123 -160 -158 -200 -15 -17 -37
-45 -74 -91 -14 -19 -35 -44 -45 -55 -10 -12 -29 -36 -43 -54 -13 -17 -35 -44
-47 -58 -13 -15 -27 -31 -31 -37 -7 -9 -158 -196 -194 -240 -30 -36 -89 -109
-111 -137 -12 -16 -31 -39 -42 -52 -41 -48 -87 -105 -225 -276 -78 -96 -149
-184 -158 -195 -10 -11 -35 -42 -57 -70 -22 -27 -44 -55 -50 -62 -17 -20 -329
-402 -389 -477 -17 -21 -47 -57 -66 -80 -19 -23 -48 -59 -65 -80 -16 -21 -38
-48 -48 -60 -10 -11 -35 -42 -55 -68 -20 -27 -40 -48 -44 -48 -4 0 -8 -4 -8
-9 0 -5 -9 -20 -20 -33 -26 -31 -162 -198 -289 -354 -58 -71 -111 -136 -118
-144 -50 -58 -183 -226 -183 -231 0 -4 263 -7 584 -6 l584 0 53 68 c29 38 57
69 61 69 5 0 8 5 8 10 0 6 8 18 18 28 9 11 24 28 32 38 8 10 53 66 100 124 46
58 89 111 95 118 5 7 17 21 26 30 8 9 33 40 55 67 21 28 41 52 44 55 3 3 34
41 70 85 69 87 139 173 155 191 6 6 24 29 40 50 17 21 38 46 48 56 9 10 17 22
17 27 0 5 4 11 8 13 4 1 79 91 166 198 87 107 165 204 174 215 10 11 46 56 82
100 35 44 69 85 75 92 5 7 16 19 23 28 12 14 93 115 185 229 18 22 48 58 67
81 19 22 46 56 60 75 14 18 34 43 45 55 11 11 33 39 49 61 17 21 33 41 36 44
3 3 34 41 70 85 35 44 67 84 71 89 9 10 29 -10 84 -79 22 -27 44 -55 50 -62 5
-6 20 -24 32 -40 12 -15 31 -39 43 -53 12 -14 34 -41 49 -59 14 -19 41 -51 58
-70 18 -20 33 -39 33 -42 0 -3 10 -17 23 -30 22 -25 41 -48 142 -174 31 -38
75 -92 98 -119 23 -27 48 -59 56 -70 8 -12 18 -23 21 -26 3 -3 33 -39 65 -80
33 -41 62 -77 65 -80 3 -3 24 -27 45 -55 22 -27 42 -52 45 -55 3 -3 42 -50 85
-105 44 -55 87 -108 95 -119 8 -10 24 -28 35 -40 11 -11 34 -39 50 -61 17 -22
32 -42 35 -45 4 -3 93 -113 200 -245 107 -132 197 -242 200 -245 3 -3 21 -25
40 -50 19 -25 40 -51 48 -58 7 -8 25 -30 40 -50 15 -21 32 -43 39 -50 7 -7 29
-34 50 -60 21 -26 43 -52 48 -58 6 -6 26 -31 45 -56 l35 -46 588 1 c539 0 586
1 575 16 -15 20 -137 170 -155 191 -7 8 -40 49 -73 90 -34 41 -66 82 -73 90
-7 8 -109 134 -227 280 -118 146 -217 267 -220 270 -4 3 -42 50 -86 105 -43
55 -81 102 -84 105 -3 3 -64 77 -135 165 -71 88 -132 162 -135 165 -3 3 -25
31 -49 63 -24 31 -47 57 -52 57 -5 0 -9 6 -9 14 0 8 -4 16 -8 18 -4 2 -59 66
-121 143 -121 150 -168 207 -198 242 -11 12 -28 34 -39 48 -10 15 -24 32 -29
39 -6 6 -28 34 -50 61 -22 28 -42 52 -45 55 -3 3 -35 41 -70 85 -36 44 -69 85
-75 91 -5 7 -21 26 -35 44 -14 18 -30 37 -35 44 -21 23 -75 94 -75 98 0 2 552
4 1226 4 1078 -1 1226 -3 1234 -16 4 -8 18 -26 30 -40 12 -14 34 -41 49 -60
14 -19 28 -37 32 -40 3 -3 124 -153 270 -335 145 -181 271 -338 279 -349 8
-10 20 -23 25 -30 6 -6 57 -69 115 -141 57 -71 109 -137 117 -145 7 -8 34 -42
60 -75 79 -99 134 -168 166 -206 12 -14 33 -41 47 -59 14 -18 30 -38 35 -44 6
-6 67 -81 135 -166 68 -85 128 -157 132 -158 4 -2 8 -10 8 -18 0 -8 4 -14 8
-14 5 0 21 -18 38 -40 16 -22 38 -51 49 -63 11 -13 34 -40 50 -61 17 -22 35
-44 40 -50 6 -6 91 -112 190 -236 99 -124 184 -228 188 -231 12 -8 1167 -8
1167 0 0 3 -12 20 -26 36 -14 17 -38 45 -52 64 -15 19 -61 76 -102 126 -41 51
-86 107 -100 125 -14 18 -33 42 -43 54 -10 11 -28 34 -40 49 -12 16 -27 34
-32 40 -6 7 -56 68 -110 137 -55 69 -102 127 -105 130 -3 3 -32 39 -65 80 -33
41 -62 77 -65 80 -3 3 -41 50 -85 105 -43 55 -85 107 -92 115 -7 8 -67 83
-133 165 -171 213 -174 217 -185 229 -5 6 -22 27 -36 46 -15 19 -35 45 -45 56
-11 12 -30 36 -44 54 -14 18 -33 42 -44 54 -10 11 -30 37 -45 56 -14 19 -28
37 -31 40 -3 3 -24 28 -45 55 -22 28 -42 52 -46 55 -3 3 -18 23 -35 45 -16 22
-38 49 -49 61 -36 39 -55 64 -55 74 0 6 -4 10 -8 10 -5 0 -21 18 -38 41 -16
22 -35 47 -42 55 -8 8 -56 67 -108 132 -52 64 -100 124 -107 132 -7 8 -77 96
-156 195 -80 99 -150 183 -155 187 -6 4 -7 8 -3 8 4 0 -3 10 -16 23 -13 12
-40 44 -60 70 l-37 49 19 26 c11 15 29 37 40 49 12 12 21 25 21 29 0 4 6 12
13 18 8 6 67 79 133 161 65 83 121 152 124 155 3 3 30 37 60 75 30 39 61 77
70 85 8 8 29 33 45 55 16 22 34 45 40 51 5 6 24 28 40 49 113 144 259 321 266
323 5 2 9 10 9 17 0 7 3 15 7 17 5 2 35 37 68 78 32 41 64 80 70 86 5 6 21 26
35 44 14 18 33 43 42 54 10 12 41 50 70 86 29 36 55 67 58 70 3 3 17 21 32 42
15 20 34 42 41 50 7 7 19 22 27 34 17 24 85 106 118 142 12 14 22 28 22 31 0
3 10 18 23 31 26 30 71 86 372 460 126 157 231 287 234 290 3 3 22 25 40 50
19 25 43 54 53 65 9 11 88 108 174 215 l156 195 -581 3 c-538 2 -582 1 -601
-15 -11 -10 -20 -23 -20 -29 0 -7 -4 -14 -9 -16 -5 -1 -51 -55 -101 -118 -116
-146 -152 -191 -165 -204 -5 -6 -28 -34 -50 -61 -22 -28 -44 -55 -50 -62 -5
-7 -14 -18 -20 -25 -50 -65 -132 -166 -144 -180 -17 -18 -17 -19 -71 -88 -19
-25 -37 -47 -40 -50 -3 -3 -41 -50 -85 -105 -43 -55 -84 -107 -92 -115 -13
-15 -52 -63 -108 -134 -16 -21 -37 -46 -45 -56 -8 -10 -28 -35 -45 -56 -16
-20 -35 -42 -40 -48 -6 -6 -26 -31 -45 -56 -19 -25 -39 -50 -45 -57 -5 -7 -15
-18 -20 -25 -84 -106 -141 -175 -152 -184 -7 -6 -13 -14 -13 -18 0 -4 -33 -47
-73 -94 -40 -48 -88 -107 -107 -132 -18 -25 -38 -49 -44 -55 -6 -5 -23 -26
-37 -45 -15 -19 -35 -45 -46 -57 -11 -12 -46 -56 -79 -97 -32 -42 -62 -76 -66
-76 -5 0 -8 -6 -8 -14 0 -8 -3 -16 -7 -18 -5 -1 -35 -37 -67 -78 -33 -41 -67
-82 -75 -91 -9 -9 -52 -62 -95 -118 -63 -81 -84 -101 -105 -102 -34 0 -2522 0
-2539 0 -10 1 35 64 92 128 6 7 16 18 21 25 16 21 129 161 147 183 9 11 68 83
130 160 63 77 207 255 321 395 242 298 210 258 317 390 47 58 87 107 90 110 3
3 23 28 45 55 60 76 69 86 80 99 6 6 48 58 95 116 46 58 91 112 99 121 9 9 23
27 31 39 8 12 22 30 31 39 8 9 64 77 124 151 60 74 113 137 117 138 4 2 8 8 8
13 0 6 10 20 23 33 12 13 29 32 37 43 8 10 33 41 55 68 22 28 43 55 47 60 4 6
26 30 48 55 22 25 42 53 45 63 4 9 10 17 13 17 4 0 32 32 62 70 30 39 58 70
62 70 5 0 8 6 8 14 0 8 6 17 13 19 6 3 -253 6 -577 6 l-589 1 -18 -22 c-11
-11 -19 -25 -19 -30 0 -4 -7 -8 -15 -8 -8 0 -15 -4 -15 -9 0 -7 -47 -69 -105
-138 -5 -7 -19 -24 -30 -39 -11 -14 -25 -31 -32 -39 -6 -7 -52 -62 -101 -123
-49 -61 -105 -130 -125 -154 -20 -24 -52 -63 -72 -88 -20 -25 -44 -54 -53 -65
-10 -11 -33 -40 -52 -65 -19 -25 -37 -47 -40 -50 -3 -3 -27 -32 -54 -65 -26
-33 -62 -78 -81 -100 -18 -22 -88 -107 -155 -190 -67 -82 -138 -170 -158 -194
-21 -24 -44 -54 -52 -65 -8 -12 -23 -30 -33 -41 -11 -11 -31 -36 -45 -55 -15
-19 -29 -37 -32 -40 -3 -3 -44 -52 -90 -110 -46 -58 -89 -110 -95 -116 -5 -6
-44 -53 -85 -104 -170 -211 -191 -236 -203 -250 -7 -8 -31 -37 -53 -65 -21
-27 -41 -52 -44 -55 -3 -3 -15 -17 -27 -32 l-21 -28 -58 73 c-63 78 -71 88
-109 131 -14 16 -42 51 -62 78 -21 26 -41 48 -45 48 -4 0 -8 6 -8 13 0 7 -8
20 -17 29 -10 9 -23 23 -28 30 -20 26 -90 113 -111 138 -36 42 -203 247 -334
410 -69 85 -130 160 -136 165 -5 6 -22 26 -36 45 -15 19 -37 47 -50 61 -13 15
-36 44 -53 65 -16 21 -73 90 -125 154 -52 64 -108 133 -125 154 -60 75 -80
100 -97 118 -10 10 -18 22 -18 27 0 5 -3 11 -8 13 -6 2 -83 95 -152 182 -8 11
-29 35 -46 55 -28 33 -138 170 -174 215 -8 11 -25 30 -37 43 -13 13 -23 27
-23 30 0 4 -12 20 -27 35 l-27 28 -583 0 c-321 0 -583 -4 -583 -8z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 7.7 KiB

19
public/site.webmanifest Normal file
View File

@@ -0,0 +1,19 @@
{
"name": "Hooks Editor",
"short_name": "Hooks Editor",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#161618",
"background_color": "#161618",
"display": "standalone"
}

View File

@@ -1,4 +0,0 @@
<svg width="283" height="64" viewBox="0 0 283 64" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.1 KiB