Merge pull request #2599 from yougotwill/theming_hotfixes

Theming hotfixes

stylesheets/_emoji.scss

@@ -1,76 +0,0 @@
-span.emoji {
-  display: -moz-inline-box;
-  -moz-box-orient: vertical;
-  display: inline-block;
-  vertical-align: baseline;
-  width: 1em;
-  height: 1em;
-  background-size: 1em;
-  background-repeat: no-repeat;
-  text-indent: -9999px;
-  background-position: 50%, 50%;
-  background-size: contain;
-}
-
-span.emoji-sizer {
-  line-height: 0.81em;
-  font-size: 1em;
-  margin: -2px 0;
-}
-
-span.emoji-outer {
-  display: -moz-inline-box;
-  display: inline-block;
-  height: 1em;
-  width: 1em;
-}
-
-span.emoji-inner {
-  display: -moz-inline-box;
-  display: inline-block;
-  text-indent: -9999px;
-  width: 100%;
-  height: 100%;
-  vertical-align: baseline;
-}
-
-img.emoji {
-  width: 1em;
-  height: 1em;
-  margin-bottom: -1px;
-}
-
-img.emoji.small {
-  width: 1.1em;
-  height: 1.1em;
-}
-img.emoji.medium {
-  width: 1.3em;
-  height: 1.3em;
-}
-img.emoji.large {
-  width: 1.7em;
-  height: 1.7em;
-}
-img.emoji.jumbo {
-  width: 2em;
-  height: 2em;
-}
-
-// we need these, or we'll make conversation items too big in the left-nav
-.conversations img.emoji.small {
-  width: 1em;
-  height: 1em;
-}
-.conversations img.emoji.medium {
-  width: 1em;
-  height: 1em;
-}
-.conversations img.emoji.large {
-  width: 1em;
-  height: 1em;
-}
-.conversations img.emoji.jumbo {
-  width: 1em;
-  height: 1em;
-}

stylesheets/_global.scss

