From ad698393a0386cc5cbe6dce9254f38ec21a11c36 Mon Sep 17 00:00:00 2001 From: ROXBOZ Date: Fri, 30 Jun 2023 16:44:08 +0200 Subject: [PATCH 1/2] styling chatroom and chats --- .../src/pages/main-chat/[chatId].tsx | 577 ++++++------------ .../src/pages/main-chat/index.tsx | 113 ++-- apps/codac-quasseln/styles/_chatrooms.scss | 362 +++++++++-- apps/codac-quasseln/styles/_vars.scss | 3 +- apps/codac-quasseln/styles/globals.css | 274 ++++++++- apps/codac-quasseln/styles/globals.css.map | 2 +- apps/codac-quasseln/tsconfig.json | 3 +- .../codac-sassy/src/stories/bubble/bubble.css | 278 ++++++++- .../src/stories/bubble/bubble.css.map | 2 +- .../codac-sassy/src/stories/button/button.css | 274 ++++++++- .../src/stories/button/button.css.map | 2 +- .../codac-sassy/src/stories/input/input.css | 2 +- .../src/stories/input/input.css.map | 2 +- .../codac-ui/src/layouts/dashboard-layout.tsx | 24 +- 14 files changed, 1361 insertions(+), 557 deletions(-) diff --git a/apps/codac-quasseln/src/pages/main-chat/[chatId].tsx b/apps/codac-quasseln/src/pages/main-chat/[chatId].tsx index da3231de..61ea8ada 100644 --- a/apps/codac-quasseln/src/pages/main-chat/[chatId].tsx +++ b/apps/codac-quasseln/src/pages/main-chat/[chatId].tsx @@ -4,6 +4,9 @@ import React, { FormEvent, useState } from "react"; import { useAuth } from "#/contexts/authContext"; import { timeStamp } from "console"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faBookmark } from "@fortawesome/free-solid-svg-icons"; + // This query is to find the chatroom.... NOT all the messages... (do you mean conversations????) const getSingleChat = gql` @@ -27,7 +30,6 @@ const getSingleChat = gql` } } `; - const getChatHistoryById = gql` query getChatHistoryById($id: ID) { conversation(id: $id) { @@ -81,6 +83,7 @@ const createNewMessage = gql` } } `; + // Collection of pinned messages inside the user---- const deleteChatMessage = gql` mutation deleteMessage($id: ID!) { @@ -145,7 +148,6 @@ const updatePinnedConversation = gql` const SingleChat = (props: Props) => { const { user } = useAuth(); - console.log("user :>> ", user); const userId = user?.id; // console.log("userId :>> ", userId); @@ -258,7 +260,6 @@ const SingleChat = (props: Props) => { setOptionsModal(!optionsModal); }; - // this is for the date in each message... const formatDate = (timestamp: string) => { const date = new Date(timestamp); const today = new Date(); @@ -272,9 +273,10 @@ const SingleChat = (props: Props) => { } else { formattedDate = `${date.getDate()}/${date.getMonth() + 1}/${date.getFullYear()}`; } - // what it that???? += ? - formattedDate += `@ ${date.getHours() < 10 ? "0" : ""}${date.getHours()}: - ${date.getMinutes() < 10 ? "0" : ""}${date.getMinutes()} `; + formattedDate += `@ ${date.getHours() < 10 ? "0" : ""}${date.getHours()}:${ + date.getMinutes() < 10 ? "0" : "" + }${date.getMinutes()} `; + return formattedDate; }; @@ -296,130 +298,98 @@ const SingleChat = (props: Props) => { return (
-

- Welcome to {chatRooms?.chatroom.data?.attributes.name} -

- +

Welcome to {chatRooms?.chatroom.data?.attributes.name}

