Merge branch 'theming_qa' into theming

Author: yougotwill

stylesheets/_conversation.scss

@@ -21,6 +21,12 @@
   &.invitation-outgoing {
     background-color: var(--message-bubbles-sent-background-color);
     align-self: flex-end;
+
+    .contents {
+      .session-icon-button {
+        background-color: var(--transparent-color);
+      }
+    }
   }
 
   display: inline-block;

stylesheets/_modal.scss

@@ -30,10 +30,19 @@
   .contact-selection-list {
     width: 100%;
     min-width: 300px;
+    max-width: 350px;
   }
 
   &__input-group {
     min-width: 300px;
+
+    input {
+      margin-bottom: var(--margins-md);
+    }
+
+    input:last-child {
+      margin-bottom: 0px;
+    }
   }
 }
 
@@ -106,7 +115,6 @@
 
   input {
     padding: 8px;
-    margin-bottom: 15px;
     border: 0;
     outline: none;
     border-radius: 4px;
@@ -204,6 +212,7 @@
       display: flex;
       align-items: center;
       justify-content: center;
+      margin-right: -20px; // offsets the edit icon button so it's centered
 
       p {
         font-size: $session-font-md;

stylesheets/_session.scss

@@ -223,11 +223,11 @@ label {
 
     padding: var(--margins-lg);
 
-    font-family: $session-font-default;
+    font-family: var(--font-default);
     text-align: center;
     line-height: 18px;
-    font-size: $session-font-md;
-    font-weight: 700;
+    font-size: var(--font-size-lg);
+    font-weight: 500;
 
     &.reverse {
       flex-direction: row-reverse;
@@ -275,7 +275,7 @@ label {
 
     .session-id-editable {
       width: 30vw;
-      max-width: 700px;
+      max-width: 400px;
     }
   }
 
@@ -298,6 +298,7 @@ label {
 
     .session-button {
       margin: var(--margins-xs);
+      font-weight: 500;
     }
 
     &__center {
@@ -313,7 +314,7 @@ label {
   &__text-highlight {
     @include text-highlight(var(--primary-color));
 
-    color: var(--modal-text-color);
+    color: var(--black-color);
 
     font-family: monospace;
     font-style: normal;
@@ -329,7 +330,6 @@ label {
 .session-confirm {
   &-wrapper {
     .session-modal__body .session-modal__centered {
-      margin: var(--margins-lg);
       text-align: center;
     }
   }

stylesheets/_session_conversation.scss

@@ -35,7 +35,7 @@
   &.show {
     transform: none;
     transition: transform 0.3s ease-in-out;
-    z-index: 2;
+    z-index: 3;
   }
 }
 

stylesheets/_session_group_panel.scss

@@ -33,26 +33,6 @@
     display: none;
   }
 
-  &-item {
-    display: flex;
-    align-items: center;
-    min-height: 3rem;
-    font-size: 0.8rem;
-    color: var(--right-panel-item-text-color);
-    background-color: var(--right-panel-item-background-color);
-    border-top: 1px solid var(--border-color);
-    border-bottom: 1px solid var(--border-color);
-
-    width: -webkit-fill-available;
-    padding: 0 var(--margins-md);
-    transition: var(--default-duration);
-    cursor: pointer;
-
-    &:hover {
-      background-color: var(--right-panel-item-background-hover-color);
-    }
-  }
-
   // no double border (top and bottom) between two elements
   &-item + &-item {
     border-top: none;

ts/components/SessionHeaderSearchInput.tsx

@@ -7,6 +7,7 @@ export const SessionHeaderSearchInput = styled.input<{ darkMode: boolean }>`
   padding: 0 26px 0 30px;
   margin-inline-start: 8px;
   margin-inline-end: 8px;
+  margin-bottom: 15px;
   outline: 0;
   height: 32px;
   width: calc(100% - 16px);

ts/components/calling/InConversationCallContainer.tsx

@@ -69,7 +69,6 @@ const StyledCenteredLabel = styled.div`
   height: min-content;
   white-space: nowrap;
   color: var(--in-call-container-text-color);
-  text-shadow: var(--in-call-container-text-shadow);
   z-index: 5;
 `;
 

ts/components/conversation/AddMentions.tsx

@@ -20,7 +20,7 @@ const StyledMentionAnother = styled.span`
 
 const StyledMentionedUs = styled(StyledMentionAnother)`
   background-color: var(--primary-color);
-  color: var(--text-primary-color);
+  color: var(--black-color);
   border-radius: 5px;
 `;
 

ts/components/conversation/ConversationRequestButtons.tsx

@@ -37,6 +37,10 @@ const ConversationBannerRow = styled.div`
   flex-direction: row;
   gap: var(--margins-lg);
   justify-content: center;
+
+  .session-button {
+    padding: 0 36px;
+  }
 `;
 
 export const ConversationMessageRequestButtons = () => {
@@ -57,7 +61,6 @@ export const ConversationMessageRequestButtons = () => {
     <ConversationRequestBanner>
       <ConversationBannerRow>
         <SessionButton
-          buttonColor={SessionButtonColor.Primary}
           onClick={async () => {
             await handleAcceptConversationRequest(selectedConversation.id);
           }}

ts/components/conversation/ConversationRequestInfo.tsx

@@ -12,6 +12,7 @@ const ConversationRequestTextBottom = styled.div`
   flex-direction: row;
   justify-content: center;
   padding: var(--margins-lg);
+  background-color: var(--background-secondary-color);
 `;
 
 const ConversationRequestTextInner = styled.div`