feat: updated danger color setup

updated inbox color and added modal colors to SessionTheme

stylesheets/_index.scss

@@ -6,7 +6,7 @@
 
 .inbox.index {
   display: flex;
-  background-color: var(--color-inbox-background);
+  background-color: var(--background-primary-color);
 }
 
 .edit-profile-dialog,

stylesheets/_session_conversation.scss

@@ -137,7 +137,7 @@
 
     &.show {
       display: flex;
-      background: var(--color-inbox-background);
+      background: var(--background-primary-color);
     }
   }
 }

stylesheets/_session_theme.scss

@@ -78,8 +78,8 @@
 }
 
 .inbox {
-  background: var(--color-inbox-background);
+  background: var(--background-primary-color);
-  color: var(--color-text);
+  color: var(--text-primary-color);
 }
 
 .conversation {

ts/components/SessionInboxView.tsx

@@ -47,7 +47,6 @@ type State = {
 const StyledGutter = styled.div`
   width: 380px !important;
   transition: none;
-  background: var(--color-cell-background);
 `;
 
 export class SessionInboxView extends React.Component<any, State> {

ts/components/conversation/message/message-content/MessageReactions.tsx

@@ -37,7 +37,7 @@ const StyledReactionOverflow = styled.button`
 
   span {
     background-color: var(--color-received-message-background);
-    border: 1px solid var(--color-inbox-background);
+    border: 1px solid var(--border-color);
     border-radius: 50%;
     overflow: hidden;
     margin-right: -9px;

ts/themes/SessionTheme.tsx

@@ -465,9 +465,10 @@ export const SessionGlobalStyles = createGlobalStyle`
     --red-color: ${COLORS.PRIMARY.RED};
     /* TODO Theming this should be overridable */
     --primary-color: ${THEMES.CLASSIC_LIGHT.PRIMARY};
-    --danger-color: ${COLORS.DANGER.LIGHT};
+    --danger-color: ${THEMES.CLASSIC_LIGHT.DANGER};
     --transparent-color: ${COLORS.TRANSPARENT};
     --white-color: ${COLORS.WHITE};
+    --black-color: ${COLORS.BLACK};
 
     /* Backgrounds */
     --background-primary-color: ${THEMES.CLASSIC_LIGHT.COLOR6};
@@ -611,6 +612,12 @@ export const SessionGlobalStyles = createGlobalStyle`
     --emoji-reaction-bar-icon-color: var(--text-primary-color);
 
     /* TODO Theming - Should Pills have their own colors? */
+
+    /* Modals */
+    --modal-background-color: ${THEMES.CLASSIC_LIGHT.COLOR6};
+    --modal-text-color: var(--text-primary-color);
+    --modal-text-danger-color: var(--danger-color);
+
   };
 `;
 

ts/themes/colors.tsx

@@ -14,10 +14,6 @@ type Colors = {
     ORANGE: string;
     RED: string;
   };
-  DANGER: {
-    LIGHT: string;
-    DARK: string;
-  };
   PATH: {
     DEFAULT: string;
     CONNECTING: string;
@@ -26,6 +22,7 @@ type Colors = {
   SESSION: string;
   TRANSPARENT: string;
   WHITE: string;
+  BLACK: string;
 };
 
 // Session Brand Color
@@ -55,6 +52,9 @@ const transparent = 'transparent';
 // White
 const white = '#FFFFFF';
 
+// Black
+const black = '#000000';
+
 const COLORS: Colors = {
   PRIMARY: {
     GREEN: primaryGreen,
@@ -65,10 +65,6 @@ const COLORS: Colors = {
     ORANGE: primaryOrange,
     RED: primaryRed,
   },
-  DANGER: {
-    LIGHT: dangerLight,
-    DARK: dangerDark,
-  },
   PATH: {
     DEFAULT: pathDefault,
     CONNECTING: pathConnecting,
@@ -77,12 +73,14 @@ const COLORS: Colors = {
   SESSION: sessionGreen,
   TRANSPARENT: transparent,
   WHITE: white,
+  BLACK: black,
 };
 
 // Themes
 type ThemeNames = 'CLASSIC_LIGHT' | 'CLASSIC_DARK' | 'OCEAN_LIGHT' | 'OCEAN_DARK';
 type ThemeColors = {
   PRIMARY: string;
+  DANGER: string;
   COLOR0: string;
   COLOR1: string;
   COLOR2: string;
@@ -95,6 +93,7 @@ type Themes = Record<ThemeNames, ThemeColors>;
 
 // Classic Light
 const classicLightPrimary = '#31F196';
+const classicLightDanger = dangerDark;
 const classicLight0 = '#000000';
 const classicLight1 = '#6D6D6D';
 const classicLight2 = '#A1A2A1';
@@ -105,6 +104,7 @@ const classicLight6 = '#FFFFFF';
 
 // Classic Dark
 const classicDarkPrimary = '#31F196';
+const classicDarkDanger = dangerLight;
 const classicDark0 = '#000000';
 const classicDark1 = '#1B1B1B';
 const classicDark2 = '#2D2D2D';
@@ -115,6 +115,7 @@ const classicDark6 = '#FFFFFF';
 
 // Ocean Light
 const oceanLightPrimary = '#57C9FA';
+const oceanLightDanger = dangerDark;
 const oceanLight0 = '#000000';
 const oceanLight1 = '#1A1C28';
 const oceanLight2 = '#252735';
@@ -125,6 +126,7 @@ const oceanLight6 = '#FFFFFF';
 
 // Ocean Dark
 const oceanDarkPrimary = '#57C9FA';
+const oceanDarkDanger = dangerLight;
 const oceanDark0 = '#19345D';
 const oceanDark1 = '#6A6E90';
 const oceanDark2 = '#5CAACC';
@@ -136,6 +138,7 @@ const oceanDark6 = '#FCFFFF';
 const THEMES: Themes = {
   CLASSIC_LIGHT: {
     PRIMARY: classicLightPrimary,
+    DANGER: classicLightDanger,
     COLOR0: classicLight0,
     COLOR1: classicLight1,
     COLOR2: classicLight2,
@@ -146,6 +149,7 @@ const THEMES: Themes = {
   },
   CLASSIC_DARK: {
     PRIMARY: classicDarkPrimary,
+    DANGER: classicDarkDanger,
     COLOR0: classicDark0,
     COLOR1: classicDark1,
     COLOR2: classicDark2,
@@ -156,6 +160,7 @@ const THEMES: Themes = {
   },
   OCEAN_LIGHT: {
     PRIMARY: oceanLightPrimary,
+    DANGER: oceanLightDanger,
     COLOR0: oceanLight0,
     COLOR1: oceanLight1,
     COLOR2: oceanLight2,
@@ -166,6 +171,7 @@ const THEMES: Themes = {
   },
   OCEAN_DARK: {
     PRIMARY: oceanDarkPrimary,
+    DANGER: oceanDarkDanger,
     COLOR0: oceanDark0,
     COLOR1: oceanDark1,
     COLOR2: oceanDark2,