{/* Este es el div que alberga todo el chat!!!!!! */} - -
+
{/* CONVERSATIONS DIV */} -
+
{/* HIER ARE THE PINNED CONVERSATIONS */} - -
+
+ + Pinned Conversations of {chatRooms?.chatroom.data?.attributes.name} + {chatRooms && chatRooms.chatroom?.data?.attributes.conversations?.data?.map((conversation: any) => { - // console.log("conversation :>> ", conversation); if (conversation.attributes.pinned === true) { return (
{ setActive(conversation.id); }} > - {/* HIER COME THE PINN ICON; PLEASE CHANGE IT FOR THE

*/} <> {user?.role?.name === "Mentor" ? ( -

updatePinned(e, conversation)} - style={{ cursor: "pointer" }} + - X -

+ + ) : ( - "" + + + )} -

- {conversation.attributes?.title} -

+ {conversation.attributes?.title}
); } })}
- -
- {/* HIER ARE THE NOT PINNED CONVERSATIONS */} -
+
+ + Other Conversations of {chatRooms?.chatroom.data?.attributes.name} + + {chatRooms && chatRooms.chatroom?.data?.attributes.conversations?.data?.map((conversation: any) => { - console.log("conversation :>> ", conversation); if (conversation.attributes.pinned === false) { return (
{ setActive(conversation.id); }} > - {/* HIER COME THE PINN ICON; PLEASE CHANGE IT FOR THE

*/} <> {user?.role?.name === "Mentor" ? ( -

updatePinned(e, conversation)} - style={{ cursor: "pointer" }} + - X -

+ + ) : ( - "" + + + )} - -

- {conversation.attributes?.title} -

+ {conversation.attributes?.title}
); } @@ -427,315 +397,158 @@ const SingleChat = (props: Props) => {
- {/* All Messages from a conversation.... */} -
-
- {allMessages && - allMessages?.conversation?.data.attributes?.messages?.data?.map((message: any) => { - return ( +
+ {allMessages && + allMessages?.conversation?.data.attributes?.messages?.data?.map((message: any) => { + return ( +
-
-
- {/*

id: {message.id}

*/} - - {user?.username !== message.attributes.author.data?.attributes.username ? ( - {message.attributes.author.data?.attributes.username} - ) : ( - me +
+ {user?.username !== message.attributes.author.data?.attributes.username ? ( + {message.attributes.author.data?.attributes.username} + ) : ( + me + )}{" "} + {formatDate(message.attributes.createdAt)} + <> + {user?.username === message.attributes.author.data?.attributes.username && ( +
+ + +
)} + +
- {formatDate(message.attributes.createdAt)} -
- -
- - +
+
+

{message.attributes.body}

-
-
-

{message.attributes.body}

-
- {/* +++++++++++++++++++++++++++++ EDIT MODAL +++++++++++++++++++++ */} - {optionsModal && ( -
-
-
{ - e.stopPropagation(); - }} - style={{ - position: "relative", - zIndex: "1000", - display: "flex", - flexDirection: "column", - width: "35%", - height: "25%", - border: "white solid 3px", - borderRadius: "10px", - backgroundColor: "white", - margin: "auto", - marginTop: "200px", - }} - > - {/*
{ deleteMessage(e, message) }} > aquí viene la funcion!! */} - { - updateMessage(e, message); + {/* +++++++++++++++++++++++++++++ EDIT MODAL +++++++++++++++++++++ */} + {optionsModal && ( +
+
+
{ + e.stopPropagation(); }} > - - - - - + + +
+ + +
+ +
-
- )} - - {/* // +++++++++++++++++++++++++ DELETE MODAL +++++++++++++++++++ */} - {deleteModal && ( -
-
-
{ - e.stopPropagation(); - }} - style={{ - position: "relative", - zIndex: "1000", - display: "flex", - flexDirection: "column", - width: "35%", - height: "25%", - border: "white solid 3px", - borderRadius: "10px", - backgroundColor: "white", - margin: "auto", - marginTop: "200px", - }} - > - {/* onSubmit={deleteMessage} */} - {/* {( - - -
- +

Do you want to delete your message?

+
+ + + +
+ +
-
- )} + )} +
- ); - })} -
+
+ ); + })} {/* +++++++++++++++++++++++++ TEXT BODY +++++++++++++++++++ */} -
+ +
-
diff --git a/apps/codac-quasseln/src/pages/main-chat/index.tsx b/apps/codac-quasseln/src/pages/main-chat/index.tsx index 33ed6b84..99a7a492 100644 --- a/apps/codac-quasseln/src/pages/main-chat/index.tsx +++ b/apps/codac-quasseln/src/pages/main-chat/index.tsx @@ -1,37 +1,36 @@ -import { useAuth } from '#/contexts/authContext'; +import { useAuth } from "#/contexts/authContext"; -import React, { useEffect, useState } from 'react' +import React, { useEffect, useState } from "react"; import { gql, useQuery } from "@apollo/client"; -import Link from 'next/link'; -import { useSocket } from '#/contexts/socketContext'; -import { Enum_Componentleadlifecycle_State } from 'codac-graphql-types'; - - +import Link from "next/link"; +import { useSocket } from "#/contexts/socketContext"; +import { Enum_Componentleadlifecycle_State } from "codac-graphql-types"; const GetAllChats = gql` -query getAllChats { - chatrooms { - data { - id - attributes { - name - createdAt - users_permissions_users { - data { - id - attributes { - username - avatar { - data { - attributes { - url + query getAllChats { + chatrooms { + data { + id + attributes { + name + createdAt + users_permissions_users { + data { + id + attributes { + username + avatar { + data { + attributes { + url + } } } - } - role { - data { - attributes { - name + role { + data { + attributes { + name + } } } } @@ -41,15 +40,14 @@ query getAllChats { } } } -} `; -type Props = {} +type Props = {}; const ChrisChat = (props: Props) => { const { data, error, loading } = useQuery(GetAllChats); const { user } = useAuth(); - console.log('user :>> ', user); + console.log("user :>> ", user); // do I need this connected state??? const [connected, setConnected] = useState(false); @@ -59,45 +57,42 @@ const ChrisChat = (props: Props) => { if (socket) { setConnected(true); } else { - setConnected(false) + setConnected(false); } }, [socket]); - console.log('socket :>> ', socket); - console.log('user :>> ', user); - console.log('data from chris query :>> ', data); + console.log("socket :>> ", socket); + console.log("user :>> ", user); + console.log("data from chris query :>> ", data); return ( <> -
-
Chat Rooms
-
index -

Index For Alls Chatrooms...

-
-
- {data && data?.chatrooms?.data.map((chat: any) => { +

Chatrooms Access

+
+ {data && + data?.chatrooms?.data.map((chat: any) => { return ( -
+
{/* se puede con el nombre?? sería mejor... */} - -

{chat.attributes.name}

+ + <> + + + + {chat.attributes.name} +
- ) + ); })} - -
-
- ) -} + ); +}; -export default ChrisChat \ No newline at end of file +export default ChrisChat; diff --git a/apps/codac-quasseln/styles/_chatrooms.scss b/apps/codac-quasseln/styles/_chatrooms.scss index cf34dff8..3886813b 100644 --- a/apps/codac-quasseln/styles/_chatrooms.scss +++ b/apps/codac-quasseln/styles/_chatrooms.scss @@ -1,76 +1,336 @@ /** messages chronology **/ +h1 { + color: white; + font-size: xx-large; +} + +.chatroom-access-link-container { + display: flex; + gap: $reg-space !important; + margin: $reg-space 0; + flex-direction: column; + .chatroom-access-link { + padding: $reg-space; + border-radius: $border-radius; + cursor: pointer; + display: flex; + gap: $reg-space; + align-items: center; + border: $border-solid-xl transparent; + background-color: rgb(30, 30, 30); + color: white; + .icon path { + fill: white; + } + } +} .chatroom-container { 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; - // } - // applying to all messages - // .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; - // } - // } - // my messages - // .my-message { - // background-color: white; - // grid-column-start: 2; - - // .message-label { - // text-align: right; - // } - // } - // other users' messages - // .you-all-message { - // background-color: lighten($codac-primary-color, 60%); - // grid-column-start: 1; - // } } -/** send a message **/ +/////////////// -.send-message-container { - display: grid; - grid-template-columns: 1fr 1fr; - gap: $reg-space; +.chat-container { + color: white; + margin: $reg-space 0; + display: flex; - div { + .chat-dashboard-container { display: flex; - gap: $sm-space; flex-direction: column; - width: 100%; - grid-column-start: 2; - align-items: flex-end; + min-width: 20em; + width: 30%; + background-color: rgb(20, 20, 20); + + .pinned-conversations-container, + .unpinned-conversations-container { + display: flex; + flex-direction: column; + gap: $reg-space; + padding: $reg-space $reg-space * 2 $reg-space $reg-space; + + .pinned-conversation, + .unpinned-conversation { + padding: $reg-space; + border-radius: $border-radius; + cursor: pointer; + display: flex; + gap: $reg-space; + align-items: center; + font-weight: 600; + border: $border-solid-xl transparent; + } + } + .pinned-conversations-container { + background-color: $codac-primary-color; + border-radius: $border-radius 0 0 0; + + .pinned-conversation { + color: darken($codac-primary-color, 20%); + background-color: lighten($codac-primary-color, 60%); + &.is-inactive { + background-color: darken($codac-primary-color, 5%); + color: white; + .pin-icon path { + fill: lighten($codac-primary-color, 20%); + } + &:hover { + color: darken($codac-primary-color, 20%); + .pin-icon path { + fill: darken($codac-primary-color, 20%); + } + } + } + + .pin-icon { + path { + fill: darken($codac-primary-color, 10%); + } + } + + &:hover { + background-color: lighten($codac-primary-color, 50%); + } + + &:active { + border: $border-solid-xl lighten($codac-primary-color, 20%); + } + } + } + .unpinned-conversations-container { + background-color: rgb(30, 30, 30); + border-radius: 0 0 0 $border-radius; + height: 100%; + .unpinned-conversation { + background-color: rgb(20, 20, 20); + + .unpin-icon { + path { + fill: lighten($codac-primary-color, 20%); + } + } + + &.is-active { + background-color: white; + color: rgb(20, 20, 20); + } + } + } + + .conversations-container-title { + font-size: 80%; + } } - textarea { + .chat-convo-container { + background-color: rgb(40, 40, 40); + border-radius: 0 $border-radius $border-radius 0; + padding: $reg-space $reg-space $reg-space $reg-space * 2; width: 100%; - border-radius: $border-radius; - background-color: lighten($codac-primary-color, 70%); + display: flex; + flex-direction: column; + gap: $reg-space !important; + + .message-container { + display: grid; + grid-template-columns: 1fr 1fr; + width: 100%; + gap: $reg-space; + + .message-bubble { + border-radius: $border-radius; + color: black; + + .message-label { + font-size: 80%; + color: white; + padding: $xs-space; + display: flex; + gap: $xs-space; + justify-content: flex-end; + + .message-functions-panel { + padding: 0 $border-radius; + display: flex; + gap: $sm-space; + + .icon { + path { + fill: white; + &:hover { + fill: lighten($codac-primary-color, 70%); + } + &:active { + fill: lighten($codac-primary-color, 50%); + } + } + } + } + } + + &.my-message { + grid-column-start: 2; + .message-text { + background-color: white; + } + } + &.user-message { + .message-text { + background-color: lighten($codac-primary-color, 70%); + } + } + } + } } } -.activity-message { - color: white; - font-size: $smaller-text; +.message-text { + padding: $reg-space; + border-radius: $border-radius; } -.chatroom-nav { +.edit-message-modal-overlay, +.delete-post-modal-overlay { + width: 100vw; + height: 100vh; + top: 0; + left: 0; + right: 0; + bottom: 0; + position: fixed; + background-color: rgba(0, 0, 0, 0.5); +} +.edit-message-modal-container, +.delete-message-modal_container { + z-index: 999; display: flex; + flex-direction: column; + width: 35%; + border-radius: $border-radius; + background-color: lighten($codac-primary-color, 70%); + justify-content: center; + padding: $reg-space; + margin: 15rem auto; gap: $reg-space; + + p { + color: darken($codac-primary-color, 60%); + } + + form { + display: flex; + flex-direction: column; + gap: $sm-space; + label { + font-weight: 600; + } + textarea { + margin: $sm-space 0; + border-radius: $border-radius; + padding: $reg-space; + border: $border-solid $codac-primary-color; + } + .buttons-container { + display: flex; + gap: $sm-space; + margin-top: $reg-space; + button { + padding: $sm-space; + border-radius: $border-radius; + font-weight: 600; + } + button.primary { + background-color: $codac-primary-color; + color: white; + border: $border-solid transparent; + &:hover { + background-color: darken($codac-primary-color, 5%); + border: $border-solid transparent; + } + &:active { + background-color: darken($codac-primary-color, 5%); + border: $border-solid lighten($codac-primary-color, 20%); + } + } + button.secondary { + border: $border-solid $codac-primary-color; + color: $codac-primary-color; + &:hover { + background-color: lighten($codac-primary-color, 75%); + } + &:active { + border: $border-solid lighten($codac-primary-color, 20%); + } + } + } + } +} + +.send-message-container { + display: flex; + justify-content: flex-end; align-items: center; + gap: $reg-space; + + textarea { + color: black; + width: 100%; + border-radius: $border-radius; + } + + button { + height: fit-content; + width: fit-content; + padding: $reg-space; + border-radius: $border-radius; + color: darken($codac-primary-color, 20%); + background-color: lighten($codac-primary-color, 30%); + display: flex; + gap: $sm-space; + align-items: center; + &:hover { + background-color: lighten($codac-primary-color, 50%); + } + &:active { + border: $border-solid lighten($codac-primary-color, 20%); + } + } } + +// /** send a message **/ + +// .send-message-container { +// 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; +// background-color: lighten($codac-primary-color, 70%); +// } +// } + +// .activity-message { +// color: white; +// font-size: $smaller-text; +// } + +// .chatroom-nav { +// display: flex; +// gap: $reg-space; +// align-items: center; +// } diff --git a/apps/codac-quasseln/styles/_vars.scss b/apps/codac-quasseln/styles/_vars.scss index 430d6515..5e556fac 100644 --- a/apps/codac-quasseln/styles/_vars.scss +++ b/apps/codac-quasseln/styles/_vars.scss @@ -2,7 +2,8 @@ $codac-primary-color: #02645a; $border-solid: 1px solid; -$border-radius: 0.75em; +$border-solid-xl: 3px solid; +$border-radius: 0.25em; //T $smaller-text: 60%; diff --git a/apps/codac-quasseln/styles/globals.css b/apps/codac-quasseln/styles/globals.css index 14af92d7..f369849c 100644 --- a/apps/codac-quasseln/styles/globals.css +++ b/apps/codac-quasseln/styles/globals.css @@ -1,4 +1,30 @@ /** messages chronology **/ +h1 { + color: white; + font-size: xx-large; +} + +.chatroom-access-link-container { + display: flex; + gap: 1rem !important; + margin: 1rem 0; + flex-direction: column; +} +.chatroom-access-link-container .chatroom-access-link { + padding: 1rem; + border-radius: 0.25em; + cursor: pointer; + display: flex; + gap: 1rem; + align-items: center; + border: 3px solid transparent; + background-color: rgb(30, 30, 30); + color: white; +} +.chatroom-access-link-container .chatroom-access-link .icon path { + fill: white; +} + .chatroom-container { display: flex; flex-direction: column; @@ -6,33 +32,257 @@ border: 2px solid orange; } -/** send a message **/ -.send-message-container { +.chat-container { + color: white; + margin: 1rem 0; + display: flex; +} +.chat-container .chat-dashboard-container { + display: flex; + flex-direction: column; + min-width: 20em; + width: 30%; + background-color: rgb(20, 20, 20); +} +.chat-container .chat-dashboard-container .pinned-conversations-container, +.chat-container .chat-dashboard-container .unpinned-conversations-container { + display: flex; + flex-direction: column; + gap: 1rem; + padding: 1rem 2rem 1rem 1rem; +} +.chat-container .chat-dashboard-container .pinned-conversations-container .pinned-conversation, +.chat-container .chat-dashboard-container .pinned-conversations-container .unpinned-conversation, +.chat-container .chat-dashboard-container .unpinned-conversations-container .pinned-conversation, +.chat-container .chat-dashboard-container .unpinned-conversations-container .unpinned-conversation { + padding: 1rem; + border-radius: 0.25em; + cursor: pointer; + display: flex; + gap: 1rem; + align-items: center; + font-weight: 600; + border: 3px solid transparent; +} +.chat-container .chat-dashboard-container .pinned-conversations-container { + background-color: #02645a; + border-radius: 0.25em 0 0 0; +} +.chat-container .chat-dashboard-container .pinned-conversations-container .pinned-conversation { + color: black; + background-color: #9bfdf3; +} +.chat-container .chat-dashboard-container .pinned-conversations-container .pinned-conversation.is-inactive { + background-color: #024b44; + color: white; +} +.chat-container .chat-dashboard-container .pinned-conversations-container .pinned-conversation.is-inactive .pin-icon path { + fill: #04c8b4; +} +.chat-container .chat-dashboard-container .pinned-conversations-container .pinned-conversation.is-inactive:hover { + color: black; +} +.chat-container .chat-dashboard-container .pinned-conversations-container .pinned-conversation.is-inactive:hover .pin-icon path { + fill: black; +} +.chat-container .chat-dashboard-container .pinned-conversations-container .pinned-conversation .pin-icon path { + fill: #01322d; +} +.chat-container .chat-dashboard-container .pinned-conversations-container .pinned-conversation:hover { + background-color: #69fced; +} +.chat-container .chat-dashboard-container .pinned-conversations-container .pinned-conversation:active { + border: 3px solid #04c8b4; +} +.chat-container .chat-dashboard-container .unpinned-conversations-container { + background-color: rgb(30, 30, 30); + border-radius: 0 0 0 0.25em; + height: 100%; +} +.chat-container .chat-dashboard-container .unpinned-conversations-container .unpinned-conversation { + background-color: rgb(20, 20, 20); +} +.chat-container .chat-dashboard-container .unpinned-conversations-container .unpinned-conversation .unpin-icon path { + fill: #04c8b4; +} +.chat-container .chat-dashboard-container .unpinned-conversations-container .unpinned-conversation.is-active { + background-color: white; + color: rgb(20, 20, 20); +} +.chat-container .chat-dashboard-container .conversations-container-title { + font-size: 80%; +} +.chat-container .chat-convo-container { + background-color: rgb(40, 40, 40); + border-radius: 0 0.25em 0.25em 0; + padding: 1rem 1rem 1rem 2rem; + width: 100%; + display: flex; + flex-direction: column; + gap: 1rem !important; +} +.chat-container .chat-convo-container .message-container { display: grid; grid-template-columns: 1fr 1fr; + width: 100%; gap: 1rem; } -.send-message-container div { +.chat-container .chat-convo-container .message-container .message-bubble { + border-radius: 0.25em; + color: black; +} +.chat-container .chat-convo-container .message-container .message-bubble .message-label { + font-size: 80%; + color: white; + padding: 0.25rem; + display: flex; + gap: 0.25rem; + justify-content: flex-end; +} +.chat-container .chat-convo-container .message-container .message-bubble .message-label .message-functions-panel { + padding: 0 0.25em; display: flex; gap: 0.5rem; - flex-direction: column; - width: 100%; +} +.chat-container .chat-convo-container .message-container .message-bubble .message-label .message-functions-panel .icon path { + fill: white; +} +.chat-container .chat-convo-container .message-container .message-bubble .message-label .message-functions-panel .icon path:hover { + fill: #cdfef9; +} +.chat-container .chat-convo-container .message-container .message-bubble .message-label .message-functions-panel .icon path:active { + fill: #69fced; +} +.chat-container .chat-convo-container .message-container .message-bubble.my-message { grid-column-start: 2; - align-items: flex-end; } -.send-message-container textarea { - width: 100%; - border-radius: 0.75em; +.chat-container .chat-convo-container .message-container .message-bubble.my-message .message-text { + background-color: white; +} +.chat-container .chat-convo-container .message-container .message-bubble.user-message .message-text { background-color: #cdfef9; } -.activity-message { +.message-text { + padding: 1rem; + border-radius: 0.25em; +} + +.edit-message-modal-overlay, +.delete-post-modal-overlay { + width: 100vw; + height: 100vh; + top: 0; + left: 0; + right: 0; + bottom: 0; + position: fixed; + background-color: rgba(0, 0, 0, 0.5); +} + +.edit-message-modal-container, +.delete-message-modal_container { + z-index: 999; + display: flex; + flex-direction: column; + width: 35%; + border-radius: 0.25em; + background-color: #cdfef9; + justify-content: center; + padding: 1rem; + margin: 15rem auto; + gap: 1rem; +} +.edit-message-modal-container p, +.delete-message-modal_container p { + color: black; +} +.edit-message-modal-container form, +.delete-message-modal_container form { + display: flex; + flex-direction: column; + gap: 0.5rem; +} +.edit-message-modal-container form label, +.delete-message-modal_container form label { + font-weight: 600; +} +.edit-message-modal-container form textarea, +.delete-message-modal_container form textarea { + margin: 0.5rem 0; + border-radius: 0.25em; + padding: 1rem; + border: 1px solid #02645a; +} +.edit-message-modal-container form .buttons-container, +.delete-message-modal_container form .buttons-container { + display: flex; + gap: 0.5rem; + margin-top: 1rem; +} +.edit-message-modal-container form .buttons-container button, +.delete-message-modal_container form .buttons-container button { + padding: 0.5rem; + border-radius: 0.25em; + font-weight: 600; +} +.edit-message-modal-container form .buttons-container button.primary, +.delete-message-modal_container form .buttons-container button.primary { + background-color: #02645a; color: white; - font-size: 60%; + border: 1px solid transparent; +} +.edit-message-modal-container form .buttons-container button.primary:hover, +.delete-message-modal_container form .buttons-container button.primary:hover { + background-color: #024b44; + border: 1px solid transparent; +} +.edit-message-modal-container form .buttons-container button.primary:active, +.delete-message-modal_container form .buttons-container button.primary:active { + background-color: #024b44; + border: 1px solid #04c8b4; +} +.edit-message-modal-container form .buttons-container button.secondary, +.delete-message-modal_container form .buttons-container button.secondary { + border: 1px solid #02645a; + color: #02645a; +} +.edit-message-modal-container form .buttons-container button.secondary:hover, +.delete-message-modal_container form .buttons-container button.secondary:hover { + background-color: #e6fffc; +} +.edit-message-modal-container form .buttons-container button.secondary:active, +.delete-message-modal_container form .buttons-container button.secondary:active { + border: 1px solid #04c8b4; } -.chatroom-nav { +.send-message-container { display: flex; + justify-content: flex-end; + align-items: center; gap: 1rem; +} +.send-message-container textarea { + color: black; + width: 100%; + border-radius: 0.25em; +} +.send-message-container button { + height: -moz-fit-content; + height: fit-content; + width: -moz-fit-content; + width: fit-content; + padding: 1rem; + border-radius: 0.25em; + color: black; + background-color: #05fae1; + display: flex; + gap: 0.5rem; align-items: center; +} +.send-message-container button:hover { + background-color: #69fced; +} +.send-message-container button:active { + border: 1px solid #04c8b4; }/*# sourceMappingURL=globals.css.map */ \ No newline at end of file diff --git a/apps/codac-quasseln/styles/globals.css.map b/apps/codac-quasseln/styles/globals.css.map index 478f12eb..fba04af8 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;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 +{"version":3,"sources":["_chatrooms.scss","globals.css","_vars.scss"],"names":[],"mappings":"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","file":"globals.css"} \ No newline at end of file diff --git a/apps/codac-quasseln/tsconfig.json b/apps/codac-quasseln/tsconfig.json index 847ef386..d19bdd55 100644 --- a/apps/codac-quasseln/tsconfig.json +++ b/apps/codac-quasseln/tsconfig.json @@ -10,7 +10,8 @@ "skipLibCheck": true, "forceConsistentCasingInFileNames": true, "esModuleInterop": true, - "incremental": true + "incremental": true, + "noEmit": true }, "include": [ "next-env.d.ts", diff --git a/packages/codac-sassy/src/stories/bubble/bubble.css b/packages/codac-sassy/src/stories/bubble/bubble.css index e64644c3..a507f2af 100644 --- a/packages/codac-sassy/src/stories/bubble/bubble.css +++ b/packages/codac-sassy/src/stories/bubble/bubble.css @@ -1,4 +1,30 @@ /** messages chronology **/ +h1 { + color: white; + font-size: xx-large; +} + +.chatroom-access-link-container { + display: flex; + gap: 1rem !important; + margin: 1rem 0; + flex-direction: column; +} +.chatroom-access-link-container .chatroom-access-link { + padding: 1rem; + border-radius: 0.25em; + cursor: pointer; + display: flex; + gap: 1rem; + align-items: center; + border: 3px solid transparent; + background-color: rgb(30, 30, 30); + color: white; +} +.chatroom-access-link-container .chatroom-access-link .icon path { + fill: white; +} + .chatroom-container { display: flex; flex-direction: column; @@ -6,36 +32,260 @@ border: 2px solid orange; } -/** send a message **/ -.send-message-container { +.chat-container { + color: white; + margin: 1rem 0; + display: flex; +} +.chat-container .chat-dashboard-container { + display: flex; + flex-direction: column; + min-width: 20em; + width: 30%; + background-color: rgb(20, 20, 20); +} +.chat-container .chat-dashboard-container .pinned-conversations-container, +.chat-container .chat-dashboard-container .unpinned-conversations-container { + display: flex; + flex-direction: column; + gap: 1rem; + padding: 1rem 2rem 1rem 1rem; +} +.chat-container .chat-dashboard-container .pinned-conversations-container .pinned-conversation, +.chat-container .chat-dashboard-container .pinned-conversations-container .unpinned-conversation, +.chat-container .chat-dashboard-container .unpinned-conversations-container .pinned-conversation, +.chat-container .chat-dashboard-container .unpinned-conversations-container .unpinned-conversation { + padding: 1rem; + border-radius: 0.25em; + cursor: pointer; + display: flex; + gap: 1rem; + align-items: center; + font-weight: 600; + border: 3px solid transparent; +} +.chat-container .chat-dashboard-container .pinned-conversations-container { + background-color: #02645a; + border-radius: 0.25em 0 0 0; +} +.chat-container .chat-dashboard-container .pinned-conversations-container .pinned-conversation { + color: black; + background-color: #9bfdf3; +} +.chat-container .chat-dashboard-container .pinned-conversations-container .pinned-conversation.is-inactive { + background-color: #024b44; + color: white; +} +.chat-container .chat-dashboard-container .pinned-conversations-container .pinned-conversation.is-inactive .pin-icon path { + fill: #04c8b4; +} +.chat-container .chat-dashboard-container .pinned-conversations-container .pinned-conversation.is-inactive:hover { + color: black; +} +.chat-container .chat-dashboard-container .pinned-conversations-container .pinned-conversation.is-inactive:hover .pin-icon path { + fill: black; +} +.chat-container .chat-dashboard-container .pinned-conversations-container .pinned-conversation .pin-icon path { + fill: #01322d; +} +.chat-container .chat-dashboard-container .pinned-conversations-container .pinned-conversation:hover { + background-color: #69fced; +} +.chat-container .chat-dashboard-container .pinned-conversations-container .pinned-conversation:active { + border: 3px solid #04c8b4; +} +.chat-container .chat-dashboard-container .unpinned-conversations-container { + background-color: rgb(30, 30, 30); + border-radius: 0 0 0 0.25em; + height: 100%; +} +.chat-container .chat-dashboard-container .unpinned-conversations-container .unpinned-conversation { + background-color: rgb(20, 20, 20); +} +.chat-container .chat-dashboard-container .unpinned-conversations-container .unpinned-conversation .unpin-icon path { + fill: #04c8b4; +} +.chat-container .chat-dashboard-container .unpinned-conversations-container .unpinned-conversation.is-active { + background-color: white; + color: rgb(20, 20, 20); +} +.chat-container .chat-dashboard-container .conversations-container-title { + font-size: 80%; +} +.chat-container .chat-convo-container { + background-color: rgb(40, 40, 40); + border-radius: 0 0.25em 0.25em 0; + padding: 1rem 1rem 1rem 2rem; + width: 100%; + display: flex; + flex-direction: column; + gap: 1rem !important; +} +.chat-container .chat-convo-container .message-container { display: grid; grid-template-columns: 1fr 1fr; + width: 100%; gap: 1rem; } -.send-message-container div { +.chat-container .chat-convo-container .message-container .message-bubble { + border-radius: 0.25em; + color: black; +} +.chat-container .chat-convo-container .message-container .message-bubble .message-label { + font-size: 80%; + color: white; + padding: 0.25rem; + display: flex; + gap: 0.25rem; + justify-content: flex-end; +} +.chat-container .chat-convo-container .message-container .message-bubble .message-label .message-functions-panel { + padding: 0 0.25em; display: flex; gap: 0.5rem; - flex-direction: column; - width: 100%; +} +.chat-container .chat-convo-container .message-container .message-bubble .message-label .message-functions-panel .icon path { + fill: white; +} +.chat-container .chat-convo-container .message-container .message-bubble .message-label .message-functions-panel .icon path:hover { + fill: #cdfef9; +} +.chat-container .chat-convo-container .message-container .message-bubble .message-label .message-functions-panel .icon path:active { + fill: #69fced; +} +.chat-container .chat-convo-container .message-container .message-bubble.my-message { grid-column-start: 2; - align-items: flex-end; } -.send-message-container textarea { - width: 100%; - border-radius: 0.75em; +.chat-container .chat-convo-container .message-container .message-bubble.my-message .message-text { + background-color: white; +} +.chat-container .chat-convo-container .message-container .message-bubble.user-message .message-text { background-color: #cdfef9; } -.activity-message { +.message-text { + padding: 1rem; + border-radius: 0.25em; +} + +.edit-message-modal-overlay, +.delete-post-modal-overlay { + width: 100vw; + height: 100vh; + top: 0; + left: 0; + right: 0; + bottom: 0; + position: fixed; + background-color: rgba(0, 0, 0, 0.5); +} + +.edit-message-modal-container, +.delete-message-modal_container { + z-index: 999; + display: flex; + flex-direction: column; + width: 35%; + border-radius: 0.25em; + background-color: #cdfef9; + justify-content: center; + padding: 1rem; + margin: 15rem auto; + gap: 1rem; +} +.edit-message-modal-container p, +.delete-message-modal_container p { + color: black; +} +.edit-message-modal-container form, +.delete-message-modal_container form { + display: flex; + flex-direction: column; + gap: 0.5rem; +} +.edit-message-modal-container form label, +.delete-message-modal_container form label { + font-weight: 600; +} +.edit-message-modal-container form textarea, +.delete-message-modal_container form textarea { + margin: 0.5rem 0; + border-radius: 0.25em; + padding: 1rem; + border: 1px solid #02645a; +} +.edit-message-modal-container form .buttons-container, +.delete-message-modal_container form .buttons-container { + display: flex; + gap: 0.5rem; + margin-top: 1rem; +} +.edit-message-modal-container form .buttons-container button, +.delete-message-modal_container form .buttons-container button { + padding: 0.5rem; + border-radius: 0.25em; + font-weight: 600; +} +.edit-message-modal-container form .buttons-container button.primary, +.delete-message-modal_container form .buttons-container button.primary { + background-color: #02645a; color: white; - font-size: 60%; + border: 1px solid transparent; +} +.edit-message-modal-container form .buttons-container button.primary:hover, +.delete-message-modal_container form .buttons-container button.primary:hover { + background-color: #024b44; + border: 1px solid transparent; +} +.edit-message-modal-container form .buttons-container button.primary:active, +.delete-message-modal_container form .buttons-container button.primary:active { + background-color: #024b44; + border: 1px solid #04c8b4; +} +.edit-message-modal-container form .buttons-container button.secondary, +.delete-message-modal_container form .buttons-container button.secondary { + border: 1px solid #02645a; + color: #02645a; +} +.edit-message-modal-container form .buttons-container button.secondary:hover, +.delete-message-modal_container form .buttons-container button.secondary:hover { + background-color: #e6fffc; +} +.edit-message-modal-container form .buttons-container button.secondary:active, +.delete-message-modal_container form .buttons-container button.secondary:active { + border: 1px solid #04c8b4; } -.chatroom-nav { +.send-message-container { display: flex; + justify-content: flex-end; + align-items: center; gap: 1rem; +} +.send-message-container textarea { + color: black; + width: 100%; + border-radius: 0.25em; +} +.send-message-container button { + height: -moz-fit-content; + height: fit-content; + width: -moz-fit-content; + width: fit-content; + padding: 1rem; + border-radius: 0.25em; + color: black; + background-color: #05fae1; + display: flex; + gap: 0.5rem; align-items: center; } +.send-message-container button:hover { + background-color: #69fced; +} +.send-message-container button:active { + border: 1px solid #04c8b4; +} .bubble-container { font-family: "Noto Sans", sans-serif; @@ -57,7 +307,7 @@ } .bubble-container .bubble-dashboard { justify-content: flex-end; - margin: 0.25rem 0.75em 0; + margin: 0.25rem 0.25em 0; align-items: center; gap: 0.5rem; display: flex; @@ -87,7 +337,7 @@ min-height: 2rem; max-height: -moz-fit-content; max-height: fit-content; - border-radius: 0.75em; + border-radius: 0.25em; padding: 1rem; font-family: "Noto Sans", sans-serif; background-color: #cdfef9; diff --git a/packages/codac-sassy/src/stories/bubble/bubble.css.map b/packages/codac-sassy/src/stories/bubble/bubble.css.map index 7c2e3900..d6e3cf27 100644 --- a/packages/codac-sassy/src/stories/bubble/bubble.css.map +++ b/packages/codac-sassy/src/stories/bubble/bubble.css.map @@ -1 +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 +{"version":3,"sources":["../../../../../apps/codac-quasseln/styles/_chatrooms.scss","bubble.css","../../../../../apps/codac-quasseln/styles/_vars.scss","bubble.scss"],"names":[],"mappings":"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","file":"bubble.css"} \ No newline at end of file diff --git a/packages/codac-sassy/src/stories/button/button.css b/packages/codac-sassy/src/stories/button/button.css index 355b5040..3e2da017 100644 --- a/packages/codac-sassy/src/stories/button/button.css +++ b/packages/codac-sassy/src/stories/button/button.css @@ -1,4 +1,30 @@ /** messages chronology **/ +h1 { + color: white; + font-size: xx-large; +} + +.chatroom-access-link-container { + display: flex; + gap: 1rem !important; + margin: 1rem 0; + flex-direction: column; +} +.chatroom-access-link-container .chatroom-access-link { + padding: 1rem; + border-radius: 0.25em; + cursor: pointer; + display: flex; + gap: 1rem; + align-items: center; + border: 3px solid transparent; + background-color: rgb(30, 30, 30); + color: white; +} +.chatroom-access-link-container .chatroom-access-link .icon path { + fill: white; +} + .chatroom-container { display: flex; flex-direction: column; @@ -6,36 +32,260 @@ border: 2px solid orange; } -/** send a message **/ -.send-message-container { +.chat-container { + color: white; + margin: 1rem 0; + display: flex; +} +.chat-container .chat-dashboard-container { + display: flex; + flex-direction: column; + min-width: 20em; + width: 30%; + background-color: rgb(20, 20, 20); +} +.chat-container .chat-dashboard-container .pinned-conversations-container, +.chat-container .chat-dashboard-container .unpinned-conversations-container { + display: flex; + flex-direction: column; + gap: 1rem; + padding: 1rem 2rem 1rem 1rem; +} +.chat-container .chat-dashboard-container .pinned-conversations-container .pinned-conversation, +.chat-container .chat-dashboard-container .pinned-conversations-container .unpinned-conversation, +.chat-container .chat-dashboard-container .unpinned-conversations-container .pinned-conversation, +.chat-container .chat-dashboard-container .unpinned-conversations-container .unpinned-conversation { + padding: 1rem; + border-radius: 0.25em; + cursor: pointer; + display: flex; + gap: 1rem; + align-items: center; + font-weight: 600; + border: 3px solid transparent; +} +.chat-container .chat-dashboard-container .pinned-conversations-container { + background-color: #02645a; + border-radius: 0.25em 0 0 0; +} +.chat-container .chat-dashboard-container .pinned-conversations-container .pinned-conversation { + color: black; + background-color: #9bfdf3; +} +.chat-container .chat-dashboard-container .pinned-conversations-container .pinned-conversation.is-inactive { + background-color: #024b44; + color: white; +} +.chat-container .chat-dashboard-container .pinned-conversations-container .pinned-conversation.is-inactive .pin-icon path { + fill: #04c8b4; +} +.chat-container .chat-dashboard-container .pinned-conversations-container .pinned-conversation.is-inactive:hover { + color: black; +} +.chat-container .chat-dashboard-container .pinned-conversations-container .pinned-conversation.is-inactive:hover .pin-icon path { + fill: black; +} +.chat-container .chat-dashboard-container .pinned-conversations-container .pinned-conversation .pin-icon path { + fill: #01322d; +} +.chat-container .chat-dashboard-container .pinned-conversations-container .pinned-conversation:hover { + background-color: #69fced; +} +.chat-container .chat-dashboard-container .pinned-conversations-container .pinned-conversation:active { + border: 3px solid #04c8b4; +} +.chat-container .chat-dashboard-container .unpinned-conversations-container { + background-color: rgb(30, 30, 30); + border-radius: 0 0 0 0.25em; + height: 100%; +} +.chat-container .chat-dashboard-container .unpinned-conversations-container .unpinned-conversation { + background-color: rgb(20, 20, 20); +} +.chat-container .chat-dashboard-container .unpinned-conversations-container .unpinned-conversation .unpin-icon path { + fill: #04c8b4; +} +.chat-container .chat-dashboard-container .unpinned-conversations-container .unpinned-conversation.is-active { + background-color: white; + color: rgb(20, 20, 20); +} +.chat-container .chat-dashboard-container .conversations-container-title { + font-size: 80%; +} +.chat-container .chat-convo-container { + background-color: rgb(40, 40, 40); + border-radius: 0 0.25em 0.25em 0; + padding: 1rem 1rem 1rem 2rem; + width: 100%; + display: flex; + flex-direction: column; + gap: 1rem !important; +} +.chat-container .chat-convo-container .message-container { display: grid; grid-template-columns: 1fr 1fr; + width: 100%; gap: 1rem; } -.send-message-container div { +.chat-container .chat-convo-container .message-container .message-bubble { + border-radius: 0.25em; + color: black; +} +.chat-container .chat-convo-container .message-container .message-bubble .message-label { + font-size: 80%; + color: white; + padding: 0.25rem; + display: flex; + gap: 0.25rem; + justify-content: flex-end; +} +.chat-container .chat-convo-container .message-container .message-bubble .message-label .message-functions-panel { + padding: 0 0.25em; display: flex; gap: 0.5rem; - flex-direction: column; - width: 100%; +} +.chat-container .chat-convo-container .message-container .message-bubble .message-label .message-functions-panel .icon path { + fill: white; +} +.chat-container .chat-convo-container .message-container .message-bubble .message-label .message-functions-panel .icon path:hover { + fill: #cdfef9; +} +.chat-container .chat-convo-container .message-container .message-bubble .message-label .message-functions-panel .icon path:active { + fill: #69fced; +} +.chat-container .chat-convo-container .message-container .message-bubble.my-message { grid-column-start: 2; - align-items: flex-end; } -.send-message-container textarea { - width: 100%; - border-radius: 0.75em; +.chat-container .chat-convo-container .message-container .message-bubble.my-message .message-text { + background-color: white; +} +.chat-container .chat-convo-container .message-container .message-bubble.user-message .message-text { background-color: #cdfef9; } -.activity-message { +.message-text { + padding: 1rem; + border-radius: 0.25em; +} + +.edit-message-modal-overlay, +.delete-post-modal-overlay { + width: 100vw; + height: 100vh; + top: 0; + left: 0; + right: 0; + bottom: 0; + position: fixed; + background-color: rgba(0, 0, 0, 0.5); +} + +.edit-message-modal-container, +.delete-message-modal_container { + z-index: 999; + display: flex; + flex-direction: column; + width: 35%; + border-radius: 0.25em; + background-color: #cdfef9; + justify-content: center; + padding: 1rem; + margin: 15rem auto; + gap: 1rem; +} +.edit-message-modal-container p, +.delete-message-modal_container p { + color: black; +} +.edit-message-modal-container form, +.delete-message-modal_container form { + display: flex; + flex-direction: column; + gap: 0.5rem; +} +.edit-message-modal-container form label, +.delete-message-modal_container form label { + font-weight: 600; +} +.edit-message-modal-container form textarea, +.delete-message-modal_container form textarea { + margin: 0.5rem 0; + border-radius: 0.25em; + padding: 1rem; + border: 1px solid #02645a; +} +.edit-message-modal-container form .buttons-container, +.delete-message-modal_container form .buttons-container { + display: flex; + gap: 0.5rem; + margin-top: 1rem; +} +.edit-message-modal-container form .buttons-container button, +.delete-message-modal_container form .buttons-container button { + padding: 0.5rem; + border-radius: 0.25em; + font-weight: 600; +} +.edit-message-modal-container form .buttons-container button.primary, +.delete-message-modal_container form .buttons-container button.primary { + background-color: #02645a; color: white; - font-size: 60%; + border: 1px solid transparent; +} +.edit-message-modal-container form .buttons-container button.primary:hover, +.delete-message-modal_container form .buttons-container button.primary:hover { + background-color: #024b44; + border: 1px solid transparent; +} +.edit-message-modal-container form .buttons-container button.primary:active, +.delete-message-modal_container form .buttons-container button.primary:active { + background-color: #024b44; + border: 1px solid #04c8b4; +} +.edit-message-modal-container form .buttons-container button.secondary, +.delete-message-modal_container form .buttons-container button.secondary { + border: 1px solid #02645a; + color: #02645a; +} +.edit-message-modal-container form .buttons-container button.secondary:hover, +.delete-message-modal_container form .buttons-container button.secondary:hover { + background-color: #e6fffc; +} +.edit-message-modal-container form .buttons-container button.secondary:active, +.delete-message-modal_container form .buttons-container button.secondary:active { + border: 1px solid #04c8b4; } -.chatroom-nav { +.send-message-container { display: flex; + justify-content: flex-end; + align-items: center; gap: 1rem; +} +.send-message-container textarea { + color: black; + width: 100%; + border-radius: 0.25em; +} +.send-message-container button { + height: -moz-fit-content; + height: fit-content; + width: -moz-fit-content; + width: fit-content; + padding: 1rem; + border-radius: 0.25em; + color: black; + background-color: #05fae1; + display: flex; + gap: 0.5rem; align-items: center; } +.send-message-container button:hover { + background-color: #69fced; +} +.send-message-container button:active { + border: 1px solid #04c8b4; +} .storybook-button { border-radius: 50px; diff --git a/packages/codac-sassy/src/stories/button/button.css.map b/packages/codac-sassy/src/stories/button/button.css.map index 26c96ad7..5d58d4f5 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":["../../../../../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 +{"version":3,"sources":["../../../../../apps/codac-quasseln/styles/_chatrooms.scss","button.css","../../../../../apps/codac-quasseln/styles/_vars.scss","button.scss"],"names":[],"mappings":"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","file":"button.css"} \ No newline at end of file diff --git a/packages/codac-sassy/src/stories/input/input.css b/packages/codac-sassy/src/stories/input/input.css index ae2be51e..b026104d 100644 --- a/packages/codac-sassy/src/stories/input/input.css +++ b/packages/codac-sassy/src/stories/input/input.css @@ -1,5 +1,5 @@ textarea { - border-radius: 0.75em; + border-radius: 0.25em; border: none; padding: 1rem; font-size: 16px; diff --git a/packages/codac-sassy/src/stories/input/input.css.map b/packages/codac-sassy/src/stories/input/input.css.map index b1aa1404..d4770f97 100644 --- a/packages/codac-sassy/src/stories/input/input.css.map +++ b/packages/codac-sassy/src/stories/input/input.css.map @@ -1 +1 @@ -{"version":3,"sources":["input.scss","../../../../../apps/codac-quasseln/styles/_vars.scss","input.css"],"names":[],"mappings":"AAEA;EACE,qBCCc;EDAd,YAAA;EACA,aCKU;EDJV,eAAA;EACA,kCAAA;EACA,YAAA;AEDF;AFGE;EACE,yBAAA;EACA,yBAAA;AEDJ;AFIE;EACE,yBAAA;EACA,uBAAA;AEFJ","file":"input.css"} \ No newline at end of file +{"version":3,"sources":["input.scss","../../../../../apps/codac-quasseln/styles/_vars.scss","input.css"],"names":[],"mappings":"AAEA;EACE,qBCEc;EDDd,YAAA;EACA,aCMU;EDLV,eAAA;EACA,kCAAA;EACA,YAAA;AEDF;AFGE;EACE,yBAAA;EACA,yBAAA;AEDJ;AFIE;EACE,yBAAA;EACA,uBAAA;AEFJ","file":"input.css"} \ No newline at end of file diff --git a/packages/codac-ui/src/layouts/dashboard-layout.tsx b/packages/codac-ui/src/layouts/dashboard-layout.tsx index 18196ffb..0f227ed2 100644 --- a/packages/codac-ui/src/layouts/dashboard-layout.tsx +++ b/packages/codac-ui/src/layouts/dashboard-layout.tsx @@ -11,15 +11,6 @@ export function DashboardLayout({ }) { return ( <> - {/* - CODAC - - - - */} {navigation} - {/* */} -
-
-
-
- -
-
+
+
+
{children}
- - {/* */}
- {/* - */} ); } From dcca00e534ab920159fbf5223f305c4b367f2d2d Mon Sep 17 00:00:00 2001 From: ROXBOZ Date: Fri, 30 Jun 2023 17:01:42 +0200 Subject: [PATCH 2/2] fixed navigation to main chat --- .../src/components/main-layout.tsx | 2 -- .../src/components/navigation.tsx | 18 +++++++++------- apps/codac-quasseln/styles/_chatrooms.scss | 19 +++++++++++++++++ apps/codac-quasseln/styles/globals.css | 21 +++++++++++++++++++ apps/codac-quasseln/styles/globals.css.map | 2 +- .../codac-sassy/src/stories/bubble/bubble.css | 21 +++++++++++++++++++ .../src/stories/bubble/bubble.css.map | 2 +- .../codac-sassy/src/stories/button/button.css | 21 +++++++++++++++++++ .../src/stories/button/button.css.map | 2 +- 9 files changed, 96 insertions(+), 12 deletions(-) diff --git a/apps/codac-quasseln/src/components/main-layout.tsx b/apps/codac-quasseln/src/components/main-layout.tsx index abb616b3..928d9aa1 100644 --- a/apps/codac-quasseln/src/components/main-layout.tsx +++ b/apps/codac-quasseln/src/components/main-layout.tsx @@ -7,8 +7,6 @@ import Auth from "./auth"; function MainLayout({ children }: { children: ReactNode }) { return ( - - { return ( -
- {navigation.map((section) => { +
+ + + + + Go to main chat + + {/* FOLLOWING NAVIGATION TOTALLY REDUNDANT AND UNNECESSARY ??? */} + {/* {navigation.map((section) => { return (
{section.name}
-
+
{section.items.map((item) => { return ( {
); - })} + })} */}
); }; diff --git a/apps/codac-quasseln/styles/_chatrooms.scss b/apps/codac-quasseln/styles/_chatrooms.scss index 3886813b..6c0cb0e1 100644 --- a/apps/codac-quasseln/styles/_chatrooms.scss +++ b/apps/codac-quasseln/styles/_chatrooms.scss @@ -1,3 +1,22 @@ +.go-to-chat-container { + margin-top: $reg-space; +} +.go-to-chat { + display: flex; + gap: $sm-space; + align-items: center; + width: fit-content; + color: white; + font-weight: 600; + border-bottom: $border-solid white; + .icon path { + fill: white; + } + &:hover { + border-bottom: $border-solid transparent; + } +} + /** messages chronology **/ h1 { color: white; diff --git a/apps/codac-quasseln/styles/globals.css b/apps/codac-quasseln/styles/globals.css index f369849c..b53471c6 100644 --- a/apps/codac-quasseln/styles/globals.css +++ b/apps/codac-quasseln/styles/globals.css @@ -1,3 +1,24 @@ +.go-to-chat-container { + margin-top: 1rem; +} + +.go-to-chat { + display: flex; + gap: 0.5rem; + align-items: center; + width: -moz-fit-content; + width: fit-content; + color: white; + font-weight: 600; + border-bottom: 1px solid white; +} +.go-to-chat .icon path { + fill: white; +} +.go-to-chat:hover { + border-bottom: 1px solid transparent; +} + /** messages chronology **/ h1 { color: white; diff --git a/apps/codac-quasseln/styles/globals.css.map b/apps/codac-quasseln/styles/globals.css.map index fba04af8..edff4ad4 100644 --- a/apps/codac-quasseln/styles/globals.css.map +++ b/apps/codac-quasseln/styles/globals.css.map @@ -1 +1 @@ -{"version":3,"sources":["_chatrooms.scss","globals.css","_vars.scss"],"names":[],"mappings":"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","file":"globals.css"} \ No newline at end of file +{"version":3,"sources":["_chatrooms.scss","_vars.scss","globals.css"],"names":[],"mappings":"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","file":"globals.css"} \ No newline at end of file diff --git a/packages/codac-sassy/src/stories/bubble/bubble.css b/packages/codac-sassy/src/stories/bubble/bubble.css index a507f2af..0d2cf9a0 100644 --- a/packages/codac-sassy/src/stories/bubble/bubble.css +++ b/packages/codac-sassy/src/stories/bubble/bubble.css @@ -1,3 +1,24 @@ +.go-to-chat-container { + margin-top: 1rem; +} + +.go-to-chat { + display: flex; + gap: 0.5rem; + align-items: center; + width: -moz-fit-content; + width: fit-content; + color: white; + font-weight: 600; + border-bottom: 1px solid white; +} +.go-to-chat .icon path { + fill: white; +} +.go-to-chat:hover { + border-bottom: 1px solid transparent; +} + /** messages chronology **/ h1 { color: white; diff --git a/packages/codac-sassy/src/stories/bubble/bubble.css.map b/packages/codac-sassy/src/stories/bubble/bubble.css.map index d6e3cf27..517cd5f9 100644 --- a/packages/codac-sassy/src/stories/bubble/bubble.css.map +++ b/packages/codac-sassy/src/stories/bubble/bubble.css.map @@ -1 +1 @@ -{"version":3,"sources":["../../../../../apps/codac-quasseln/styles/_chatrooms.scss","bubble.css","../../../../../apps/codac-quasseln/styles/_vars.scss","bubble.scss"],"names":[],"mappings":"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","file":"bubble.css"} \ No newline at end of file +{"version":3,"sources":["../../../../../apps/codac-quasseln/styles/_chatrooms.scss","../../../../../apps/codac-quasseln/styles/_vars.scss","bubble.css","bubble.scss"],"names":[],"mappings":"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","file":"bubble.css"} \ No newline at end of file diff --git a/packages/codac-sassy/src/stories/button/button.css b/packages/codac-sassy/src/stories/button/button.css index 3e2da017..baa3e228 100644 --- a/packages/codac-sassy/src/stories/button/button.css +++ b/packages/codac-sassy/src/stories/button/button.css @@ -1,3 +1,24 @@ +.go-to-chat-container { + margin-top: 1rem; +} + +.go-to-chat { + display: flex; + gap: 0.5rem; + align-items: center; + width: -moz-fit-content; + width: fit-content; + color: white; + font-weight: 600; + border-bottom: 1px solid white; +} +.go-to-chat .icon path { + fill: white; +} +.go-to-chat:hover { + border-bottom: 1px solid transparent; +} + /** messages chronology **/ h1 { color: white; diff --git a/packages/codac-sassy/src/stories/button/button.css.map b/packages/codac-sassy/src/stories/button/button.css.map index 5d58d4f5..4a2270ae 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":["../../../../../apps/codac-quasseln/styles/_chatrooms.scss","button.css","../../../../../apps/codac-quasseln/styles/_vars.scss","button.scss"],"names":[],"mappings":"AAAA,0BAAA;AACA;EACE,YAAA;EACA,mBAAA;ACCF;;ADEA;EACE,aAAA;EACA,oBAAA;EACA,cAAA;EACA,sBAAA;ACCF;ADAE;EACE,aEDQ;EFER,qBERY;EFSZ,eAAA;EACA,aAAA;EACA,SELQ;EFMR,mBAAA;EACA,6BAAA;EACA,iCAAA;EACA,YAAA;ACEJ;ADDI;EACE,WAAA;ACGN;;ADEA;EACE,aAAA;EACA,sBAAA;EACA,SEnBU;EFoBV,wBAAA;ACCF;;ADIA;EACE,YAAA;EACA,cAAA;EACA,aAAA;ACDF;ADGE;EACE,aAAA;EACA,sBAAA;EACA,eAAA;EACA,UAAA;EACA,iCAAA;ACDJ;ADGI;;EAEE,aAAA;EACA,sBAAA;EACA,SEzCM;EF0CN,4BAAA;ACDN;ADGM;;;;EAEE,aE9CI;EF+CJ,qBErDQ;EFsDR,eAAA;EACA,aAAA;EACA,SElDI;EFmDJ,mBAAA;EACA,gBAAA;EACA,6BAAA;ACCR;ADEI;EACE,yBEnEgB;EFoEhB,2BAAA;ACAN;ADEM;EACE,YAAA;EACA,yBAAA;ACAR;ADCQ;EACE,yBAAA;EACA,YAAA;ACCV;ADAU;EACE,aAAA;ACEZ;ADAU;EACE,YAAA;ACEZ;ADDY;EACE,WAAA;ACGd;ADGU;EACE,aAAA;ACDZ;ADKQ;EACE,yBAAA;ACHV;ADMQ;EACE,yBAAA;ACJV;ADQI;EACE,iCAAA;EACA,2BAAA;EACA,YAAA;ACNN;ADOM;EACE,iCAAA;ACLR;ADQU;EACE,aAAA;ACNZ;ADUQ;EACE,uBAAA;EACA,sBAAA;ACRV;ADaI;EACE,cAAA;ACXN;ADeE;EACE,iCAAA;EACA,gCAAA;EACA,4BAAA;EACA,WAAA;EACA,aAAA;EACA,sBAAA;EACA,oBAAA;ACbJ;ADeI;EACE,aAAA;EACA,8BAAA;EACA,WAAA;EACA,SElIM;ADqHZ;ADeM;EACE,qBE3IQ;EF4IR,YAAA;ACbR;ADeQ;EACE,cAAA;EACA,YAAA;EACA,gBEzIC;EF0ID,aAAA;EACA,YE3IC;EF4ID,yBAAA;ACbV;ADeU;EACE,iBAAA;EACA,aAAA;EACA,WElJD;ADqIX;ADgBc;EACE,WAAA;ACdhB;ADegB;EACE,aAAA;ACblB;ADegB;EACE,aAAA;ACblB;ADoBQ;EACE,oBAAA;AClBV;ADmBU;EACE,uBAAA;ACjBZ;ADqBU;EACE,yBAAA;ACnBZ;;AD2BA;EACE,aEpLU;EFqLV,qBE3Lc;ADmKhB;;AD2BA;;EAEE,YAAA;EACA,aAAA;EACA,MAAA;EACA,OAAA;EACA,QAAA;EACA,SAAA;EACA,eAAA;EACA,oCAAA;ACxBF;;AD0BA;;EAEE,YAAA;EACA,aAAA;EACA,sBAAA;EACA,UAAA;EACA,qBE/Mc;EFgNd,yBAAA;EACA,uBAAA;EACA,aE5MU;EF6MV,kBAAA;EACA,SE9MU;ADuLZ;ADyBE;;EACE,YAAA;ACtBJ;ADyBE;;EACE,aAAA;EACA,sBAAA;EACA,WEtNO;ADgMX;ADuBI;;EACE,gBAAA;ACpBN;ADsBI;;EACE,gBAAA;EACA,qBEnOU;EFoOV,aE9NM;EF+NN,yBAAA;ACnBN;ADqBI;;EACE,aAAA;EACA,WElOK;EFmOL,gBEpOM;ADkNZ;ADmBM;;EACE,eErOG;EFsOH,qBE7OQ;EF8OR,gBAAA;AChBR;ADkBM;;EACE,yBErPc;EFsPd,YAAA;EACA,6BAAA;ACfR;ADgBQ;;EACE,yBAAA;EACA,6BAAA;ACbV;ADeQ;;EACE,yBAAA;EACA,yBAAA;ACZV;ADeM;;EACE,yBAAA;EACA,cEnQc;ADuPtB;ADaQ;;EACE,yBAAA;ACVV;ADYQ;;EACE,yBAAA;ACTV;;ADgBA;EACE,aAAA;EACA,yBAAA;EACA,mBAAA;EACA,SEzQU;AD4PZ;ADeE;EACE,YAAA;EACA,WAAA;EACA,qBEpRY;ADuQhB;ADgBE;EACE,wBAAA;EAAA,mBAAA;EACA,uBAAA;EAAA,kBAAA;EACA,aEpRQ;EFqRR,qBE3RY;EF4RZ,YAAA;EACA,yBAAA;EACA,aAAA;EACA,WExRO;EFyRP,mBAAA;ACdJ;ADeI;EACE,yBAAA;ACbN;ADeI;EACE,yBAAA;ACbN;;AE3RA;EACE,mBAAA;EACA,eAAA;EACA,cAAA;EACA,6BAAA;EACA,6BAAA;EACA,aAAA;EACA,mBAAA;EAEA,wBAAA;EAAA,mBAAA;EACA,uBAAA;EAAA,kBAAA;AF6RF;AE5RE;EACE,eAAA;EACA,kCAAA;AF8RJ;AE3RE;EACE,WAAA;EACA,oBAAA;AF6RJ;AE1RE;EACE,iBAAA;AF4RJ;AEzRE;EACE,cAAA;AF2RJ;AExRE;EACE,YAAA;EACA,yBDhCkB;AD0TtB;AExRI;EACE,yBAAA;AF0RN;AExRI;EACE,yBAAA;AF0RN;AEtRE;EACE,YAAA;EACA,yBAAA;AFwRJ;AEtRI;EACE,yBAAA;AFwRN;AEtRI;EACE,yBAAA;AFwRN","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":"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","file":"button.css"} \ No newline at end of file