Move generated/icons/ to icons/

- Update Dependencies
- Switch to "check-internet-connected" module for checking if user is online/offline
- Show message box when error occurs on RPC connection
- Update LICENSE and copyright
- Update useragents

.eslintignore

@@ -0,0 +1,5 @@
+yarn.lock
+node_modules/
+docs/
+.github/
+README.md

.eslintrc.js

@@ -0,0 +1,15 @@
+module.exports = {
+    "env": {
+        "commonjs": true,
+        "es2021": true,
+        "node": true
+    },
+    "extends": "eslint:recommended",
+    "overrides": [
+    ],
+    "parserOptions": {
+        "ecmaVersion": "latest"
+    },
+    "rules": {
+    }
+}

.github/workflows/eslint.yml

@@ -0,0 +1,50 @@
+# This workflow uses actions that are not certified by GitHub.
+# They are provided by a third-party and are governed by
+# separate terms of service, privacy policy, and support
+# documentation.
+# ESLint is a tool for identifying and reporting on patterns
+# found in ECMAScript/JavaScript code.
+# More details at https://github.com/eslint/eslint
+# and https://eslint.org
+
+name: ESLint
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [ "main" ]
+  schedule:
+    - cron: '16 11 * * 0'
+
+jobs:
+  eslint:
+    name: Run eslint scanning
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      security-events: write
+      actions: read # only required for a private repository by github/codeql-action/upload-sarif to get the Action run status 
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Install ESLint
+        run: |
+          npm install eslint@8.10.0
+          npm install @microsoft/eslint-formatter-sarif@2.1.7
+
+      - name: Run ESLint
+        run: npx eslint .
+          --config .eslintrc.js
+          --ext .js,.jsx,.ts,.tsx
+          --format @microsoft/eslint-formatter-sarif 
+          --output-file eslint-results.sarif
+        continue-on-error: true
+
+      - name: Upload analysis results to GitHub
+        uses: github/codeql-action/upload-sarif@v2
+        with:
+          sarif_file: eslint-results.sarif
+          wait-for-processing: true

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 Agampreet Singh
+Copyright (c) 2021-2022 Agampreet Singh
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.

assets/flatpak/io.github.agam778.MS-Office-Electron.desktop

@@ -0,0 +1,10 @@
+[Desktop Entry]
+Name=MS-Office-Electrom
+GenericName=MS-Office-Electron
+Comment=A Microsoft Office Online Desktop Client made with Electron. Free of Cost.
+Keywords=ms-office;office;electron;cloud
+Exec=start-ms-office-electron
+Icon=io.github.agam778.MS-Office-Electron
+Type=Application
+Terminal=false
+Categories=Office

assets/flatpak/io.github.agam778.MS-Office-Electron.metainfo.xml

@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<component type="desktop-application">
+    <id>io.github.agam778.MS-Office-Electron</id>
+    <launchable type="desktop-id">io.github.agam778.MS-Office-Electron.desktop</launchable>
+    <metadata_license>CC0-1.0</metadata_license>
+    <project_license>MIT</project_license>
+
+    <name>MS-Office-Electron</name>
+
+    <categories>
+        <category>Utility</category>
+    </categories>
+
+    <summary>A Microsoft Office Online Desktop Client made with Electron. Free of Cost.</summary>
+
+    <description>
+      <p>MS-Office-Electron is an app in which the Web Version of Microsoft Office is wrapped into a Cross-Platform App with Electron. And all the Services of Microsoft Office will work for free.</p>
+    </description>
+
+    <developer_name>Agampreet Singh</developer_name>
+
+    <releases>
+      <release version="0.7.2" date="2022-05-20">
+        <description>
+          <p>Remove electron-icon-maker dependency and remove 'yarn genicon' command</p>
+        </description>
+      </release>
+    </releases>
+
+    <screenshots>
+      <screenshot type="default"><image type="source">https://dashboard.snapcraft.io/site_media/appmedia/2022/05/Screenshot_from_2022-05-15_22-10-14.png</image></screenshot>
+      <screenshot><image type="source">https://dashboard.snapcraft.io/site_media/appmedia/2022/05/Screenshot_from_2022-05-15_22-11-27.png</image></screenshot>
+    </screenshots>
+
+    <content_rating type="oars-1.1" />
+
+    <metadata>
+        <value key="GnomeSoftware::popular-background">https://dashboard.snapcraft.io/site_media/appmedia/2022/05/Untitled_design1.png</value>
+    </metadata>
+
+    <url type="homepage">https://github.com/agam778/MS-Office-Electron/</url>
+    <url type="bugtracker">https://github.com/agam778/MS-Office-Electron/issues</url>
+</component>

