diff --git a/web/modals/apps/app-listing.react.js b/web/modals/apps/app-listing.react.js --- a/web/modals/apps/app-listing.react.js +++ b/web/modals/apps/app-listing.react.js @@ -55,8 +55,8 @@ } const iconClasses = classnames({ [css.appListingIconState]: true, - [css.iconEnabled]: enabled, - [css.iconDisabled]: !enabled, + [css.iconSelected]: enabled, + [css.iconUnselected]: !enabled, }); return ( <Button className={iconClasses} onClick={switchAppState}> diff --git a/web/modals/apps/apps.css b/web/modals/apps/apps.css --- a/web/modals/apps/apps.css +++ b/web/modals/apps/apps.css @@ -5,12 +5,6 @@ padding-bottom: 16px; } -h4.appsHeader { - color: var(--fg); - padding: 20px 0 40px 40px; - font-weight: var(--semi-bold); -} - div.appsDirectoryList { display: flex; flex-direction: column; @@ -21,7 +15,7 @@ } div.appListingContainer { - color: var(--fg); + color: var(--text-background-primary-default); display: flex; flex-direction: row; align-items: space-between; @@ -55,13 +49,13 @@ } div.iconReadOnly { - color: var(--app-list-icon-read-only-color); + color: var(--button-background-tetriary-disabled); } -.iconEnabled { - color: var(--app-list-icon-enabled-color); +.iconSelected { + color: var(--button-background-success-default); } -.iconDisabled { - color: var(--app-list-icon-disabled-color); +.iconUnselected { + color: var(--button-background-tetriary-default); } diff --git a/web/theme.css b/web/theme.css --- a/web/theme.css +++ b/web/theme.css @@ -126,8 +126,6 @@ --menu-color-hover: var(--shades-white-100); --menu-color-dangerous: var(--error-primary); --menu-color-dangerous-hover: var(--error-light-50); - --app-list-icon-read-only-color: var(--shades-black-50); - --app-list-icon-enabled-color: var(--success-primary); --app-list-icon-disabled-color: var(--shades-white-80); --chat-thread-list-color-active: var(--shades-white-60); --chat-thread-list-menu-color: var(--shades-white-60); @@ -266,9 +264,12 @@ /* Button */ --button-background-primary-default: var(--violet-dark-100); --button-background-secondary-default: var(--shades-black-75); + --button-background-tetriary-default: var(--shades-white-80); + --button-background-success-default: var(--success-primary); --button-background-primary-hover: var(--violet-dark-80); --button-background-secondary-hover: var(--shades-black-60); --button-background-primary-disabled: var(--shades-black-75); + --button-background-tetriary-disabled: var(--shades-black-50); --button-border-outline-default: var(--shades-black-50); --button-label-primary-default: var(--shades-white-100); --button-label-secondary-default: var(--shades-white-60); @@ -329,9 +330,12 @@ /* Button */ --button-background-primary-default: var(--violet-dark-100); --button-background-secondary-default: var(--shades-black-50); + --button-background-tetriary-default: var(--shades-black-75); + --button-background-success-default: var(--success-primary); --button-background-primary-hover: var(--violet-dark-80); --button-background-secondary-hover: var(--shades-black-60); --button-background-primary-disabled: var(--shades-white-60); + --button-background-tetriary-disabled: var(--shades-black-50); --button-border-outline-default: var(--shades-black-50); --button-label-primary-default: var(--shades-white-100); --button-label-secondary-default: var(--shades-white-90);