Merge pull request #191 from LubricantJam/main

Further Mobile Optimisations
3 years ago · e814af1af5
parent fad507d2dd ecbff16a88
commit e814af1af5
12 changed files with 459 additions and 598 deletions
--- a/css/base.css
+++ b/css/base.css
@ -31,10 +31,6 @@
    background: #202020;
 }

-.dark .code {
-    color: var(--color-content-high);
-}
-
 html:not(.dark) .card.\@low:not(.\~neutral):not(.\~positive):not(.\~urge):not(.\~warning):not(.\~info):not(.\~critical) {
    --color-fill: va(--color-fill);
    --color-content: var(--color-content);
@ -92,11 +88,6 @@ html:not(.dark) .card.\@low:not(.\~neutral):not(.\~positive):not(.\~urge):not(.\
    padding: var(--spacing-4,1rem);
 }

-.modal-content .banner {
-    margin-left: calc(-1 * var(--spacing-4,1rem) - 0.5%); /* Not sure why this is necessary */
-    margin-right: calc(-1 * var(--spacing-4,1rem) - 0.5%);
-}
-
 div.card:contains(section.banner.footer) {
    padding-bottom: 0px;
 }
@ -133,20 +124,11 @@ div.card:contains(section.banner.footer) {
    align-items: top;
 }

-.flex {
-    display: flex;
-}
-
 .flex-expand {
    display: flex;
    justify-content: space-between;
 }

-.flex-row {
-    display: flex;
-    flex-direction: row;
-}
-
 .flex-row-group {
    display: block;
    flex-grow: 1;
--- a/css/modal.css
+++ b/css/modal.css
@ -10,56 +10,6 @@
    background-color: rgba(0,0,0,40%);
 }

-.modal-shown {
-    display: block;
-}
-
-@keyframes modal-hide {
-    from { opacity: 1; }
-    to { opacity: 0; }
-}
-
-.modal-hiding {
-    animation: modal-hide 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-}
-
-@keyframes modal-content-show {
-    from {
-        opacity: 0;
-        top: -6rem;
-    }
-    to {
-        opacity: 1;
-        top: 0;
-    }
-}
-
-.modal-content {
-    position: relative;
-    margin: 10% auto;
-    width: 30%;
-}
-
-.modal-content.wide {
-    width: 60%;
-}
-
-.modal-shown .modal-content {
-    animation: modal-content-show 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-}
-
-@media screen and (max-width: 1000px) {
-    .modal-content.wide {
-        width: 75%;
-    }
-}
-
-@media screen and (max-width: 400px) {
-    .modal-content, .modal-content.wide {
-        width: 90%;
-    }
-}
-
 .modal-close {
    float: right;
    color: #aaa;
--- a/html/admin.html
+++ b/html/admin.html
@ -23,7 +23,7 @@
    </head>
    <body class="max-w-full overflow-x-hidden section">
        <div id="modal-login" class="modal">
-            <form class="modal-content card" id="form-login" href="">
+            <form class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3" id="form-login" href="">
                <span class="heading">{{ .strings.login }}</span>
                <input type="text" class="field input ~neutral @high mt-4 mb-2" placeholder="{{ .strings.username }}" id="login-user">
                <input type="password" class="field input ~neutral @high mb-4" placeholder="{{ .strings.password }}" id="login-password">
@ -34,7 +34,7 @@
            </form>
        </div>
        <div id="modal-add-user" class="modal">
-            <form class="modal-content card" id="form-add-user" href="">
+            <form class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3" id="form-add-user" href="">
                <span class="heading">{{ .strings.newUser }} <span class="modal-close">&times;</span></span>
                <input type="text" class="field input ~neutral @high mt-4 mb-2" placeholder="{{ .strings.username }}" id="add-user-user">
                <input type="email" class="field input ~neutral @high mt-4 mb-2" placeholder="{{ .strings.emailAddress }}">
@ -46,11 +46,11 @@
            </form>
        </div>
        <div id="modal-about" class="modal">
-            <div class="modal-content content card">
+            <div class="relative mx-auto my-[10%] w-4/5 lg:w-1/3 content card">
                <img src="{{ .urlBase }}/banner.svg" class="banner header" alt="jfa-go banner">
                <span class="heading"><span class="modal-close">&times;</span></span>
-                <p>{{ .strings.version }} <span class="code font-mono bg-inherit">{{ .version }}</span></p>
-                <p>{{ .strings.commitNoun }} <span class="code font-mono bg-inherit">{{ .commit }}</span></p>
+                <p>{{ .strings.version }} <span class="text-black dark:text-white font-mono bg-inherit">{{ .version }}</span></p>
+                <p>{{ .strings.commitNoun }} <span class="text-black dark:text-white font-mono bg-inherit">{{ .commit }}</span></p>
                <div class="row col flex">
                    <a class="button ~neutral mr-2 mt-4 mb-4 lang-link" href="https://github.com/hrfee/jfa-go"><i class="ri-github-line mr-2"></i>github</a>
                    <a class="button ~urge mt-4 mb-4 mr-2 lang-link" href="https://wiki.jfa-go.com">wiki/docs</a>
@ -75,13 +75,13 @@
            </div>
        </div>
        <div id="modal-logs" class="modal">
-            <div class="modal-content wide content card">
+            <div class="relative mx-auto my-[10%] w-4/5 lg:w-2/3 content content card">
                <span class="heading">{{ .strings.logs }}<span class="modal-close">&times;</span></span>
                <pre class="monospace" id="log-area"></pre>
            </div>
        </div>
        <div id="modal-modify-user" class="modal">
-            <form class="modal-content card" id="form-modify-user" href="">
+            <form class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3" id="form-modify-user" href="">
                <span class="heading"><span id="header-modify-user"></span> <span class="modal-close">&times;</span></span>
                <p class="content my-4">{{ .strings.modifySettingsDescription }}</p>
                <div class="flex-row mb-4">
@ -111,7 +111,7 @@
            </form>
        </div>
        <div id="modal-delete-user" class="modal">
-            <form class="modal-content card" id="form-delete-user" href="">
+            <form class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3" id="form-delete-user" href="">
                <span class="heading"><span id="header-delete-user"></span> <span class="modal-close">&times;</span></span>
                <div class="content mt-8">
                    <label class="switch mb-4">
@ -127,7 +127,7 @@
            </form>
        </div>
        <div id="modal-extend-expiry" class="modal">
-            <form class="modal-content card" id="form-extend-expiry" href="">
+            <form class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3" id="form-extend-expiry" href="">
                <span class="heading"><span id="header-extend-expiry"></span> <span class="modal-close">&times;</span></span>
                <div class="content mt-8">
                    <div class="row">
@ -179,7 +179,7 @@
            </form>
        </div>
        <div id="modal-announce" class="modal">
-            <form class="modal-content wide card" id="form-announce" href="">
+            <form class="relative mx-auto my-[10%] w-4/5 lg:w-2/3 content card" id="form-announce" href="">
                <span class="heading"><span id="header-announce"></span> <span class="modal-close">&times;</span></span>
                <div class="row">
                    <div class="col card ~neutral @low">
@ -214,7 +214,7 @@
            </form>
        </div>
        <div id="modal-customize" class="modal">
-            <div class="modal-content card">
+            <div class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3">
                <span class="heading">{{ .strings.customizeMessages }} <span class="modal-close">&times;</span></span>
                <p class="content my-4">{{ .strings.customizeMessagesDescription }}</p>
                <div class="table-responsive">
@ -232,7 +232,7 @@
            </div>
        </div>
        <div id="modal-editor" class="modal">
-            <form class="modal-content wide card" id="form-editor" href="">
+            <form class="relative mx-auto my-[10%] w-4/5 lg:w-2/3 content card" id="form-editor" href="">
                <span class="heading"><span id="header-editor"></span> <span class="modal-close">&times;</span></span>
                <div class="row">
                    <div class="col card ~neutral @low">
@ -258,7 +258,7 @@
            </form>
        </div>
        <div id="modal-restart" class="modal">
-            <div class="modal-content card ~critical @low">
+            <div class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3 ~critical @low">
                <span class="heading">{{ .strings.settingsRestartRequired }} <span class="modal-close">&times;</span></span>
                <p class="content my-4">{{ .strings.settingsRestartRequiredDescription }}</p>
                <div class="float-right">
@ -268,20 +268,20 @@
            </div>
        </div>
        <div id="modal-refresh" class="modal">
-            <div class="modal-content card ~neutral @low">
+            <div class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3 ~neutral @low">
                <span class="heading">{{ .strings.settingsApplied }}</span>
                <p class="content">{{ .strings.settingsRefreshPage }}</p>
            </div>
        </div>
        <div id="modal-send-pwr" class="modal">
-            <div class="modal-content card ~neutral @low">
+            <div class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3 ~neutral @low">
                <span class="heading">{{ .strings.sendPWR }}</span>
                <p class="content my-2" id="send-pwr-note"></p>
                <span class="button ~urge @low mt-2" id="send-pwr-link">{{ .strings.copy }}</span>
            </div>
        </div>
        <div id="modal-ombi-profile" class="modal">
-            <form class="modal-content card" id="form-ombi-defaults" href="">
+            <form class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3" id="form-ombi-defaults" href="">
                <span class="heading">{{ .strings.ombiProfile }} <span class="modal-close">&times;</span></span>
                <p class="content my-4">{{ .strings.ombiUserDefaultsDescription }}</p>
                <div class="select ~neutral @low mb-4">
@ -294,7 +294,7 @@
            </form>
        </div>
        <div id="modal-user-profiles" class="modal">
-            <div class="modal-content wide card">
+            <div class="relative mx-auto my-[10%] w-4/5 lg:w-2/3 content card">
                <span class="heading">{{ .strings.userProfiles }} <span class="modal-close">&times;</span></span>
                <p class="content my-4">{{ .strings.userProfilesDescription }}</p>
                <div class="table-responsive">
@ -317,7 +317,7 @@
            </div>
        </div>
        <div id="modal-add-profile" class="modal">
-            <form class="modal-content card" id="form-add-profile" href="">
+            <form class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3" id="form-add-profile" href="">
                <span class="heading">{{ .strings.addProfile }} <span class="modal-close">&times;</span></span>
                <p class="content my-4">{{ .strings.addProfileDescription }}</p>
                <label>
@ -340,7 +340,7 @@
            </form>
        </div>
        <div id="modal-update" class="modal">
-            <div class="modal-content wide card">
+            <div class="relative mx-auto my-[10%] w-4/5 lg:w-2/3 content card">
                <span class="heading">{{ .strings.updates }} <span class="modal-close">&times;</span></span>
                <p class="content">
                    <h2 class="mt-2">
@ -356,7 +356,7 @@
        </div>
        {{ if .telegramEnabled }}
        <div id="modal-telegram" class="modal">
-            <div class="modal-content card">
+            <div class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3">
                <span class="heading mb-4">{{ .strings.linkTelegram }}</span>
                <p class="content mb-4">{{ .strings.sendPIN }}</p>
                <h1 class="ac" id="telegram-pin"></h1>
@ -374,7 +374,7 @@
        {{ end }}
        {{ if .discordEnabled }}
        <div id="modal-discord" class="modal">
-            <div class="modal-content card">
+            <div class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3">
                <span class="heading mb-4"><span id="discord-header"></span><span class="modal-close">&times;</span></span>
                <p class="content mb-4" id="discord-description"></p>
                <div class="row">
@ -385,7 +385,7 @@
        </div>
        {{ end }}
        <div id="modal-matrix" class="modal">
-            <form class="modal-content card" id="form-matrix" href="">
+            <form class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3" id="form-matrix" href="">
                <span class="heading">{{ .strings.linkMatrix }}</span>
                <p class="content my-4">{{ .strings.linkMatrixDescription }}</p>
                <input type="text" class="field input ~neutral @high mt-4 mb-2" placeholder="{{ .strings.matrixHomeServer }}" id="matrix-homeserver">
@ -442,7 +442,7 @@
                </div>
                <div class="card @low dark:~d_neutral">
                    <span class="heading">{{ .strings.create }}</span>
-                    <div class="row" id="create-inv">
+                    <div class="flex flex-col md:flex-row gap-3" id="create-inv">
                        <div class="card ~neutral @low col">
                            <div class="row mb-2">
                                <label class="col mr-2">
@ -654,7 +654,7 @@
                            <span class="button ~urge @low unfocused" id="settings-save">{{ .strings.settingsSave }}</span>
                        </div>
                    </div>
-                    <div class="row">
+                    <div class="flex flex-col md:flex-row gap-3">
                        <div class="card @low dark:~d_neutral col" id="settings-sidebar">
                            <aside class="aside sm ~urge dark:~d_info mb-2 @low" id="settings-message">Note: <span class="badge ~critical">*</span> indicates a required field, <span class="badge ~info dark:~d_warning">R</span> indicates changes require a restart.</aside> 
                            <span class="button ~neutral @low settings-section-button justify-between mb-2" id="setting-about"><span class="flex">{{ .strings.aboutProgram }} <i class="ri-information-line ml-2"></i></span></span>
--- a/html/form.html
+++ b/html/form.html
@ -11,21 +11,21 @@
    </head>
    <body class="max-w-full overflow-x-hidden section">
        <div id="modal-success" class="modal">
-            <div class="modal-content card">
+            <div class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3">
                <span class="heading mb-4">{{ if .passwordReset }}{{ .strings.passwordReset }}{{ else }}{{ .strings.successHeader }}{{ end }}</span>
                <p class="content mb-4">{{ if .passwordReset }}{{ .strings.youCanLoginPassword }}{{ else }}{{ .successMessage }}{{ end }}</p>
                <a class="button ~urge @low full-width center supra submit" href="{{ .jfLink }}" id="create-success-button">{{ .strings.continue }}</a>
            </div>
        </div>
        <div id="modal-confirmation" class="modal">
-            <div class="modal-content card">
+            <div class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3">
                <span class="heading mb-4">{{ .strings.confirmationRequired }}</span>
                <p class="content mb-4">{{ .strings.confirmationRequiredMessage }}</p>
            </div>
        </div>
        {{ if .telegramEnabled }}
        <div id="modal-telegram" class="modal">
-            <div class="modal-content card">
+            <div class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3">
                <span class="heading mb-4">{{ .strings.linkTelegram }}</span>
                <p class="content mb-4">{{ .strings.sendPIN }}</p>
                <p class="text-center text-2xl mb-2">{{ .telegramPIN }}</p>
@ -43,7 +43,7 @@
        {{ end }}
        {{ if .discordEnabled }}
        <div id="modal-discord" class="modal">
-            <div class="modal-content card">
+            <div class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3">
                <span class="heading mb-4">{{ .strings.linkDiscord }}</span>
                <p class="content mb-4"> {{ .discordSendPINMessage }}</p>
                <h1 class="text-center text-2xl mb-2">{{ .discordPIN }}</h1>
@ -54,7 +54,7 @@
        {{ end }}
        {{ if .matrixEnabled }}
        <div id="modal-matrix" class="modal">
-            <div class="modal-content card">
+            <div class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3">
                <span class="heading mb-4">{{ .strings.linkMatrix }}</span>
                <p class="content mb-4"> {{ .strings.matrixEnterUser }}</p>
                <input type="text" class="input ~neutral @high" placeholder="@user:riot.im" id="matrix-userid">
@ -85,15 +85,15 @@
        <div id="notification-box"></div>
        <div class="page-container">
            <div class="card dark:~d_neutral @low">
-                <div class="row baseline">
-                    <span class="flex-form heading mr-5">
+                <div class="flex flex-col md:flex-row gap-3 baseline">
+                    <span class="heading mr-5">
                        {{ if .passwordReset }}
                        {{ .strings.passwordReset }}
                        {{ else }}
                        {{ .strings.createAccountHeader }}
                        {{ end }}
                    </span>
-                    <span class="flex-form subheading">
+                    <span class="subheading">
                        {{ if .passwordReset }}
                        {{ .strings.enterYourPassword }}
                        {{ else }}
@ -101,8 +101,8 @@
                        {{ end }}
                    </span>
                </div>
-                <div class="row">
-                    <div class="flex-form">
+                <div class="flex flex-col md:flex-row gap-3">
+                    <div class="flex-1">
                        {{ if .userExpiry }}
                        <aside class="col aside sm ~warning" id="user-expiry-message"></aside>
                        {{ end }}
@ -164,7 +164,7 @@
                            </label>
                        </form>
                    </div>
-                    <div class="col">
+                    <div class="flex-1">
                        <div class="card ~neutral @low mb-4">
                            <span class="label supra" for="inv-uses">{{ .strings.passwordRequirementsHeader }}</span>
                            <ul>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -30,6 +30,7 @@
    "mjml": "^4.12.0",
    "nightwind": "github:yonson2/nightwind",
    "perl-regex": "^1.0.4",
+    "postcss": "^8.4.5",
    "remixicon": "^2.5.0",
    "remove-markdown": "^0.3.0",
    "typescript": "^4.0.3",
@ -37,6 +38,6 @@
  },
  "devDependencies": {
    "live-server": "^1.2.1",
-    "tailwindcss": "^3.0.8"
+    "tailwindcss": "^3.0.16"
  }
 }
