Merge pull request oxen-io#2599 from yougotwill/theming_hotfixes

Bilb · web-flow · commit 0794edeb69aa · 2022-11-11T09:52:19.000+11:00
Theming hotfixes
diff --git a/stylesheets/_emoji.scss b/stylesheets/_emoji.scss
diff --git a/stylesheets/_global.scss b/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 {
diff --git a/stylesheets/_index.scss b/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 {
diff --git a/stylesheets/_modal.scss b/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 {
diff --git a/stylesheets/_modules.scss b/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;
diff --git a/stylesheets/_session_signin.scss b/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;
     }
 
diff --git a/stylesheets/manifest.scss b/stylesheets/manifest.scss
@@ -15,7 +15,6 @@
 // Components
 @import 'modal';
 @import 'lightbox';
-@import 'emoji';
 @import 'mentions';
 @import 'avatar';
 
diff --git a/ts/components/AboutView.tsx b/ts/components/AboutView.tsx
@@ -15,7 +15,7 @@ const StyledContent = styled.div`
 
   img {
     padding: 12px;
-    margin-top: 1em;
+    margin-top: 1rem;
   }
 
   a {
diff --git a/ts/components/DebugLogView.tsx b/ts/components/DebugLogView.tsx
@@ -17,8 +17,8 @@ const StyledContent = styled.div`
   height: 100%;
 
   .session-button {
-    margin: 1em auto 1em 0;
-    padding: 1em;
+    margin: 1rem auto 1rem 0;
+    padding: 1rem;
     width: fit-content;
   }
 
diff --git a/ts/components/basic/YourSessionIDPill.tsx b/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);
diff --git a/ts/components/conversation/Emojify.tsx b/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>;
 };
diff --git a/ts/components/conversation/SessionFileDropzone.tsx b/ts/components/conversation/SessionFileDropzone.tsx
@@ -12,8 +12,8 @@ const DropZoneContainer = styled.div`
 `;
 
 const DropZoneWithBorder = styled.div`
-  border: dashed 4px var(--primary-color);
-  background-color: var(--message-link-preview-background-color);
+  border: dashed 4px var(--file-dropzone-border-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>
diff --git a/ts/components/conversation/composition/EmojiQuickResult.tsx b/ts/components/conversation/composition/EmojiQuickResult.tsx
@@ -6,14 +6,16 @@ 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;
 `;
 const EmojiQuickResultIcon = styled.span`
   padding-inline-end: 20px;
   padding-inline-start: 10px;
-  font-size: 1.4em;
+  font-size: 1.4rem;
 `;
 const EmojiQuickResultText = styled.span``;
 
diff --git a/ts/components/conversation/message/message-item/GenericReadableMessage.tsx b/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 {
diff --git a/ts/components/icon/SessionNotificationCount.tsx b/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;
-  padding: 0 6px;
+  left: 28px;
+  padding: 1px 4px;
   opacity: 1;
   display: flex;
   align-items: center;
diff --git a/ts/components/leftpane/MessageRequestsBanner.tsx b/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;
diff --git a/ts/themes/classicDark.ts b/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)',
 };
diff --git a/ts/themes/classicLight.ts b/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)',
 };
diff --git a/ts/themes/oceanDark.ts b/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)',
 };
diff --git a/ts/themes/oceanLight.ts b/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)',
 };
diff --git a/ts/themes/variableColors.tsx b/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) {

Original file line number	Diff line number	Diff line change
`@@ -420,7 +420,7 @@`
`420`	`420`
`421`	`421`	`.session-button {`
`422`	`422`	`width: 160px;`
`423`		`- margin: 1em auto;`
	`423`	`+ margin: 1rem auto;`
`424`	`424`	`}`
`425`	`425`	`}`
`426`	`426`
`@@ -957,7 +957,7 @@`
`957`	`957`	`font-size: 14px;`
`958`	`958`
`959`	`959`	`overflow: hidden;`
`960`		`- height: 2.4em;`
	`960`	`+ height: 2.4rem;`
`961`	`961`	`display: -webkit-box;`
`962`	`962`	`-webkit-line-clamp: 2;`
`963`	`963`	`-webkit-box-orient: vertical;`
Original file line number	Diff line number	Diff line change
`@@ -69,7 +69,7 @@`
`69`	`69`	`font-size: 14px;`
`70`	`70`	`font-weight: 700;`
`71`	`71`	`line-height: 14px;`
`72`		`- padding-top: 2em;`
	`72`	`+ padding-top: 2rem;`
`73`	`73`	`text-align: center;`
`74`	`74`	`}`
`75`	`75`
Original file line number	Diff line number	Diff line change
@@ -15,7 +15,7 @@ const StyledContent = styled.div`
`15`	`15`
`16`	`16`	`img {`
`17`	`17`	`padding: 12px;`
`18`		`- margin-top: 1em;`
	`18`	`+ margin-top: 1rem;`
`19`	`19`	`}`
`20`	`20`
`21`	`21`	`a {`
Original file line number	Diff line number	Diff line change
@@ -17,8 +17,8 @@ const StyledContent = styled.div`
`17`	`17`	`height: 100%;`
`18`	`18`
`19`	`19`	`.session-button {`
`20`		`- margin: 1em auto 1em 0;`
`21`		`- padding: 1em;`
	`20`	`+ margin: 1rem auto 1rem 0;`
	`21`	`+ padding: 1rem;`
`22`	`22`	`width: fit-content;`
`23`	`23`	`}`
`24`	`24`