- {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..6c0cb0e1 100644
--- a/apps/codac-quasseln/styles/_chatrooms.scss
+++ b/apps/codac-quasseln/styles/_chatrooms.scss
@@ -1,76 +1,355 @@
+.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;
+ 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..b53471c6 100644
--- a/apps/codac-quasseln/styles/globals.css
+++ b/apps/codac-quasseln/styles/globals.css
@@ -1,4 +1,51 @@
+.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;
+ 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 +53,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..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","_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","_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 e64644c3..0d2cf9a0 100644
--- a/packages/codac-sassy/src/stories/bubble/bubble.css
+++ b/packages/codac-sassy/src/stories/bubble/bubble.css
@@ -1,4 +1,51 @@
+.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;
+ 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 +53,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 +328,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 +358,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..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","../../../../../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","../../../../../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 355b5040..baa3e228 100644
--- a/packages/codac-sassy/src/stories/button/button.css
+++ b/packages/codac-sassy/src/stories/button/button.css
@@ -1,4 +1,51 @@
+.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;
+ 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 +53,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..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","../../../../../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","../../../../../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
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}
- {/* */}
-