--- a/scripts/missing-colors.js
+++ b/scripts/missing-colors.js
@ -3,6 +3,8 @@ let fs = require("fs");
 let path = require("path");
 let pre = require("perl-regex");

+const template = process.env.NOTEMPLATE != "1";
+
 const hasDark = (item) => {
    let list = item.attr("class").split(/\s+/);
    for (let i = 0; i < list.length; i++) {
@ -23,10 +25,12 @@ function fixHTML(infile, outfile) {
    let f = fs.readFileSync(infile).toString();
    // Find all go template strings ({{ example }})
    let templateStrings = pre.exec(f, "(?s){{(?:(?!{{).)*?}}", "gi");
-    for (let i = 0; i < templateStrings.length; i++) {
-        let s = templateStrings[i].replace(/\\/g, '');
-        // let s = templateStrings[i];
-        f = f.replaceAll(s, "<!--" + s.slice(3).slice(0, -3) + "-->");
+    if (template) {
+        for (let i = 0; i < templateStrings.length; i++) {
+            let s = templateStrings[i].replace(/\\/g, '');
+            // let s = templateStrings[i];
+            f = f.replaceAll(s, "<!--" + s.slice(3).slice(0, -3) + "-->");
+        }
    }
    let doc = new parser.load(f);
    for (let item of ["badge", "chip", "shield", "input", "table", "button", "portal", "select", "aside", "card", "field", "textarea"]) {
@ -58,12 +62,14 @@ function fixHTML(infile, outfile) {
    }
    let out = doc.html();
    // let out = f
-    for (let i = 0; i < templateStrings.length; i++) {
-        let s = templateStrings[i].replace(/\\/g, '');
-        out = out.replaceAll("<!--" + s.slice(3).slice(0, -3) + "-->", s);
-    }
+    if (template) {
+        for (let i = 0; i < templateStrings.length; i++) {
+            let s = templateStrings[i].replace(/\\/g, '');
+            out = out.replaceAll("<!--" + s.slice(3).slice(0, -3) + "-->", s);
+        }
    out = out.replaceAll("&lt;!--", "{{");
    out = out.replaceAll("--&gt;", "}}");
+    }
    fs.writeFileSync(outfile, out);
    console.log(infile, outfile);
 };
--- a/site/Makefile
+++ b/site/Makefile
@ -1,7 +1,7 @@
 all:
 	-mkdir -p out
 	cp ../css/modal.css out/
-	node ../scripts/missing-colors.js index.html out/index.html
+	NOTEMPLATE=1 node ../scripts/missing-colors.js index.html out/index.html
 	cp -r node_modules/remixicon/fonts/remixicon.css node_modules/remixicon/fonts/remixicon.woff2 out/
 	-rm -r tempts
 	cp -r ts tempts
@ -19,7 +19,7 @@ all:
 debug:
 	-mkdir -p out
 	cp ../css/modal.css out/
-	node ../scripts/missing-colors.js index.html out/index.html
+	NOTEMPLATE=1 node ../scripts/missing-colors.js index.html out/index.html
 	cp -r node_modules/remixicon/fonts/remixicon.css node_modules/remixicon/fonts/remixicon.woff2 out/
 	-rm -r tempts
 	cp -r ts tempts
--- a/site/index.html
+++ b/site/index.html
@ -19,7 +19,7 @@
    </head>
    <body class="max-w-full overflow-x-hidden section">
        <div id="modal-deb" class="modal">
-            <div class="modal-content wide card">
+            <div class="relative mx-auto my-[10%] w-4/5 lg:w-2/3 content card">
                <span class="heading"> Debian/Ubuntu (apt)</span>
                <div class="mt-1">
                    <pre style="margin: 0; line-height: 125%">curl https://apt.hrfee.dev/hrfee.pubkey.gpg | sudo apt-key add -
@ -38,7 +38,7 @@ sudo apt-get install jfa-go-tray
            </div>
        </div>
        <div id="modal-docker" class="modal">
-            <div class="modal-content wide card">
+            <div class="relative mx-auto my-[10%] w-4/5 lg:w-2/3 content card">
                <span class="heading"> Docker</span>
                <div class="mt-1">
                    <pre style="margin: 0; line-height: 125%">docker create <span style="color: #BB6622; font-weight: bold">\</span>
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -6,6 +6,28 @@ module.exports = {
  darkMode: 'class',
  theme: {
      extend: {
+          keyframes: {
+              'fade-in': {
+                  '0%': {
+                      opacity: '0'
+                  },
+                  '100%': {
+                      opacity: '1'
+                  }
+              },
+              'fade-out': {
+                  '0%': {
+                      opacity: '1'
+                  },
+                  '100%': {
+                      opacity: '0'
+                  }
+              },
+          },
+          animation: {
+              'fade-in': 'fade-in 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
+              'fade-out': 'fade-out 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)'
+          },
          colors: {
              neutral: colors.slate,
              positive: colors.green,
--- a/ts/modules/invites.ts
+++ b/ts/modules/invites.ts
@ -257,7 +257,7 @@ class DOMInvite implements Invite {
        this._header.appendChild(this._codeArea);
        this._codeArea.classList.add("inv-codearea");
        this._codeArea.innerHTML = `
-        <a class="invite-link code font-mono bg-inherit mr-4" href=""></a>
+        <a class="invite-link text-black dark:text-white font-mono bg-inherit mr-4" href=""></a>
        <span class="button ~info @low" title="${window.lang.strings("copy")}"><i class="ri-file-copy-line"></i></span>
        `;
        const copyButton = this._codeArea.querySelector("span.button") as HTMLSpanElement;
@ -427,7 +427,7 @@ export class inviteList implements inviteList {
            <div class="inv inv-empty">
                <div class="card dark:~d_neutral @low inv-header flex-expand mt-2">
                    <div class="inv-codearea">
-                        <span class="code font-mono bg-inherit">${window.lang.strings("inviteNoInvites")}</span>
+                        <span class="text-black dark:text-white font-mono bg-inherit">${window.lang.strings("inviteNoInvites")}</span>
                    </div>
                </div>
            </div>
--- a/ts/modules/modal.ts
+++ b/ts/modules/modal.ts
@ -24,11 +24,12 @@ export class Modal implements Modal {
        if (event) {
            event.preventDefault();
        }
-        this.modal.classList.add('modal-hiding');
+        this.modal.classList.add('animate-fade-out');
+        this.modal.classList.remove("animate-fade-in");
        const modal = this.modal;
        const listenerFunc = () => {
-            modal.classList.remove('modal-shown');
-            modal.classList.remove('modal-hiding');
+            modal.classList.remove('block');
+            modal.classList.remove('animate-fade-out');
            modal.removeEventListener(window.animationEvent, listenerFunc);
            document.dispatchEvent(this.closeEvent);
        };
@ -43,11 +44,11 @@ export class Modal implements Modal {
    }

    show = () => {
-        this.modal.classList.add('modal-shown');
+        this.modal.classList.add('block', 'animate-fade-in');
        document.dispatchEvent(this.openEvent);
    }
    toggle = () => {
-        if (this.modal.classList.contains('modal-shown')) {
+        if (this.modal.classList.contains('animate-fade-in')) {
            this.close();
        } else {
            this.show();