removed redux completely

2025-04-25 04:46:40 +07:00 · 2022-01-09 19:03:01 +07:00 · 2022-01-09 19:03:01 +07:00 · a4bb07e9cf
commit a4bb07e9cf
parent 26e6d8d41b
323 changed files with 2464 additions and 3348 deletions
--- a/src/components/dialogs/BetterScrollDialog/styles.module.scss
+++ b/src/components/dialogs/BetterScrollDialog/styles.module.scss
@ -0,0 +1,144 @@
+@import "src/styles/variables";
+
+.wrap {
+  width: 100vw;
+  height: 100vh;
+  background: transparentize(darken($content_bg, 4%), 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 70px 20px 40px 20px;
+  box-sizing: border-box;
+
+  @include tablet {
+    padding: 70px 5px 5px 5px;
+  }
+}
+
+.container {
+  display: flex;
+  align-items: stretch;
+  justify-content: center;
+  flex-direction: column;
+  min-width: $cell;
+  max-width: 400px;
+  max-height: 100%;
+  max-height: calc(100vh - 75px);
+  width: 100%;
+  position: relative;
+  box-sizing: border-box;
+
+  & > div:nth-child(2) {
+    border-top-left-radius: $dialog_radius;
+    border-top-right-radius: $dialog_radius;
+  }
+
+  & > div:last-child {
+    border-bottom-left-radius: $dialog_radius;
+    border-bottom-right-radius: $dialog_radius;
+  }
+}
+
+.header,
+.footer {
+  @include outer_shadow();
+
+  // padding: 10px;
+  background: darken($content_bg, 2%);
+}
+
+.body {
+  @include outer_shadow();
+
+  position: relative;
+  overflow: auto;
+  flex: 1;
+  background: $content_bg;
+}
+
+@keyframes appear {
+  0% {
+    top: -48px;
+  }
+  100% {
+    top: -58px;
+  }
+}
+
+.close {
+  background: darken($content_bg, 2%);
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  top: -58px;
+  right: 50%;
+  transform: translate(50%, 0);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 100%;
+  cursor: pointer;
+  transition: transform 0.25s, background-color 0.25s;
+  animation: appear 0.5s forwards;
+
+  &:hover {
+    background-color: $red;
+    transform: translate(50%, -5px);
+  }
+
+  svg {
+    width: 24px;
+    height: 24px;
+  }
+}
+
+.error {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 40px;
+  pointer-events: none;
+  background: linear-gradient(0deg, $red 50%, transparentize($red, 1));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0 0 $radius $radius;
+  z-index: 11;
+}
+
+.backdrop {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+
+@keyframes appear {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.shade {
+  position: absolute;
+  background: transparentize($content_bg, 0.3);
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: $radius;
+  animation: appear 1s forwards;
+
+  svg {
+    fill: white;
+  }
+}