Merge pull request #2599 from yougotwill/theming_hotfixes

Theming hotfixes
2 years ago · 0794edeb69
parent f2e8fbdeb8 2bca956783
commit 0794edeb69
21 changed files with 47 additions and 101 deletions
--- a/stylesheets/_emoji.scss
+++ b/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;
-}
--- 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 {
--- 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 {
--- 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 {
--- 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;
--- 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;
    }

--- a/stylesheets/manifest.scss
+++ b/stylesheets/manifest.scss
@ -15,7 +15,6 @@
 // Components
@import 'modal';
@import 'lightbox';
-@import 'emoji';
@import 'mentions';
@import 'avatar';

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

--- 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);
--- 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>;
 };
--- 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>
--- a/ts/components/conversation/composition/EmojiQuickResult.tsx
+++ b/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``;

--- 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 {
--- 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;
--- 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;
--- 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)',
 };
--- 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)',
 };
--- 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)',
 };
--- 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)',
 };
--- 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) {