Update RoomProfile.jsx

Update Message.jsx
Update DeviceManage.jsx
2022-04-17 10:39:24 +05:30 · 2022-04-17 10:36:25 +05:30 · 2022-04-17 10:33:20 +05:30 · 2022-04-17 10:30:01 +05:30 · 2022-04-17 10:28:46 +05:30 · 2022-04-17 10:28:02 +05:30
217 changed files with 4603 additions and 8736 deletions
@@ -1,3 +1,2 @@
-github: ajbura
-liberapay: ajbura
 open_collective: cinny
+liberapay: ajbura
@@ -1,4 +1,4 @@
-<!-- Please read https://github.com/ajbura/cinny/blob/dev/CONTRIBUTING.md before submitting your pull request -->
+<!-- Please read https://github.com/ajbura/cinny/CONTRIBUTING.md before submitting your pull request -->

 ### Description
 <!-- Please include a summary of the change. Please also include relevant motivation and context. List any dependencies that are required for this change. -->
@@ -11,27 +11,23 @@ jobs:
      PR_NUMBER: ${{github.event.number}}
    steps:
      - name: Checkout repository
-        uses: actions/checkout@v3.0.2
-      - name: Setup node
-        uses: actions/setup-node@v3.4.1
-        with:
-          node-version: 17.9.0
+        uses: actions/checkout@v3.0.0
      - name: Build app
        run: npm ci && npm run build
      - name: Upload artifact
-        uses: actions/upload-artifact@v3.1.0
+        uses: actions/upload-artifact@v3.0.0
        with:
          name: previewbuild
          path: dist
          retention-days: 1
      - name: Get PR info
-        uses: actions/github-script@v6.1.1
+        uses: actions/github-script@v6.0.0
        with:
          script: |
            var fs = require('fs');
            fs.writeFileSync('${{github.workspace}}/pr.json', JSON.stringify(context.payload.pull_request));
      - name: Upload PR Info
-        uses: actions/upload-artifact@v3.1.0
+        uses: actions/upload-artifact@v3.0.0
        with:
          name: pr.json
          path: pr.json
@@ -6,9 +6,6 @@ on:
        - completed
 jobs:
  get-build-and-deploy:
-    permissions:
-      contents: read
-      pull-requests: write
    runs-on: ubuntu-latest
    if: >
      ${{ github.event.workflow_run.conclusion == 'success' }}
@@ -17,7 +14,7 @@ jobs:
      # workflow_run action (https://github.com/actions/download-artifact/issues/60)
      # so instead we get this mess:
      - name: Download artifact
-        uses: actions/github-script@v6.1.1
+        uses: actions/github-script@v6.0.0
        with:
          script: |
            var artifacts = await github.rest.actions.listWorkflowRunArtifacts({
@@ -51,7 +48,7 @@ jobs:
        run: unzip -d dist previewbuild.zip && rm previewbuild.zip && unzip pr.json.zip && rm pr.json.zip
      - name: Read PR Info
        id: readctx
-        uses: actions/github-script@v6.1.1
+        uses: actions/github-script@v6.0.0
        with:
          script: |
            var fs = require('fs');
@@ -59,7 +56,7 @@ jobs:
            console.log(`::set-output name=prnumber::${pr.number}`);
      - name: Deploy to Netlify
        id: netlify
-        uses: nwtgck/actions-netlify@b7c1504e00c6b8a249d1848cc1b522a4865eed99
+        uses: nwtgck/actions-netlify@v1.2.3
        with:
          publish-dir: dist
          deploy-message: "Deploy from GitHub Actions"
@@ -71,7 +68,7 @@ jobs:
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE3_ID }}
        timeout-minutes: 1
      - name: Edit PR Description
-        uses: Beakyn/gha-comment-pull-request@2167a7aee24f9e61ce76a23039f322e49a990409
+        uses: velas/pr-description@v1.0.1
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        with:
@@ -2,9 +2,8 @@ name: 'Docker check'

 on:
  pull_request:
-    paths:
+    paths: 
      - 'Dockerfile'
-      - '.github/workflows/docker-pr.yml'

 jobs:
  docker-build:
@@ -13,9 +12,9 @@ jobs:
      PR_NUMBER: ${{github.event.number}}
    steps:
      - name: Checkout repository
-        uses: actions/checkout@v3.0.2
+        uses: actions/checkout@v3.0.0
      - name: Build Docker image
-        uses: docker/build-push-action@v3.1.1
+        uses: docker/build-push-action@v2.10.0
        with:
          context: .
          push: false
@@ -9,17 +9,12 @@ jobs:
  deploy-to-netlify:
    name: 'Deploy'
    runs-on: ubuntu-latest
-    permissions:
-      contents: read
+
    steps:
      - name: Checkout repository
-        uses: actions/checkout@v3.0.2
-      - name: Setup node
-        uses: actions/setup-node@v3.4.1
-        with:
-          node-version: 17.9.0
+        uses: actions/checkout@v3.0.0
      - name: Build and deploy to Netlify
-        uses: jsmrcaga/action-netlify-deploy@53de32e559b0b3833615b9788c7a090cd2fddb03
+        uses: jsmrcaga/action-netlify-deploy@v1.7.2
        with:
          install_command: "npm ci"
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
@@ -5,56 +5,14 @@ on:
    types: [published]

 jobs:
