Merge pull request #386 from Hexastack/fix/carousel-navigation-styling

Fix/carousel navigation styling

widget/src/components/Message.scss

@@ -1,6 +1,6 @@
 .sc-message {
   margin: auto;
-  padding: 0 0.5rem;
+  padding: 0 0.5rem 0 0;
   display: flex;
   margin-bottom: 0.25rem;
 
@@ -38,14 +38,14 @@
     display: flex;
     flex-direction: row;
     position: relative;
-    max-width: calc(100% - 2rem);
+    max-width: calc(100% - 40px); // same as avatar spacing
     width: auto;
 
     .sc-message--avatar {
       width: 32px;
       height: 32px;
       margin-right: 4px;
-      margin-top: 2px;
+      margin: 2px 4px;
       background-position: 0 0;
       flex-shrink: 0;
       background-size: cover;
@@ -55,7 +55,6 @@
     .sc-message--wrapper {
       display: flex;
       flex-direction: column;
-      width: 100%;
 
       .sc-message--text {
         padding: 10px 20px;

widget/src/components/messages/ButtonMessage.scss

@@ -50,6 +50,7 @@
 .sc-message--carousel-element {
   .sc-message--buttons-content {
     padding: 0.5rem;
+    margin-bottom: 16px;
   }
   .sc-message--buttons {
     margin: 0;

widget/src/components/messages/CarouselMessage.scss

@@ -1,7 +1,7 @@
 .sc-message--carousel {
   border-radius: 0.5rem;
   position: relative;
-  width: 100%;
+  width: 275px;
   overflow: hidden;
 
   .sc-message--carousel-inner {
@@ -17,11 +17,8 @@
       justify-content: center;
 
       .sc-message--carousel-element {
-        padding: 1rem;
         width: 100%;
-
         .sc-message--carousel-element-image {
-          background-position: center;
           background-repeat: no-repeat;
           background-size: cover;
           position: relative;
@@ -35,9 +32,10 @@
           padding: 0.5rem 0;
           margin-top: 8px;
         }
-
         .sc-message--carousel-element-description {
           width: 100%;
+          padding: 0 2rem;
+          box-sizing: border-box;
         }
       }
     }
@@ -51,15 +49,21 @@
     color: white;
     border: none;
     cursor: pointer;
-    padding: 10px;
     z-index: 2;
+    font-size: 0.75rem;
 
     &.prev {
-      left: 10px;
+      left: 0px;
+      top: calc(50% - 14px);
+      width: 1.5rem;
+      height: 2rem;
     }
 
     &.next {
-      right: 10px;
+      top: calc(50% - 14px);
+      right: 0px;
+      width: 1.5rem;
+      height: 2rem;
     }
   }
 }

widget/src/components/messages/CarouselMessage.tsx

@@ -81,6 +81,7 @@ const CarouselMessage: React.FC<CarouselMessageProps> = ({
     setActiveIndex((prevIndex) => (prevIndex + 1) % items.length);
   };
   const colors = allColors[messageCarousel.direction || "received"];
+  const shouldDisplayNavigationButtons = items.length > 1;
 
   return (
     <div
@@ -98,15 +99,22 @@ const CarouselMessage: React.FC<CarouselMessageProps> = ({
           <CarouselItem key={idx} message={message} idx={idx} />
         ))}
       </div>
-      <button
-        className="sc-message--carousel-control prev"
-        onClick={goToPrevious}
-      >
-        &#10094;
-      </button>
-      <button className="sc-message--carousel-control next" onClick={goToNext}>
-        &#10095;
-      </button>
+      {shouldDisplayNavigationButtons && (
+        <>
+          <button
+            className="sc-message--carousel-control prev"
+            onClick={goToPrevious}
+          >
+            &#10094;
+          </button>
+          <button
+            className="sc-message--carousel-control next"
+            onClick={goToNext}
+          >
+            &#10095;
+          </button>
+        </>
+      )}
     </div>
   );
 };