docs/loading/MSlogo.svg

@@ -1,19 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="57px" height="30px" viewBox="0 0 57 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 45.2 (43514) - http://www.bohemiancoding.com/sketch -->
-    <title>MDlogo</title>
-    <desc>Created with Sketch.</desc>
-    <defs/>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-size="42">
-        <g id="thumb" transform="translate(-4.000000, -18.000000)">
-            <g id="MD" transform="translate(2.000000, 4.000000)">
-                <text id="M" font-family="Roboto-Black, Roboto" font-weight="700" letter-spacing="5.46875048" fill="#000000">
-                    <tspan x="0.0136716366" y="44">M</tspan>
-                </text>
-                <text id="D" font-family="Roboto-Light, Roboto" font-weight="300" letter-spacing="5.46875" fill="#A8244F">
-                    <tspan x="33.484375" y="44">S</tspan>
-                </text>
-            </g>
-        </g>
-    </g>
-</svg>

docs/loading/index.html

@@ -5,18 +5,38 @@
     <title>Loading MS-Office-Electron</title>
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"
     />
     <link rel="stylesheet" href="./style.css" />
   </head>
   <body>
-    <div class="loader"></div>
-    <div class="shadow"></div>
+    <!-- partial:index.partial.html -->
+    <div id="particles-background" class="vertical-centered-box"></div>
+    <div id="particles-foreground" class="vertical-centered-box"></div>
 
-    <div class="logo">
-      <a href="https://github.com/agam778/MS-Office-Electron" target="_blank"
-        ><img src="./MSlogo.svg" alt="MS-Office-Electron"
-      /></a>
+    <div class="vertical-centered-box">
+      <div class="content">
+        <div class="loader-circle"></div>
+        <div class="loader-line-mask">
+          <div class="loader-line"></div>
+        </div>
+        <img
+          width="50px"
+          height="auto"
+          viewBox="0 0 36 24"
+          src="https://github.com/agam778/MS-Office-Electron/raw/main/assets/icon.png"
+        />
+      </div>
     </div>
+    <!-- partial -->
+    <script src="./script.js"></script>
+    <!-- add text in bottom left corner -->
+    <style>
+
+    </style>
+    <div class="credittext">
+      <p>
+        Design Credits: <a href="https://codepen.io/kenchen/pen/vYwvbZ">kenchen</a>
+      </p>
   </body>
 </html>

docs/loading/script.js

