oxen-io · Bilb · Jun 17, 2024 · Feb 12, 2024 · Feb 12, 2024 · Feb 13, 2024
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -23,7 +23,7 @@ module.exports = {
     'airbnb-base',
     'prettier',
     'plugin:@typescript-eslint/recommended',
-    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
     'plugin:react-hooks/recommended',
     'plugin:import/recommended',
     'plugin:import/typescript',

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
diff --git a/about_preload.js b/about_preload.js
@@ -9,9 +9,6 @@ const config = url.parse(window.location.toString(), true).query;
 const { locale } = config;
 const localeMessages = ipcRenderer.sendSync('locale-data');
 
-window.React = require('react');
-window.ReactDOM = require('react-dom');
-
 window.theme = config.theme;
 window.i18n = i18n.setupi18n(locale, localeMessages);
 

diff --git a/background.html b/background.html
@@ -31,7 +31,7 @@
   <body id="body">
     <div id="root">
       <div class="app-loading-screen">
-        <div class="content session-full-logo">
+        <div class="session-full-logo">
           <img src="images/session/brand.svg" class="session-brand-logo" />
           <img src="images/session/session-text.svg" class="session-text-logo" />
         </div>

diff --git a/debug_log_preload.js b/debug_log_preload.js
@@ -14,9 +14,6 @@ const localeMessages = ipcRenderer.sendSync('locale-data');
 
 window._ = require('lodash');
 
-window.React = require('react');
-window.ReactDOM = require('react-dom');
-
 window.getVersion = () => config.version;
 window.theme = config.theme;
 window.i18n = i18n.setupi18n(locale, localeMessages);

diff --git a/images/hero.png b/images/hero.png
diff --git a/images/party-popper.svg b/images/party-popper.svg
diff --git a/images/session/session-text.svg b/images/session/session-text.svg
diff --git a/images/session/session_shield.svg b/images/session/session_shield.svg
diff --git a/package.json b/package.json
@@ -22,8 +22,8 @@
     "lodash": "^4.17.20",
     "ini": "^1.3.6",
     "ejs": "^3.1.7",
-    "react": "17.0.2",
-    "@types/react": "17.0.2",
+    "react": "18.2.0",
+    "@types/react": "18.2.55",
     "glob-parent": "^6.0.1",
     "got": "^11.8.5",
     "jpeg-js": "^0.4.4",
@@ -92,10 +92,11 @@
     "filesize": "3.6.1",
     "firstline": "1.2.1",
     "focus-trap-react": "^10.2.3",
+    "framer-motion": "^11.0.3",
     "fs-extra": "9.0.0",
     "glob": "7.1.2",
     "image-type": "^4.1.0",
-    "libsession_util_nodejs": "https://github.com/oxen-io/libsession-util-nodejs/releases/download/v0.3.1/libsession_util_nodejs-v0.3.1.tar.gz",
+    "libsession_util_nodejs": "https://github.com/oxen-io/libsession-util-nodejs/releases/download/v0.3.4/libsession_util_nodejs-v0.3.4.tar.gz",
     "libsodium-wrappers-sumo": "^0.7.9",
     "linkify-it": "^4.0.1",
     "lodash": "^4.17.21",
@@ -109,9 +110,9 @@
     "pify": "3.0.0",
     "protobufjs": "^7.2.4",
     "rc-slider": "^10.2.1",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
     "react-contexify": "^6.0.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
     "react-draggable": "^4.4.4",
     "react-h5-audio-player": "^3.2.0",
     "react-intersection-observer": "^9.7.0",
@@ -158,8 +159,8 @@
     "@types/mocha": "5.0.0",
     "@types/node-fetch": "^2.5.7",
     "@types/pify": "3.0.2",
-    "@types/react": "^17.0.2",
-    "@types/react-dom": "^17.0.2",
+    "@types/react": "^18.2.55",
+    "@types/react-dom": "^18.2.19",
     "@types/react-redux": "^7.1.24",
     "@types/react-virtualized": "9.18.12",
     "@types/redux-logger": "3.0.7",

diff --git a/password.html b/password.html
@@ -29,7 +29,7 @@
   <body>
     <div id="root">
       <div class="app-loading-screen">
-        <div class="content session-full-logo">
+        <div class="session-full-logo">
           <img src="images/session/brand.svg" class="session-brand-logo" />
           <img src="images/session/session-text.svg" class="session-text-logo" />
         </div>

diff --git a/password_preload.js b/password_preload.js
@@ -9,9 +9,6 @@ const config = url.parse(window.location.toString(), true).query;
 const { locale } = config;
 const localeMessages = ipcRenderer.sendSync('locale-data');
 
-window.React = require('react');
-window.ReactDOM = require('react-dom');
-
 // If the app is locked we can't access the database to check the theme.
 window.theme = 'classic-dark';
 window.primaryColor = 'green';

diff --git a/preload.js b/preload.js
@@ -243,9 +243,6 @@ setInterval(() => {
   window.nodeSetImmediate(() => {});
 }, 1000);
 
-window.React = require('react');
-window.ReactDOM = require('react-dom');
-
 window.clipboard = clipboard;
 
 window.getSeedNodeList = () =>

diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss
@@ -122,6 +122,27 @@ a {
       animation: loading 1500ms ease infinite 666ms;
     }
   }
