Emoji Reacts

.sassrc.json

@@ -1,7 +1,6 @@
 {
   "includePaths": [
     "node_modules/sanitize.css",
-    "node_modules/emoji-mart/css",
     "node_modules/react-h5-audio-player/lib",
     "node_modules/react-contexify/dist",
     "node_modules/react-toastify/dist"

_locales/en/messages.json

@@ -109,6 +109,7 @@
   "moreInformation": "More information",
   "resend": "Resend",
   "deleteConversationConfirmation": "Permanently delete the messages in this conversation?",
+  "clear": "Clear",
   "clearAllData": "Clear All Data",
   "deleteAccountWarning": "This will permanently delete your messages, and contacts.",
   "deleteContactConfirmation": "Are you sure you want to delete this conversation?",
@@ -451,5 +452,11 @@
   "clearAllConfirmationTitle": "Clear All Message Requests",
   "clearAllConfirmationBody": "Are you sure you want to clear all message requests?",
   "hideBanner": "Hide",
-  "openMessageRequestInboxDescription": "View your Message Request inbox"
+  "openMessageRequestInboxDescription": "View your Message Request inbox",
+  "clearAllReactions": "Are you sure you want to clear all $emoji$ ?",
+  "reactionTooltip": "reacted with",
+  "expandedReactionsText": "Show Less",
+  "reactionNotification": "Reacts to a message with $emoji$",
+  "readableListCounterSingular": "other",
+  "readableListCounterPlural": "others"
 }

package.json

@@ -65,12 +65,12 @@
     "coverage": "nyc --reporter=html mocha  -r jsdom-global/register --recursive --exit --timeout 10000  \"./ts/test/**/*_test.js\"",
     "lint-full": "yarn format-full && eslint . && tslint --format stylish --project .",
     "format-full": "prettier --list-different --write \"*.{css,js,json,scss,ts,tsx}\" \"./**/*.{css,js,json,scss,ts,tsx}\"",
-    "transpile": "yarn tsc && yarn parcel-util-worker",
+    "transpile": "yarn tsc && yarn parcel-util-worker && yarn sass",
     "transpile:watch": "yarn grunt --force; tsc -w",
     "integration-test": "npx playwright test",
     "integration-test-snapshots": "npx playwright test -g 'profile picture' --update-snapshots",
     "clean-transpile": "rimraf 'ts/**/*.js' 'ts/*.js' 'ts/*.js.map' 'ts/**/*.js.map' && rimraf tsconfig.tsbuildinfo;",
-    "ready": "yarn sass && yarn grunt && yarn lint-full && yarn test",
+    "ready": "yarn grunt && yarn lint-full && yarn test",
     "sedtoAppImage": "sed -i 's/\"target\": \\[\"deb\", \"rpm\", \"freebsd\"\\]/\"target\": \"AppImage\"/g' package.json",
     "sedtoDeb": "sed -i 's/\"target\": \"AppImage\"/\"target\": \\[\"deb\", \"rpm\", \"freebsd\"\\]/g' package.json",
     "sass": "rimraf 'stylesheets/dist/' && parcel build --target sass --no-autoinstall --no-cache",
@@ -79,6 +79,7 @@
     "rebuild-curve25519-js": "cd node_modules/curve25519-js && yarn install && yarn build && cd ../../"
   },
   "dependencies": {
+    "@emoji-mart/data": "1.0.2",
     "@reduxjs/toolkit": "^1.4.0",
     "abort-controller": "3.0.0",
     "auto-bind": "^4.0.0",
@@ -99,7 +100,7 @@
     "electron-is-dev": "^1.1.0",
     "electron-localshortcut": "^3.2.1",
     "electron-updater": "^4.2.2",
-    "emoji-mart": "^2.11.2",
+    "emoji-mart": "5.1.0",
     "filesize": "3.6.1",
     "firstline": "1.2.1",
     "fs-extra": "9.0.0",
@@ -164,7 +165,7 @@
     "@types/config": "0.0.34",
     "@types/dompurify": "^2.0.0",
     "@types/electron-localshortcut": "^3.1.0",
-    "@types/emoji-mart": "^2.11.3",
+    "@types/emoji-mart": "3.0.9",
     "@types/filesize": "3.6.0",
     "@types/firstline": "^2.0.2",
     "@types/fs-extra": "5.0.5",
@@ -329,16 +330,6 @@
       "sound/*",
       "build/assets",
       "node_modules/**",
-      "!node_modules/emoji-panel/dist/*",
-      "!node_modules/emoji-panel/lib/emoji-panel-emojione-*.css",
-      "!node_modules/emoji-panel/lib/emoji-panel-google-*.css",
-      "!node_modules/emoji-panel/lib/emoji-panel-twitter-*.css",
-      "!node_modules/emoji-panel/lib/emoji-panel-apple-{16,20,64}.css",
-      "!node_modules/emoji-datasource/emoji_pretty.json",
-      "!node_modules/emoji-datasource/*.png",
-      "!node_modules/emoji-datasource-apple/emoji_pretty.json",
-      "!node_modules/emoji-datasource-apple/img/apple/{sheets-128,sheets-256}/*.png",
-      "!node_modules/emoji-datasource-apple/img/apple/sheets/{16,20,32}.png",
       "!node_modules/spellchecker/vendor/hunspell/**/*",
       "!node_modules/@iconify/icons-mdi/*",
       "node_modules/@iconify/icons-mdi/play-circle*",

protos/SignalService.proto

@@ -76,6 +76,20 @@ message DataMessage {
     EXPIRATION_TIMER_UPDATE   = 2;
   }
 
+  message Reaction {
+    enum Action {
+        REACT = 0;
+        REMOVE = 1;
+    }
+    // @required
+    required uint64 id        = 1; // Message timestamp
+    // @required
+    required string author    = 2;
+    optional string emoji     = 3;
+    // @required
+    required Action action    = 4;
+  }
+
   message Quote {
 
     message QuotedAttachment {
@@ -153,6 +167,7 @@ message DataMessage {
   optional uint64                    timestamp                 = 7;
   optional Quote                     quote                     = 8;
   repeated Preview                   preview                   = 10;
+  optional Reaction                  reaction                  = 11;
   optional LokiProfile               profile                   = 101;
   optional OpenGroupInvitation       openGroupInvitation       = 102;
   optional ClosedGroupControlMessage closedGroupControlMessage = 104;

stylesheets/_mixins.scss

@@ -28,9 +28,3 @@
     @include color-svg($svg, black);
   }
 }
-
-@keyframes highlightedMessageAnimation {
-  1% {
-    background-color: #00f782;
-  }
-}

stylesheets/_modal.scss

@@ -104,27 +104,28 @@
     box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3);
   }
 
