oxen-io/session-desktop
1
0
Fork 0
mirror of https://github.com/oxen-io/session-desktop.git synced 2023-12-14 02:12:57 +01:00
Code Issues Projects Releases Wiki Activity

feat: updated theming for search bars

Browse source
This commit is contained in:
William Grant 2022-10-10 11:35:26 +11:00
parent f6bd149def
commit 692ebd3e47
3 changed files with 24 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
ts/components/SessionHeaderSearchInput.tsx
View file

@ -1,8 +1,8 @@
import styled from 'styled-components';
export const SessionHeaderSearchInput = styled.input<{ darkMode: boolean }>`
color: var(--input-text-color);
background-color: var(--input-background-color);
color: var(--search-bar-text-control-color);
background-color: var(--search-bar-background-color);
border: 1px solid var(--input-border-color);
padding: 0 26px 0 30px;
margin-inline-start: 8px;
@ -19,11 +19,13 @@ export const SessionHeaderSearchInput = styled.input<{ darkMode: boolean }>`
border-radius: '4px';
&::placeholder {
color: var(--input-text-placeholder-color);
color: var(--search-bar-text-control-color);
}
&:focus {
border: solid 1px var(${props => (props.darkMode ? '--primary-color' : '--input-text-color')});
border: solid 1px
var(${props => (props.darkMode ? '--primary-color' : '--search-bar-text-user-color')});
color: var(--search-bar-text-user-color);
outline: none;
}
`;

20
ts/components/SessionSearchInput.tsx
View file

@ -8,7 +8,6 @@ import { getOverlayMode } from '../state/selectors/section';
import { cleanSearchTerm } from '../util/cleanSearchTerm';
import { SessionIconButton } from './icon';
// TODO Theming possibly update to use Search Bar Component Colors
const StyledSearchInput = styled.div`
height: var(--search-input-height);
width: 100%;
@ -19,6 +18,15 @@ const StyledSearchInput = styled.div`
.session-icon-button {
margin: auto 10px;
&:hover svg path {
fill: var(--search-bar-icon-hover-color);
}
}
&:hover {
svg path:first-child {
fill: var(--search-bar-icon-hover-color);
}
}
`;
@ -31,9 +39,10 @@ const StyledInput = styled.input`
font-family: var(--font-default);
text-overflow: ellipsis;
background: none;
color: var(--conversation-tab-text-color);
color: var(--search-bar-text-control-color);
&:focus {
color: var(--search-bar-text-user-color);
outline: none !important;
}
`;
@ -81,7 +90,11 @@ export const SessionSearchInput = () => {
return (
<StyledSearchInput>
<SessionIconButton iconSize="medium" iconType="search" />
<SessionIconButton
iconColor="var(--search-bar-icon-color)"
iconSize="medium"
iconType="search"
/>
<StyledInput
value={currentSearchTerm}
onChange={e => {
@ -93,6 +106,7 @@ export const SessionSearchInput = () => {
/>
{Boolean(currentSearchTerm.length) && (
<SessionIconButton
iconColor="var(--search-bar-icon-color)"
iconSize="tiny"
iconType="exit"
onClick={() => {

4
ts/themes/SessionTheme.tsx
View file

@ -556,9 +556,8 @@ export const SessionGlobalStyles = createGlobalStyle`
--button-icon-stroke-hover-color: var(--text-primary-color);
--button-icon-stroke-selected-color: var(--text-primary-color);
/* TODO Theming Consolidate with code */
/* Conversation Tab */
/* This is also user for Overlay Tabs, Contact Rows, Convesation List Items, Message Search Results, Session Search Input?, Message Requests Banner, Member List Item, Contact List Items, Message Right Click Highlighting etc. */
/* This is also user for Overlay Tabs, Contact Rows, Convesation List Items, Message Search Results, Message Requests Banner, Member List Item, Contact List Items, Message Right Click Highlighting etc. */
--conversation-tab-background-color: ${THEMES.CLASSIC_LIGHT.COLOR6};
--conversation-tab-background-hover-color: ${THEMES.CLASSIC_LIGHT.COLOR4};
--conversation-tab-background-selected-color: ${THEMES.CLASSIC_LIGHT.COLOR4};
@ -569,7 +568,6 @@ export const SessionGlobalStyles = createGlobalStyle`
--conversation-tab-text-secondary-color: var(--text-secondary-color);
--conversation-tab-bubble-background-color: ${THEMES.CLASSIC_LIGHT.COLOR3};
--conversation-tab-bubble-text-color: var(--text-primary-color);
/* TODO Theming account for overriding */
--conversation-tab-color-strip-color: var(--primary-color);
/* Search Bar */