-  create-release-tar:
-    name: 'Create release tar'
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v3.0.2
-      - name: Setup node
-        uses: actions/setup-node@v3.4.1
-        with:
-          node-version: 17.9.0
-      - name: Build
-        run: |
-          npm ci
-          npm run build
-      - name: Get version from tag
-        id: vars
-        run: echo ::set-output name=tag::${GITHUB_REF#refs/*/}
-      - name: Create tar.gz
-        run: tar -czvf cinny-${{ steps.vars.outputs.tag }}.tar.gz dist
-      - name: Sign tar.gz
-        run: |
-          echo '${{ secrets.GNUPG_KEY }}' | gpg --batch --import
-          # Sadly a few lines in the private key match a few lines in the public key,
-          # As a result just --export --armor gives us a few lines replaced with ***
-          # making it useless for importing the signing key. Instead, we dump it as
-          # non-armored and hex-encode it so that its printable.
-          echo "PGP Signing key, in raw PGP format in hex. Import with cat ... | xxd -r -p - | gpg --import"
-          gpg --export | xxd -p
-          echo '${{ secrets.GNUPG_PASSPHRASE }}' | gpg --batch --yes --pinentry-mode loopback --passphrase-fd 0 --armor --detach-sign cinny-${{ steps.vars.outputs.tag }}.tar.gz
-      - name: Upload tagged release
-        uses: softprops/action-gh-release@1e07f4398721186383de40550babbdf2b84acfc5
-        with:
-          files: |
-            cinny-${{ steps.vars.outputs.tag }}.tar.gz
-            cinny-${{ steps.vars.outputs.tag }}.tar.gz.asc
-
  deploy-to-netlify:
    name: 'Deploy to Netlify'
    runs-on: ubuntu-latest
-    permissions:
-      contents: read
    steps:
      - name: Checkout repository
-        uses: actions/checkout@v3.0.2
-      - name: Setup node
-        uses: actions/setup-node@v3.4.1
-        with:
-          node-version: 17.9.0
+        uses: actions/checkout@v3.0.0
      - name: Build and deploy to Netlify
-        uses: jsmrcaga/action-netlify-deploy@53de32e559b0b3833615b9788c7a090cd2fddb03
+        uses: jsmrcaga/action-netlify-deploy@v1.7.2
        with:
          install_command: "npm ci"
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
@@ -62,43 +20,37 @@ jobs:
          BUILD_DIRECTORY: "dist"
          NETLIFY_DEPLOY_MESSAGE: "Prod deploy v${{ github.ref }}"
          NETLIFY_DEPLOY_TO_PROD: true
+      - name: Get version from tag
+        id: vars
+        run: echo ::set-output name=tag::${GITHUB_REF#refs/*/}
+      - name: Create tar.gz
+        run: tar -czvf cinny-${{ steps.vars.outputs.tag }}.tar.gz dist
+      - name: Upload tagged release
+        uses: softprops/action-gh-release@v0.1.14
+        with:
+          files: |
+            cinny-${{ steps.vars.outputs.tag }}.tar.gz

-  push-to-dockerhub:
-    name: Push Docker image to Docker Hub, ghcr
+  push_to_dockerhub:
+    name: Push Docker image to Docker Hub
    runs-on: ubuntu-latest
-    permissions:
-      contents: read
-      packages: write
    steps:
      - name: Checkout repository
-        uses: actions/checkout@v3.0.2
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v2.0.0
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2.0.0
+        uses: actions/checkout@v3.0.0
      - name: Login to Docker Hub
-        uses: docker/login-action@v2.0.0
+        uses: docker/login-action@v1.14.1
        with:
          username: ${{ secrets.DOCKER_USERNAME }}
          password: ${{ secrets.DOCKER_PASSWORD }}
-      - name: Login to the Container registry
-        uses: docker/login-action@v2.0.0
-        with:
-          registry: ghcr.io
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
      - name: Extract metadata (tags, labels) for Docker
        id: meta
-        uses: docker/metadata-action@v4.0.1
+        uses: docker/metadata-action@v3.7.0
        with:
-          images: |
-            ${{ secrets.DOCKER_USERNAME }}/cinny
-            ghcr.io/${{ github.repository }}
+          images: ajbura/cinny
      - name: Build and push Docker image
-        uses: docker/build-push-action@v3.1.1
+        uses: docker/build-push-action@v2.10.0
        with:
          context: .
-          platforms: linux/amd64,linux/arm64
          push: true
          tags: ${{ steps.meta.outputs.tags }}
          labels: ${{ steps.meta.outputs.labels }}
@@ -36,9 +36,4 @@ It is not always possible to phrase every change in such a manner, but it is des

 Also, we use [ESLint](https://eslint.org/) for clean and stylistically consistent code syntax, so make sure your pull request follow it.

-**For any query or design discussion, join our [Matrix room](https://matrix.to/#/#cinny:matrix.org).**
-
-## Helpful links
- [BEM methodology](http://getbem.com/introduction/)
- [Atomic design](https://bradfrost.com/blog/post/atomic-web-design/)
- [Matrix JavaScript SDK documentation](https://matrix-org.github.io/matrix-js-sdk/19.2.0/index.html)
+**For any query or design discussion, join our [Matrix room](https://matrix.to/#/#cinny:matrix.org).**
@@ -1,5 +1,5 @@
 ## Builder
-FROM node:17.9.0-alpine3.15 as builder
+FROM node:17.8.0-alpine3.15 as builder

 WORKDIR /src

@@ -10,7 +10,7 @@ RUN npm run build


 ## App
-FROM nginx:1.23.1-alpine
+FROM nginx:1.21.6-alpine

 COPY --from=builder /src/dist /app

@@ -1,6 +1,6 @@
 MIT License

-Copyright (c) 2021-present Ajay Bura (ajbura)
+Copyright (c) 2021 Ajay Bura (ajbura) and contributors

 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -1,120 +1,65 @@
 # Cinny
-<p>
-    <a href="https://github.com/ajbura/cinny/releases">
-        <img alt="GitHub release downloads" src="https://img.shields.io/github/downloads/ajbura/cinny/total?logo=github&style=social"></a>
-    <a href="https://hub.docker.com/r/ajbura/cinny">
-        <img alt="DockerHub downloads" src="https://img.shields.io/docker/pulls/ajbura/cinny?logo=docker&style=social"></a>
-    <a href="https://fosstodon.org/@cinnyapp">
-        <img alt="Follow on Mastodon" src="https://img.shields.io/mastodon/follow/106845779685925461?domain=https%3A%2F%2Ffosstodon.org&logo=mastodon&style=social"></a>
-    <a href="https://twitter.com/intent/follow?screen_name=cinnyapp">
-        <img alt="Follow on Twitter" src="https://img.shields.io/twitter/follow/cinnyapp?logo=twitter&style=social"></a>
-    <a href="https://cinny.in/#sponsor">
-        <img alt="Sponsor Cinny" src="https://img.shields.io/opencollective/all/cinny?logo=opencollective&style=social"></a>
-</p>

-A Matrix client focusing primarily on simple, elegant and secure interface. The main goal is to have an instant messaging application that is easy on people and has a modern touch.
- [Roadmap](https://github.com/ajbura/cinny/projects/11)
+## Table of Contents
+
+- [About](#about)
+- [Getting Started](https://cinny.in)
 - [Contributing](./CONTRIBUTING.md)
+- [Roadmap](https://github.com/ajbura/cinny/projects/11)

-## Getting started
-Web app is available at https://app.cinny.in and gets updated on each new release. The `dev` branch is continuously deployed at https://dev.cinny.in but keep in mind that it could have things broken.
+## About <a name = "about"></a>

-You can also download our desktop app from [cinny-desktop repository](https://github.com/cinnyapp/cinny-desktop).
+Cinny is a [Matrix](https://matrix.org) client focusing primarily on simple, elegant and secure interface.

-To host Cinny on your own, download tarball of the app from [GitHub release](https://github.com/cinnyapp/cinny/releases/latest).
-You can serve the application with a webserver of your choice by simply copying `dist/` directory to the webroot. 
-To set default Homeserver on login and register page, place a customized [`config.json`](config.json) in webroot of your choice.
+![preview](https://github.com/ajbura/cinny-site/blob/master/assets/preview-light.png)

-Alternatively you can just pull the [DockerHub image](https://hub.docker.com/r/ajbura/cinny) by:
-```
-docker pull ajbura/cinny
-```
-or [ghcr image](https://github.com/cinnyapp/cinny/pkgs/container/cinny) by:
-```
-docker pull ghcr.io/cinnyapp/cinny:latest
-```
+## Building and Running

-<details>
-<summary>PGP Public Key to verify tarball</summary>
+### Running pre-compiled

-```
-----BEGIN PGP PUBLIC KEY BLOCK-----
+A tarball of pre-compiled version of the app is provided with each [release](https://github.com/ajbura/cinny/releases).
+You can serve the application with a webserver of your choosing by simply copying `dist/` directory to the webroot.

-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
-UeGsouhyuITLwEhScounZDqop+Dx
-=Zg+6
-----END PGP PUBLIC KEY BLOCK-----
-```
-</details>
+### Building from source

-## Local development
-> We recommend using a version manager as versions change very quickly. You will likely need to switch 
-between multiple Node.js versions based on the needs of different projects you're working on. [NVM on windows](https://github.com/coreybutler/nvm-windows#installation--upgrades) on Windows and [nvm](https://github.com/nvm-sh/nvm) on Linux/macOS are pretty good choices. Also recommended nodejs version is 16.15.0 LTS.
+Execute the following commands to compile the app from its source code:

-Execute the following commands to start a development server:
 ```sh
 npm ci # Installs all dependencies
-npm start # Serve a development version
-```
-
-To build the app:
-```sh
 npm run build # Compiles the app into the dist/ directory
 ```

+You can then copy the files to a webserver's webroot of your choice.
+
+To serve a development version of the app locally for testing, you may also use the command `npm start`.
+
 ### Running with Docker
+
 This repository includes a Dockerfile, which builds the application from source and serves it with Nginx on port 80. To
 use this locally, you can build the container like so:
+
 ```
 docker build -t cinny:latest .
 ```

 You can then run the container you've built with a command similar to this:
+
 ```
 docker run -p 8080:80 cinny:latest
 ```

-This will forward your `localhost` port 8080 to the container's port 80. You can visit the app in your browser by navigating to `http://localhost:8080`.
+This will forward your `localhost` port 8080 to the container's port 80. You can visit the app in your browser by
+navigating to `http://localhost:8080`.

+Alternatively you can just pull the [DockerHub image](https://hub.docker.com/r/ajbura/cinny) by `docker pull ajbura/cinny`.
+
+### Configuring default Homeserver
+
+To set default Homeserver on login and register page, place a customized [`config.json`](config.json) in webroot of your choice.

 ## License

-Copyright (c) 2021-present Ajay Bura (ajbura)
+Copyright (c) 2021 Ajay Bura (ajbura) and contributors

 Code licensed under the MIT License: <http://opensource.org/licenses/MIT>

@@ -1,11 +1,11 @@
 {
-  "defaultHomeserver": 3,
+  "defaultHomeserver": 4,
  "homeserverList": [
+    "converser.eu",
    "envs.net",
    "halogen.city",
    "kde.org",
    "matrix.org",
-    "mozilla.org"
-  ],
-  "allowCustomHomeservers": true
-}
+    "chat.mozilla.org"
+  ]
+}
@@ -1,11 +1,11 @@
 {
  "name": "cinny",
-  "version": "2.1.2",
+  "version": "1.8.2",
  "description": "Yet another matrix client",
  "main": "index.js",
  "engines": {
-    "npm": ">=6.14.8 <=8.5.5",
-    "node": ">=14.15.0 <=17.9.0"
+    "npm": ">=6.14.11",
+    "node": ">=14.6.0"
  },
  "scripts": {
    "start": "webpack serve --config ./webpack.dev.js --open",
@@ -15,69 +15,71 @@
  "author": "Ajay Bura",
  "license": "MIT",
  "dependencies": {
-    "@khanacademy/simple-markdown": "^0.8.3",
-    "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.12.tgz",
+    "@fontsource/inter": "^4.5.7",
+    "@fontsource/roboto": "^4.5.5",
+    "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.8.tgz",
    "@tippyjs/react": "^4.2.6",
    "babel-polyfill": "^6.26.0",
-    "blurhash": "^1.1.5",
    "browser-encrypt-attachment": "^0.3.0",
    "dateformat": "^5.0.3",
    "emojibase-data": "^7.0.1",
    "file-saver": "^2.0.5",
    "flux": "^4.0.3",
    "formik": "^2.2.9",
-    "html-react-parser": "^3.0.1",
-    "katex": "^0.16.0",
-    "linkify-html": "^4.0.0-beta.5",
-    "linkifyjs": "^4.0.0-beta.5",
-    "matrix-js-sdk": "^19.2.0",
+    "html-react-parser": "^1.4.9",
+    "linkifyjs": "^2.1.9",
+    "matrix-js-sdk": "^17.0.0",
+    "micromark": "^3.0.10",
+    "micromark-extension-gfm": "^2.0.1",
+    "micromark-util-chunked": "^1.0.0",
+    "micromark-util-resolve-all": "^1.0.0",
+    "micromark-util-symbol": "^1.0.1",
    "prop-types": "^15.8.1",
    "react": "^17.0.2",
    "react-autosize-textarea": "^7.1.0",
-    "react-blurhash": "^0.1.3",
    "react-dnd": "^15.1.2",
    "react-dnd-html5-backend": "^15.1.3",
    "react-dom": "^17.0.2",
    "react-google-recaptcha": "^2.1.0",
-    "react-modal": "^3.15.1",
-    "sanitize-html": "^2.7.1",
+    "react-modal": "^3.14.4",
+    "sanitize-html": "^2.7.0",
    "tippy.js": "^6.3.7",
    "twemoji": "^14.0.2"
  },
  "devDependencies": {
-    "@babel/core": "^7.18.10",
-    "@babel/preset-env": "^7.18.10",
-    "@babel/preset-react": "^7.18.6",
+    "@babel/core": "^7.17.9",
+    "@babel/preset-env": "^7.16.11",
+    "@babel/preset-react": "^7.16.7",
    "assert": "^2.0.0",
-    "babel-loader": "^8.2.5",
+    "babel-loader": "^8.2.4",
    "browserify-fs": "^1.0.0",
    "buffer": "^6.0.3",
    "clean-webpack-plugin": "^4.0.0",
-    "copy-webpack-plugin": "^11.0.0",
+    "copy-webpack-plugin": "^10.2.4",
    "crypto-browserify": "^3.12.0",
    "css-loader": "^6.7.1",
-    "css-minimizer-webpack-plugin": "^4.0.0",
-    "eslint": "^8.22.0",
+    "css-minimizer-webpack-plugin": "^3.4.1",
+    "eslint": "^8.13.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jsx-a11y": "^6.6.1",
-    "eslint-plugin-react": "^7.30.1",
-    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-react-hooks": "^4.2.0",
    "favicons": "^6.2.2",
    "favicons-webpack-plugin": "^5.0.2",
-    "html-loader": "^4.1.0",
+    "html-loader": "^3.1.0",
    "html-webpack-plugin": "^5.3.1",
-    "mini-css-extract-plugin": "^2.6.1",
+    "mini-css-extract-plugin": "^2.6.0",
    "path-browserify": "^1.0.1",
-    "sass": "^1.54.4",
-    "sass-loader": "^13.0.2",
+    "sass": "^1.50.0",
+    "sass-loader": "^12.6.0",
    "stream-browserify": "^3.0.0",
    "style-loader": "^3.3.1",
    "url": "^0.11.0",
    "util": "^0.12.4",
-    "webpack": "^5.74.0",
-    "webpack-cli": "^4.10.0",
-    "webpack-dev-server": "^4.10.0",
+    "webpack": "^5.72.0",
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^4.8.1",
    "webpack-merge": "^5.7.3"
  }
 }
@@ -1,41 +0,0 @@
-# Installing Webfonts
-Follow these simple Steps.
-
-## 1.
-Put `supreme/` Folder into a Folder called `fonts/`.
-
-## 2.
-Put `supreme.css` into your `css/` Folder.
-
-## 3. (Optional)
-You may adapt the `url('path')` in `supreme.css` depends on your Website Filesystem.
-
-## 4.
-Import `supreme.css` at the top of you main Stylesheet.
-
-```
-@import url('supreme.css');
-```
-
-## 5.
-
-
-```
-font-family: 'Supreme-Variable';
-font-family: 'Supreme-VariableItalic';
-font-family: 'Supreme-Thin';
-font-family: 'Supreme-ThinItalic';
-font-family: 'Supreme-Extralight';
-font-family: 'Supreme-ExtralightItalic';
-font-family: 'Supreme-Light';
-font-family: 'Supreme-LightItalic';
-font-family: 'Supreme-Regular';
-font-family: 'Supreme-Italic';
-font-family: 'Supreme-Medium';
-font-family: 'Supreme-MediumItalic';
-font-family: 'Supreme-Bold';
-font-family: 'Supreme-BoldItalic';
-font-family: 'Supreme-Extrabold';
-font-family: 'Supreme-ExtraboldItalic';
-```
-
@@ -1,175 +0,0 @@
-@font-face {
-  font-family: 'Supreme-Variable';
-  src: url('../fonts/Supreme-Variable.woff2') format('woff2'),
-       url('../fonts/Supreme-Variable.woff') format('woff'),
-       url('../fonts/Supreme-Variable.ttf') format('truetype');
-       font-weight: 100 800;
-       font-display: swap;
-       font-style: normal;
-}
-
-
-@font-face {
-  font-family: 'Supreme-VariableItalic';
-  src: url('../fonts/Supreme-VariableItalic.woff2') format('woff2'),
-       url('../fonts/Supreme-VariableItalic.woff') format('woff'),
-       url('../fonts/Supreme-VariableItalic.ttf') format('truetype');
-       font-weight: 100 800;
-       font-display: swap;
-       font-style: italic;
-}
-
-
-@font-face {
-  font-family: 'Supreme-Thin';
-  src: url('../fonts/Supreme-Thin.woff2') format('woff2'),
-       url('../fonts/Supreme-Thin.woff') format('woff'),
-       url('../fonts/Supreme-Thin.ttf') format('truetype');
-       font-weight: 100;
-       font-display: swap;
-       font-style: normal;
-}
-
-
-@font-face {
-  font-family: 'Supreme-ThinItalic';
-  src: url('../fonts/Supreme-ThinItalic.woff2') format('woff2'),
-       url('../fonts/Supreme-ThinItalic.woff') format('woff'),
-       url('../fonts/Supreme-ThinItalic.ttf') format('truetype');
-       font-weight: 100;
-       font-display: swap;
-       font-style: italic;
-}
-
-
-@font-face {
-  font-family: 'Supreme-Extralight';
-  src: url('../fonts/Supreme-Extralight.woff2') format('woff2'),
-       url('../fonts/Supreme-Extralight.woff') format('woff'),
-       url('../fonts/Supreme-Extralight.ttf') format('truetype');
-       font-weight: 200;
-       font-display: swap;
-       font-style: normal;
-}
-
-
-@font-face {
-  font-family: 'Supreme-ExtralightItalic';
-  src: url('../fonts/Supreme-ExtralightItalic.woff2') format('woff2'),
-       url('../fonts/Supreme-ExtralightItalic.woff') format('woff'),
-       url('../fonts/Supreme-ExtralightItalic.ttf') format('truetype');
-       font-weight: 200;
-       font-display: swap;
-       font-style: italic;
-}
-
-
-@font-face {
-  font-family: 'Supreme-Light';
-  src: url('../fonts/Supreme-Light.woff2') format('woff2'),
-       url('../fonts/Supreme-Light.woff') format('woff'),
-       url('../fonts/Supreme-Light.ttf') format('truetype');
-       font-weight: 300;
-       font-display: swap;
-       font-style: normal;
-}
-
-
-@font-face {
-  font-family: 'Supreme-LightItalic';
-  src: url('../fonts/Supreme-LightItalic.woff2') format('woff2'),
-       url('../fonts/Supreme-LightItalic.woff') format('woff'),
-       url('../fonts/Supreme-LightItalic.ttf') format('truetype');
-       font-weight: 300;
-       font-display: swap;
-       font-style: italic;
-}
-
-
-@font-face {
-  font-family: 'Supreme-Regular';
-  src: url('../fonts/Supreme-Regular.woff2') format('woff2'),
-       url('../fonts/Supreme-Regular.woff') format('woff'),
-       url('../fonts/Supreme-Regular.ttf') format('truetype');
-       font-weight: 400;
-       font-display: swap;
-       font-style: normal;
-}
-
-
-@font-face {
-  font-family: 'Supreme-Italic';
-  src: url('../fonts/Supreme-Italic.woff2') format('woff2'),
-       url('../fonts/Supreme-Italic.woff') format('woff'),
-       url('../fonts/Supreme-Italic.ttf') format('truetype');
-       font-weight: 400;
-       font-display: swap;
-       font-style: italic;
-}
-
-
-@font-face {
-  font-family: 'Supreme-Medium';
-  src: url('../fonts/Supreme-Medium.woff2') format('woff2'),
-       url('../fonts/Supreme-Medium.woff') format('woff'),
-       url('../fonts/Supreme-Medium.ttf') format('truetype');
-       font-weight: 500;
-       font-display: swap;
-       font-style: normal;
-}
-
-
-@font-face {
-  font-family: 'Supreme-MediumItalic';
-  src: url('../fonts/Supreme-MediumItalic.woff2') format('woff2'),
-       url('../fonts/Supreme-MediumItalic.woff') format('woff'),
-       url('../fonts/Supreme-MediumItalic.ttf') format('truetype');
-       font-weight: 500;
-       font-display: swap;
-       font-style: italic;
-}
-
-
-@font-face {
-  font-family: 'Supreme-Bold';
-  src: url('../fonts/Supreme-Bold.woff2') format('woff2'),
-       url('../fonts/Supreme-Bold.woff') format('woff'),
-       url('../fonts/Supreme-Bold.ttf') format('truetype');
-       font-weight: 700;
-       font-display: swap;
-       font-style: normal;
-}
-
-
-@font-face {
-  font-family: 'Supreme-BoldItalic';
-  src: url('../fonts/Supreme-BoldItalic.woff2') format('woff2'),
-       url('../fonts/Supreme-BoldItalic.woff') format('woff'),
-       url('../fonts/Supreme-BoldItalic.ttf') format('truetype');
-       font-weight: 700;
-       font-display: swap;
-       font-style: italic;
-}
-
-
-@font-face {
-  font-family: 'Supreme-Extrabold';
-  src: url('../fonts/Supreme-Extrabold.woff2') format('woff2'),
-       url('../fonts/Supreme-Extrabold.woff') format('woff'),
-       url('../fonts/Supreme-Extrabold.ttf') format('truetype');
-       font-weight: 800;
-       font-display: swap;
-       font-style: normal;
-}
-
-
-@font-face {
-  font-family: 'Supreme-ExtraboldItalic';
-  src: url('../fonts/Supreme-ExtraboldItalic.woff2') format('woff2'),
-       url('../fonts/Supreme-ExtraboldItalic.woff') format('woff'),
-       url('../fonts/Supreme-ExtraboldItalic.ttf') format('truetype');
-       font-weight: 800;
-       font-display: swap;
-       font-style: italic;
-}
-
@@ -18,11 +18,5 @@
 </head>
 <body id="appBody">
    <div id="root"></div>
-    <audio id="notificationSound">
-        <source src="./sound/notification.ogg" type="audio/ogg" />
-    </audio>
-    <audio id="inviteSound">
-        <source src="./sound/invite.ogg" type="audio/ogg" />
-    </audio>
 </body>
 </html>
@@ -1,4 +1,4 @@
-Copyright (c) 2021-present Ajay Bura (ajbura)
+Graphics (c) by Ajay Bura (ajbura)

 Graphic content is licensed under a
 Creative Commons Attribution 4.0 International License.
@@ -1,4 +1,12 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14 3V5H17.8L12.9 9.9L14.3 11.3L19 6.6V10.2H21V3H14Z" fill="black"/>
-<path d="M5 5H10V3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V14.2H19V19H5V5Z" fill="black"/>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<polygon points="14,3 14,5 17.8,5 12.9,9.9 14.3,11.3 19,6.6 19,10.2 21,10.2 21,3 	"/>
+	<path d="M3,10.2h2V5h5V3H5C3.9,3,3,3.9,3,5V10.2z"/>
+	<path d="M5,14.2H3V19c0,1.1,0.9,2,2,2h5v-2H5V14.2z"/>
+	<path d="M19,19h-5v2h5c1.1,0,2-0.9,2-2v-4.8h-2V19z"/>
+</g>
 </svg>
@@ -1,4 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M4.92896 3.51471L3.51474 4.92892L5.97515 7.38933C4.46742 8.5776 3.32116 9.93994 2.7 10.8C2.1 11.5 2.1 12.5 2.7 13.2C4 15 7.6 19 12 19C13.5709 19 15.0398 18.4902 16.3384 17.7526L19.0711 20.4853L20.4853 19.0711L4.92896 3.51471ZM4.2 12C4.68291 11.3561 5.85678 9.9637 7.39721 8.81139L9.29238 10.7066C9.10496 11.0982 9 11.5368 9 12C9 13.6569 10.3431 15 12 15C12.4632 15 12.9018 14.895 13.2934 14.7076L14.8573 16.2715C13.9566 16.7128 12.9896 17 12 17C8.4 17 5.1 13.2 4.2 12Z" fill="black"/>
-<path d="M9.6226 5.37995L11.2906 7.04797C11.5254 7.01661 11.762 7 12 7C15.6 7 18.9 10.8 19.8 12C19.493 12.4094 18.9066 13.1213 18.1244 13.8817L19.5194 15.2768C20.2973 14.4974 20.9049 13.7471 21.3 13.2C21.9 12.5 21.9 11.5 21.3 10.8C20 9 16.4 5 12 5C11.1762 5 10.3805 5.14021 9.6226 5.37995Z" fill="black"/>
-</svg>
@@ -1,4 +1,13 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12 19C7.6 19 4 15 2.7 13.2C2.1 12.5 2.1 11.5 2.7 10.8C4 9 7.6 5 12 5C16.4 5 20 9 21.3 10.8C21.9 11.5 21.9 12.5 21.3 13.2C20 15 16.4 19 12 19ZM12 7C8.4 7 5.1 10.8 4.2 12C5.1 13.2 8.4 17 12 17C15.6 17 18.9 13.2 19.8 12C18.9 10.8 15.6 7 12 7Z" fill="black"/>
-<path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" fill="black"/>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<g>
+		<path d="M12,19c-4.4,0-8-4-9.3-5.8c-0.6-0.7-0.6-1.7,0-2.4C4,9,7.6,5,12,5s8,4,9.3,5.8c0.6,0.7,0.6,1.7,0,2.4C20,15,16.4,19,12,19
+			z M12,7c-3.6,0-6.9,3.8-7.8,5c0.9,1.2,4.2,5,7.8,5s6.9-3.8,7.8-5C18.9,10.8,15.6,7,12,7z"/>
+	</g>
+	<circle cx="12" cy="12" r="3"/>
+</g>
 </svg>
@@ -1,4 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M16 3L21 8V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V5C3 3.89543 3.89543 3 5 3H16ZM19 9H17C15.8954 9 15 8.10457 15 7V5H5V19H19V9Z" fill="black"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 13.6569 10.3431 15 12 15C13.6569 15 15 13.6569 15 12H17C17 14.7614 14.7614 17 12 17C9.23858 17 7 14.7614 7 12H9Z" fill="black"/>
-</svg>
@@ -26,10 +26,10 @@
  &--icon {
    @include dir.side(padding, var(--sp-tight), var(--sp-loose));

-  }
-  .ic-raw {
-    @include dir.side(margin, 0, var(--sp-extra-tight));
-    flex-shrink: 0;
+    .ic-raw {
+      @include dir.side(margin, 0, var(--sp-extra-tight));
+      flex-shrink: 0;
+    }
  }
 }

@@ -11,12 +11,11 @@ const IconButton = React.forwardRef(({
  variant, size, type,
  tooltip, tooltipPlacement, src,
  onClick, tabIndex, disabled, isImage,
-  className,
 }, ref) => {
  const btn = (
    <button
      ref={ref}
-      className={`ic-btn ic-btn-${variant} ${className}`}
+      className={`ic-btn ic-btn-${variant}`}
      onMouseUp={(e) => blurOnBubbling(e, `.ic-btn-${variant}`)}
      onClick={onClick}
      // eslint-disable-next-line react/button-has-type
@@ -48,7 +47,6 @@ IconButton.defaultProps = {
  tabIndex: 0,
  disabled: false,
  isImage: false,
-  className: '',
 };

 IconButton.propTypes = {
@@ -62,7 +60,6 @@ IconButton.propTypes = {
  tabIndex: PropTypes.number,
  disabled: PropTypes.bool,
  isImage: PropTypes.bool,
-  className: PropTypes.string,
 };

 export default IconButton;
@@ -1,59 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './InfoCard.scss';
-
-import Text from '../text/Text';
-import RawIcon from '../system-icons/RawIcon';
-import IconButton from '../button/IconButton';
-
-import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
-
-function InfoCard({
-  className, style,
-  variant, iconSrc,
-  title, content,
-  rounded, requestClose,
-}) {
-  const classes = [`info-card info-card--${variant}`];
-  if (rounded) classes.push('info-card--rounded');
-  if (className) classes.push(className);
-  return (
-    <div className={classes.join(' ')} style={style}>
-      {iconSrc && (
-        <div className="info-card__icon">
-          <RawIcon color={`var(--ic-${variant}-high)`} src={iconSrc} />
-        </div>
-      )}
-      <div className="info-card__content">
-        <Text>{title}</Text>
-        {content}
-      </div>
-      {requestClose && (
-        <IconButton src={CrossIC} variant={variant} onClick={requestClose} />
-      )}
-    </div>
-  );
-}
-
-InfoCard.defaultProps = {
-  className: null,
-  style: null,
-  variant: 'surface',
-  iconSrc: null,
-  content: null,
-  rounded: false,
-  requestClose: null,
-};
-
-InfoCard.propTypes = {
-  className: PropTypes.string,
-  style: PropTypes.shape({}),
-  variant: PropTypes.oneOf(['surface', 'primary', 'positive', 'caution', 'danger']),
-  iconSrc: PropTypes.string,
-  title: PropTypes.string.isRequired,
-  content: PropTypes.node,
-  rounded: PropTypes.bool,
-  requestClose: PropTypes.func,
-};
-
-export default InfoCard;
@@ -1,79 +0,0 @@
-@use '.././../partials/flex';
-@use '.././../partials/dir';
-
-.info-card {
-  display: flex;
-  align-items: flex-start;
-  line-height: 0;
-  padding: var(--sp-tight);
-  @include dir.prop(border-left, 4px solid transparent, none);
-  @include dir.prop(border-right, none, 4px solid transparent);
-
-  & > .ic-btn {
-    padding: 0;
-    border-radius: 4;
-  }
-
-  &__content {
-    margin: 0 var(--sp-tight);
-    @extend .cp-fx__item-one;
-
-    & > *:nth-child(2) {
-      margin-top: var(--sp-ultra-tight);
-    }
-  }
-
-  &--rounded {
-    @include dir.prop(
-      border-radius,
-      0 var(--bo-radius) var(--bo-radius) 0,
-      var(--bo-radius) 0 0 var(--bo-radius)
-    );
-  }
-
-  &--surface {
-    border-color: var(--bg-surface-border);
-    background-color: var(--bg-surface-hover);
-
-  }
-  &--primary {
-    border-color: var(--bg-primary);
-    background-color: var(--bg-primary-hover);
-    & .text {
-      color: var(--tc-primary-high);
-      &-b3 {
-        color: var(--tc-primary-normal);
-      }
-    }
-  }
-  &--positive {
-    border-color: var(--bg-positive-border);
-    background-color: var(--bg-positive-hover);
-    & .text {
-      color: var(--tc-positive-high);
-      &-b3 {
-        color: var(--tc-positive-normal);
-      }
-    }
-  }
-  &--caution {
-    border-color: var(--bg-caution-border);
-    background-color: var(--bg-caution-hover);
-    & .text {
-      color: var(--tc-caution-high);
-      &-b3 {
-        color: var(--tc-caution-normal);
-      }
-    }
-  }
-  &--danger {
-    border-color: var(--bg-danger-border);
-    background-color: var(--bg-danger-hover);
-    & .text {
-      color: var(--tc-danger-high);
-      &-b3 {
-        color: var(--tc-danger-normal);
-      }
-    }
-  }
-}
@@ -16,7 +16,6 @@ function Input({
      { resizable
        ? (
          <TextareaAutosize
-            dir="auto"
            style={{ minHeight: `${minHeight}px` }}
            name={name}
            id={id}
@@ -35,7 +34,6 @@ function Input({
          />
        ) : (
          <input
-            dir="auto"
            ref={forwardRef}
            id={id}
            name={name}
@@ -1,32 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-
-import katex from 'katex';
-import 'katex/dist/katex.min.css';
-
-import 'katex/dist/contrib/copy-tex';
-
-const Math = React.memo(({
-  content, throwOnError, errorColor, displayMode,
-}) => {
-  const ref = useRef(null);
-
-  useEffect(() => {
-    katex.render(content, ref.current, { throwOnError, errorColor, displayMode });
-  }, [content, throwOnError, errorColor, displayMode]);
-
-  return <span ref={ref} />;
-});
-Math.defaultProps = {
-  throwOnError: null,
-  errorColor: null,
-  displayMode: null,
-};
-Math.propTypes = {
-  content: PropTypes.string.isRequired,
-  throwOnError: PropTypes.bool,
-  errorColor: PropTypes.string,
-  displayMode: PropTypes.bool,
-};
-
-export default Math;
@@ -42,6 +42,7 @@ function RawModal({
      shouldCloseOnEsc={closeFromOutside}
      shouldCloseOnOverlayClick={closeFromOutside}
      shouldReturnFocusAfterClose={false}
+      closeTimeoutMS={300}
    >
      {children}
    </Modal>
@@ -1,9 +1,33 @@
+.ReactModal__Overlay {
+  opacity: 0;
+  transition: opacity 200ms var(--fluid-slide-up);
+}
+.ReactModal__Overlay--after-open{
+  opacity: 1;
+}
+.ReactModal__Overlay--before-close{
+  opacity: 0;
+}
+
+.ReactModal__Content {
+  transform: translateY(100%);
+  transition: transform 200ms var(--fluid-slide-up);
+}
+
+.ReactModal__Content--after-open{
+  transform: translateY(0);
+}
+
+.ReactModal__Content--before-close{
+  transform: translateY(100%);
+}
+
 .raw-modal {
  --small-modal-width: 525px;
  --medium-modal-width: 712px;
  --large-modal-width: 1024px;

-  position: relative;
+
  width: 100%;
  max-height: 100%;
  border-radius: var(--bo-radius);
@@ -36,31 +60,4 @@
    height: 100%;
    background-color: var(--bg-overlay);
  }
-}
-
-.ReactModal__Overlay {
-  animation: raw-modal--overlay 150ms;
-}
-
-.ReactModal__Content {
-  animation: raw-modal--content 150ms;
-}
-
-@keyframes raw-modal--content {
-  0% {
-    transform: translateY(100px);
-    opacity: .5;
-  }
-  100% {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-@keyframes raw-modal--overlay {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
+}
@@ -1,44 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import dateFormat from 'dateformat';
-import { isInSameDay } from '../../../util/common';
-
-function Time({ timestamp, fullTime }) {
-  const date = new Date(timestamp);
-
-  const formattedFullTime = dateFormat(date, 'dd mmmm yyyy, hh:MM TT');
-  let formattedDate = formattedFullTime;
-
-  if (!fullTime) {
-    const compareDate = new Date();
-    const isToday = isInSameDay(date, compareDate);
-    compareDate.setDate(compareDate.getDate() - 1);
-    const isYesterday = isInSameDay(date, compareDate);
-
-    formattedDate = dateFormat(date, isToday || isYesterday ? 'hh:MM TT' : 'dd/mm/yyyy');
-    if (isYesterday) {
-      formattedDate = `Yesterday, ${formattedDate}`;
-    }
-  }
-
-  return (
-    <time
-      dateTime={date.toISOString()}
-      title={formattedFullTime}
-    >
-      {formattedDate}
-    </time>
-  );
-}
-
-Time.defaultProps = {
-  fullTime: false,
-};
-
-Time.propTypes = {
-  timestamp: PropTypes.number.isRequired,
-  fullTime: PropTypes.bool,
-};
-
-export default Time;
@@ -1,25 +0,0 @@
-/* eslint-disable import/prefer-default-export */
-import { useState, useEffect } from 'react';
-
-import initMatrix from '../../client/initMatrix';
-import { hasCrossSigningAccountData } from '../../util/matrixUtil';
-
-export function useCrossSigningStatus() {
-  const mx = initMatrix.matrixClient;
-  const [isCSEnabled, setIsCSEnabled] = useState(hasCrossSigningAccountData());
-
-  useEffect(() => {
-    if (isCSEnabled) return null;
-    const handleAccountData = (event) => {
-      if (event.getType() === 'm.cross_signing.master') {
-        setIsCSEnabled(true);
-      }
-    };
-
-    mx.on('accountData', handleAccountData);
-    return () => {
-      mx.removeListener('accountData', handleAccountData);
-    };
-  }, [isCSEnabled === false]);
-  return isCSEnabled;
-}
@@ -1,32 +0,0 @@
-/* eslint-disable import/prefer-default-export */
-import { useState, useEffect } from 'react';
-
-import initMatrix from '../../client/initMatrix';
-
-export function useDeviceList() {
-  const mx = initMatrix.matrixClient;
-  const [deviceList, setDeviceList] = useState(null);
-
-  useEffect(() => {
-    let isMounted = true;
-
-    const updateDevices = () => mx.getDevices().then((data) => {
-      if (!isMounted) return;
-      setDeviceList(data.devices || []);
-    });
-    updateDevices();
-
-    const handleDevicesUpdate = (users) => {
-      if (users.includes(mx.getUserId())) {
-        updateDevices();
-      }
-    };
-
-    mx.on('crypto.devicesUpdated', handleDevicesUpdate);
-    return () => {
-      mx.removeListener('crypto.devicesUpdated', handleDevicesUpdate);
-      isMounted = false;
-    };
-  }, []);
-  return deviceList;
-}
@@ -1,58 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './ConfirmDialog.scss';
-
-import { openReusableDialog } from '../../../client/action/navigation';
-
-import Text from '../../atoms/text/Text';
-import Button from '../../atoms/button/Button';
-
-function ConfirmDialog({
-  desc, actionTitle, actionType, onComplete,
-}) {
-  return (
-    <div className="confirm-dialog">
-      <Text>{desc}</Text>
-      <div className="confirm-dialog__btn">
-        <Button variant={actionType} onClick={() => onComplete(true)}>{actionTitle}</Button>
-        <Button onClick={() => onComplete(false)}>Cancel</Button>
-      </div>
-    </div>
-  );
-}
-ConfirmDialog.propTypes = {
-  desc: PropTypes.string.isRequired,
-  actionTitle: PropTypes.string.isRequired,
-  actionType: PropTypes.oneOf(['primary', 'positive', 'danger', 'caution']).isRequired,
-  onComplete: PropTypes.func.isRequired,
-};
-
-/**
- * @param {string} title title of confirm dialog
- * @param {string} desc description of confirm dialog
- * @param {string} actionTitle title of main action to take
- * @param {'primary' | 'positive' | 'danger' | 'caution'} actionType type of action. default=primary
- * @return {Promise<boolean>} does it get's confirmed or not
- */
-// eslint-disable-next-line import/prefer-default-export
-export const confirmDialog = (title, desc, actionTitle, actionType = 'primary') => new Promise((resolve) => {
-  let isCompleted = false;
-  openReusableDialog(
-    <Text variant="s1" weight="medium">{title}</Text>,
-    (requestClose) => (
-      <ConfirmDialog
-        desc={desc}
-        actionTitle={actionTitle}
-        actionType={actionType}
-        onComplete={(isConfirmed) => {
-          isCompleted = true;
-          resolve(isConfirmed);
-          requestClose();
-        }}
-      />
-    ),
-    () => {
-      if (!isCompleted) resolve(false);
-    },
-  );
-});
@@ -1,11 +0,0 @@
-.confirm-dialog {
-  padding: var(--sp-normal);
-
-  & > .text {
-    padding-bottom: var(--sp-normal);
-  }
-  &__btn {
-    display: flex;
-    gap: var(--sp-normal);
-  }
-}
Author	SHA1	Message	Date
Krishan	f4c0836756	Update RoomProfile.jsx	2022-04-17 10:39:24 +05:30
Krishan	9b5f71cf6c	Update Message.jsx	2022-04-17 10:36:25 +05:30
Krishan	746c5e36bd	Update DeviceManage.jsx	2022-04-17 10:33:20 +05:30
Krishan	0b12173e74	Update Message.jsx	2022-04-17 10:30:01 +05:30
Krishan	7dd2546b0f	Update SpaceSettings.jsx	2022-04-17 10:28:46 +05:30
Krishan	7c72679806	Update RoomSettings.jsx	2022-04-17 10:28:02 +05:30
Krishan	a33178adac	Update ProfileEditor.jsx	2022-04-17 10:26:38 +05:30
Krishan	4a2bb36458	Update RoomProfile.jsx	2022-04-17 10:25:30 +05:30
Krishan	3b01cb5329	Update RoomOptions.jsx	2022-04-17 10:23:29 +05:30
Krishan	8afea0ca2f	Update SpaceOptions.jsx	2022-04-17 10:22:01 +05:30