@@ -0,0 +1,390 @@
+/*!
+ * Particleground
+ *
+ * @author Jonathan Nicol - @mrjnicol
+ * @version 1.1.0
+ * @description Creates a canvas based particle system background
+ *
+ * Inspired by http://requestlab.fr/ and http://disruptivebydesign.com/
+ */
+!(function (a, b) {
+  "use strict";
+  function c(a) {
+    a = a || {};
+    for (var b = 1; b < arguments.length; b++) {
+      var c = arguments[b];
+      if (c)
+        for (var d in c)
+          c.hasOwnProperty(d) &&
+            ("object" == typeof c[d] ? deepExtend(a[d], c[d]) : (a[d] = c[d]));
+    }
+    return a;
+  }
+  function d(d, g) {
+    function h() {
+      if (y) {
+        (r = b.createElement("canvas")),
+          (r.className = "pg-canvas"),
+          (r.style.display = "block"),
+          d.insertBefore(r, d.firstChild),
+          (s = r.getContext("2d")),
+          i();
+        for (
+          var c = Math.round((r.width * r.height) / g.density), e = 0;
+          c > e;
+          e++
+        ) {
+          var f = new n();
+          f.setStackPos(e), z.push(f);
+        }
+        a.addEventListener(
+          "resize",
+          function () {
+            k();
+          },
+          !1
+        ),
+          b.addEventListener(
+            "mousemove",
+            function (a) {
+              (A = a.pageX), (B = a.pageY);
+            },
+            !1
+          ),
+          D &&
+            !C &&
+            a.addEventListener(
+              "deviceorientation",
+              function () {
+                (F = Math.min(Math.max(-event.beta, -30), 30)),
+                  (E = Math.min(Math.max(-event.gamma, -30), 30));
+              },
+              !0
+            ),
+          j(),
+          q("onInit");
+      }
+    }
+    function i() {
+      (r.width = d.offsetWidth),
+        (r.height = d.offsetHeight),
+        (s.fillStyle = g.dotColor),
+        (s.strokeStyle = g.lineColor),
+        (s.lineWidth = g.lineWidth);
+    }
+    function j() {
+      if (y) {
+        (u = a.innerWidth),
+          (v = a.innerHeight),
+          s.clearRect(0, 0, r.width, r.height);
+        for (var b = 0; b < z.length; b++) z[b].updatePosition();
+        for (var b = 0; b < z.length; b++) z[b].draw();
+        G || (t = requestAnimationFrame(j));
+      }
+    }
+    function k() {
+      i();
+      for (
+        var a = d.offsetWidth, b = d.offsetHeight, c = z.length - 1;
+        c >= 0;
+        c--
+      )
+        (z[c].position.x > a || z[c].position.y > b) && z.splice(c, 1);
+      var e = Math.round((r.width * r.height) / g.density);
+      if (e > z.length)
+        for (; e > z.length; ) {
+          var f = new n();
+          z.push(f);
+        }
+      else e < z.length && z.splice(e);
+      for (c = z.length - 1; c >= 0; c--) z[c].setStackPos(c);
+    }
+    function l() {
+      G = !0;
+    }
+    function m() {
+      (G = !1), j();
+    }
+    function n() {
+      switch (
+        (this.stackPos,
+        (this.active = !0),
+        (this.layer = Math.ceil(3 * Math.random())),
+        (this.parallaxOffsetX = 0),
+        (this.parallaxOffsetY = 0),
+        (this.position = {
+          x: Math.ceil(Math.random() * r.width),
+          y: Math.ceil(Math.random() * r.height),
+        }),
+        (this.speed = {}),
+        g.directionX)
+      ) {
+        case "left":
+          this.speed.x = +(
+            -g.maxSpeedX +
+            Math.random() * g.maxSpeedX -
+            g.minSpeedX
+          ).toFixed(2);
+          break;
+        case "right":
+          this.speed.x = +(Math.random() * g.maxSpeedX + g.minSpeedX).toFixed(
+            2
+          );
+          break;
+        default:
+          (this.speed.x = +(
+            -g.maxSpeedX / 2 +
+            Math.random() * g.maxSpeedX
+          ).toFixed(2)),
+            (this.speed.x += this.speed.x > 0 ? g.minSpeedX : -g.minSpeedX);
+      }
+      switch (g.directionY) {
+        case "up":
+          this.speed.y = +(
+            -g.maxSpeedY +
+            Math.random() * g.maxSpeedY -
+            g.minSpeedY
+          ).toFixed(2);
+          break;
+        case "down":
+          this.speed.y = +(Math.random() * g.maxSpeedY + g.minSpeedY).toFixed(
+            2
+          );
+          break;
+        default:
+          (this.speed.y = +(
+            -g.maxSpeedY / 2 +
+            Math.random() * g.maxSpeedY
+          ).toFixed(2)),
+            (this.speed.x += this.speed.y > 0 ? g.minSpeedY : -g.minSpeedY);
+      }
+    }
+    function o(a, b) {
+      return b ? void (g[a] = b) : g[a];
+    }
+    function p() {
+      console.log("destroy"),
+        r.parentNode.removeChild(r),
+        q("onDestroy"),
+        f && f(d).removeData("plugin_" + e);
+    }
+    function q(a) {
+      void 0 !== g[a] && g[a].call(d);
+    }
+    var r,
+      s,
+      t,
+      u,
+      v,
+      w,
+      x,
+      y = !!b.createElement("canvas").getContext,
+      z = [],
+      A = 0,
+      B = 0,
+      C = !navigator.userAgent.match(
+        /(iPhone|iPod|iPad|Android|BlackBerry|BB10|mobi|tablet|opera mini|nexus 7)/i
+      ),
+      D = !!a.DeviceOrientationEvent,
+      E = 0,
+      F = 0,
+      G = !1;
+    return (
+      (g = c({}, a[e].defaults, g)),
+      (n.prototype.draw = function () {
+        s.beginPath(),
+          s.arc(
+            this.position.x + this.parallaxOffsetX,
+            this.position.y + this.parallaxOffsetY,
+            g.particleRadius / 2,
+            0,
+            2 * Math.PI,
+            !0
+          ),
+          s.closePath(),
+          s.fill(),
+          s.beginPath();
+        for (var a = z.length - 1; a > this.stackPos; a--) {
+          var b = z[a],
+            c = this.position.x - b.position.x,
+            d = this.position.y - b.position.y,
+            e = Math.sqrt(c * c + d * d).toFixed(2);
+          e < g.proximity &&
+            (s.moveTo(
+              this.position.x + this.parallaxOffsetX,
+              this.position.y + this.parallaxOffsetY
+            ),
+            g.curvedLines
+              ? s.quadraticCurveTo(
+                  Math.max(b.position.x, b.position.x),
+                  Math.min(b.position.y, b.position.y),
+                  b.position.x + b.parallaxOffsetX,
+                  b.position.y + b.parallaxOffsetY
+                )
+              : s.lineTo(
+                  b.position.x + b.parallaxOffsetX,
+                  b.position.y + b.parallaxOffsetY
+                ));
+        }
+        s.stroke(), s.closePath();
+      }),
+      (n.prototype.updatePosition = function () {
+        if (g.parallax) {
+          if (D && !C) {
+            var a = (u - 0) / 60;
+            w = (E - -30) * a + 0;
+            var b = (v - 0) / 60;
+            x = (F - -30) * b + 0;
+          } else (w = A), (x = B);
+          (this.parallaxTargX =
+            (w - u / 2) / (g.parallaxMultiplier * this.layer)),
+            (this.parallaxOffsetX +=
+              (this.parallaxTargX - this.parallaxOffsetX) / 10),
+            (this.parallaxTargY =
+              (x - v / 2) / (g.parallaxMultiplier * this.layer)),
+            (this.parallaxOffsetY +=
+              (this.parallaxTargY - this.parallaxOffsetY) / 10);
+        }
+        var c = d.offsetWidth,
+          e = d.offsetHeight;
+        switch (g.directionX) {
+          case "left":
+            this.position.x + this.speed.x + this.parallaxOffsetX < 0 &&
+              (this.position.x = c - this.parallaxOffsetX);
+            break;
+          case "right":
+            this.position.x + this.speed.x + this.parallaxOffsetX > c &&
+              (this.position.x = 0 - this.parallaxOffsetX);
+            break;
+          default:
+            (this.position.x + this.speed.x + this.parallaxOffsetX > c ||
+              this.position.x + this.speed.x + this.parallaxOffsetX < 0) &&
+              (this.speed.x = -this.speed.x);
+        }
+        switch (g.directionY) {
+          case "up":
+            this.position.y + this.speed.y + this.parallaxOffsetY < 0 &&
+              (this.position.y = e - this.parallaxOffsetY);
+            break;
+          case "down":
+            this.position.y + this.speed.y + this.parallaxOffsetY > e &&
+              (this.position.y = 0 - this.parallaxOffsetY);
+            break;
+          default:
+            (this.position.y + this.speed.y + this.parallaxOffsetY > e ||
+              this.position.y + this.speed.y + this.parallaxOffsetY < 0) &&
+              (this.speed.y = -this.speed.y);
+        }
+        (this.position.x += this.speed.x), (this.position.y += this.speed.y);
+      }),
+      (n.prototype.setStackPos = function (a) {
+        this.stackPos = a;
+      }),
+      h(),
+      { option: o, destroy: p, start: m, pause: l }
+    );
+  }
+  var e = "particleground",
+    f = a.jQuery;
+  (a[e] = function (a, b) {
+    return new d(a, b);
+  }),
+    (a[e].defaults = {
+      minSpeedX: 0.1,
+      maxSpeedX: 0.7,
+      minSpeedY: 0.1,
+      maxSpeedY: 0.7,
+      directionX: "center",
+      directionY: "center",
+      density: 1e4,
+      dotColor: "#666666",
+      lineColor: "#666666",
+      particleRadius: 7,
+      lineWidth: 1,
+      curvedLines: !1,
+      proximity: 100,
+      parallax: !0,
+      parallaxMultiplier: 5,
+      onInit: function () {},
+      onDestroy: function () {},
+    }),
+    f &&
+      (f.fn[e] = function (a) {
+        if ("string" == typeof arguments[0]) {
+          var b,
+            c = arguments[0],
+            g = Array.prototype.slice.call(arguments, 1);
+          return (
+            this.each(function () {
+              f.data(this, "plugin_" + e) &&
+                "function" == typeof f.data(this, "plugin_" + e)[c] &&
+                (b = f.data(this, "plugin_" + e)[c].apply(this, g));
+            }),
+            void 0 !== b ? b : this
+          );
+        }
+        return "object" != typeof a && a
+          ? void 0
+          : this.each(function () {
+              f.data(this, "plugin_" + e) ||
+                f.data(this, "plugin_" + e, new d(this, a));
+            });
+      });
+})(window, document),
+  /**
+   * requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
+   * @see: http://paulirish.com/2011/requestanimationframe-for-smart-animating/
+   * @see: http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
+   * @license: MIT license
+   */ (function () {
+    for (
+      var a = 0, b = ["ms", "moz", "webkit", "o"], c = 0;
+      c < b.length && !window.requestAnimationFrame;
+      ++c
+    )
+      (window.requestAnimationFrame = window[b[c] + "RequestAnimationFrame"]),
+        (window.cancelAnimationFrame =
+          window[b[c] + "CancelAnimationFrame"] ||
+          window[b[c] + "CancelRequestAnimationFrame"]);
+    window.requestAnimationFrame ||
+      (window.requestAnimationFrame = function (b) {
+        var c = new Date().getTime(),
+          d = Math.max(0, 16 - (c - a)),
+          e = window.setTimeout(function () {
+            b(c + d);
+          }, d);
+        return (a = c + d), e;
+      }),
+      window.cancelAnimationFrame ||
+        (window.cancelAnimationFrame = function (a) {
+          clearTimeout(a);
+        });
+  })();
+
+particleground(document.getElementById("particles-foreground"), {
+  dotColor: "rgba(255, 255, 255, 1)",
+  lineColor: "rgba(255, 255, 255, 0.05)",
+  minSpeedX: 0.3,
+  maxSpeedX: 0.6,
+  minSpeedY: 0.3,
+  maxSpeedY: 0.6,
+  density: 50000, // One particle every n pixels
+  curvedLines: false,
+  proximity: 250, // How close two dots need to be before they join
+  parallaxMultiplier: 10, // Lower the number is more extreme parallax
+  particleRadius: 4, // Dot size
+});
+
+particleground(document.getElementById("particles-background"), {
+  dotColor: "rgba(255, 255, 255, 0.5)",
+  lineColor: "rgba(255, 255, 255, 0.05)",
+  minSpeedX: 0.075,
+  maxSpeedX: 0.15,
+  minSpeedY: 0.075,
+  maxSpeedY: 0.15,
+  density: 30000, // One particle every n pixels
+  curvedLines: false,
+  proximity: 20, // How close two dots need to be before they join
+  parallaxMultiplier: 20, // Lower the number is more extreme parallax
+  particleRadius: 2, // Dot size
+});

