diff --git a/apps/codac-quasseln/src/components/chat/chat-bubble.tsx b/apps/codac-quasseln/src/components/chat/chat-bubble.tsx
index df89ae43..7dd142e0 100644
--- a/apps/codac-quasseln/src/components/chat/chat-bubble.tsx
+++ b/apps/codac-quasseln/src/components/chat/chat-bubble.tsx
@@ -1,11 +1,14 @@
+import { Bubble } from "codac-sassy";
import React from "react";
import { useAuth } from "#/contexts/authContext";
export const ChatBubble = ({ message }: { message: any }) => {
const { user } = useAuth();
+
const author =
message?.author?.data?.attributes?.username || (message?.author?.username as string);
+ const myMessage = user?.username === author; // Check if user is the author
const formatDate = (timestamp: string) => {
const date = new Date(timestamp);
@@ -28,16 +31,14 @@ export const ChatBubble = ({ message }: { message: any }) => {
};
return (
-
-
-
- {user?.username !== author ? {author} : me}{" "}
- {formatDate(message.timestamp)}
-
-
-
-
+ <>
+
+ >
);
};
diff --git a/apps/codac-quasseln/src/components/chat/chat-room.tsx b/apps/codac-quasseln/src/components/chat/chat-room.tsx
index 4d5d8094..126545de 100644
--- a/apps/codac-quasseln/src/components/chat/chat-room.tsx
+++ b/apps/codac-quasseln/src/components/chat/chat-room.tsx
@@ -95,40 +95,43 @@ const ChatRoom: React.FC = ({ roomId }) => {
+
{chatHistory.map((message) => (
))}
+
{roomId !== "" && (
<>
{typing && someone typing...
}
>
)}
diff --git a/apps/codac-quasseln/styles/_chatrooms.scss b/apps/codac-quasseln/styles/_chatrooms.scss
index 37e69370..cf34dff8 100644
--- a/apps/codac-quasseln/styles/_chatrooms.scss
+++ b/apps/codac-quasseln/styles/_chatrooms.scss
@@ -4,49 +4,62 @@
display: flex;
flex-direction: column;
gap: $reg-space;
+ border: 2px solid orange;
+ // display: grid;
+ // grid-template-columns: 1fr 1fr;
+ // gap: $reg-space;
- .message-container {
- display: grid;
- grid-template-columns: 1fr 1fr;
- gap: $reg-space;
- }
+ // .message-container {
+ // display: grid;
+ // grid-template-columns: 1fr 1fr;
+ // gap: $reg-space;
+ // }
// applying to all messages
- .message {
- grid-column: span 1;
- padding: $sm-space $reg-space $reg-space;
- border-radius: $border-radius;
+ // .message {
+ // grid-column: span 1;
+ // padding: $sm-space $reg-space $reg-space;
+ // border-radius: $border-radius;
- .message-label {
- font-size: $smaller-text;
- padding: $sm-space 0;
- }
- }
+ // .message-label {
+ // font-size: $smaller-text;
+ // padding: $sm-space 0;
+ // }
+ // }
// my messages
- .my-message {
- background-color: white;
- grid-column-start: 2;
+ // .my-message {
+ // background-color: white;
+ // grid-column-start: 2;
- .message-label {
- text-align: right;
- }
- }
+ // .message-label {
+ // text-align: right;
+ // }
+ // }
// other users' messages
- .you-all-message {
- background-color: lighten($codac-primary-color, 60%);
- grid-column-start: 1;
- }
+ // .you-all-message {
+ // background-color: lighten($codac-primary-color, 60%);
+ // grid-column-start: 1;
+ // }
}
/** send a message **/
.send-message-container {
- display: flex;
- align-items: flex-end;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
gap: $reg-space;
+ div {
+ display: flex;
+ gap: $sm-space;
+ flex-direction: column;
+ width: 100%;
+ grid-column-start: 2;
+ align-items: flex-end;
+ }
+
textarea {
+ width: 100%;
border-radius: $border-radius;
- // width: 100%;
background-color: lighten($codac-primary-color, 70%);
}
}
diff --git a/apps/codac-quasseln/styles/_vars.scss b/apps/codac-quasseln/styles/_vars.scss
index 9a0d9951..430d6515 100644
--- a/apps/codac-quasseln/styles/_vars.scss
+++ b/apps/codac-quasseln/styles/_vars.scss
@@ -2,7 +2,7 @@
$codac-primary-color: #02645a;
$border-solid: 1px solid;
-$border-radius: 1em;
+$border-radius: 0.75em;
//T
$smaller-text: 60%;
@@ -10,3 +10,6 @@ $smaller-text: 60%;
//Spacing
$reg-space: 1rem;
$sm-space: 0.5rem;
+$xs-space: 0.25rem;
+
+$font: "Noto Sans", sans-serif;
diff --git a/apps/codac-quasseln/styles/globals.css b/apps/codac-quasseln/styles/globals.css
index 7b7dbb23..14af92d7 100644
--- a/apps/codac-quasseln/styles/globals.css
+++ b/apps/codac-quasseln/styles/globals.css
@@ -3,41 +3,26 @@
display: flex;
flex-direction: column;
gap: 1rem;
+ border: 2px solid orange;
}
-.chatroom-container .message-container {
+
+/** send a message **/
+.send-message-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
-.chatroom-container .message {
- grid-column: span 1;
- padding: 0.5rem 1rem 1rem;
- border-radius: 1em;
-}
-.chatroom-container .message .message-label {
- font-size: 60%;
- padding: 0.5rem 0;
-}
-.chatroom-container .my-message {
- background-color: white;
- grid-column-start: 2;
-}
-.chatroom-container .my-message .message-label {
- text-align: right;
-}
-.chatroom-container .you-all-message {
- background-color: #9bfdf3;
- grid-column-start: 1;
-}
-
-/** send a message **/
-.send-message-container {
+.send-message-container div {
display: flex;
+ gap: 0.5rem;
+ flex-direction: column;
+ width: 100%;
+ grid-column-start: 2;
align-items: flex-end;
- gap: 1rem;
}
.send-message-container textarea {
- border-radius: 1em;
+ width: 100%;
+ border-radius: 0.75em;
background-color: #cdfef9;
}
diff --git a/apps/codac-quasseln/styles/globals.css.map b/apps/codac-quasseln/styles/globals.css.map
index 17d3818f..478f12eb 100644
--- a/apps/codac-quasseln/styles/globals.css.map
+++ b/apps/codac-quasseln/styles/globals.css.map
@@ -1 +1 @@
-{"version":3,"sources":["_chatrooms.scss","_vars.scss","globals.css"],"names":[],"mappings":"AAAA,0BAAA;AAEA;EACE,aAAA;EACA,sBAAA;EACA,SCKU;ACLZ;AFEE;EACE,aAAA;EACA,8BAAA;EACA,SAAA;AEAJ;AFGE;EACE,mBAAA;EACA,yBAAA;EACA,kBCZY;ACWhB;AFGI;EACE,cCZS;EDaT,iBAAA;AEDN;AFKE;EACE,uBAAA;EACA,oBAAA;AEHJ;AFKI;EACE,iBAAA;AEHN;AFOE;EACE,yBAAA;EACA,oBAAA;AELJ;;AFSA,qBAAA;AAEA;EACE,aAAA;EACA,qBAAA;EACA,SClCU;AC2BZ;AFSE;EACE,kBC3CY;ED6CZ,yBAAA;AERJ;;AFYA;EACE,YAAA;EACA,cChDa;ACuCf;;AFYA;EACE,aAAA;EACA,SClDU;EDmDV,mBAAA;AETF","file":"globals.css"}
\ No newline at end of file
+{"version":3,"sources":["_chatrooms.scss","_vars.scss","globals.css"],"names":[],"mappings":"AAAA,0BAAA;AAEA;EACE,aAAA;EACA,sBAAA;EACA,SCKU;EDJV,wBAAA;AEAF;;AFqCA,qBAAA;AAEA;EACE,aAAA;EACA,8BAAA;EACA,SCtCU;ACGZ;AFqCE;EACE,aAAA;EACA,WCzCO;ED0CP,sBAAA;EACA,WAAA;EACA,oBAAA;EACA,qBAAA;AEnCJ;AFsCE;EACE,WAAA;EACA,qBCzDY;ED0DZ,yBAAA;AEpCJ;;AFwCA;EACE,YAAA;EACA,cC7Da;ACwBf;;AFwCA;EACE,aAAA;EACA,SC/DU;EDgEV,mBAAA;AErCF","file":"globals.css"}
\ No newline at end of file
diff --git a/packages/codac-sassy/src/index.ts b/packages/codac-sassy/src/index.ts
index 0265ef24..a9bcd044 100644
--- a/packages/codac-sassy/src/index.ts
+++ b/packages/codac-sassy/src/index.ts
@@ -1 +1,3 @@
export { Button } from "./stories/button/Button";
+export { Input } from "./stories/input/Input";
+export { Bubble } from "./stories/bubble/Bubble";
diff --git a/packages/codac-sassy/src/stories/assets/delete-icon-black.svg b/packages/codac-sassy/src/stories/assets/delete-icon-black.svg
new file mode 100644
index 00000000..407a0403
--- /dev/null
+++ b/packages/codac-sassy/src/stories/assets/delete-icon-black.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/codac-sassy/src/stories/assets/delete-icon-white.svg b/packages/codac-sassy/src/stories/assets/delete-icon-white.svg
new file mode 100644
index 00000000..ad78d4e3
--- /dev/null
+++ b/packages/codac-sassy/src/stories/assets/delete-icon-white.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/codac-sassy/src/stories/assets/edit-icon-black.svg b/packages/codac-sassy/src/stories/assets/edit-icon-black.svg
new file mode 100644
index 00000000..baf1dafb
--- /dev/null
+++ b/packages/codac-sassy/src/stories/assets/edit-icon-black.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/codac-sassy/src/stories/assets/edit-icon-white.svg b/packages/codac-sassy/src/stories/assets/edit-icon-white.svg
new file mode 100644
index 00000000..2cc0a7a5
--- /dev/null
+++ b/packages/codac-sassy/src/stories/assets/edit-icon-white.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/codac-sassy/src/stories/assets/pin-icon-black.svg b/packages/codac-sassy/src/stories/assets/pin-icon-black.svg
new file mode 100644
index 00000000..a16be92b
--- /dev/null
+++ b/packages/codac-sassy/src/stories/assets/pin-icon-black.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/codac-sassy/src/stories/assets/pin-icon-white.svg b/packages/codac-sassy/src/stories/assets/pin-icon-white.svg
new file mode 100644
index 00000000..f2595e7f
--- /dev/null
+++ b/packages/codac-sassy/src/stories/assets/pin-icon-white.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/codac-sassy/src/stories/assets/pinned-icon-black.svg b/packages/codac-sassy/src/stories/assets/pinned-icon-black.svg
new file mode 100644
index 00000000..4272bfd0
--- /dev/null
+++ b/packages/codac-sassy/src/stories/assets/pinned-icon-black.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/codac-sassy/src/stories/assets/pinned-icon-white.svg b/packages/codac-sassy/src/stories/assets/pinned-icon-white.svg
new file mode 100644
index 00000000..8b88e526
--- /dev/null
+++ b/packages/codac-sassy/src/stories/assets/pinned-icon-white.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/codac-sassy/src/stories/bubble/Bubble.stories.ts b/packages/codac-sassy/src/stories/bubble/Bubble.stories.ts
new file mode 100644
index 00000000..cfe05136
--- /dev/null
+++ b/packages/codac-sassy/src/stories/bubble/Bubble.stories.ts
@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Bubble } from "./Bubble";
+
+const meta: Meta = {
+ title: "Example/Bubble",
+ component: Bubble,
+ tags: ["autodocs"],
+ argTypes: {},
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const MyMessageLightmode: Story = {
+ args: {
+ darkmode: false,
+ editable: true,
+ content: "yolo",
+ timestamp: "2023-06-22T10:30:00",
+ },
+};
+
+export const OtherUserLightmode: Story = {
+ args: {
+ darkmode: false,
+ editable: false,
+ content: "oi",
+ author: "Chewbacca",
+ timestamp: "2023-06-21T11:30:00",
+ },
+};
+
+export const MyMessageDarkmode: Story = {
+ args: {
+ darkmode: true,
+ editable: true,
+ content: "hola",
+ timestamp: "2023-04-21T11:30:00",
+ },
+ parameters: {
+ backgrounds: {
+ default: "dark",
+ },
+ },
+};
+
+export const OtherUserMessageDarkmode: Story = {
+ args: {
+ darkmode: true,
+ editable: false,
+ content: "ciao",
+ author: "Chewbacca",
+ timestamp: "2023-05-21T17:20:00",
+ },
+ parameters: {
+ backgrounds: {
+ default: "dark",
+ },
+ },
+};
diff --git a/packages/codac-sassy/src/stories/bubble/Bubble.tsx b/packages/codac-sassy/src/stories/bubble/Bubble.tsx
new file mode 100644
index 00000000..9bf140e7
--- /dev/null
+++ b/packages/codac-sassy/src/stories/bubble/Bubble.tsx
@@ -0,0 +1,162 @@
+import React, { useState } from "react";
+import "./bubble.css";
+import Image from "next/image";
+import deleteIconBlack from "../assets/delete-icon-black.svg";
+import deleteIconWhite from "../assets/delete-icon-white.svg";
+import editIconBlack from "../assets/edit-icon-black.svg";
+import editIconWhite from "../assets/edit-icon-white.svg";
+import pinIconBlack from "../assets/pin-icon-black.svg";
+import pinIconWhite from "../assets/pin-icon-white.svg";
+import pinnedIconBlack from "../assets/pinned-icon-black.svg";
+import pinnedIconWhite from "../assets/pinned-icon-white.svg";
+
+interface BubbleProps {
+ /**
+ * Is it for dark mode?
+ */
+ darkmode?: boolean;
+ /**
+ * Is it my message?
+ */
+ editable?: boolean;
+ /**
+ * Function to handle the edit button click
+ */
+ onEdit?: () => void;
+ /**
+ * Function to handle the delete button click
+ */
+ onDelete?: () => void;
+ /**
+ * Function to handle the pin button click
+ */
+ onPin?: () => void;
+ /**
+ * Content of the message
+ */
+ content: string;
+ /**
+ * Who is the author?
+ */
+ author?: string;
+ /**
+ * Timestamp
+ */
+ timestamp: string; // Changed the type to string
+}
+
+/**
+ * Primary UI component for user interaction
+ */
+export const Bubble = ({
+ darkmode = false,
+ editable = true,
+ content,
+ author,
+ timestamp,
+ onEdit,
+ onDelete,
+ onPin,
+ ...props
+}: BubbleProps) => {
+ const isDarkmode = darkmode ? "darkmode" : "lightmode";
+ const deleteIcon = darkmode ? deleteIconWhite : deleteIconBlack;
+ const editIcon = darkmode ? editIconWhite : editIconBlack;
+ const pinIcon = darkmode ? pinIconWhite : pinIconBlack;
+ const pinnedIcon = darkmode ? pinnedIconWhite : pinnedIconBlack;
+ const [pinned, setPinned] = useState(false);
+
+ const handleEditClick = () => {
+ if (onEdit) {
+ onEdit();
+ }
+ };
+
+ const handleDeleteClick = () => {
+ if (onDelete) {
+ onDelete();
+ }
+ };
+
+ const handlePinClick = () => {
+ if (onPin) {
+ onPin();
+ }
+ setPinned((prevPinned) => !prevPinned);
+ };
+
+ const formatDate = (timestamp: string) => {
+ const date = new Date(timestamp);
+ const today = new Date();
+ const yesterday = new Date();
+ yesterday.setDate(today.getDate() - 1);
+ let formattedDate = "";
+ if (date.toDateString() === today.toDateString()) {
+ formattedDate = "Today";
+ } else if (date.toDateString() === yesterday.toDateString()) {
+ formattedDate = "Yesterday";
+ } else {
+ formattedDate = `${date.getDate()}/${date.getMonth() + 1}/${date.getFullYear()}`;
+ }
+ formattedDate += ` @ ${date.getHours().toString().padStart(2, "0")}:${date
+ .getMinutes()
+ .toString()
+ .padStart(2, "0")}`;
+
+ return formattedDate;
+ };
+
+ const messageDate = formatDate(timestamp);
+
+ return (
+
+
+
+ {editable ? (
+ <>
+
+ me ·{" "}
+ {messageDate}
+
+
+
+
+ >
+ ) : (
+ <>
+
+ {author} ·{" "}
+ {messageDate}
+
+
+ >
+ )}
+
+
{content}
+
+
+ );
+};
diff --git a/packages/codac-sassy/src/stories/bubble/bubble.css b/packages/codac-sassy/src/stories/bubble/bubble.css
new file mode 100644
index 00000000..e64644c3
--- /dev/null
+++ b/packages/codac-sassy/src/stories/bubble/bubble.css
@@ -0,0 +1,94 @@
+/** messages chronology **/
+.chatroom-container {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ border: 2px solid orange;
+}
+
+/** send a message **/
+.send-message-container {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 1rem;
+}
+.send-message-container div {
+ display: flex;
+ gap: 0.5rem;
+ flex-direction: column;
+ width: 100%;
+ grid-column-start: 2;
+ align-items: flex-end;
+}
+.send-message-container textarea {
+ width: 100%;
+ border-radius: 0.75em;
+ background-color: #cdfef9;
+}
+
+.activity-message {
+ color: white;
+ font-size: 60%;
+}
+
+.chatroom-nav {
+ display: flex;
+ gap: 1rem;
+ align-items: center;
+}
+
+.bubble-container {
+ font-family: "Noto Sans", sans-serif;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 1rem;
+}
+.bubble-container.my-message * {
+ grid-column-start: 2;
+}
+.bubble-container .legend {
+ font-size: 80%;
+}
+.bubble-container.darkmode .bubble-message {
+ background-color: white;
+}
+.bubble-container.darkmode .legend {
+ color: white;
+}
+.bubble-container .bubble-dashboard {
+ justify-content: flex-end;
+ margin: 0.25rem 0.75em 0;
+ align-items: center;
+ gap: 0.5rem;
+ display: flex;
+ height: -moz-fit-content;
+ height: fit-content;
+}
+.bubble-container .bubble-dashboard button {
+ background-color: transparent;
+ border: none;
+ align-items: center;
+ padding: 0.1em;
+ display: flex;
+}
+.bubble-container .bubble-dashboard button:hover {
+ opacity: 60%;
+}
+.bubble-container .bubble-dashboard button:active {
+ opacity: 100%;
+ transform: scale(1.1);
+}
+.bubble-container .bubble-dashboard button img {
+ height: auto;
+ width: auto;
+ max-height: 12px;
+}
+.bubble-container .bubble-message {
+ min-height: 2rem;
+ max-height: -moz-fit-content;
+ max-height: fit-content;
+ border-radius: 0.75em;
+ padding: 1rem;
+ font-family: "Noto Sans", sans-serif;
+ background-color: #cdfef9;
+}/*# sourceMappingURL=bubble.css.map */
\ No newline at end of file
diff --git a/packages/codac-sassy/src/stories/bubble/bubble.css.map b/packages/codac-sassy/src/stories/bubble/bubble.css.map
new file mode 100644
index 00000000..7c2e3900
--- /dev/null
+++ b/packages/codac-sassy/src/stories/bubble/bubble.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../apps/codac-quasseln/styles/_chatrooms.scss","../../../../../apps/codac-quasseln/styles/_vars.scss","bubble.css","bubble.scss"],"names":[],"mappings":"AAAA,0BAAA;AAEA;EACE,aAAA;EACA,sBAAA;EACA,SCKU;EDJV,wBAAA;AEAF;;AFqCA,qBAAA;AAEA;EACE,aAAA;EACA,8BAAA;EACA,SCtCU;ACGZ;AFqCE;EACE,aAAA;EACA,WCzCO;ED0CP,sBAAA;EACA,WAAA;EACA,oBAAA;EACA,qBAAA;AEnCJ;AFsCE;EACE,WAAA;EACA,qBCzDY;ED0DZ,yBAAA;AEpCJ;;AFwCA;EACE,YAAA;EACA,cC7Da;ACwBf;;AFwCA;EACE,aAAA;EACA,SC/DU;EDgEV,mBAAA;AErCF;;ACnCA;EACE,oCFWK;EEVL,aAAA;EACA,8BAAA;EACA,SFIU;ACkCZ;ACnCI;EACE,oBAAA;ADqCN;ACjCE;EACE,cAAA;ADmCJ;AC/BI;EACE,uBAAA;ADiCN;AC/BI;EACE,YAAA;ADiCN;AC7BE;EACE,yBAAA;EACA,wBAAA;EACA,mBAAA;EACA,WFpBO;EEqBP,aAAA;EACA,wBAAA;EAAA,mBAAA;AD+BJ;AC9BI;EACE,6BAAA;EACA,YAAA;EACA,mBAAA;EACA,cAAA;EACA,aAAA;ADgCN;AC9BM;EACE,YAAA;ADgCR;AC7BM;EACE,aAAA;EACA,qBAAA;AD+BR;AC5BM;EACE,YAAA;EACA,WAAA;EACA,gBAAA;AD8BR;AC1BE;EACE,gBAAA;EACA,4BAAA;EAAA,uBAAA;EACA,qBFxDY;EEyDZ,aFnDQ;EEoDR,oCFhDG;EEiDH,yBAAA;AD4BJ","file":"bubble.css"}
\ No newline at end of file
diff --git a/packages/codac-sassy/src/stories/bubble/bubble.scss b/packages/codac-sassy/src/stories/bubble/bubble.scss
new file mode 100644
index 00000000..c8667635
--- /dev/null
+++ b/packages/codac-sassy/src/stories/bubble/bubble.scss
@@ -0,0 +1,66 @@
+@import "../../../../../apps/codac-quasseln/styles/globals.scss";
+
+.bubble-container {
+ font-family: $font;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: $reg-space;
+
+ &.my-message {
+ * {
+ grid-column-start: 2;
+ }
+ }
+
+ .legend {
+ font-size: 80%;
+ }
+
+ &.darkmode {
+ .bubble-message {
+ background-color: white;
+ }
+ .legend {
+ color: white;
+ }
+ }
+
+ .bubble-dashboard {
+ justify-content: flex-end;
+ margin: $xs-space $border-radius 0;
+ align-items: center;
+ gap: $sm-space;
+ display: flex;
+ height: fit-content;
+ button {
+ background-color: transparent;
+ border: none;
+ align-items: center;
+ padding: 0.1em;
+ display: flex;
+
+ &:hover {
+ opacity: 60%;
+ }
+
+ &:active {
+ opacity: 100%;
+ transform: scale(1.1);
+ }
+
+ img {
+ height: auto;
+ width: auto;
+ max-height: 12px;
+ }
+ }
+ }
+ .bubble-message {
+ min-height: 2rem;
+ max-height: fit-content;
+ border-radius: $border-radius;
+ padding: $reg-space;
+ font-family: $font;
+ background-color: lighten($codac-primary-color, 70%);
+ }
+}
diff --git a/packages/codac-sassy/src/stories/button/button.css b/packages/codac-sassy/src/stories/button/button.css
index 0ea0f0c6..355b5040 100644
--- a/packages/codac-sassy/src/stories/button/button.css
+++ b/packages/codac-sassy/src/stories/button/button.css
@@ -1,15 +1,54 @@
+/** messages chronology **/
+.chatroom-container {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ border: 2px solid orange;
+}
+
+/** send a message **/
+.send-message-container {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 1rem;
+}
+.send-message-container div {
+ display: flex;
+ gap: 0.5rem;
+ flex-direction: column;
+ width: 100%;
+ grid-column-start: 2;
+ align-items: flex-end;
+}
+.send-message-container textarea {
+ width: 100%;
+ border-radius: 0.75em;
+ background-color: #cdfef9;
+}
+
+.activity-message {
+ color: white;
+ font-size: 60%;
+}
+
+.chatroom-nav {
+ display: flex;
+ gap: 1rem;
+ align-items: center;
+}
+
.storybook-button {
border-radius: 50px;
cursor: pointer;
line-height: 1;
- padding: 0.5em 1em;
+ padding: 0.5em 1em !important;
border: 1px solid transparent;
display: flex;
align-items: center;
- width: -moz-fit-content;
- width: fit-content;
height: -moz-fit-content;
height: fit-content;
+ width: -moz-fit-content;
+ width: fit-content;
}
.storybook-button .label {
font-size: 16px;
diff --git a/packages/codac-sassy/src/stories/button/button.css.map b/packages/codac-sassy/src/stories/button/button.css.map
index cf3fcc77..26c96ad7 100644
--- a/packages/codac-sassy/src/stories/button/button.css.map
+++ b/packages/codac-sassy/src/stories/button/button.css.map
@@ -1 +1 @@
-{"version":3,"sources":["button.scss","button.css","../../../../../apps/codac-quasseln/styles/_vars.scss"],"names":[],"mappings":"AAEA;EACE,mBAAA;EACA,eAAA;EACA,cAAA;EACA,kBAAA;EACA,6BAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EAAA,kBAAA;EACA,wBAAA;EAAA,mBAAA;ACDF;ADGE;EACE,eAAA;EACA,kCAAA;ACDJ;ADIE;EACE,WAAA;EACA,oBAAA;ACFJ;ADKE;EACE,iBAAA;ACHJ;ADME;EACE,cAAA;ACJJ;ADOE;EACE,YAAA;EACA,yBEhCkB;AD2BtB;ADOI;EACE,yBAAA;ACLN;ADOI;EACE,yBAAA;ACLN;ADSE;EACE,YAAA;EACA,yBAAA;ACPJ;ADSI;EACE,yBAAA;ACPN;ADSI;EACE,yBAAA;ACPN","file":"button.css"}
\ No newline at end of file
+{"version":3,"sources":["../../../../../apps/codac-quasseln/styles/_chatrooms.scss","../../../../../apps/codac-quasseln/styles/_vars.scss","button.css","button.scss"],"names":[],"mappings":"AAAA,0BAAA;AAEA;EACE,aAAA;EACA,sBAAA;EACA,SCKU;EDJV,wBAAA;AEAF;;AFqCA,qBAAA;AAEA;EACE,aAAA;EACA,8BAAA;EACA,SCtCU;ACGZ;AFqCE;EACE,aAAA;EACA,WCzCO;ED0CP,sBAAA;EACA,WAAA;EACA,oBAAA;EACA,qBAAA;AEnCJ;AFsCE;EACE,WAAA;EACA,qBCzDY;ED0DZ,yBAAA;AEpCJ;;AFwCA;EACE,YAAA;EACA,cC7Da;ACwBf;;AFwCA;EACE,aAAA;EACA,SC/DU;EDgEV,mBAAA;AErCF;;ACnCA;EACE,mBAAA;EACA,eAAA;EACA,cAAA;EACA,6BAAA;EACA,6BAAA;EACA,aAAA;EACA,mBAAA;EAEA,wBAAA;EAAA,mBAAA;EACA,uBAAA;EAAA,kBAAA;ADqCF;ACpCE;EACE,eAAA;EACA,kCFDG;ACuCP;ACnCE;EACE,WAAA;EACA,oBAAA;ADqCJ;AClCE;EACE,iBAAA;ADoCJ;ACjCE;EACE,cAAA;ADmCJ;AChCE;EACE,YAAA;EACA,yBFhCkB;ACkEtB;AChCI;EACE,yBAAA;ADkCN;AChCI;EACE,yBAAA;ADkCN;AC9BE;EACE,YAAA;EACA,yBAAA;ADgCJ;AC9BI;EACE,yBAAA;ADgCN;AC9BI;EACE,yBAAA;ADgCN","file":"button.css"}
\ No newline at end of file
diff --git a/packages/codac-sassy/src/stories/button/button.scss b/packages/codac-sassy/src/stories/button/button.scss
index 225c66e6..e238e75d 100644
--- a/packages/codac-sassy/src/stories/button/button.scss
+++ b/packages/codac-sassy/src/stories/button/button.scss
@@ -1,19 +1,19 @@
-@import "../../../../../apps/codac-quasseln/styles/vars";
+@import "../../../../../apps/codac-quasseln/styles/globals.scss";
.storybook-button {
border-radius: 50px;
cursor: pointer;
line-height: 1;
- padding: 0.5em 1em;
+ padding: 0.5em 1em !important;
border: $border-solid transparent;
display: flex;
align-items: center;
- width: fit-content;
- height: fit-content;
+ height: fit-content;
+ width: fit-content;
.label {
font-size: 16px;
- font-size: "Noto Sans", sans-serif;
+ font-size: $font;
}
.icon {
diff --git a/packages/codac-sassy/src/stories/input/Input.stories.ts b/packages/codac-sassy/src/stories/input/Input.stories.ts
index 8e21ce26..9272db5f 100644
--- a/packages/codac-sassy/src/stories/input/Input.stories.ts
+++ b/packages/codac-sassy/src/stories/input/Input.stories.ts
@@ -11,30 +11,13 @@ const meta: Meta = {
export default meta;
type Story = StoryObj;
-export const PrimaryLightmode: Story = {
+export const Lightmode: Story = {
args: {
darkmode: false,
},
};
-export const PrimaryDarkmode: Story = {
- args: {
- darkmode: true,
- },
- parameters: {
- backgrounds: {
- default: "dark",
- },
- },
-};
-
-export const SecondaryLightmode: Story = {
- args: {
- darkmode: false,
- },
-};
-
-export const SecondaryDarkmode: Story = {
+export const Darkmode: Story = {
args: {
darkmode: true,
},
diff --git a/packages/codac-sassy/src/stories/input/Input.tsx b/packages/codac-sassy/src/stories/input/Input.tsx
index 7222e289..cae96307 100644
--- a/packages/codac-sassy/src/stories/input/Input.tsx
+++ b/packages/codac-sassy/src/stories/input/Input.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
import "./input.css";
interface InputProps {
@@ -17,5 +17,26 @@ interface InputProps {
*/
export const Input = ({ darkmode = false, ...props }: InputProps) => {
const isDarkmode = darkmode ? "darkmode" : "lightmode";
- return ;
+
+ return (
+