Removed spinner from correspondence challenges

Author: Carbrex

app/views/challenge/mine.scala

@@ -39,7 +39,12 @@ object mine:
               c.destUserId.map { destId =>
                 div(cls := "waiting")(
                   userIdLink(destId.some, cssClass = "target".some),
-                  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 {

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;
         }