Merge pull request #58 from ROXBOZ/Roxanne---UI

Roxanne   UI

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 (
-    <div className="message-container">
-      <div className={`message ${user?.username === author ? "my-message" : "you-all-message"}`}>
-        <div className="message-label">
-          {user?.username !== author ? <strong>{author}</strong> : <strong>me</strong>}{" "}
-          {formatDate(message.timestamp)}
-        </div>
-        <div className="message-bubble">
-          <p>{message.body}</p>
-        </div>
-      </div>
-    </div>
+    <>
+      <Bubble
+        darkmode
+        content={message.body}
+        author={author}
+        {...(myMessage ? { editable: true } : { editable: false })}
+        timestamp={message.timestamp}
+      />
+    </>
   );
 };

apps/codac-quasseln/src/components/chat/chat-room.tsx

@@ -95,40 +95,43 @@ const ChatRoom: React.FC<Props> = ({ roomId }) => {
       <button style={{ backgroundColor: "yellow" }} className="see-older-message">
         See older messages
       </button>
+
       {chatHistory.map((message) => (
         <ChatBubble key={message.id} message={message}></ChatBubble>
       ))}
+
       {roomId !== "" && (
         <>
           {typing && <p className="activity-message">someone typing...</p>}
 
           <div className="send-message-container">
-            <textarea
-              placeholder="Write something..."
-              onFocus={() => {
-                setTyping(true);
-              }}
-              onBlur={() => {
-                setTyping(false);
-              }}
-              value={msg}
-              onChange={(e) => {
-                setMsg(e.target.value);
-              }}
-              onKeyDown={(e) => {
-                if (e.key === "Enter") {
+            <div>
+              <textarea
+                placeholder="Write something..."
+                onFocus={() => {
+                  setTyping(true);
+                }}
+                onBlur={() => {
+                  setTyping(false);
+                }}
+                value={msg}
+                onChange={(e) => {
+                  setMsg(e.target.value);
+                }}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") {
+                    sendMessage();
+                  }
+                }}
+              />
+              <Button
+                label="Send"
+                primary
+                onClick={() => {
                   sendMessage();
-                }
-              }}
-            />
-
-            <Button
-              label="Send"
-              primary
-              onClick={() => {
-                sendMessage();
-              }}
-            />
+                }}
+              />
+            </div>
           </div>
         </>
       )}

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%);
   }
 }

apps/codac-quasseln/styles/_vars.scss

@@ -2,11 +2,14 @@
 $codac-primary-color: #02645a;
 
 $border-solid: 1px solid;
-$border-radius: 1em;
+$border-radius: 0.75em;
 
 //T
 $smaller-text: 60%;
 
 //Spacing
 $reg-space: 1rem;
 $sm-space: 0.5rem;
+$xs-space: 0.25rem;
+
+$font: "Noto Sans", sans-serif;

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;
 }
 

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";

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<typeof Bubble> = {
+  title: "Example/Bubble",
+  component: Bubble,
+  tags: ["autodocs"],
+  argTypes: {},
+};
+
+export default meta;
+type Story = StoryObj<typeof Bubble>;
+
+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",
+    },
+  },
+};