+
+  .session-full-logo {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: auto;
+
+    .session-brand-logo {
+      height: 180px;
+      filter: brightness(0) saturate(100%) invert(75%) sepia(84%) saturate(3272%) hue-rotate(103deg)
+        brightness(106%) contrast(103%);
+    }
+
+    .session-text-logo {
+      margin-top: 10px;
+      width: 250px;
+      transition: 0s;
+      filter: var(--session-logo-text-current-filter);
+    }
+  }
+
   .session-text-logo {
     filter: var(--session-logo-text-current-filter);
   }

diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss
@@ -444,64 +444,6 @@ label {
   }
 }
 
-.session-loader {
-  display: inline-block;
-  position: relative;
-  width: 80px;
-  height: 80px;
-  flex-shrink: 0;
-
-  div {
-    position: absolute;
-    top: 33px;
-    width: 13px;
-    height: 13px;
-    border-radius: 50%;
-    background: var(--primary-color);
-    animation-timing-function: cubic-bezier(0, 1, 1, 0);
-  }
-  div:nth-child(1) {
-    left: 8px;
-    animation: session-loader1 0.6s infinite;
-  }
-  div:nth-child(2) {
-    left: 8px;
-    animation: session-loader2 0.6s infinite;
-  }
-  div:nth-child(3) {
-    left: 32px;
-    animation: session-loader2 0.6s infinite;
-  }
-  div:nth-child(4) {
-    left: 56px;
-    animation: session-loader3 0.6s infinite;
-  }
-  @keyframes session-loader1 {
-    0% {
-      transform: scale(0);
-    }
-    100% {
-      transform: scale(1);
-    }
-  }
-  @keyframes session-loader3 {
-    0% {
-      transform: scale(1);
-    }
-    100% {
-      transform: scale(0);
-    }
-  }
-  @keyframes session-loader2 {
-    0% {
-      transform: translate(0, 0);
-    }
-    100% {
-      transform: translate(24px, 0);
-    }
-  }
-}
-
 .session-settings {
   width: 100%;
   height: 100%;

diff --git a/stylesheets/_session_conversation.scss b/stylesheets/_session_conversation.scss
@@ -115,28 +115,6 @@
   }
 }
 
-.send-message-button {
-  animation: fadein var(--default-duration);
-
-  &---scale {
-    animation: scaling 2s ease-in-out;
-
-    @keyframes scaling {
-      0% {
-        transform: scale(1);
-      }
-
-      80% {
-        transform: scale(1.3);
-      }
-
-      100% {
-        transform: scale(1);
-      }
-    }
-  }
-}
-
 .session-recording {
   height: var(--composition-container-height);
   display: flex;

diff --git a/stylesheets/_session_left_pane.scss b/stylesheets/_session_left_pane.scss
@@ -140,33 +140,3 @@ $session-compose-margin: 20px;
     }
   }
 }
-
-.conversation.placeholder {
-  margin: auto;
-  height: 100%;
-
-  .container {
-    display: flex;
-    height: 100%;
-  }
-}
-
-.session-full-logo {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin: auto;
-
-  .session-brand-logo {
-    height: 180px;
-    filter: brightness(0) saturate(100%) invert(75%) sepia(84%) saturate(3272%) hue-rotate(103deg)
-      brightness(106%) contrast(103%);
-  }
-
-  .session-text-logo {
-    margin-top: 10px;
-    width: 250px;
-    transition: 0s;
-    filter: var(--session-logo-text-current-filter);
-  }
-}