From 0703093c4ba9a2243bfbcee012e52229125b821d Mon Sep 17 00:00:00 2001 From: etstringy Date: Sun, 30 Jun 2024 19:57:32 +0100 Subject: [PATCH] add icons --- package-lock.json | 263 +++++++++++++++++++++++++- package.json | 6 +- src/img/CampfireLogo.svelte | 5 - src/img/campfire-logo.svg | 2 +- src/img/icons/bookmark.svg | 3 + src/img/icons/explore.svg | 10 + src/img/icons/hashtag.svg | 10 + src/img/icons/info.svg | 4 + src/img/icons/like.svg | 3 + src/img/icons/like_fill.svg | 10 + src/img/icons/likealt.svg | 10 + src/img/icons/likealt_fill.svg | 3 + src/img/icons/lists.svg | 3 + src/img/icons/logout.svg | 11 ++ src/img/icons/more.svg | 5 + src/img/icons/notifications.svg | 11 ++ src/img/icons/post.svg | 3 + src/img/icons/quote.svg | 3 + src/img/icons/react.svg | 15 ++ src/img/icons/reply.svg | 3 + src/img/icons/repost.svg | 12 ++ src/img/icons/search.svg | 11 ++ src/img/icons/settings.svg | 11 ++ src/img/icons/timeline.svg | 12 ++ src/lib/ui/Button.svelte | 17 +- src/lib/ui/Navigation.svelte | 87 +++++++-- src/lib/ui/Widgets.svelte | 2 +- src/lib/ui/post/ActionButton.svelte | 16 +- src/lib/ui/post/Post.svelte | 38 +++- src/lib/ui/post/ReactionButton.svelte | 10 +- src/lib/ui/post/ReplyContext.svelte | 38 +++- src/routes/+page.svelte | 6 +- vite.config.js | 6 +- 33 files changed, 599 insertions(+), 50 deletions(-) delete mode 100644 src/img/CampfireLogo.svelte create mode 100644 src/img/icons/bookmark.svg create mode 100644 src/img/icons/explore.svg create mode 100644 src/img/icons/hashtag.svg create mode 100644 src/img/icons/info.svg create mode 100644 src/img/icons/like.svg create mode 100644 src/img/icons/like_fill.svg create mode 100644 src/img/icons/likealt.svg create mode 100644 src/img/icons/likealt_fill.svg create mode 100644 src/img/icons/lists.svg create mode 100644 src/img/icons/logout.svg create mode 100644 src/img/icons/more.svg create mode 100644 src/img/icons/notifications.svg create mode 100644 src/img/icons/post.svg create mode 100644 src/img/icons/quote.svg create mode 100644 src/img/icons/react.svg create mode 100644 src/img/icons/reply.svg create mode 100644 src/img/icons/repost.svg create mode 100644 src/img/icons/search.svg create mode 100644 src/img/icons/settings.svg create mode 100644 src/img/icons/timeline.svg diff --git a/package-lock.json b/package-lock.json index d80f2aa..cad36e5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,14 +1,15 @@ { "name": "spacesocial-client", - "version": "0.2.0_rev2", + "version": "0.2.0_rev3", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "spacesocial-client", - "version": "0.2.0_rev2", + "version": "0.2.0_rev3", "license": "GPL-3.0", "devDependencies": { + "@poppanator/sveltekit-svg": "^4.2.1", "@sveltejs/adapter-auto": "^3.2.2", "@sveltejs/adapter-static": "^3.0.2", "@sveltejs/kit": "^2.5.17", @@ -482,6 +483,48 @@ "dev": true, "license": "MIT" }, + "node_modules/@poppanator/sveltekit-svg": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/@poppanator/sveltekit-svg/-/sveltekit-svg-4.2.1.tgz", + "integrity": "sha512-w7jl4EVOOF+X+uv2BEUiMDJwds+GfbczwGpcS0+rsjIsKYmqmwMi4ts3bVZR9ZvdFHWy5rS84U+pSBClz6cbBg==", + "dev": true, + "dependencies": { + "@rollup/pluginutils": "^5.1.0" + }, + "peerDependencies": { + "svelte": ">=4.x", + "svgo": ">=3.x", + "vite": ">=4.x" + } + }, + "node_modules/@rollup/pluginutils": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.0.tgz", + "integrity": "sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==", + "dev": true, + "dependencies": { + "@types/estree": "^1.0.0", + "estree-walker": "^2.0.2", + "picomatch": "^2.3.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0" + }, + "peerDependenciesMeta": { + "rollup": { + "optional": true + } + } + }, + "node_modules/@rollup/pluginutils/node_modules/estree-walker": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz", + "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==", + "dev": true + }, "node_modules/@rollup/rollup-android-arm-eabi": { "version": "4.18.0", "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.18.0.tgz", @@ -803,6 +846,16 @@ "vite": "^5.0.0" } }, + "node_modules/@trysound/sax": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz", + "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==", + "dev": true, + "peer": true, + "engines": { + "node": ">=10.13.0" + } + }, "node_modules/@types/cookie": { "version": "0.6.0", "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz", @@ -850,6 +903,13 @@ "dequal": "^2.0.3" } }, + "node_modules/boolbase": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", + "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==", + "dev": true, + "peer": true + }, "node_modules/code-red": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/code-red/-/code-red-1.0.4.tgz", @@ -864,6 +924,16 @@ "periscopic": "^3.1.0" } }, + "node_modules/commander": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz", + "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==", + "dev": true, + "peer": true, + "engines": { + "node": ">= 10" + } + }, "node_modules/cookie": { "version": "0.6.0", "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz", @@ -874,6 +944,23 @@ "node": ">= 0.6" } }, + "node_modules/css-select": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz", + "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==", + "dev": true, + "peer": true, + "dependencies": { + "boolbase": "^1.0.0", + "css-what": "^6.1.0", + "domhandler": "^5.0.2", + "domutils": "^3.0.1", + "nth-check": "^2.0.1" + }, + "funding": { + "url": "https://github.com/sponsors/fb55" + } + }, "node_modules/css-tree": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz", @@ -888,6 +975,55 @@ "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0" } }, + "node_modules/css-what": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz", + "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==", + "dev": true, + "peer": true, + "engines": { + "node": ">= 6" + }, + "funding": { + "url": "https://github.com/sponsors/fb55" + } + }, + "node_modules/csso": { + "version": "5.0.5", + "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz", + "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==", + "dev": true, + "peer": true, + "dependencies": { + "css-tree": "~2.2.0" + }, + "engines": { + "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0", + "npm": ">=7.0.0" + } + }, + "node_modules/csso/node_modules/css-tree": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz", + "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==", + "dev": true, + "peer": true, + "dependencies": { + "mdn-data": "2.0.28", + "source-map-js": "^1.0.1" + }, + "engines": { + "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0", + "npm": ">=7.0.0" + } + }, + "node_modules/csso/node_modules/mdn-data": { + "version": "2.0.28", + "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz", + "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==", + "dev": true, + "peer": true + }, "node_modules/debug": { "version": "4.3.5", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.5.tgz", @@ -933,6 +1069,78 @@ "dev": true, "license": "MIT" }, + "node_modules/dom-serializer": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz", + "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==", + "dev": true, + "peer": true, + "dependencies": { + "domelementtype": "^2.3.0", + "domhandler": "^5.0.2", + "entities": "^4.2.0" + }, + "funding": { + "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1" + } + }, + "node_modules/domelementtype": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz", + "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/fb55" + } + ], + "peer": true + }, + "node_modules/domhandler": { + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz", + "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==", + "dev": true, + "peer": true, + "dependencies": { + "domelementtype": "^2.3.0" + }, + "engines": { + "node": ">= 4" + }, + "funding": { + "url": "https://github.com/fb55/domhandler?sponsor=1" + } + }, + "node_modules/domutils": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz", + "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==", + "dev": true, + "peer": true, + "dependencies": { + "dom-serializer": "^2.0.0", + "domelementtype": "^2.3.0", + "domhandler": "^5.0.3" + }, + "funding": { + "url": "https://github.com/fb55/domutils?sponsor=1" + } + }, + "node_modules/entities": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", + "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==", + "dev": true, + "peer": true, + "engines": { + "node": ">=0.12" + }, + "funding": { + "url": "https://github.com/fb55/entities?sponsor=1" + } + }, "node_modules/esbuild": { "version": "0.21.5", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz", @@ -1119,6 +1327,19 @@ "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" } }, + "node_modules/nth-check": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz", + "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==", + "dev": true, + "peer": true, + "dependencies": { + "boolbase": "^1.0.0" + }, + "funding": { + "url": "https://github.com/fb55/nth-check?sponsor=1" + } + }, "node_modules/periscopic": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.1.0.tgz", @@ -1138,6 +1359,18 @@ "dev": true, "license": "ISC" }, + "node_modules/picomatch": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", + "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", + "dev": true, + "engines": { + "node": ">=8.6" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, "node_modules/postcss": { "version": "8.4.38", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz", @@ -1287,6 +1520,32 @@ "svelte": "^3.19.0 || ^4.0.0" } }, + "node_modules/svgo": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.3.2.tgz", + "integrity": "sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw==", + "dev": true, + "peer": true, + "dependencies": { + "@trysound/sax": "0.2.0", + "commander": "^7.2.0", + "css-select": "^5.1.0", + "css-tree": "^2.3.1", + "css-what": "^6.1.0", + "csso": "^5.0.5", + "picocolors": "^1.0.0" + }, + "bin": { + "svgo": "bin/svgo" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/svgo" + } + }, "node_modules/tiny-glob": { "version": "0.2.9", "resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.9.tgz", diff --git a/package.json b/package.json index 873a26b..429b1b5 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "spacesocial-client", + "name": "campfire-client", "version": "0.2.0_rev3", "description": "social media for the galaxy-wide-web! 🌌", "private": true, @@ -10,8 +10,12 @@ "preview": "vite preview" }, "author": "ari melody ", + "contributors": [ + "mae taylor " + ], "license": "GPL-3.0", "devDependencies": { + "@poppanator/sveltekit-svg": "^4.2.1", "@sveltejs/adapter-auto": "^3.2.2", "@sveltejs/adapter-static": "^3.0.2", "@sveltejs/kit": "^2.5.17", diff --git a/src/img/CampfireLogo.svelte b/src/img/CampfireLogo.svelte deleted file mode 100644 index 2634a57..0000000 --- a/src/img/CampfireLogo.svelte +++ /dev/null @@ -1,5 +0,0 @@ - diff --git a/src/img/campfire-logo.svg b/src/img/campfire-logo.svg index 99365b6..f6acc5f 100644 --- a/src/img/campfire-logo.svg +++ b/src/img/campfire-logo.svg @@ -1,6 +1,6 @@ - + diff --git a/src/img/icons/bookmark.svg b/src/img/icons/bookmark.svg new file mode 100644 index 0000000..da829b3 --- /dev/null +++ b/src/img/icons/bookmark.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/img/icons/explore.svg b/src/img/icons/explore.svg new file mode 100644 index 0000000..9699f07 --- /dev/null +++ b/src/img/icons/explore.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/img/icons/hashtag.svg b/src/img/icons/hashtag.svg new file mode 100644 index 0000000..ac40f31 --- /dev/null +++ b/src/img/icons/hashtag.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/img/icons/info.svg b/src/img/icons/info.svg new file mode 100644 index 0000000..af2a9fc --- /dev/null +++ b/src/img/icons/info.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/img/icons/like.svg b/src/img/icons/like.svg new file mode 100644 index 0000000..a2ffd55 --- /dev/null +++ b/src/img/icons/like.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/img/icons/like_fill.svg b/src/img/icons/like_fill.svg new file mode 100644 index 0000000..6d2eb3b --- /dev/null +++ b/src/img/icons/like_fill.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/img/icons/likealt.svg b/src/img/icons/likealt.svg new file mode 100644 index 0000000..b9b55a7 --- /dev/null +++ b/src/img/icons/likealt.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/img/icons/likealt_fill.svg b/src/img/icons/likealt_fill.svg new file mode 100644 index 0000000..4719f00 --- /dev/null +++ b/src/img/icons/likealt_fill.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/img/icons/lists.svg b/src/img/icons/lists.svg new file mode 100644 index 0000000..a3e5c30 --- /dev/null +++ b/src/img/icons/lists.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/img/icons/logout.svg b/src/img/icons/logout.svg new file mode 100644 index 0000000..1a3cf80 --- /dev/null +++ b/src/img/icons/logout.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/img/icons/more.svg b/src/img/icons/more.svg new file mode 100644 index 0000000..bc531b2 --- /dev/null +++ b/src/img/icons/more.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/img/icons/notifications.svg b/src/img/icons/notifications.svg new file mode 100644 index 0000000..e946ca5 --- /dev/null +++ b/src/img/icons/notifications.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/img/icons/post.svg b/src/img/icons/post.svg new file mode 100644 index 0000000..79d5536 --- /dev/null +++ b/src/img/icons/post.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/img/icons/quote.svg b/src/img/icons/quote.svg new file mode 100644 index 0000000..8e47670 --- /dev/null +++ b/src/img/icons/quote.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/img/icons/react.svg b/src/img/icons/react.svg new file mode 100644 index 0000000..532213d --- /dev/null +++ b/src/img/icons/react.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/img/icons/reply.svg b/src/img/icons/reply.svg new file mode 100644 index 0000000..5462c7b --- /dev/null +++ b/src/img/icons/reply.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/img/icons/repost.svg b/src/img/icons/repost.svg new file mode 100644 index 0000000..c0f950f --- /dev/null +++ b/src/img/icons/repost.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/img/icons/search.svg b/src/img/icons/search.svg new file mode 100644 index 0000000..0864af4 --- /dev/null +++ b/src/img/icons/search.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/img/icons/settings.svg b/src/img/icons/settings.svg new file mode 100644 index 0000000..be2926e --- /dev/null +++ b/src/img/icons/settings.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/img/icons/timeline.svg b/src/img/icons/timeline.svg new file mode 100644 index 0000000..a2be615 --- /dev/null +++ b/src/img/icons/timeline.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/lib/ui/Button.svelte b/src/lib/ui/Button.svelte index 1ea915f..702d3fa 100644 --- a/src/lib/ui/Button.svelte +++ b/src/lib/ui/Button.svelte @@ -34,6 +34,9 @@ title={label} aria-label={label} on:click={() => click()}> + + + @@ -45,7 +48,6 @@ padding: 16px; display: flex; flex-direction: row; - justify-content: space-between; align-items: center; font-family: inherit; @@ -131,4 +133,17 @@ button.disabled:active { } + + .icon:not(:empty) { + height: 150%; + margin-right: 8px; + } + + .icon :global(svg) { + height: 100%; + } + + .centered .icon { + margin-right: 0px; + } diff --git a/src/lib/ui/Navigation.svelte b/src/lib/ui/Navigation.svelte index 7a01fd3..c360530 100644 --- a/src/lib/ui/Navigation.svelte +++ b/src/lib/ui/Navigation.svelte @@ -1,5 +1,5 @@