UI change after removing spinner from correspondence challenge

Carbrex · Jan 4, 2024 · 58bc156 · 58bc156
1 parent c13e19f
commit 58bc156
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 8 deletions.
diff --git a/app/views/challenge/mine.scala b/app/views/challenge/mine.scala
@@ -38,15 +38,13 @@ object mine:
               bits.details(c, color),
               c.destUserId.map { destId =>
                 div(cls := "waiting")(
-                  {println(s"Time Control: ${c.timeControl}")},
-                  {println(s"Time Control: ${c.unlimited}")},
-                  {println(s"Time Control: ${c.daysPerTurn}")},
                   userIdLink(destId.some, cssClass = "target".some),
-                  if ( c.unlimited || c.daysPerTurn != none) {
-                    h2("✅Challenge sent")
-                  } else {
-                    spinner
-                  },
+                  if c.unlimited || c.daysPerTurn != none then
+                    div(cls := "correspondence-waiting")(
+                      p(cls := "challenge-successful")("Challenge sent"),
+                      p("Challenge can be canceled in the sword menu")
+                    )
+                  else spinner,
                   p(trans.waitingForOpponent())
                 )
               } getOrElse {

diff --git a/ui/challenge/css/_page.scss b/ui/challenge/css/_page.scss
@@ -27,17 +27,20 @@
       @include breakpoint($mq-x-small) {
         grid-area: 1 / 2 / 3 / 2;
       }
+
       &__recent {
         @extend %flex-center;
         margin-top: 1em;
         gap: 0.5em;
+
         .button {
           background: none;
           border: $border;
           text-align: $start-direction;
           text-transform: none;
         }
       }
+
       .error {
         color: $c-bad;
         margin-top: 1em;
@@ -57,6 +60,22 @@
       height: 13em;
       margin: 2em auto;
     }
+
+    .correspondence-waiting {
+      padding: 15px;
+      border-radius: 8px;
+      position: relative;
+    }
+
+    .challenge-successful::before {
+      content: '\2714   ';
+      font-size: 1.2em;
+      color: green;
+    }
+
+    .correspondence-waiting > p {
+      margin-bottom: 0.5em;
+    }
   }
 
   .cancel {
@@ -74,9 +93,11 @@
     padding: $block-gap 4vw;
     margin-bottom: 4rem;
     font-size: 1.5em;
+
     @include breakpoint($mq-xx-small) {
       font-size: 2em;
     }
+
     background: var(--c-bg);
     border: 1px solid var(--c-font);
 
@@ -88,6 +109,7 @@
         color: var(--c-font);
         font-size: 6rem;
         margin-#{$end-direction}: 0.2em;
+
         @include breakpoint($mq-not-xx-small) {
           display: none;
         }