Merge pull request oxen-io#2459 from Bilb/feat-move-attachments-outside-messagebox

feat: move attachments outside of the message box

Author: Bilb

stylesheets/_conversation.scss

@@ -27,7 +27,7 @@
   margin: 4px 16px;
   padding: 4px;
 
-  border-radius: 15px;
+  border-radius: var(--border-radius-message-box);
 
   align-self: flex-start;
 

stylesheets/_modules.scss

@@ -62,6 +62,17 @@
   flex-direction: row;
   align-items: center;
   padding: 10px;
+  border-radius: var(--border-radius-message-box);
+
+  .module-message__container--outgoing & {
+    color: var(--color-sent-message-text);
+    background: var(--color-sent-message-background);
+  }
+
+  .module-message__container--incoming & {
+    color: var(--color-received-message-text);
+    background: var(--color-received-message-background);
+  }
 }
 
 .module-message__generic-attachment__icon-container {
@@ -88,7 +99,7 @@
 }
 
 .module-message__generic-attachment__icon__extension {
-  font-size: 10px;
+  font-size: 9px;
   line-height: 13px;
   letter-spacing: 0.1px;
   text-transform: uppercase;
@@ -115,7 +126,6 @@
 }
 
 .module-message__generic-attachment__file-name {
-  color: $color-gray-90;
   font-size: 14px;
   line-height: 18px;
   font-weight: 300;
@@ -127,14 +137,6 @@
   text-overflow: ellipsis;
 }
 