docs/loading/style.css

@@ -1,248 +1,107 @@
-@-webkit-keyframes mainAnimation {
-  0% {
-    width: 50px;
-    transform: translateX(0px) translateY(0px) rotate(0deg);
-  }
-  20% {
-    width: 50px;
-    transform: translateX(0px) translateY(0px) rotate(0deg);
-  }
-  40% {
-    width: 150px;
-    transform: translateX(-50px) translateY(0px) rotate(0deg);
-  }
-  60% {
-    width: 150px;
-    transform-origin: bottom right;
-    transform: translateX(-150px) translateY(0px) rotate(90deg);
-  }
-  80% {
-    width: 50px;
-    transform: translateX(-25px) translateY(0px) rotate(90deg);
-  }
-  100% {
-    width: 50px;
-    transform: translateX(-50px) translateY(0px) rotate(90deg);
-  }
-}
-@keyframes mainAnimation {
-  0% {
-    width: 50px;
-    transform: translateX(0px) translateY(0px) rotate(0deg);
-  }
-  20% {
-    width: 50px;
-    transform: translateX(0px) translateY(0px) rotate(0deg);
-  }
-  40% {
-    width: 150px;
-    transform: translateX(-50px) translateY(0px) rotate(0deg);
-  }
-  60% {
-    width: 150px;
-    transform-origin: bottom right;
-    transform: translateX(-150px) translateY(0px) rotate(90deg);
-  }
-  80% {
-    width: 50px;
-    transform: translateX(-25px) translateY(0px) rotate(90deg);
-  }
-  100% {
-    width: 50px;
-    transform: translateX(-50px) translateY(0px) rotate(90deg);
-  }
-}
-@-webkit-keyframes secundaryAnimation {
-  0% {
-    transform: translateX(0px) translateY(0px) rotate(0deg);
-  }
-  20% {
-    transform: translateX(0px) translateY(0px) rotate(180deg);
-  }
-  40% {
-    transform: translateX(0px) translateY(0px) rotate(180deg);
-  }
-  60% {
-    transform: translateX(0px) translateY(0px) rotate(0deg);
-  }
-  80% {
-    transform: translateX(0px) translateY(0px) rotate(0deg);
-  }
-  100% {
-    transform: translateX(0px) translateY(0px) rotate(180deg);
-  }
-}
-@keyframes secundaryAnimation {
-  0% {
-    transform: translateX(0px) translateY(0px) rotate(0deg);
-  }
-  20% {
-    transform: translateX(0px) translateY(0px) rotate(180deg);
-  }
-  40% {
-    transform: translateX(0px) translateY(0px) rotate(180deg);
-  }
-  60% {
-    transform: translateX(0px) translateY(0px) rotate(0deg);
-  }
-  80% {
-    transform: translateX(0px) translateY(0px) rotate(0deg);
-  }
-  100% {
-    transform: translateX(0px) translateY(0px) rotate(180deg);
-  }
-}
-@-webkit-keyframes shadowAnimation {
-  0% {
-    width: 150px;
-    transform: translateX(-25px) translateY(0px) rotate(0deg);
-  }
-  20% {
-    width: 75px;
-    transform: translateX(37.5px) translateY(0px) rotate(0deg);
-  }
-  40% {
-    width: 200px;
-    transform: translateX(-25px) translateY(0px) rotate(0deg);
-  }
-  60% {
-    width: 75px;
-    transform: translateX(37.5px) translateY(0px) rotate(0deg);
-  }
-  80% {
-    width: 75px;
-    transform: translateX(37.5px) translateY(0px) rotate(0deg);
-  }
-  100% {
-    width: 150px;
-    transform: translateX(-25px) translateY(0px) rotate(0deg);
-  }
-}
-@keyframes shadowAnimation {
-  0% {
-    width: 150px;
-    transform: translateX(-25px) translateY(0px) rotate(0deg);
-  }
-  20% {
-    width: 75px;
-    transform: translateX(37.5px) translateY(0px) rotate(0deg);
-  }
-  40% {
-    width: 200px;
-    transform: translateX(-25px) translateY(0px) rotate(0deg);
-  }
-  60% {
-    width: 75px;
-    transform: translateX(37.5px) translateY(0px) rotate(0deg);
-  }
-  80% {
-    width: 75px;
-    transform: translateX(37.5px) translateY(0px) rotate(0deg);
-  }
-  100% {
-    width: 150px;
-    transform: translateX(-25px) translateY(0px) rotate(0deg);
-  }
-}
-@-webkit-keyframes float {
-  0% {
-    top: 50%;
-  }
-  50% {
-    top: 51%;
-  }
-  100% {
-    top: 50%;
-  }
-}
-@keyframes float {
-  0% {
-    top: 50%;
-  }
-  50% {
-    top: 51%;
-  }
-  100% {
-    top: 50%;
-  }
-}
-html,
 body {
-  height: 100%;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-family: "proxima-nova-soft", sans-serif;
+  -webkit-user-select: none;
+  overflow: hidden;
 }
