From 64792689b85ed419ce9099185f3ad67fc542b735 Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Thu, 15 Sep 2022 12:16:49 +1000
Subject: [PATCH] feat: styled pill container and added some more colors

---
 ts/components/basic/PillContainer.tsx |  5 +++--
 ts/themes/SessionTheme.tsx            | 22 ++++++++++++++--------
 ts/themes/colors.tsx                  | 10 ++++++++++
 3 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/ts/components/basic/PillContainer.tsx b/ts/components/basic/PillContainer.tsx
index cc8766fdf..3c9e37fcb 100644
--- a/ts/components/basic/PillContainer.tsx
+++ b/ts/components/basic/PillContainer.tsx
@@ -40,10 +40,11 @@ const StyledPillInner = styled.div<PillContainerProps>`
   margin: ${props => props.margin || ''};
   border-radius: 300px;
   cursor: ${props => (props.disableHover ? 'unset' : 'pointer')};
-  border: 1px solid var(--color-pill-divider);
+  border: 1px solid var(--border-color);
   transition: var(--default-duration);
   &:hover {
-    background: ${props => (props.disableHover ? 'none' : 'var(--color-clickable-hovered)')};
+    background: ${props =>
+      props.disableHover ? 'none' : 'var(--button-solid-background-hover-color)'};
   }
 `;
 
diff --git a/ts/themes/SessionTheme.tsx b/ts/themes/SessionTheme.tsx
index 8bc48ce1d..87d8fe79e 100644
--- a/ts/themes/SessionTheme.tsx
+++ b/ts/themes/SessionTheme.tsx
@@ -467,6 +467,7 @@ export const SessionGlobalStyles = createGlobalStyle`
     --primary-color: ${THEMES.CLASSIC_LIGHT.PRIMARY};
     --danger-color: ${COLORS.DANGER.LIGHT};
     --transparent-color: ${COLORS.TRANSPARENT};
+    --white-color: ${COLORS.WHITE};
 
     /* Backgrounds */
     --background-primary-color: ${THEMES.CLASSIC_LIGHT.COLOR6};
@@ -513,14 +514,7 @@ export const SessionGlobalStyles = createGlobalStyle`
 
     /* TODO Theming probably consolidate this */
     /* Buttons */
-    /* TODO Theming are solid buttons ever disabled? */
-    /* Solid */
-    --button-solid-background-color: var(--background-primary-color);
-    --button-solid-background-hover-color: ${THEMES.CLASSIC_LIGHT.COLOR4};
-    --button-solid-text-color: var(--text-primary-color);
-    --button-solid-text-hover-color: var(--text-primary-color);
-
-    /* Outline */
+    /* Outline (Default) */
     --button-outline-background-color: var(--transparent-color);
     --button-outline-background-hover-color: rgba(${hexColorToRGB(
       THEMES.CLASSIC_LIGHT.COLOR0
@@ -532,6 +526,18 @@ export const SessionGlobalStyles = createGlobalStyle`
     --button-outline-border-hover-color: var(--text-primary-color);
     --button-outline-disabled-color: var(--text-secondary-color);
 
+    /* TODO Theming are solid buttons ever disabled? */
+    /* Solid */
+    /* TODO Theming - Should Pills have their own colors */
+    /* Also used for Pills */
+    --button-solid-background-color: var(--background-primary-color);
+    --button-solid-background-hover-color: ${THEMES.CLASSIC_LIGHT.COLOR4};
+    --button-solid-text-color: var(--text-primary-color);
+    --button-solid-text-hover-color: var(--text-primary-color);
+    --button-solid-disabled-color: var(--text-secondary-color);
+      /* TODO Theming - Only light themes have shadows? */
+    --button-solid-shadow-color: rgba(${hexColorToRGB(THEMES.CLASSIC_LIGHT.COLOR0)}, 0.25);
+
     /* Icons */
     --button-icon-background-color: var(--transparent-color);
     --button-icon-stroke-color: var(--text-secondary-color);
diff --git a/ts/themes/colors.tsx b/ts/themes/colors.tsx
index 0f5550e68..ffaa015c3 100644
--- a/ts/themes/colors.tsx
+++ b/ts/themes/colors.tsx
@@ -23,9 +23,14 @@ type Colors = {
     CONNECTING: string;
     ERROR: string;
   };
+  SESSION: string;
   TRANSPARENT: string;
+  WHITE: string;
 };
 
+// Session Brand Color
+const sessionGreen = '#00f782';
+
 // Primary (can override theme default)
 const primaryGreen = '#31F196';
 const primaryBlue = '#57C9FA';
@@ -47,6 +52,9 @@ const pathError = '#EA5545';
 // Transparent
 const transparent = 'transparent';
 
+// White
+const white = '#FFFFFF';
+
 const COLORS: Colors = {
   PRIMARY: {
     GREEN: primaryGreen,
@@ -66,7 +74,9 @@ const COLORS: Colors = {
     CONNECTING: pathConnecting,
     ERROR: pathError,
   },
+  SESSION: sessionGreen,
   TRANSPARENT: transparent,
+  WHITE: white,
 };
 
 // Themes