-  button {
-    float: right;
-    margin-inline-start: 10px;
-    background-color: $color-loki-green;
-    border-radius: 100px;
-    padding: 5px 15px;
-    border: 1px solid $color-loki-green;
-    color: white;
-    outline: none;
-    user-select: none;
-
-    &:hover,
-    &:disabled {
-      background-color: $color-loki-green-dark;
-      border-color: $color-loki-green-dark;
-    }
-
-    &:disabled {
-      cursor: not-allowed;
-    }
-  }
+  // TODO is this being used anywhere? Seems not
+  // button {
+  //   float: right;
+  //   margin-inline-start: 10px;
+  //   background-color: $color-loki-green;
+  //   border-radius: 100px;
+  //   padding: 5px 15px;
+  //   border: 1px solid $color-loki-green;
+  //   color: white;
+  //   outline: none;
+  //   user-select: none;
+
+  //   &:hover,
+  //   &:disabled {
+  //     background-color: $color-loki-green-dark;
+  //     border-color: $color-loki-green-dark;
+  //   }
+
+  //   &:disabled {
+  //     cursor: not-allowed;
+  //   }
+  // }
 
   input {
     width: 100%;
@@ -258,7 +259,7 @@
       font-size: $session-font-md;
       padding: 0px $session-margin-lg;
       font-family: $session-font-default;
-      font-weight: 100;
+      font-weight: 400;
       color: var(--color-text);
 
       font-size: $session-font-md;
@@ -362,3 +363,15 @@
     }
   }
 }
+
+.reaction-list-modal {
+  .session-confirm-wrapper {
+    .session-modal__body {
+      width: 376px;
+      padding: 0;
+      .session-modal__centered {
+        margin: 0;
+      }
+    }
+  }
+}

