Tweak colours more to differentiate filter UI & lowlights btter

Author: pimterry

src/components/send/send-tabs.tsx

@@ -18,7 +18,7 @@ const TabsContainer = styled.div.attrs(() => ({
     height: ${TAB_BAR_HEIGHT};
     box-sizing: border-box;
 
-    background-color: ${p => p.theme.containerBackground};
+    background-color: ${p => p.theme.mainLowlightBackground};
 
     font-size: ${p => p.theme.textSize};
 

src/components/view/filters/filter-input.tsx

@@ -36,8 +36,8 @@ const FilterInputField = styled.input`
     border: none;
     outline: none;
 
-    background-color: ${p => p.theme.highlightBackground};
-    color: ${p => p.theme.highlightColor};
+    background-color: ${p => p.theme.inputBackground};
+    color: ${p => p.theme.inputColor};
     font-size: ${p => p.theme.textSize};
 
     ::placeholder {
@@ -57,6 +57,8 @@ const FilterSuggestionsBox = styled.div`
     z-index: 1;
 
     background-color: ${p => p.theme.mainBackground};
+    color: ${p => p.theme.mainColor};
+
     border: 1px solid ${p => p.theme.containerBorder};
     box-shadow: 0 2px 4px 0 rgba(0,0,0,${p => p.theme.boxShadowAlpha});
 
@@ -71,7 +73,6 @@ const FilterSuggestionsBox = styled.div`
         border-radius: 4px;
     }
 
-    color: ${p => p.theme.highlightColor};
     font-size: ${p => p.theme.textSize};
 
     &:empty {

src/components/view/filters/filter-suggestion-row.tsx

@@ -21,6 +21,10 @@ const SuggestionRowContainer = styled.div<{ isHighlighted: boolean }>`
         ? p.theme.highlightBackground
         : p.theme.mainBackground
     };
+    color: ${p => p.isHighlighted
+        ? p.theme.highlightColor
+        : p.theme.mainColor
+    };
 
     ${p => p.isHighlighted && css`
         ${SuggestedText} {
@@ -62,13 +66,15 @@ const SuggestionDeleteButton = styled(IconButton).attrs(() => ({
 
 const SuggestionDescription = styled(SuggestionRowPart)`
     background-color: ${p => p.theme.mainLowlightBackground};
+    color: ${p => p.theme.mainColor};
     box-shadow:
         inset 0px 12px 8px -10px rgba(0,0,0,${p => p.theme.boxShadowAlpha}),
         inset 0px -8px 8px -10px rgba(0,0,0,${p => p.theme.boxShadowAlpha});
 
     white-space: pre; /* Nowrap + show spaces accurately */
     overflow: hidden;
     text-overflow: ellipsis;
+    font-style: italic;
 `;
 
 export const FilterSuggestionRow = (props: {

src/components/view/filters/filter-tag.tsx

@@ -50,6 +50,8 @@ const FilterTagContainer = styled.div`
     margin-right: 5px;
 
     background-color: ${p => p.theme.mainBackground};
+    color: ${p => p.theme.mainColor};
+
     border: 1px solid ${p => p.theme.containerWatermark};
     box-shadow: 0 2px 4px 0 rgba(0,0,0,${p => p.theme.boxShadowAlpha});
     border-radius: 3px;

src/components/view/filters/search-filter.tsx

@@ -44,7 +44,7 @@ const SearchFilterBox = styled.div<{ hasContents: boolean }>`
 
     border: 1px solid ${p => p.theme.containerBorder};
     box-shadow: inset 0 2px 4px 1px rgba(0, 0, 0, ${p => p.theme.boxShadowAlpha / 2});
-    background-color: ${p => p.theme.highlightBackground};
+    background-color: ${p => p.theme.inputBackground};
     color: ${p => p.theme.highlightColor};
 
     font-size: ${p => p.theme.textSize};
@@ -74,7 +74,7 @@ const SearchFilterBox = styled.div<{ hasContents: boolean }>`
         background: linear-gradient(
             to right,
             transparent 0%,
-            ${p => polished.rgba(p.theme.highlightBackground, 0.9)} 25%
+            ${p => polished.rgba(p.theme.inputBackground, 0.9)} 25%
         );
     }
 

src/styles.ts

@@ -29,12 +29,14 @@ export const popColor = '#e1421f';
 const black = "#000000";
 const inkBlack = "#16181e";
 const inkGrey = "#1e2028";
+const darkerGrey = "#25262e";
 const darkGrey = "#32343B";
+const darkishGrey =  "#53565e";
 const mediumGrey = "#818490";
 const lightGrey = "#9a9da8";
-const brightGrey = "#d1d3da";
-const ghostGrey = "#e4e8ed"; // Actual brand color is e6e8f2 but it's just too blue
-const almostWhite = "#f2f2f2";
+const ghostGrey = "#e4e8ed";
+const greyWhite = "#f2f2f2";
+const almostWhite = "#fafafa";
 const white = "#ffffff";
 
 const darkerBlue = "#2d4cbd";
@@ -49,14 +51,14 @@ export const lightTheme = {
     titleTextFamily: 'Saira, "DM Sans", Arial, sans-serif',
     monoFontFamily: '"DM Mono", monospace',
 
-    mainBackground: white,
-    mainLowlightBackground: almostWhite,
+    mainBackground: almostWhite,
+    mainLowlightBackground: greyWhite,
     mainColor: inkGrey,
 
     lowlightTextOpacity: 0.65,
     boxShadowAlpha: 0.3,
 
-    pillContrast: 0.85,
+    pillContrast: 0.9,
     pillDefaultColor: lightGrey,
 
     primaryInputBackground: darkerBlue,
@@ -66,7 +68,7 @@ export const lightTheme = {
     secondaryInputColor: darkerBlue,
 
     inputBackground: white,
-    inputHoverBackground: almostWhite,
+    inputHoverBackground: greyWhite,
     inputBorder: darkGrey,
     inputColor: inkGrey,
 
@@ -103,7 +105,7 @@ export const darkTheme = {
     monoFontFamily: '"DM Mono", monospace',
 
     mainBackground: darkGrey,
-    mainLowlightBackground: inkBlack,
+    mainLowlightBackground: darkerGrey,
     mainColor: white,
 
     lowlightTextOpacity: 0.6,
@@ -120,10 +122,10 @@ export const darkTheme = {
 
     inputBackground: inkBlack,
     inputHoverBackground: inkGrey,
-    inputBorder: '#666',
+    inputBorder: darkishGrey,
     inputColor: white,
 
-    highlightBackground: inkBlack,
+    highlightBackground: darkishGrey,
     highlightColor: white,
 
     popColor,

src/util/colors.ts

@@ -9,7 +9,7 @@ export function getTextColor(baseColor: string, mainColor: string, contrastRatio
     // Calculate a color difference from 0 (black/white) - 1 (identical)
     const baseSimilarity = (polished.getContrast(baseColor, mainColor) - 1) / 20;
 
-    // Mix the colors, using between 30% & 100% of the base color, depending on how far
+    // Mix the colors, using between 35% & 100% of the base color, depending on how far
     // off we are and how much constrast we're aiming for (i.e. more maincolor for HC theme)
     const constrastBias = 1 - contrastRatio;
     const baseWeighting = 0.35 + (baseSimilarity * constrastBias) * 0.65;