@@ -6,6 +6,7 @@ html {
   height: 100%;
   // Default theme is Classic Dark
   background-color: #1b1b1b;
+  font-size: 14px;
 }
 
 body {
@@ -14,7 +15,6 @@ body {
   width: 100%;
   margin: 0;
   font-family: $session-font-default;
-  font-size: 14px;
   letter-spacing: 0.3px;
 }
 
@@ -102,7 +102,7 @@ a {
   .message {
     -webkit-user-select: text;
     user-select: text;
-    max-width: 35em;
+    max-width: 35rem;
   }
 
   .dot {

stylesheets/_index.scss

@@ -31,7 +31,7 @@
 
   .module-avatar {
     display: block;
-    margin-bottom: 1em;
+    margin-bottom: 1rem;
   }
 
   .avatar-center {
@@ -52,7 +52,7 @@
 .section-conversations-container {
   display: flex;
   flex-direction: row;
-  margin-inline-end: 3em;
+  margin-inline-end: 3rem;
   align-items: center;
 
   h4 {

stylesheets/_modal.scss

@@ -13,7 +13,7 @@
     position: relative;
     max-width: 350px;
     margin: 100px auto;
-    padding: 1em;
+    padding: 1rem;
     background-color: var(--modal-background-content-color);
     border-radius: var(--border-radius);
     overflow: auto;
@@ -23,7 +23,7 @@
 
 /* remove scroll bars */
 .loki-dialog .add-moderators-dialog .content {
-  padding: 1.1em;
+  padding: 1.1rem;
 }
 
 .session-modal {

stylesheets/_modules.scss

@@ -420,7 +420,7 @@
 
   .session-button {
     width: 160px;
-    margin: 1em auto;
+    margin: 1rem auto;
   }
 }
 
@@ -957,7 +957,7 @@
   font-size: 14px;
 
   overflow: hidden;
-  height: 2.4em;
+  height: 2.4rem;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;

stylesheets/_session_signin.scss

@@ -69,7 +69,7 @@
       font-size: 14px;
       font-weight: 700;
       line-height: 14px;
-      padding-top: 2em;
+      padding-top: 2rem;
       text-align: center;
     }
 

stylesheets/manifest.scss

@@ -15,7 +15,6 @@
 // Components
 @import 'modal';
 @import 'lightbox';
-@import 'emoji';
 @import 'mentions';
 @import 'avatar';
 

ts/components/AboutView.tsx

@@ -15,7 +15,7 @@ const StyledContent = styled.div`
 
   img {
     padding: 12px;
-    margin-top: 1em;
+    margin-top: 1rem;
   }
 
   a {

ts/components/DebugLogView.tsx

@@ -17,8 +17,8 @@ const StyledContent = styled.div`
   height: 100%;
 
   .session-button {
-    margin: 1em auto 1em 0;
+    margin: 1rem auto 1rem 0;
-    padding: 1em;
+    padding: 1rem;
     width: fit-content;
   }
 

ts/components/basic/YourSessionIDPill.tsx

@@ -4,14 +4,14 @@ import { UserUtils } from '../../session/utils';
 
 const StyledPillDividerLine = styled.div`
   border-bottom: 1px solid var(--border-color);
-  line-height: 0.1em;
+  line-height: 0.1rem;
   flex-grow: 1;
   height: 1px;
   align-self: center;
 `;
 
 const StyledPillSpan = styled.span`
-  padding: 5px 15px;
+  padding: 6px 15px 5px;
   border-radius: 50px;
   color: var(--text-primary-color);
   border: 1px solid var(--border-color);

ts/components/conversation/Emojify.tsx

@@ -41,5 +41,5 @@ export const Emojify = (props: Props): JSX.Element => {
     default:
   }
 
-  return <span style={{ fontSize: `${size}em`, userSelect: 'inherit' }}>{rendered}</span>;
+  return <span style={{ fontSize: `${size}rem`, userSelect: 'inherit' }}>{rendered}</span>;
 };

ts/components/conversation/SessionFileDropzone.tsx

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

ts/components/conversation/composition/EmojiQuickResult.tsx

@@ -6,6 +6,8 @@ import { SearchIndex } from 'emoji-mart';
 import { searchSync } from '../../../util/emoji.js';
 
 const EmojiQuickResult = styled.span`
+  display: flex;
+  align-items: center;
   width: 100%;
   padding-inline-end: 20px;
   padding-inline-start: 10px;
@@ -13,7 +15,7 @@ const EmojiQuickResult = styled.span`
 const EmojiQuickResultIcon = styled.span`
   padding-inline-end: 20px;
   padding-inline-start: 10px;
-  font-size: 1.4em;
+  font-size: 1.4rem;
 `;
 const EmojiQuickResultText = styled.span``;
 

ts/components/conversation/message/message-item/GenericReadableMessage.tsx

@@ -115,7 +115,7 @@ const StyledReadableMessage = styled(ReadableMessage)<{
   display: flex;
   align-items: center;
   width: 100%;
-  letter-spacing: 0.03em;
+  letter-spacing: 0.03rem;
   padding: var(--margins-xs) var(--margins-lg) 0;
 
   &.message-highlighted {

ts/components/icon/SessionNotificationCount.tsx

@@ -8,9 +8,10 @@ type Props = {
 const StyledCountContainer = styled.div<{ shouldRender: boolean }>`
   position: absolute;
   font-size: 18px;
+  line-height: 1.2;
   top: 27px;
-  right: 8px;
+  left: 28px;
-  padding: 0 6px;
+  padding: 1px 4px;
   opacity: 1;
   display: flex;
   align-items: center;

ts/components/leftpane/MessageRequestsBanner.tsx

@@ -48,7 +48,7 @@ const StyledUnreadCounter = styled.div`
   margin-left: var(--margins-sm);
   min-width: 20px;
   height: 20px;
-  line-height: 25px;
+  line-height: 20px;
   display: flex;
   flex-direction: row;
   align-items: center;

ts/themes/classicDark.ts

@@ -64,7 +64,7 @@ export const classicDark: ThemeColorVariables = {
   '--button-icon-stroke-selected-color': 'var(--text-primary-color)',
 
   '--conversation-tab-background-color': 'var(--background-primary-color)',
-  '--conversation-tab-background-hover-color': THEMES.CLASSIC_DARK.COLOR2,
+  '--conversation-tab-background-hover-color': THEMES.CLASSIC_DARK.COLOR3,
   '--conversation-tab-background-selected-color': THEMES.CLASSIC_DARK.COLOR3,
   '--conversation-tab-background-unread-color': THEMES.CLASSIC_DARK.COLOR2,
   '--conversation-tab-text-color': 'var(--text-secondary-color)',
@@ -153,4 +153,7 @@ export const classicDark: ThemeColorVariables = {
   '--call-buttons-icon-disabled-color': 'var(--text-primary-color)',
   '--call-buttons-dropdown-color': 'var(--text-primary-color)',
   '--call-buttons-dropdown-shadow': '0 0 4px 0 var(grey-color)',
+
+  '--file-dropzone-background-color': 'var(--message-link-preview-background-color)',
+  '--file-dropzone-border-color': 'var(--primary-color)',
 };

ts/themes/classicLight.ts

@@ -153,4 +153,7 @@ export const classicLight: ThemeColorVariables = {
   '--call-buttons-icon-disabled-color': 'var(--disabled-color)',
   '--call-buttons-dropdown-color': 'var(--text-primary-color)',
   '--call-buttons-dropdown-shadow': '0 0 4px 0 var(grey-color)',
+
+  '--file-dropzone-background-color': 'var(--message-link-preview-background-color)',
+  '--file-dropzone-border-color': 'var(--text-primary-color)',
 };

ts/themes/oceanDark.ts

@@ -154,4 +154,7 @@ export const oceanDark: ThemeColorVariables = {
   '--call-buttons-icon-disabled-color': THEMES.OCEAN_DARK.COLOR7!,
   '--call-buttons-dropdown-color': 'var(--text-primary-color)',
   '--call-buttons-dropdown-shadow': '0 0 4px 0 var(grey-color)',
+
+  '--file-dropzone-background-color': 'var(--message-link-preview-background-color)',
+  '--file-dropzone-border-color': 'var(--primary-color)',
 };

ts/themes/oceanLight.ts

@@ -154,4 +154,7 @@ export const oceanLight: ThemeColorVariables = {
   '--call-buttons-icon-disabled-color': 'var(--disabled-color)',
   '--call-buttons-dropdown-color': 'var(--text-primary-color)',
   '--call-buttons-dropdown-shadow': '0 0 4px 0 var(grey-color)',
+
+  '--file-dropzone-background-color': 'var(--message-link-preview-background-color)',
+  '--file-dropzone-border-color': 'var(--text-primary-color)',
 };

ts/themes/variableColors.tsx

@@ -189,6 +189,10 @@ export type ThemeColorVariables = {
   '--call-buttons-icon-disabled-color': string;
   '--call-buttons-dropdown-color': string;
   '--call-buttons-dropdown-shadow': string;
+
+  /* File Dropzone */
+  '--file-dropzone-background-color': string;
+  '--file-dropzone-border-color': string;
 };
 
 export function loadThemeColors(variables: ThemeColorVariables) {