From 71a7358eca13fb8aedfa171a9bb217fa1c49e8c4 Mon Sep 17 00:00:00 2001
From: Yehor Potebenko <hitechnic.uu68@gmail.com>
Date: Fri, 14 Apr 2023 17:51:38 +0200
Subject: [PATCH] feat: add stop activity popup markup
---
src/assets/images/main/icons/avatar.svg | 3 -
src/assets/images/main/icons/owl-avatar.svg | 10 +++
src/js/modules/main/Popup.mjs | 3 +-
src/pages/main/index.html | 23 ++++++-
src/pages/main/style.scss | 69 +++++++++++++++++++++
5 files changed, 102 insertions(+), 6 deletions(-)
delete mode 100644 src/assets/images/main/icons/avatar.svg
create mode 100644 src/assets/images/main/icons/owl-avatar.svg
diff --git a/src/assets/images/main/icons/avatar.svg b/src/assets/images/main/icons/avatar.svg
deleted file mode 100644
index ddd1990..0000000
--- a/src/assets/images/main/icons/avatar.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="32" cy="32" r="32" fill="#D9D9D9"/>
-</svg>
diff --git a/src/assets/images/main/icons/owl-avatar.svg b/src/assets/images/main/icons/owl-avatar.svg
new file mode 100644
index 0000000..b8de20c
--- /dev/null
+++ b/src/assets/images/main/icons/owl-avatar.svg
@@ -0,0 +1,10 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<circle cx="32" cy="32" r="32" fill="#EAD4F7"/>
+<rect width="64" height="64" fill="url(#pattern0)"/>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_105_6" transform="scale(0.015625)"/>
+</pattern>
+<image id="image0_105_6" width="64" height="64" xlink:href="data:image/png;base64,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"/>
+</defs>
+</svg>
diff --git a/src/js/modules/main/Popup.mjs b/src/js/modules/main/Popup.mjs
index 63987ea..7405366 100644
--- a/src/js/modules/main/Popup.mjs
+++ b/src/js/modules/main/Popup.mjs
@@ -51,7 +51,8 @@ export default class Popup {
static closeOnEscape(event) {
if (event.key === 'Escape') {
const popupsActive = document.querySelectorAll('.popup.open');
- this.close(popupsActive[popupsActive.length - 1]);
+
+ if (popupsActive.length > 0) this.close(popupsActive[popupsActive.length - 1]);
}
}
diff --git a/src/pages/main/index.html b/src/pages/main/index.html
index 1772374..f23ba18 100644
--- a/src/pages/main/index.html
+++ b/src/pages/main/index.html
@@ -61,6 +61,7 @@
alt="Close Modal"
width="20"
height="20"
+ class="todo-popup__close_icon popup__close_icon"
/></a>
<div class="todo-popup__wrapper">
<h2 class="todo-popup__title">Let’s <i>Do</i></h2>
@@ -96,7 +97,7 @@
</section>
<!-- * PROFILE POPUP -->
- <section id="profile-popup" class="todo-popup popup">
+ <section id="profile-popup" class="profile-popup popup">
<div class="profile-popup__body popup__body">
<div class="profile-popup__content popup__content">
<a href="#header" class="profile-popup__close popup__close"
@@ -105,12 +106,13 @@
alt="Close Modal"
width="20"
height="20"
+ class="profile-popup__close_icon popup__close_icon"
/></a>
<div class="profile-popup__wrapper">
<div class="profile-popup__top">
<img
class="profile-popup__avatar"
- src="../../assets/images/main/icons/avatar.svg"
+ src="../../assets/images/main/icons/owl-avatar.svg"
alt="Avatar"
width="64"
height="64"
@@ -150,6 +152,23 @@
</div>
</div>
</section>
+
+ <!-- * STOP ACTIVITY POPUP -->
+ <section id="stop-popup" class="stop-popup popup">
+ <div class="stop-popup__body popup__body">
+ <div class="stop-popup__content popup__content">
+ <div class="stop-popup__wrapper">
+ <h2 class="stop-popup__title">Let’s <i>Do</i></h2>
+ <p class="stop-popup__question">Are you sure you want to stop activity?</p>
+
+ <div class="stop-popup__buttons">
+ <a href="#header" type="submit" class="stop-popup__buttons_ok popup__close">OK</a>
+ <a href="#header" type="reset" class="stop-popup__buttons_no popup__close">NO</a>
+ </div>
+ </div>
+ </div>
+ </div>
+ </section>
</div>
</body>
</html>
diff --git a/src/pages/main/style.scss b/src/pages/main/style.scss
index ffab97c..3a58209 100644
--- a/src/pages/main/style.scss
+++ b/src/pages/main/style.scss
@@ -368,3 +368,72 @@ body {
}
}
}
+
+.stop-popup {
+ &__content {
+ padding: 15px 26px 20px 21px;
+ width: 22.78%;
+ background-color: $alice-blue;
+ border-radius: 20px;
+ text-align: center;
+ }
+
+ &__wrapper {
+ display: flex;
+ flex-direction: column;
+
+ > * {
+ &:not(:last-child) {
+ margin-bottom: 26px;
+ }
+ }
+ }
+
+ &__title {
+ display: inline-block;
+ max-width: 108px;
+ margin: 0 auto;
+ text-align: center;
+ font-weight: 700;
+ font-size: 30px;
+ line-height: 36px;
+ background: linear-gradient(266.66deg, $heliotrope 1.54%, $matisse 101.33%);
+ background-clip: text;
+ -webkit-background-clip: text;
+ color: transparent;
+ }
+
+ &__question {
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 19px;
+ color: $matisse;
+ }
+
+ &__buttons {
+ display: flex;
+ justify-content: center;
+ flex-wrap: wrap;
+
+ > * {
+ display: inline-block;
+ padding: 10px 29px 5px 26px;
+ text-transform: uppercase;
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 19px;
+ border-radius: 10px;
+ color: $white;
+ margin-bottom: 5px;
+ }
+
+ &_ok {
+ background-color: $heliotrope2;
+ margin-right: 30px;
+ }
+
+ &_no {
+ background-color: $anakiwa;
+ }
+ }
+}
--
GitLab