From d83baa78b0b029a5c25b781ee3f77ae3cbecf60d Mon Sep 17 00:00:00 2001
From: cel 🌸 <cel@bunny.garden>
Date: Wed, 7 May 2025 00:26:44 +0100
Subject: feat: message sent icons

---
 assets/icons/addcontact24.svg  |  5 +++++
 assets/icons/attachment24.svg  |  3 +++
 assets/icons/away16.svg        | 10 ++++++++++
 assets/icons/away16color.svg   | 10 ++++++++++
 assets/icons/bubble16.svg      |  3 +++
 assets/icons/bubble16color.svg |  3 +++
 assets/icons/bubble24.svg      |  3 +++
 assets/icons/contact24.svg     |  4 ++++
 assets/icons/delivered16.svg   |  4 ++++
 assets/icons/dnd16.svg         |  3 +++
 assets/icons/dnd16color.svg    |  3 +++
 assets/icons/error16color.svg  | 10 ++++++++++
 assets/icons/forward24.svg     | 10 ++++++++++
 assets/icons/heart24.svg       |  3 +++
 assets/icons/newbubble24.svg   |  4 ++++
 assets/icons/reply24.svg       | 10 ++++++++++
 assets/icons/sending16.svg     |  5 +++++
 assets/icons/sent16.svg        |  3 +++
 assets/style.scss              | 17 +++++++++++++++++
 19 files changed, 113 insertions(+)
 create mode 100644 assets/icons/addcontact24.svg
 create mode 100644 assets/icons/attachment24.svg
 create mode 100644 assets/icons/away16.svg
 create mode 100644 assets/icons/away16color.svg
 create mode 100644 assets/icons/bubble16.svg
 create mode 100644 assets/icons/bubble16color.svg
 create mode 100644 assets/icons/bubble24.svg
 create mode 100644 assets/icons/contact24.svg
 create mode 100644 assets/icons/delivered16.svg
 create mode 100644 assets/icons/dnd16.svg
 create mode 100644 assets/icons/dnd16color.svg
 create mode 100644 assets/icons/error16color.svg
 create mode 100644 assets/icons/forward24.svg
 create mode 100644 assets/icons/heart24.svg
 create mode 100644 assets/icons/newbubble24.svg
 create mode 100644 assets/icons/reply24.svg
 create mode 100644 assets/icons/sending16.svg
 create mode 100644 assets/icons/sent16.svg

(limited to 'assets')

