1
0
mirror of https://github.com/oceanprotocol/market.git synced 2024-06-16 09:23:24 +02:00
market/src/components/@shared/DirectMessages/Header.module.css
Marco Elissa 8fd3eaf8de
Encrypted Direct Messaging module (#1870)
* add orbis context

* new changes

* Add orbis floating chat

* adding orbis function

* load orbis conversations

* update message button in profile

* minor fix conversation styles

* update orbis version

* adding details conditional

* updating post comment function

* Update send message button style

* Fix send message button css

* udpate orbis

* update posts and floating function

* Add chatbox emoji

* Add Emoji Picker Theme

* useDarkMode emoji fix

* remove next dynamic on emoji picker

* show conversation title from participant

* update callbackMessage.

* Update Emoji Picker

* Add Emoji Picker to Postbox

* rename FloatingChat to DirectMessages

* create some global orbis components

* update package-lock.json

* change any type

* change Blockie to Avatar component

* fix type errors

* fix infinite loop when no comment found

* Hide send message button on ownAccount profile

* Delete unused component

* minor changes

* update orbis comment and DM components

* fix load older messages on DM scroll

* fixed orbis createPost

* update optional wallet signs

* add return value on connect

* add padding bottom to compensate DM component

* add conditional connect and sign button

* update direct message component

* update get notifications logic

* rerun npm install

* rerun npm install

* temporary push

* rerun npm install

* add new custom hooks

* run npm install

* update flow on address changed

* update custom DID string

* remove lit auth signatures on resetStates()

* add hasLit condition on getMessages

* add removeCeramicSession function

* useLocalStorage to store notifications

* minor bug fix

* update styles for conversation details

* use getEnsName util

* update create conversation flow

* rerun npm install

* update typescript

* update orbis sdk version

* temporary push

* revisions

* update orbis version

* update notifs count and conversation creation flow

* update orbis types

* add toast after copy address

* add message decryption refresh button

* rerun npm install

* remove comment from asset page

* test push

* remove lit-auth-signature on wallet changed

* update orbis SDK to v0.4.14

* update copy

* update Orbis SDK to v0.4.17

* update copy

* create new DM button component and add to asset

* add send button and remove emojiPicker

* Revert "Merge branch 'main' into orbis"

This reverts commit 3cdaf54827, reversing
changes made to 02f2acb774.

* Revert "Revert "Merge branch 'main' into orbis""

This reverts commit a5a32b1534.

* update new conversation flow

* update intro message

* minor fix typo

* remove unused package and fixed outdated versions

* remove comment component and restructured folders

* update orbis-sdk

* small cleanup

* direct message button style updates

---------

Co-authored-by: Nuary Pradipta <nuary.pradipta@gmail.com>
Co-authored-by: Dollar Bull <ramadhanakhri@gmail.com>
Co-authored-by: Bogdan Fazakas <bogdan.fazakas@gmail.com>
2023-04-05 09:22:57 +03:00

102 lines
1.8 KiB
CSS

.header {
display: flex;
flex-wrap: wrap;
gap: calc(0.5 * var(--spacer));
align-items: center;
padding: calc(0.35 * var(--spacer)) calc(0.5 * var(--spacer));
border-bottom: 1px solid var(--border-color);
box-shadow: var(--box-shadow);
font-size: var(--font-size-h5);
font-weight: var(--font-weight-bold);
cursor: pointer;
}
.header > * {
pointer-events: none;
}
.icon {
width: 1.5rem;
fill: var(--font-color-text);
}
.btnBack {
border: none;
background-color: transparent;
padding: 0;
margin: 0;
cursor: pointer;
width: 2rem;
height: 2rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
pointer-events: auto;
}
.btnBack:hover {
background-color: var(--background-highlight);
}
.btnBack .backIcon {
pointer-events: none;
width: 1rem;
fill: var(--font-color-text);
transform: rotate(180deg);
}
.btnCopy {
border: none;
background-color: transparent;
padding: 0;
margin: 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
pointer-events: auto;
}
.btnCopy .copyIcon {
pointer-events: none;
width: 1rem;
fill: var(--color-secondary);
}
.toggleArrow {
display: flex;
align-items: center;
justify-content: center;
margin-left: auto;
background: transparent;
border: none;
color: var(--font-color-text);
width: 32px;
height: 32px;
}
.toggleArrow .icon {
margin-left: auto;
margin-right: auto;
fill: transparent;
}
.isFlipped {
transform: scaleY(-1);
}
.notificationCount {
background-color: var(--color-primary);
width: 24px;
height: 24px;
color: var(--brand-white);
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: var(--font-size-mini);
font-weight: 600;
margin-left: calc(var(--spacer) / 4);
}