@bcc-code/vue-bcc-chat-ui 4.4.10 → 4.7.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@bcc-code/vue-bcc-chat-ui",
   "author": "bcc-code",
   "license": "Apache-2.0",
-  "version": "4.4.10",
+  "version": "4.7.0",
   "type": "module",
   "private": false,
   "files": [

package/src/components/BccAttachmentBox.vue

@@ -115,9 +115,6 @@ const wrapperStyle = () => {
 }
 </style>
 <style scoped>
-* {
-  box-sizing: border-box;
-}
 .bcc__attachment_box {
   padding: 8px;
   display: flex;

package/src/components/BccChatMessageList.vue

@@ -277,16 +277,6 @@ function closeScheduledMessage() {
 </template>
 
 <style lang="scss">
-body {
-  background: #fff;
-  color: #000;
-}
-
-:host.dark body {
-  background: #000;
-  color: #fff;
-}
-
 .bcc-chat-message-list-wrapper {
   position: relative;
   height: 100%;
@@ -343,8 +333,6 @@ accent900: text in avatar
   --cc__link-color: #cfeac8;
 }
 
-
-
 .bcc-chat-message-list {
   height: 100%;
 

package/src/components/BccFileBubble.vue

@@ -18,9 +18,9 @@
       </div>
     </div>
     <div class="cc__file__icon">
-      <a :href="fileURL" target="_blank"
-        ><i :style="messageFileIconStyle"></i
-      ></a>
+      <a :href="fileURL" target="_blank">
+        <i :style="messageFileIconStyle" />
+      </a>
     </div>
   </div>
 </template>
@@ -127,7 +127,7 @@ const messageFileIconStyle = computed(() => {
   width: fit-content;
   line-height: 36px;
 }
-i {
+.cc__file__icon i {
   display: inline-block;
   width: 24px;
   height: 24px;

package/src/components/BccImageBubble.vue

@@ -90,7 +90,7 @@ function closeImageInFullScreen() {
 }
 
 /* Placeholder styles */
-.placeholder {
+.bcc-image_container .placeholder {
   width: 100%;
   height: auto;
   display: flex;
@@ -103,12 +103,12 @@ function closeImageInFullScreen() {
   z-index: -1;
 }
 
-.placeholder::before {
+.bcc-image_container .placeholder::before {
   content: "⌛";
   position: absolute;
 }
 
-.placeholder.landscape > img {
+.bcc-image_container .placeholder.landscape > img {
   width: 100%;
 }
 

package/src/components/BccReplyBox.vue

@@ -125,9 +125,6 @@ const wrapperStyle = () => {
 }
 </style>
 <style scoped>
-* {
-  box-sizing: border-box;
-}
 .bcc__reply_box {
   padding: 8px;
   display: flex;

package/src/components/BccScheduledMessageIcon.vue

@@ -51,7 +51,7 @@ async function redirectToScheduledMessagesChat() {
     </div>
 </template>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .update-icon-style {
     height: 24px;
     width: 24px;

package/src/components/BccScheduledMessageModal.vue

@@ -53,115 +53,20 @@ function scheduleMessage() {
     <BccModal class="modal" :title="title" :open="true" @close="close()" :closeOnOutsideClick="closeOnOutsideClick"
         :closeButton="true">
         <div class="flex flex-col w-full">
-            <div class="flex flex-row w-full justify-between">
-                <input class="input" type="date" v-model="dateInput" required>
-                <p class="at">{{ localize("AT") }}</p>
-                <input class="input" type="time" v-model="timeInput" required>
+            <div class="flex w-full items-center justify-between">
+                <input class="bcc-input text-right justify-end" type="date" v-model="dateInput" required />
+                <p class="mx-2">{{ localize("AT") }}</p>
+                <input class="bcc-input text-right justify-end" type="time" v-model="timeInput" required />
             </div>
-            <BccFormMessage class="text-center mt-2 mb-0 text-red-500" v-if="!isDateInFuture" state="error">{{
-                localize("ERROR_DATE_IN_FUTURE") }}</BccFormMessage>
+            <BccFormMessage class="text-center mt-2 mb-0 text-red-500" v-if="!isDateInFuture" state="error">
+                {{ localize("ERROR_DATE_IN_FUTURE") }}
+            </BccFormMessage>
         </div>
 
         <template #primaryAction>
-            <BccButton class="button" :disabled="messageSent" @click="scheduleMessage()"> {{
-                localize("SCHEDULE_MESSAGE") }}</BccButton>
+            <BccButton class="button" :disabled="messageSent" @click="scheduleMessage()">
+                {{ localize("SCHEDULE_MESSAGE") }}
+            </BccButton>
         </template>
     </BccModal>
-</template>
-
-<style lang="scss">
-:root {
-    --cc__primary: #cfeac8;
-    --cc__primary150: #004e48;
-    --cc__background: #f3faf7;
-    --cc__secondary: white;
-    --cc__accent: #004e48;
-    --cc__accent50: rgba(62, 142, 117, 0.04);
-    --cc__accent100: #ffffff;
-    --cc__accent200: rgba(62, 142, 117, 0.15);
-    --cc__accent300: rgba(62, 142, 117, 0.24);
-    --cc__accent400: rgba(62, 142, 117, 0.33);
-    --cc__accent500: rgba(62, 142, 117, 0.46);
-    --cc__accent600: #004e48;
-    --cc__accent700: #254a40;
-    --cc__accent800: rgba(62, 142, 117, 0.82);
-    --cc__accent900: #f3faf7;
-    --cc__text-color: #000;
-    --cc__link-color: #57639e;
-}
-
-:root.dark {
-    --cc__primary: #57639e;
-    --cc__primary150: #57639e;
-    --cc__background: hsl(230, 25%, 15%);
-    --cc__secondary: #111827;
-    --cc__accent: #758abc;
-    --cc__accent50: rgba(98, 116, 174, 0.24);
-    --cc__accent100: linear-gradient(45deg, #05070b 0%, #0c111c 100%);
-    --cc__accent200: rgba(98, 116, 174, 0.35);
-    --cc__accent300: rgba(98, 116, 174, 0.44);
-    --cc__accent400: rgba(98, 116, 174, 0.53);
-    --cc__accent500: rgba(98, 116, 174, 0.66);
-    --cc__accent600: #758abc;
-    --cc__accent700: #6274ae;
-    --cc__accent800: rgba(98, 116, 174, 0.92);
-    --cc__accent900: #090A0B;
-    --cc__text-color: #fff;
-    --cc__link-color: #cfeac8;
-}
-
-.modal {
-    width: 90%;
-    margin-left: 5%;
-    margin-top: auto;
-    margin-bottom: auto;
-    background-color: var(--cc__background);
-    color: var(--cc__text-color);
-}
-
-.input {
-    background-color: var(--cc__primary);
-    border-radius: 5px;
-    color: var(--cc__text-color);
-    height: 40px;
-    padding: 5px;
-    width: 45%;
-    min-width: 37%;
-}
-
-.at {
-    width: 10%;
-    text-align: center;
-    margin-top: 7px;
-}
-
-.bcc-modal-footer {
-    background-color: var(--cc__background);
-}
-
-.bcc-modal-actions {
-    background-color: var(--cc__background);
-    display: flex;
-    width: 100%;
-    justify-content: space-between;
-}
-
-.bcc-modal-actions .bcc-modal-secondary-action,
-.bcc-modal-primary-action {
-    width: 100%;
-    background-color: var(--cc__background);
-}
-
-.bcc-modal-secondary-action button,
-.bcc-modal-primary-action button {
-    background-color: var(--cc__accent800);
-    width: 100%;
-    border-radius: 5px;
-    margin-top: -10px;
-}
-
-.bcc-modal-secondary-action button:hover,
-.bcc-modal-primary-action button:hover {
-    background-color: var(--cc__accent700);
-}
-</style>
+</template>