diff --git a/web/modals/threads/notifications/enum-settings-option-info.css b/web/modals/threads/notifications/enum-settings-option-info.css new file mode 100644 --- /dev/null +++ b/web/modals/threads/notifications/enum-settings-option-info.css @@ -0,0 +1,14 @@ +div.optionInfo { + display: flex; + align-items: center; + column-gap: 4px; +} + +div.optionInfoInvalid { + text-decoration: line-through; + color: var(--notification-settings-option-invalid-color); +} + +div.optionContainerSelected div.optionInfoInvalid { + color: var(--notification-settings-option-invalid-selected-color); +} diff --git a/web/modals/threads/notifications/enum-settings-option-info.react.js b/web/modals/threads/notifications/enum-settings-option-info.react.js --- a/web/modals/threads/notifications/enum-settings-option-info.react.js +++ b/web/modals/threads/notifications/enum-settings-option-info.react.js @@ -4,7 +4,7 @@ import * as React from 'react'; import SWMansionIcon from '../../../SWMansionIcon.react'; -import css from './notifications-modal.css'; +import css from './enum-settings-option-info.css'; type Props = { +valid: boolean, diff --git a/web/modals/threads/notifications/notifications-modal.css b/web/modals/threads/notifications/enum-settings-option.css copy from web/modals/threads/notifications/notifications-modal.css copy to web/modals/threads/notifications/enum-settings-option.css --- a/web/modals/threads/notifications/notifications-modal.css +++ b/web/modals/threads/notifications/enum-settings-option.css @@ -1,18 +1,3 @@ -div.container { - display: flex; - flex-direction: column; - color: var(--fg); - margin: 24px 32px; - row-gap: 40px; - min-width: 343px; -} - -div.optionsContainer { - display: flex; - flex-direction: column; - row-gap: 12px; -} - div.optionContainer { display: flex; padding: 16px 32px 16px 16px; @@ -49,18 +34,3 @@ flex-direction: column; row-gap: 4px; } - -div.optionInfo { - display: flex; - align-items: center; - column-gap: 4px; -} - -div.optionInfoInvalid { - text-decoration: line-through; - color: var(--notification-settings-option-invalid-color); -} - -div.optionContainerSelected div.optionInfoInvalid { - color: var(--notification-settings-option-invalid-selected-color); -} diff --git a/web/modals/threads/notifications/enum-settings-option.react.js b/web/modals/threads/notifications/enum-settings-option.react.js --- a/web/modals/threads/notifications/enum-settings-option.react.js +++ b/web/modals/threads/notifications/enum-settings-option.react.js @@ -5,7 +5,7 @@ import Radio from '../../../components/radio.react'; import EnumSettingsOptionInfo from './enum-settings-option-info.react'; -import css from './notifications-modal.css'; +import css from './enum-settings-option.css'; type Props = { +selected: boolean, diff --git a/web/modals/threads/notifications/notifications-modal.css b/web/modals/threads/notifications/notifications-modal.css --- a/web/modals/threads/notifications/notifications-modal.css +++ b/web/modals/threads/notifications/notifications-modal.css @@ -12,55 +12,3 @@ flex-direction: column; row-gap: 12px; } - -div.optionContainer { - display: flex; - padding: 16px 32px 16px 16px; - align-items: center; - border-radius: 8px; -} - -div.optionContainerSelected { - background: var(--notification-settings-option-selected-bg); -} - -div.optionIcon { - margin-right: 24px; -} - -div.optionContent { - display: flex; - flex-direction: column; - flex: 1; - line-height: var(--line-height-text); -} - -div.optionTitle { - font-size: var(--m-font-16); - font-weight: var(--semi-bold); - color: var(--notification-settings-option-title-color); - margin-bottom: 4px; -} - -div.optionDescription { - font-size: var(--xs-font-12); - color: var(--notification-settings-option-color); - display: flex; - flex-direction: column; - row-gap: 4px; -} - -div.optionInfo { - display: flex; - align-items: center; - column-gap: 4px; -} - -div.optionInfoInvalid { - text-decoration: line-through; - color: var(--notification-settings-option-invalid-color); -} - -div.optionContainerSelected div.optionInfoInvalid { - color: var(--notification-settings-option-invalid-selected-color); -}