stylesheets/_session.scss

@@ -427,6 +427,7 @@ label {
   background-color: var(--color-modal-background);
   color: var(--color-text);
   border: var(--border-session);
+  border-radius: 14px;
   box-shadow: var(--color-session-shadow);
 
   overflow: hidden;
@@ -603,10 +604,14 @@ label {
   z-index: 30;
   min-width: 200px;
   box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19) !important;
-  background: var(--color-cell-background);
+  background-color: var(--color-received-message-background);
+
+  &.react-contexify__theme--dark {
+    background-color: var(--color-received-message-background);
+  }
 
   .react-contexify__item {
-    background: var(--color-cell-background);
+    background: var(--color-received-message-background);
   }
 
   .react-contexify__item:not(.react-contexify__item--disabled):hover
@@ -881,7 +886,7 @@ label {
     &__description {
       font-family: $session-font-default;
       font-size: $session-font-sm;
-      font-weight: 100;
+      font-weight: 400;
       max-width: 700px;
       @include session-color-subtle(var(--color-text));
     }
@@ -1142,30 +1147,6 @@ input {
   }
 }
 
-.messages-container {
-  .session-icon-button {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 40px;
-    width: 40px;
-    border-radius: 50%;
-    opacity: 1;
-    background-color: var(--color-cell-background);
-    box-shadow: var(--color-session-shadow);
-
-    svg path {
-      transition: $session-transition-duration;
-      opacity: 0.6;
-      fill: var(--color-text);
-    }
-
-    &:hover svg path {
-      opacity: 1;
-    }
-  }
-}
-
 .group-member-list {
   &__container {
     padding: 2px 0px;

stylesheets/_session_constants.scss

@@ -14,24 +14,71 @@ $session-font-mono: 'SpaceMono';
 // Roboto is an open replacement for $session-font-default
 @font-face {
   font-family: $session-font-default;
-  src: url('../fonts/Roboto-Regular.ttf') format('truetype');
+  src: url('../fonts/Roboto-Thin.ttf') format('truetype');
+  font-weight: 100;
+}
+@font-face {
+  font-family: $session-font-default;
+  src: url('../fonts/Roboto-ThinItalic.ttf') format('truetype');
+  font-style: italic;
+  font-weight: 100;
+}
+@font-face {
+  font-family: $session-font-default;
+  src: url('../fonts/Roboto-Light.ttf') format('truetype');
   font-weight: 300;
 }
+
 @font-face {
   font-family: $session-font-default;
-  src: url('../fonts/Roboto-Italic.ttf') format('truetype');
+  src: url('../fonts/Roboto-LightItalic.ttf') format('truetype');
   font-style: italic;
   font-weight: 300;
 }
+@font-face {
+  font-family: $session-font-default;
+  src: url('../fonts/Roboto-Regular.ttf') format('truetype');
+  font-weight: 400;
+}
+@font-face {
+  font-family: $session-font-default;
+  src: url('../fonts/Roboto-Italic.ttf') format('truetype');
+  font-style: italic;
+  font-weight: 400;
+}
+@font-face {
+  font-family: $session-font-default;
+  src: url('../fonts/Roboto-Medium.ttf') format('truetype');
+  font-weight: 500;
+}
+
+@font-face {
+  font-family: $session-font-default;
+  src: url('../fonts/Roboto-MediumItalic.ttf') format('truetype');
+  font-style: italic;
+  font-weight: 500;
+}
 @font-face {
   font-family: $session-font-default;
   src: url('../fonts/Roboto-Bold.ttf') format('truetype');
-  font-weight: 600;
+  font-weight: 700;
 }
 @font-face {
   font-family: $session-font-default;
   src: url('../fonts/Roboto-BoldItalic.ttf') format('truetype');
-  font-weight: 600;
+  font-weight: 700;
+  font-style: italic;
+}
+@font-face {
+  font-family: $session-font-default;
+  src: url('../fonts/Roboto-Black.ttf') format('truetype');
+  font-weight: 900;
+}
+
+@font-face {
+  font-family: $session-font-default;
+  src: url('../fonts/Roboto-BlackItalic.ttf') format('truetype');
+  font-weight: 900;
   font-style: italic;
 }