feat: Restyled conversation elements and the file dropzone

stylesheets/_session.scss

@@ -640,17 +640,6 @@ input {
   }
 }
 
-.messages-container {
-  .session-icon-button {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 40px;
-    width: 40px;
-    border-radius: 50%;
-  }
-}
-
 .group-member-list {
   &__selection {
     height: 100%;

stylesheets/_session_conversation.scss

@@ -144,17 +144,6 @@
   }
 }
 
-.messages-container {
-  display: flex;
-  flex-grow: 1;
-  flex-direction: column-reverse;
-  position: relative;
-  overflow-x: hidden;
-  min-width: 370px;
-  scrollbar-width: 4px;
-  padding: var(--margins-sm) var(--margins-lg) var(--margins-lg);
-}
-
 .composition-container {
   display: flex;
   justify-content: center;

ts/components/SplitViewContainer.tsx

@@ -17,7 +17,7 @@ const Divider = styled.div`
   width: 100%;
   cursor: row-resize;
   height: 5px;
-  background-color: var(--color-cell-background);
+  background-color: var(--background-primary-color);
   margin-top: 2px;
 `;
 
@@ -25,7 +25,7 @@ const DividerHandle = styled.div`
   width: 10%;
   height: 5px;
   cursor: row-resize;
-  background-color: var(--color-text);
+  background-color: var(--text-primary-color);
   flex-shrink: 0;
   position: relative;
   left: 50%;

ts/components/conversation/ConversationRequestButtons.tsx

@@ -24,6 +24,21 @@ const handleAcceptConversationRequest = async (convoId: string) => {
   await approveConvoAndSendResponse(convoId, true);
 };
 
+const ConversationRequestBanner = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: var(--margins-lg);
+  gap: var(--margins-lg);
+`;
+
+const ConversationBannerRow = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: var(--margins-lg);
+  justify-content: center;
+`;
+
 export const ConversationMessageRequestButtons = () => {
   const selectedConversation = useSelector(getSelectedConversation);
 
@@ -61,18 +76,3 @@ export const ConversationMessageRequestButtons = () => {
     </ConversationRequestBanner>
   );
 };
-
-const ConversationBannerRow = styled.div`
-  display: flex;
-  flex-direction: row;
-  gap: var(--margins-lg);
-  justify-content: center;
-`;
-
-const ConversationRequestBanner = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  padding: var(--margins-lg);
-  gap: var(--margins-lg);
-`;

ts/components/conversation/ConversationRequestInfo.tsx

@@ -7,6 +7,20 @@ import {
   hasSelectedConversationIncomingMessages,
 } from '../../state/selectors/conversations';
 
+const ConversationRequestTextBottom = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  padding: var(--margins-lg);
+`;
+
+// TODO Theming - Confirm this is correct?
+const ConversationRequestTextInner = styled.div`
+  color: var(--text-secondary-color);
+  text-align: center;
+  max-width: 390px;
+`;
+
 export const ConversationRequestinfo = () => {
   const selectedConversation = useSelector(getSelectedConversation);
   const isIncomingMessageRequest = useIsRequest(selectedConversation?.id);
@@ -26,16 +40,3 @@ export const ConversationRequestinfo = () => {
     </ConversationRequestTextBottom>
   );
 };
-
-const ConversationRequestTextBottom = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  padding: var(--margins-lg);
-`;
-
-const ConversationRequestTextInner = styled.div`
-  color: var(--color-text-subtle);
-  text-align: center;
-  max-width: 390px;
-`;

ts/components/conversation/SessionFileDropzone.tsx

@@ -12,8 +12,8 @@ const DropZoneContainer = styled.div`
 `;
 
 const DropZoneWithBorder = styled.div`
-  border: dashed 4px var(--color-accent);
-  background-color: var(--color-clickable-hovered);
+  border: dashed 4px var(--primary-color);
+  background-color: var(--message-link-preview-background-color);
   position: absolute;
   top: 0;
   bottom: 0;
@@ -29,7 +29,7 @@ export const SessionFileDropzone = () => {
     <DropZoneContainer>
       <DropZoneWithBorder>
         <Flex container={true} justifyContent="space-around" height="100%" alignItems="center">
-          <SessionIcon iconSize={'max'} iconType="circlePlus" />
+          <SessionIcon iconColor="var(--primary-color)" iconSize={'max'} iconType="circlePlus" />
         </Flex>
       </DropZoneWithBorder>
     </DropZoneContainer>

ts/themes/SessionTheme.tsx

@@ -648,6 +648,7 @@ export const SessionGlobalStyles = createGlobalStyle`
     /* Also used for Images */
     /* Also used for the Media Grid Items */
     /* Also used for Staged Generic Attachments */
+    /* Also used for FileDropZone */
     /* Same for all Themes */
     --message-link-preview-background-color: rgba(${hexColorToRGB(COLORS.BLACK)}, 0.06);
   };