-.module-message__generic-attachment__file-size,
-.module-message__generic-attachment__file-name--outgoing,
-.module-message__generic-attachment__file-size--incoming,
-.module-message__generic-attachment__file-size--outgoing,
-.module-message__generic-attachment__file-name--incoming {
-  color: var(--color-text);
-}
-
 .module-message__generic-attachment__file-size {
   font-size: var(--font-size-xs);
   line-height: 16px;
@@ -145,17 +147,26 @@
 
 .module-message__link-preview {
   cursor: pointer;
-  border-top-left-radius: $session_message-container-border-radius;
-  border-top-right-radius: $session_message-container-border-radius;
+
+  display: flex;
+  align-items: center;
+  background: white;
+  color: black;
+  border-radius: var(--border-radius-message-box);
+  margin: var(--padding-link-preview);
+
+  .module-image {
+    margin: -1px;
+  }
 }
 
 .module-message__link-preview__content {
-  padding: 8px;
-  background-color: $color-white;
+  padding: 0 0 var(--margins-xs) 0;
   display: flex;
   flex-direction: row;
   align-items: flex-start;
-  border: 1px solid $color-black-015;
+  flex-grow: 1;
+  margin-left: var(--margins-sm);
 }
 
 .module-message__link-preview__image_container {
@@ -203,12 +214,7 @@
   background-color: $color-gray-05;
 }
 
-.module-message__link-preview__text--with-icon {
-  margin-top: 5px;
-}
-
 .module-message__link-preview__title {
-  color: $color-gray-90;
   font-size: 16px;
   font-weight: 300;
   letter-spacing: 0.15px;
@@ -222,7 +228,6 @@
 
 .module-message__link-preview__location {
   margin-top: 4px;
-  color: $color-gray-60;
   font-size: 12px;
   height: 16px;
   letter-spacing: 0.4px;
@@ -787,20 +792,7 @@
 }
 
 .module-image--soft-corners {
-  border-radius: 4px;
-}
-
-.module-image__border-overlay {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  z-index: 1;
-  left: 0;
-  right: 0;
-}
-
-.module-image__border-overlay--dark {
-  background-color: $color-black-02;
+  border-radius: var(--border-radius-message-box);
 }
 
 .module-image__loading-placeholder {
@@ -819,21 +811,6 @@
   }
 }
 
-.module-image__bottom-overlay {
-  height: 48px;
-  background-image: linear-gradient(
-    to bottom,
-    rgba(0, 0, 0, 0),
-    rgba(0, 0, 0, 0) 9%,
-    rgba(0, 0, 0, 0.6)
-  );
-  position: absolute;
-  bottom: 0;
-  z-index: 1;
-  left: 0;
-  right: 0;
-}
-
 .module-image__play-overlay__circle {
   position: absolute;
   top: 50%;
@@ -879,35 +856,12 @@
   position: absolute;
   top: 5px;
   right: 5px;
-  width: 16px;
-  height: 16px;
+  width: 20px;
+  height: 20px;
   z-index: 2;
   background-image: url('../images/x-shadow-16.svg');
 }
 
-// Module: Image Grid
-
-.module-image-grid {
-  display: inline-flex;
-  flex-direction: row;
-  align-items: center;
-
-  margin: -1px;
-}
-
-.module-image-grid__column {
-  display: inline-flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.module-image-grid__row {
-  display: inline-flex;
-  flex-direction: row;
-  align-items: center;
-  flex-grow: 1;
-}
-
 // Module: Attachments
 
 .module-attachments {

stylesheets/_quote.scss

@@ -20,6 +20,7 @@
   &--outgoing {
     .module-quote__primary__author {
       color: var(--color-sent-message-text);
+
       font-weight: bold;
 
       .module-contact-name {
@@ -38,6 +39,7 @@
   &--incoming {
     .module-quote__primary__author {
       color: var(--color-received-message-text);
+
       font-weight: bold;
       .module-contact-name {
         font-weight: bold;
@@ -86,10 +88,10 @@
 }
 
 .module-quote-container {
-  margin-bottom: 5px;
-  margin-top: 10px;
-  padding-left: 10px;
-  padding-right: 5px;
+  margin-bottom: var(--margins-xs);
+  margin-top: var(--margins-xs);
+  min-width: 300px; // just because even with the quoted content is small it doesn't look very good
+  padding-right: var(--margins-xs);
 }
 
 .module-quote--no-click {
@@ -279,26 +281,4 @@
   }
 }
 
-$session-highlight-message-shadow: 0px 0px 10px 1px $session-color-green;
-
-@keyframes remove-box-shadow {
-  0% {
-    box-shadow: none;
-  }
-  10% {
-    box-shadow: $session-highlight-message-shadow;
-  }
-  75% {
-    box-shadow: $session-highlight-message-shadow;
-  }
-  100% {
-    box-shadow: none;
-  }
-}
 
-.flash-green-once {
-  animation-name: remove-box-shadow;
-  animation-timing-function: linear;
-  animation-duration: 2s;
-  box-shadow: $session-highlight-message-shadow;
-}

stylesheets/_session.scss

@@ -308,11 +308,6 @@ textarea {
   margin-inline-start: auto;
 }
 
-pre {
-  backdrop-filter: brightness(0.8);
-  padding: var(--margins-xs);
-}
-
 .module-message__container {
   position: relative;
   display: inline-block;
@@ -325,17 +320,6 @@ pre {
 label {
   user-select: none;
 }
-.module-message__attachment-container {
-  // Entirely to ensure that images are centered if they aren't full width of bubble
-  text-align: center;
-  position: relative;
-  overflow: hidden;
-
-  border-top-left-radius: $session_message-container-border-radius;
-  border-bottom-left-radius: $session_message-container-border-radius;
-  border-top-right-radius: 5px;
-  border-bottom-right-radius: 5px;
-}
 
 .conversation-header {
   .module-avatar img {

stylesheets/_session_constants.scss

@@ -198,8 +198,6 @@ $session-modal-size-sm: 220px;
 $session-modal-size-md: 400px;
 $session-modal-size-lg: 650px;
 
-$session_message-container-border-radius: 13px;
-
 // Spacing
 $session-margin-xs: 5px;
 $session-margin-sm: 10px;

stylesheets/_session_conversation.scss

@@ -443,6 +443,9 @@ $rhap_font-family: inherit !default;
   padding: 0px;
   background-color: transparent;
   box-shadow: none;
+  background: var(--color-accent);
+  padding: var(--padding-message-content);
+  border-radius: var(--border-radius-message-box);
 
   svg {
     transition: fill var(--default-duration);
@@ -473,15 +476,25 @@ $rhap_font-family: inherit !default;
 }
 
 .rhap_volume-button {
-  color: subtle(var(--color-text));
+  .module-message__container--incoming & {
+    color: var(--color-received-message-text);
+  }
+  .module-message__container--outgoing & {
+    color: var(--color-sent-message-text);
+  }
 }
 
 .rhap_volume-container div[role='progressbar'] {
   display: none;
 }
 
 .rhap_time {
-  color: subtle(var(--color-text));
+  .module-message__container--incoming & {
+    color: var(--color-received-message-text);
+  }
+  .module-message__container--outgoing & {
+    color: var(--color-sent-message-text);
+  }
 
   font-size: 12px;
 }
@@ -492,22 +505,25 @@ $rhap_font-family: inherit !default;
   z-index: 0;
   width: 100%;
   height: 5px;
-  background-color: var(--color-text);
-
+  .module-message__container--incoming & {
+    background-color: var(--color-received-message-text);
+  }
+  .module-message__container--outgoing & {
+    background-color: var(--color-sent-message-text);
+  }
   border-radius: 2px;
 }
 
 .rhap_progress-filled {
-  background-color: rgba(var(--color-accent), 0.6);
-
+  background-color: var(--color-text-subtle);
   padding-left: 5px;
 }
 
 .rhap_download-progress {
   height: 100%;
   position: absolute;
   z-index: 1;
-  background-color: subtle(var(--color-text));
+  background-color: var(--color-text-subtle);
 
   border-radius: 2px;
 }