diff --git a/ts/components/settings/SessionSettingListItem.tsx b/ts/components/settings/SessionSettingListItem.tsx index a6ed9f0ad..9ca8d3003 100644 --- a/ts/components/settings/SessionSettingListItem.tsx +++ b/ts/components/settings/SessionSettingListItem.tsx @@ -26,7 +26,6 @@ export const StyledDescriptionSettingsItem = styled.div` font-size: var(--font-size-sm); font-weight: 400; max-width: 700px; - color: var(--color-text-subtle); `; export const StyledTitleSettingsItem = styled.div` @@ -47,10 +46,12 @@ const StyledDescriptionContainer = styled(StyledDescriptionSettingsItem)` export const StyledSettingItem = styled.div` font-size: var(--font-size-md); padding: var(--margins-lg); + margin-bottom: var(--margins-lg); - background: var(--color-cell-background); - color: var(--color-text); - border-bottom: var(--border-session); + background: var(--settings-tab-background-color); + color: var(--settings-tab-text-color); + border-top: 1px solid var(--border-color); + border-bottom: 1px solid var(--border-color); `; const StyledSettingItemInline = styled(StyledSettingItem)` @@ -61,9 +62,12 @@ const StyledSettingItemInline = styled(StyledSettingItem)` `; const StyledSettingItemClickable = styled(StyledSettingItemInline)` + cursor: pointer; :hover { - background: var(--color-clickable-hovered); - cursor: pointer; + background: var(--settings-tab-background-hover-color); + } + :active { + background: var(--settings-tab-background-selected-color); } `; diff --git a/ts/components/settings/SessionSettingsHeader.tsx b/ts/components/settings/SessionSettingsHeader.tsx index bfcbef88a..f08924bca 100644 --- a/ts/components/settings/SessionSettingsHeader.tsx +++ b/ts/components/settings/SessionSettingsHeader.tsx @@ -11,7 +11,6 @@ const StyledSettingsHeader = styled.div` justify-content: center; align-items: center; height: var(--main-view-header-height); - border-bottom: 1px solid var(--border-color); `; const StyledHeaderTittle = styled.div`