-
-body {
-  position: relative;
-  background: #5684f0;
-  background: linear-gradient(135deg, #5684f0 0%, #fa7587 100%);
-}
-
-.loader {
+body .vertical-centered-box {
   position: absolute;
-  width: 50px;
-  height: 50px;
-  top: 50%;
-  left: 50%;
-  margin-top: -25px;
-  margin-left: -25px;
-  background-color: #fff5a5;
-  transform: translateX(0px) translateY(0px) rotate(0deg);
-  -webkit-animation: mainAnimation 2.6s ease 0s infinite forwards;
-  animation: mainAnimation 2.6s ease 0s infinite forwards;
-  z-index: 2;
-}
-.loader:after {
-  content: "";
-  display: inline-block;
-  position: absolute;
-  width: 50px;
-  height: 50px;
-  top: 0;
-  left: -50px;
-  background-color: #fff5a5;
-  transform-origin: top right;
-  transform: translateX(0px) translateY(0px) rotate(0deg);
-  -webkit-animation: secundaryAnimation 2.6s ease 0s infinite forwards;
-  animation: secundaryAnimation 2.6s ease 0s infinite forwards;
-}
-
-.shadow {
-  position: absolute;
-  width: 100px;
-  height: 10px;
-  top: 50%;
-  left: 50%;
-  margin-top: 50px;
-  margin-left: -75px;
-  border-radius: 50%;
-  background-color: #95a5a6;
-  transform: translateX(0px) translateY(0px) rotate(0deg);
-  -webkit-animation: shadowAnimation 2.6s ease 0s infinite forwards,
-    float 5s ease-in-out 0s infinite forwards;
-  animation: shadowAnimation 2.6s ease 0s infinite forwards,
-    float 5s ease-in-out 0s infinite forwards;
-  filter: blur(5px);
-  z-index: 1;
-}
-
-.logo {
-  position: absolute;
-  bottom: 20px;
-  left: 50%;
-  width: 42px;
-  height: 42px;
-  padding: 12px 5px;
-  margin-left: -21px;
-  box-sizing: border-box;
-  background-color: white;
-  border-radius: 50%;
-  transition: transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
-}
-.logo:hover {
-  transform: scale(1.4);
-}
-.logo img {
   width: 100%;
-  height: auto;
-  margin: 0 auto;
+  height: 100%;
+  text-align: center;
 }
+body .vertical-centered-box:after {
+  content: '';
+  display: inline-block;
+  height: 100%;
+  vertical-align: middle;
+  margin-right: -0.25em;
+}
+body .vertical-centered-box .content {
+  box-sizing: border-box;
+  display: inline-block;
+  vertical-align: middle;
+  text-align: left;
+  font-size: 0;
+}
+* {
+  transition: all 0.3s;
+}
+body {
+  background: #2c2d44;
+}
+.loader-circle {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
+  margin-left: -60px;
+  margin-top: -60px;
+}
+.loader-line-mask {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 60px;
+  height: 120px;
+  margin-left: -60px;
+  margin-top: -60px;
+  overflow: hidden;
+  transform-origin: 60px 60px;
+  -webkit-mask-image: -webkit-linear-gradient(top, #000000, rgba(0, 0, 0, 0));
+  animation: rotate 1.2s infinite linear;
+}
+.loader-line-mask .loader-line {
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
+}
+#particles-background,
+#particles-foreground {
+  left: -51%;
+  top: -51%;
+  width: 202%;
+  height: 202%;
+  transform: scale3d(0.5, 0.5, 1);
+}
+#particles-background {
+  background: #2c2d44;
+  background-image: -moz-linear-gradient(45deg, #3f3251 2%, #002025 100%);
+  background-image: -webkit-linear-gradient(45deg, #3f3251 2%, #002025 100%);
+  background-image: linear-gradient(45deg, #3f3251 2%, #002025 100%);
+}
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes fade {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.25;
+  }
+}
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.credittext {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  color: white;
+}

main.js

@@ -1,31 +1,34 @@
 const { app, Menu, BrowserWindow, dialog, shell } = require("electron");
 const { autoUpdater } = require("electron-updater");
-const isMac = process.platform === "darwin";
 const openAboutWindow = require("about-window").default;
-const isOnline = require("is-online");
+const checkInternetConnected = require("check-internet-connected");
 const axios = require("axios");
 const ElectronDl = require("electron-dl");
 const contextMenu = require("electron-context-menu");
 const path = require("path");
 const Store = require("electron-store");
+const log = require("electron-log");
+
 const store = new Store();
 
+const isMac = process.platform === "darwin";
+const isWin = process.platform === "win32";
+const isLinux = process.platform === "linux";
+
 const RPC = require("discord-rpc");
 const clientId = "942637872530460742";
 const rpc = new RPC.Client({ transport: "ipc" });
 
 const windowsuseragent =
-  "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.54 Safari/537.36";
+  "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36";
 const macuseragent =
-  "Mozilla/5.0 (Macintosh; Intel Mac OS X 12_3_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.54 Safari/537.36";
+  "Mozilla/5.0 (Macintosh; Intel Mac OS X 12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36";
 const linuxuseragent =
-  "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.54 Safari/537.36";
+  "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36";
 
-const log = require("electron-log");
 log.transports.file.level = "verbose";
 console.log = log.log;
 Object.assign(console, log.functions);
-require("electron-log");
 
 ElectronDl({
   dlPath: "./downloads",
@@ -118,7 +121,7 @@ const menulayout = [
               "https://raw.githubusercontent.com/agam778/MS-Office-Electron/main/assets/icon.png",
             product_name: "MS-Office-Electron",
             copyright:
-              "Copyright (c) 2022 Agampreet Singh\nOffice, the name, website, images/icons\nare the intellectual properties of Microsoft.",
+              "Copyright (c) 2021-2022 Agampreet Singh\nOffice, the name, website, images/icons\nare the intellectual properties of Microsoft.",
             package_json_dir: __dirname,
             bug_report_url:
               "https://github.com/agam778/Microsoft-Office-Electron/issues/",
@@ -174,7 +177,7 @@ const menulayout = [
         label: "Open Logs Folder",
         click: async () => {
           const { shell } = require("electron");
-          if (process.platform === "win32") {
+          if (isWin) {
             await shell.openPath(
               "C:\\Users\\" +
                 process.env.USERNAME +
@@ -184,7 +187,7 @@ const menulayout = [
             await shell.openPath(
               "/Users/" + process.env.USER + "/Library/Logs/ms-office-electron/"
             );
-          } else if (process.platform === "linux") {
+          } else if (isLinux) {
             await shell.openPath(
               "/home/" + process.env.USER + "/.config/ms-office-electron/logs/"
             );
@@ -505,7 +508,7 @@ function createWindow() {
   const win = new BrowserWindow({
     width: 1181,
     height: 670,
-    icon: path.join(__dirname, "/assets/generated/icons/png/1024x1024.png"),
+    icon: path.join(__dirname, "/assets/icons/png/1024x1024.png"),
     show: false,
     webPreferences: {
       nodeIntegration: true,
@@ -525,7 +528,7 @@ function createWindow() {
     transparent: true,
     frame: false,
     alwaysOnTop: true,
-    icon: path.join(__dirname, "/assets/generated/icons/png/1024x1024.png"),
+    icon: path.join(__dirname, "/assets/icons/png/1024x1024.png"),
   });
 
   splash.loadURL(`https://agam778.github.io/MS-Office-Electron/loading`);
@@ -552,7 +555,6 @@ app.on("web-contents-created", (event, contents) => {
     if (store.get("websites-in-new-window") === "false") {
       event.preventDefault();
       BrowserWindow.getFocusedWindow().loadURL(url);
-    } else {
     }
   });
 });
@@ -571,10 +573,11 @@ app.on("activate", () => {
 });
 
 app.on("ready", function () {
-  isOnline().then((online) => {
-    if (online) {
+  checkInternetConnected()
+    .then(() => {
       console.log("You are connected to the internet!");
-    } else {
+    })
+    .catch(() => {
       const options = {
         type: "warning",
         buttons: ["Ok"],
@@ -584,18 +587,20 @@ app.on("ready", function () {
         detail:
           "Please check your Internet Connectivity. This app cannot run without an Internet Connection!",
       };
-
       dialog.showMessageBox(null, options, (response) => {
         console.log(response);
       });
-    }
-  });
+    });
   autoUpdater.checkForUpdatesAndNotify();
-  rpc
-    .login({ clientId })
-    .catch((err) =>
-      console.error(
-        "Oops! An Error occured while connecting to Discord RPC. Probably discord isn't installed or opened?"
-      )
+  if (store.get("discordrpcstatus") === "true") {
+    rpc.login({ clientId }).catch(() =>
+      dialog.showMessageBox(BrowserWindow.getFocusedWindow(), {
+        type: "error",
+        title: "Discord RPC Error",
+        message:
+          "Oops! An Error occured while connecting to Discord RPC. Probably discord isn't installed or opened?",
+        buttons: ["OK"],
+      })
     );
+  }
 });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ms-office-electron",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "description": "An Unofficial Microsoft Office Online Desktop Client. Free of Cost.",
   "main": "main.js",
   "repository": {
@@ -10,7 +10,7 @@
   "author": {
     "name": "Agampreet Singh",
     "email": "agam778@zohomail.in",
-    "url": "https://agamsblog.xyz/"
+    "url": "https://agam778.is-a.dev/"
   },
   "build": {
     "extraFiles": [
@@ -26,13 +26,13 @@
       "target": [
         "dmg"
       ],
-      "icon": "./assets/generated/icons/mac/icon.icns"
+      "icon": "./assets/icons/mac/icon.icns"
     },
     "win": {
       "target": [
         "nsis"
       ],
-      "icon": "./assets/generated/icons/win/icon.ico"
+      "icon": "./assets/icons/win/icon.ico"
     },
     "nsis": {
       "oneClick": false,
@@ -42,7 +42,7 @@
     },
     "linux": {
       "category": "Office",
-      "icon": "./assets/generated/icons/png",
+      "icon": "./assets/icons/png",
       "executableName": "ms-office-electron",
       "maintainer": "Agampreet Singh <agam778@zohomail.in>",
       "target": [
@@ -64,18 +64,19 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "electron": "^18.2.4",
-    "electron-builder": "^23.0.3"
+    "electron": "^21.1.0",
+    "electron-builder": "^23.3.3",
+    "eslint": "^8.24.0"
   },
   "dependencies": {
     "about-window": "^1.15.2",
-    "axios": "^0.27.2",
+    "axios": "^1.1.0",
+    "check-internet-connected": "^2.0.6",
     "discord-rpc": "^4.0.1",
-    "electron-context-menu": "^3.1.1",
+    "electron-context-menu": "^3.5.0",
     "electron-dl": "^3.3.1",
-    "electron-log": "^4.4.7",
-    "electron-store": "^8.0.1",
-    "electron-updater": "^5.0.1",
-    "is-online": "^9.0.1"
+    "electron-log": "^4.4.8",
+    "electron-store": "^8.1.0",
+    "electron-updater": "^5.2.1"
   }
 }