Daltonic

<template>
  <div :style="styles.root">
    <div :style="styles.detail">
      <div
        class="cometchat_sidebar_btn"
        :style="styles.sidebarBtn"
        @click="emitAction('menuClicked')"
      ></div>
      <div :style="styles.thumbnail">
        <comet-chat-avatar

Daltonic

export const chatListStyle = (theme) => {
  return {
    backgroundColor: `${theme.backgroundColor.white}`,
    zIndex: "1",
    width: "100%",
    flex: "1 1 0",
    order: "2",
    position: "relative",
  };
};

Daltonic

export const messageContainerStyle = () => {
  return {
    alignSelf: "flex-end",
    marginBottom: "16px",
    paddingLeft: "16px",
    paddingRight: "16px",
    maxWidth: "65%",
    clear: "both",
    position: "relative",
    display: "flex",

Daltonic

<template>
  <div :style="styles.wrapper" class="contacts__wrapper">
    <div :style="styles.header">
      <div
        class="header__close"
        v-if="enableCloseMenu"
        :style="styles.headerClose"
        @click="emitAction('closeMenuClicked')"
      ></div>
      <router-link to="/">

Daltonic

export const contactWrapperStyle = () => {
  return {
    display: "flex",
    flexDirection: "column",
    height: "100%",
    boxSizing: "border-box",
  };
};

export const contactHeaderStyle = ({ color }) => {

Daltonic

export const userScreenStyle = (theme) => {
  return {
    display: "flex",
    height: "100vh",
    width: "100%",
    boxSizing: "border-box",
    fontFamily: `${theme.fontFamily}`,
    "--cometchat-font-family": `${theme.fontFamily}`,
    backgroundColor: "#f9f9ff"
  };

Daltonic

<template>
  <CometChatUserListWithMessages />
</template>

<script>
import { CometChatUserListWithMessages } from "../cometchat-pro-vue-ui-kit";
export default {
  name: "friends",
  components: {
    CometChatUserListWithMessages,

Daltonic

<template>
  <div id="chats">
    <div class="content-wrapper">
      <div class="content">
        <section class="msger">
          <header class="msger-header">
            <div class="msger-header-title">
              <div class="msger__avatar">
                <CometChatAvatar :image="user.avatar" />
              </div>

Daltonic

<template>
  <div id="home">
    <div class="content-wrapper">
      <div class="content">
        <MainHeader />
        <TinderCards :uid="uid" :users="swipables" />
      </div>
    </div>
    <SideBar />
  </div>

Daltonic

<template>
  <div class="tinder__card">
    <div class="tinder__card__container">
      <vue-swing
        v-for="user in users"
        :key="user.id"
        @throwout="swipped(user)"
        :config="config"
        class="swipe"
      >