diff --git a/assets/icons/addcontact24.svg b/assets/icons/addcontact24.svg
new file mode 100644
index 0000000..3324996
--- /dev/null
+++ b/assets/icons/addcontact24.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.0004 11C16.6281 10.1643 17 9.12561 17 8C17 5.23858 14.7614 3 12 3C9.23858 3 7 5.23858 7 8C7 9.12561 7.37194 10.1643 7.99963 11" stroke="black" stroke-width="2"/>
+<path d="M7 14.0014C3.60117 15.6755 3.00884 19.0504 3 21H21.0264C21.0264 19.2423 20.4151 15.7748 17 14.0399" stroke="black" stroke-width="2"/>
+<path d="M12 13H15M12 13H9M12 13V10M12 13V16" stroke="black" stroke-width="2"/>
+</svg>
diff --git a/assets/icons/attachment24.svg b/assets/icons/attachment24.svg
new file mode 100644
index 0000000..ee808e6
--- /dev/null
+++ b/assets/icons/attachment24.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21 13.3329C16.6369 19.9724 12.4124 20.8255 9.33666 20.8255C5.60908 20.8255 3 17.7955 3 15.1645C3 9.12539 9.09537 3.30998 15.6733 3.30998C19.1978 3.30998 22.3753 8.59036 15.5935 15.0402C11.6522 18.7886 8.39541 17.6137 7.57871 16.3206C5.87141 13.6174 9.33666 10.3925 12.0841 8.87491" stroke="black" stroke-width="2"/>
+</svg>
diff --git a/assets/icons/away16.svg b/assets/icons/away16.svg
new file mode 100644
index 0000000..5d78da1
--- /dev/null
+++ b/assets/icons/away16.svg
@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_204_583)">
+<path d="M12.3949 3.68876C14.4905 5.78437 14.3985 9.52573 11.8703 12.0539C9.3422 14.582 5.60084 14.674 3.50523 12.5784C2.7029 11.7761 2.22277 10.747 2.07449 9.63325C2.10824 9.63849 2.14189 9.64327 2.17541 9.64762C2.83698 9.73336 3.54898 9.66529 4.21793 9.51478C5.52363 9.22102 6.93329 8.5485 7.73555 7.67748C8.50721 6.83967 9.11302 5.50754 9.35486 4.24412C9.47772 3.60222 9.51846 2.91991 9.40702 2.28141C9.4053 2.27156 9.40354 2.2617 9.40175 2.25184C10.5339 2.39262 11.5812 2.87506 12.3949 3.68876Z" stroke="black" stroke-width="2"/>
+</g>
+<defs>
+<clipPath id="clip0_204_583">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/assets/icons/away16color.svg b/assets/icons/away16color.svg
new file mode 100644
index 0000000..e35da57
--- /dev/null
+++ b/assets/icons/away16color.svg
@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_204_583)">
+<path d="M12.3949 3.68876C14.4905 5.78437 14.3985 9.52573 11.8703 12.0539C9.3422 14.582 5.60084 14.674 3.50523 12.5784C2.7029 11.7761 2.22277 10.747 2.07449 9.63325C2.10824 9.63849 2.14189 9.64327 2.17541 9.64762C2.83698 9.73336 3.54898 9.66529 4.21793 9.51478C5.52363 9.22102 6.93329 8.5485 7.73555 7.67748C8.50721 6.83967 9.11302 5.50754 9.35486 4.24412C9.47772 3.60222 9.51846 2.91991 9.40702 2.28141C9.4053 2.27156 9.40354 2.2617 9.40175 2.25184C10.5339 2.39262 11.5812 2.87506 12.3949 3.68876Z" fill="#FFCE07" stroke="black" stroke-width="2"/>
+</g>
+<defs>
+<clipPath id="clip0_204_583">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/assets/icons/bubble16.svg b/assets/icons/bubble16.svg
new file mode 100644
index 0000000..8775127
--- /dev/null
+++ b/assets/icons/bubble16.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.82231 12.4711L8.5106 11.499C8.70361 11.4713 8.89168 11.4358 9.07333 11.3943C10.1138 11.1566 11.0459 10.7001 11.6435 10.2423C13.6639 8.69425 14.4 6.1447 12.9614 4.2671C12.0904 3.13031 10.6908 2.71605 9.30488 2.79833C7.91203 2.88103 6.41494 3.45992 5.1034 4.46482C3.79187 5.46971 2.84338 6.76461 2.40112 8.08797C1.96106 9.40473 1.99689 10.8639 2.86789 12.0007C3.719 13.1115 5.83101 13.9667 8.82231 12.4711Z" stroke="black" stroke-width="2" stroke-miterlimit="1.41421"/>
+</svg>
diff --git a/assets/icons/bubble16color.svg b/assets/icons/bubble16color.svg
new file mode 100644
index 0000000..c3c01d8
--- /dev/null
+++ b/assets/icons/bubble16color.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.82231 12.4711L8.5106 11.499C8.70361 11.4713 8.89168 11.4358 9.07333 11.3943C10.1138 11.1566 11.0459 10.7001 11.6435 10.2423C13.6639 8.69425 14.4 6.1447 12.9614 4.2671C12.0904 3.13031 10.6908 2.71605 9.30488 2.79833C7.91203 2.88103 6.41494 3.45992 5.1034 4.46482C3.79187 5.46971 2.84338 6.76461 2.40112 8.08797C1.96106 9.40473 1.99689 10.8639 2.86789 12.0007C3.719 13.1115 5.83101 13.9667 8.82231 12.4711Z" fill="#52CF6E" stroke="black" stroke-width="2" stroke-miterlimit="1.41421"/>
+</svg>
diff --git a/assets/icons/bubble24.svg b/assets/icons/bubble24.svg
new file mode 100644
index 0000000..b9e9414
--- /dev/null
+++ b/assets/icons/bubble24.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.1661 18.7474L12.6411 17.1101C13.0131 17.0644 13.376 16.9992 13.7259 16.9192C15.3587 16.5462 16.8089 15.8307 17.7144 15.1369C20.8619 12.7253 21.8527 8.91393 19.7675 6.19249C18.5016 4.54019 16.4353 3.89603 14.2909 4.02335C12.1395 4.15109 9.79196 5.04995 7.71792 6.63908C5.64387 8.2282 4.16516 10.261 3.48204 12.305C2.80113 14.3425 2.88548 16.5052 4.15146 18.1575C5.3258 19.6902 8.44768 21.1066 13.1661 18.7474Z" stroke="black" stroke-width="2" stroke-miterlimit="1.41421"/>
+</svg>
diff --git a/assets/icons/contact24.svg b/assets/icons/contact24.svg
new file mode 100644
index 0000000..da03215
--- /dev/null
+++ b/assets/icons/contact24.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12.0678" cy="8" r="5" stroke="black" stroke-width="2"/>
+<path d="M12 13C4.11584 13 3.01209 18.3333 3 21H21.0264C21.0264 18.5973 19.8842 13 12 13Z" stroke="black" stroke-width="2"/>
+</svg>
diff --git a/assets/icons/delivered16.svg b/assets/icons/delivered16.svg
new file mode 100644
index 0000000..feec0c2
--- /dev/null
+++ b/assets/icons/delivered16.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.1667 7.00724C12.9795 8.54119 10.9029 9.18264 10.0046 9.18264C9.88343 9.18264 9.27537 9.13373 9.21829 9.07586" stroke="black" stroke-width="2"/>
+<path d="M2.13982 7.66744C2.51405 8.66834 3.48325 9.1754 4.49578 9.1754C5.39405 9.1754 7.47067 8.53395 8.6579 7" stroke="black" stroke-width="2"/>
+</svg>
diff --git a/assets/icons/dnd16.svg b/assets/icons/dnd16.svg
new file mode 100644
index 0000000..d13d54b
--- /dev/null
+++ b/assets/icons/dnd16.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 14L2 10V6L6 2H10L14 6V10L10 14H6Z" stroke="black" stroke-width="2"/>
+</svg>
diff --git a/assets/icons/dnd16color.svg b/assets/icons/dnd16color.svg
new file mode 100644
index 0000000..e69cbe3
--- /dev/null
+++ b/assets/icons/dnd16color.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 14L2 10V6L6 2H10L14 6V10L10 14H6Z" fill="#C1173C" stroke="black" stroke-width="2"/>
+</svg>
diff --git a/assets/icons/error16color.svg b/assets/icons/error16color.svg
new file mode 100644
index 0000000..21e28fc
--- /dev/null
+++ b/assets/icons/error16color.svg
@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_204_962)">
+<path d="M2.80385 12.6928L8 3.6928L13.1962 12.6928H2.80385Z" fill="#C1173C" stroke="black" stroke-width="2"/>
+</g>
+<defs>
+<clipPath id="clip0_204_962">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/assets/icons/forward24.svg b/assets/icons/forward24.svg
new file mode 100644
index 0000000..a2fdaba
--- /dev/null
+++ b/assets/icons/forward24.svg
@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_204_235)">
+<path d="M15.674 3.11258L15.674 9M15.674 3.11258L8.5 3.11258M15.674 3.11258C14.4547 3.63965 13.2902 4.34718 12.1355 5.23196C6.92147 9.22691 4.88415 15.323 7.58502 18.8481C8.26848 19.7401 9.84336 20.6926 12.1355 20.8434" stroke="black" stroke-width="2" stroke-miterlimit="16"/>
+</g>
+<defs>
+<clipPath id="clip0_204_235">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/assets/icons/heart24.svg b/assets/icons/heart24.svg
new file mode 100644
index 0000000..dd63532
--- /dev/null
+++ b/assets/icons/heart24.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.4455 5.90719L12.0788 6.42557L12.7122 5.90719C14.9006 4.11609 16.6254 3.44822 17.8564 3.39835C19.0193 3.35124 19.8258 3.84682 20.342 4.6883C20.8877 5.57785 21.1387 6.92101 20.9232 8.51425C20.7097 10.0929 20.0454 11.8434 18.8646 13.4786C17.0975 15.9258 15.7674 17.3884 14.6372 18.3999C13.6976 19.2408 12.8806 19.7855 12.0015 20.3471C11.1396 19.79 10.3533 19.2443 9.44622 18.4039C8.35343 17.3914 7.06118 15.9272 5.29303 13.4786C4.11223 11.8434 3.4479 10.0929 3.2344 8.51425C3.01893 6.92101 3.26991 5.57785 3.81561 4.6883C4.33182 3.84682 5.13833 3.35124 6.30121 3.39835C7.53222 3.44822 9.25705 4.11609 11.4455 5.90719Z" stroke="black" stroke-width="2"/>
+</svg>
diff --git a/assets/icons/newbubble24.svg b/assets/icons/newbubble24.svg
new file mode 100644
index 0000000..b1d72fd
--- /dev/null
+++ b/assets/icons/newbubble24.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.1661 18.7474L12.6411 17.1101C13.0131 17.0644 13.376 16.9992 13.7259 16.9192C15.3587 16.5462 16.8089 15.8307 17.7144 15.1369C20.8619 12.7253 21.8527 8.91393 19.7675 6.19249C18.5016 4.54019 16.4353 3.89603 14.2909 4.02335C12.1395 4.15109 9.79196 5.04995 7.71792 6.63908C5.64387 8.2282 4.16516 10.261 3.48204 12.305C2.80113 14.3425 2.88548 16.5052 4.15146 18.1575C5.3258 19.6902 8.44768 21.1066 13.1661 18.7474Z" stroke="black" stroke-width="2" stroke-miterlimit="1.41421"/>
+<path d="M12 8.05864V14.0586M15 11.0586H9" stroke="black" stroke-width="2"/>
+</svg>
diff --git a/assets/icons/reply24.svg b/assets/icons/reply24.svg
new file mode 100644
index 0000000..7136614
--- /dev/null
+++ b/assets/icons/reply24.svg
@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_204_246)">
+<path d="M2.96446 13.4001L8.69828 13.4001M2.96446 13.4001L2.96446 7.25968M2.96446 13.4001C3.79279 12.3092 4.8179 11.2726 6.01902 10.3523C11.0135 6.5255 17.1596 6.16059 19.7468 9.5372C21.8385 12.2673 20.7102 16.0351 18.5396 18.6512" stroke="black" stroke-width="2" stroke-miterlimit="16"/>
+</g>
+<defs>
+<clipPath id="clip0_204_246">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/assets/icons/sending16.svg b/assets/icons/sending16.svg
new file mode 100644
index 0000000..a74179a
--- /dev/null
+++ b/assets/icons/sending16.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="3" cy="8" r="2" fill="black"/>
+<circle cx="8" cy="8" r="2" fill="black"/>
+<circle cx="13" cy="8" r="2" fill="black"/>
+</svg>
diff --git a/assets/icons/sent16.svg b/assets/icons/sent16.svg
new file mode 100644
index 0000000..5b7f3fa
--- /dev/null
+++ b/assets/icons/sent16.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.13982 7.66744C2.51405 8.66834 3.48325 9.1754 4.49578 9.1754C5.39405 9.1754 7.47067 8.53395 8.6579 7" stroke="black" stroke-width="2"/>
+</svg>
diff --git a/assets/style.scss b/assets/style.scss
index b829501..9a47cb3 100644
--- a/assets/style.scss
+++ b/assets/style.scss
@@ -325,6 +325,7 @@ p {
   width: 16px;
   padding: 0 8px;
   flex: none;
+  align-self: end;
 }
 
 .message-info {
@@ -373,6 +374,22 @@ p {
   opacity: 0;
 }
 
+.light {
+  filter: invert(99%) sepia(1%) saturate(2689%) hue-rotate(208deg) brightness(106%) contrast(73%);
+}
+
+.chat-message.final .message-delivery, .visible {
+  opacity: 100% !important;
+}
+
+.chat-message.final {
+  margin-bottom: 8px;
+}
+
+.chat-message:not(:hover) .message-delivery {
+  opacity: 0;
+}
+
 /* font-families */
 
 /* thai */
-- 
cgit