From 58bc156b094e498873feb01d013fc7bf1cca00ce Mon Sep 17 00:00:00 2001
From: Geetika-10 <geetikai@iiitd.ac.in>
Date: Fri, 5 Jan 2024 02:24:51 +0530
Subject: [PATCH] UI change after removing spinner from correspondence
 challenge

---
 app/views/challenge/mine.scala | 14 ++++++--------
 ui/challenge/css/_page.scss    | 22 ++++++++++++++++++++++
 2 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/app/views/challenge/mine.scala b/app/views/challenge/mine.scala
index 0a2ff24c88d29..a48fd4b47ce26 100644
--- 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
index cf101cb6b905f..2dcc873c4e8bc 100644
--- a/ui/challenge/css/_page.scss
+++ b/ui/challenge/css/_page.scss
@@ -27,10 +27,12 @@
       @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;
@@ -38,6 +40,7 @@
           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;
         }