commit 70aab4a27c2fbd37adaf13c596614346fbcbdc0c
parent a28fad9ef266228a23956c31ffb084d8787abb25
Author: Thomas Mathews <thomas.c.mathews@gmail.com>
Date: Fri, 18 Nov 2022 10:11:42 -0800
web: destory fa, because it's not awesome
Note the loss of some colors in icons. This is because I need to change
them at the SVG level. I will think about best way to do this later as
some animation transitions will need to be thought for.
Diffstat:
18 files changed, 35 insertions(+), 16 deletions(-)
diff --git a/web/css/styles.css b/web/css/styles.css
@@ -224,12 +224,9 @@ button.nav > img.icon {
object-fit: contain;
}
-.action-bar {
-}
.action-bar > button {
margin-right: 25px;
- color: var(--clrTextLighter);
- font-size: var(--fsNormal);
+ opacity: 0.5;
}
.reactions {
margin-bottom: 15px;
@@ -261,13 +258,13 @@ button.nav > img.icon {
}
.action-bar button.icon {
- transition: color 0.3s linear;
+ transition: opacity 0.3s linear;
}
.action-bar button.icon:hover {
- color: var(--clrText);
+ opacity: 1;
}
.action-bar button.heart:hover {
- color: var(--clrHeart);
+ /* TODO fix heart color */
}
details.cw summary {
@@ -351,11 +348,10 @@ textarea.post-input {
}
.post-tools > button.icon {
margin-right: 10px;
- font-size: var(--fsEnlarged);
- color: var(--clrTextLight);
+ opacity: 0.5;
}
.post-tools > button.icon.cw.active {
- color: var(--clrWarn);
+ opacity: 1.0;
}
input[type="text"].cw {
border: none;
diff --git a/web/css/utils.css b/web/css/utils.css
@@ -42,10 +42,16 @@ button.action {
color: white;
font-weight: 800;
}
+
img.icon {
width: var(--iconSize);
height: var(--iconSize);
}
+img.icon.small {
+ width: var(--iconSizeSmall);
+ height: var(--iconSizeSmall);
+}
+
.float-right {
float: right;
}
diff --git a/web/css/vars.css b/web/css/vars.css
@@ -30,4 +30,5 @@
/* Icon */
--iconSize: 24px;
+ --iconSizeSmall: 15px;
}
diff --git a/web/css/webfonts/fa-brands-400.ttf b/web/css/webfonts/fa-brands-400.ttf
Binary files differ.
diff --git a/web/css/webfonts/fa-brands-400.woff2 b/web/css/webfonts/fa-brands-400.woff2
Binary files differ.
diff --git a/web/css/webfonts/fa-regular-400.ttf b/web/css/webfonts/fa-regular-400.ttf
Binary files differ.
diff --git a/web/css/webfonts/fa-regular-400.woff2 b/web/css/webfonts/fa-regular-400.woff2
Binary files differ.
diff --git a/web/css/webfonts/fa-solid-900.ttf b/web/css/webfonts/fa-solid-900.ttf
Binary files differ.
diff --git a/web/css/webfonts/fa-solid-900.woff2 b/web/css/webfonts/fa-solid-900.woff2
Binary files differ.
diff --git a/web/css/webfonts/fa-v4compatibility.ttf b/web/css/webfonts/fa-v4compatibility.ttf
Binary files differ.
diff --git a/web/css/webfonts/fa-v4compatibility.woff2 b/web/css/webfonts/fa-v4compatibility.woff2
Binary files differ.
diff --git a/web/icon/close-modal.svg b/web/icon/close-modal.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M312.1 375c9.369 9.369 9.369 24.57 0 33.94s-24.57 9.369-33.94 0L160 289.9l-119 119c-9.369 9.369-24.57 9.369-33.94 0s-9.369-24.57 0-33.94L126.1 256L7.027 136.1c-9.369-9.369-9.369-24.57 0-33.94s24.57-9.369 33.94 0L160 222.1l119-119c9.369-9.369 24.57-9.369 33.94 0s9.369 24.57 0 33.94L193.9 256L312.1 375z"/></svg>+
\ No newline at end of file
diff --git a/web/icon/content-warning.svg b/web/icon/content-warning.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M506.3 417l-213.3-364c-16.33-28-57.54-28-73.98 0l-213.2 364C-10.59 444.9 9.849 480 42.74 480h426.6C502.1 480 522.6 445 506.3 417zM232 168c0-13.25 10.75-24 24-24S280 154.8 280 168v128c0 13.25-10.75 24-23.1 24S232 309.3 232 296V168zM256 416c-17.36 0-31.44-14.08-31.44-31.44c0-17.36 14.07-31.44 31.44-31.44s31.44 14.08 31.44 31.44C287.4 401.9 273.4 416 256 416z"/></svg>+
\ No newline at end of file
diff --git a/web/icon/event-delete.svg b/web/icon/event-delete.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M135.2 17.69C140.6 6.848 151.7 0 163.8 0H284.2C296.3 0 307.4 6.848 312.8 17.69L320 32H416C433.7 32 448 46.33 448 64C448 81.67 433.7 96 416 96H32C14.33 96 0 81.67 0 64C0 46.33 14.33 32 32 32H128L135.2 17.69zM31.1 128H416V448C416 483.3 387.3 512 352 512H95.1C60.65 512 31.1 483.3 31.1 448V128zM111.1 208V432C111.1 440.8 119.2 448 127.1 448C136.8 448 143.1 440.8 143.1 432V208C143.1 199.2 136.8 192 127.1 192C119.2 192 111.1 199.2 111.1 208zM207.1 208V432C207.1 440.8 215.2 448 223.1 448C232.8 448 240 440.8 240 432V208C240 199.2 232.8 192 223.1 192C215.2 192 207.1 199.2 207.1 208zM304 208V432C304 440.8 311.2 448 320 448C328.8 448 336 440.8 336 432V208C336 199.2 328.8 192 320 192C311.2 192 304 199.2 304 208z"/></svg>+
\ No newline at end of file
diff --git a/web/icon/event-like.svg b/web/icon/event-like.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M0 190.9V185.1C0 115.2 50.52 55.58 119.4 44.1C164.1 36.51 211.4 51.37 244 84.02L256 96L267.1 84.02C300.6 51.37 347 36.51 392.6 44.1C461.5 55.58 512 115.2 512 185.1V190.9C512 232.4 494.8 272.1 464.4 300.4L283.7 469.1C276.2 476.1 266.3 480 256 480C245.7 480 235.8 476.1 228.3 469.1L47.59 300.4C17.23 272.1 .0003 232.4 .0003 190.9L0 190.9z"/></svg>+
\ No newline at end of file
diff --git a/web/icon/event-reply.svg b/web/icon/event-reply.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M8.31 189.9l176-151.1c15.41-13.3 39.69-2.509 39.69 18.16v80.05C384.6 137.9 512 170.1 512 322.3c0 61.44-39.59 122.3-83.34 154.1c-13.66 9.938-33.09-2.531-28.06-18.62c45.34-145-21.5-183.5-176.6-185.8v87.92c0 20.7-24.31 31.45-39.69 18.16l-176-151.1C-2.753 216.6-2.784 199.4 8.31 189.9z"/></svg>+
\ No newline at end of file
diff --git a/web/index.html b/web/index.html
@@ -8,7 +8,6 @@
<link rel="stylesheet" href="css/utils.css?v=1">
<link rel="stylesheet" href="css/styles.css?v=13">
<link rel="stylesheet" href="css/responsive.css?v=10">
- <link rel="stylesheet" href="css/fontawesome.css?v=2">
<script defer src="js/util.js?v=1"></script>
<script defer src="js/ui/util.js?v=6"></script>
<script defer src="js/ui/render.js?v=13"></script>
@@ -90,7 +89,7 @@
<input id="content-warning-input" class="cw hide" type="text" placeholder="Reason"/>
<button title="Mark this message as sensitive."
onclick="toggle_cw(this)" class="cw icon">
- <i class="fa-solid fa-triangle-exclamation"></i>
+ <img class="icon small" src="icon/content-warning.svg"/>
</button>
<button onclick="send_post(this)" class="action"
role="send" id="post-button" disabled>Send</button>
@@ -152,7 +151,7 @@
<header>
<label>Reply To</label>
<button class="icon" onclick="close_reply()">
- <i class="fa fa-xmark"></i>
+ <img class="icon" src="icon/close-modal.svg"/>
</button>
</header>
<div id="replying-to"></div>
diff --git a/web/js/ui/render.js b/web/js/ui/render.js
@@ -238,7 +238,10 @@ function render_reaction(model, reaction) {
function render_action_bar(damus, ev, can_delete) {
let delete_html = ""
if (can_delete)
- delete_html = `<button class="icon" title="Delete" onclick="delete_post_confirm('${ev.id}')"><i class="fa fa-fw fa-trash"></i></a>`
+ delete_html = `
+ <button class="icon" title="Delete" onclick="delete_post_confirm('${ev.id}')">
+ <img class="icon small" src="icon/event-delete.svg"/>
+ </button>`
const groups = get_reactions(damus, ev.id)
const like = "❤️"
@@ -246,8 +249,12 @@ function render_action_bar(damus, ev, can_delete) {
const react_onclick = render_react_onclick(damus.pubkey, ev.id, like, likes)
return `
<div class="action-bar">
- <button class="icon" title="Reply" onclick="reply_to('${ev.id}')"><i class="fa fa-fw fa-comment"></i></a>
- <button class="icon react heart" ${react_onclick} title="Like"><i class="fa fa-fw fa-heart"></i></a>
+ <button class="icon" title="Reply" onclick="reply_to('${ev.id}')">
+ <img class="icon small" src="icon/event-reply.svg"/>
+ </button>
+ <button class="icon react heart" ${react_onclick} title="Like">
+ <img class="icon small" src="icon/event-like.svg"/>
+ </button>
<!--<button class="icon" title="Share" onclick=""><i class="fa fa-fw fa-link"></i></a>-->
${delete_html}
<!--<button class="icon" title="View raw Nostr event." onclick=""><i class="fa-solid fa-fw fa-code"></i></a>-->
