fix: changed remaing ems to rem and set root font size

Author: yougotwill

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;
 }
 

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;
-    padding: 1em;
+    margin: 1rem auto 1rem 0;
+    padding: 1rem;
     width: fit-content;
   }
 

ts/components/basic/YourSessionIDPill.tsx

@@ -4,7 +4,7 @@ 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;

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/composition/EmojiQuickResult.tsx

@@ -13,7 +13,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

@@ -113,7 +113,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 {