diff --git a/assets/src/dashboard/parts/connected/settings/Menu.js b/assets/src/dashboard/parts/connected/settings/Menu.js index c688113d..90ebf8b3 100644 --- a/assets/src/dashboard/parts/connected/settings/Menu.js +++ b/assets/src/dashboard/parts/connected/settings/Menu.js @@ -28,6 +28,10 @@ const menuItems = [ label: strings.advanced_settings_menu_item, value: 'compression', children: [ + { + label: strings.settings_watermark_menu_item, + value: 'watermark' + }, { label: strings.settings_compression_menu_item, value: 'compression' diff --git a/assets/src/dashboard/parts/connected/settings/Watermark.js b/assets/src/dashboard/parts/connected/settings/Watermark.js new file mode 100644 index 00000000..6b27a2dd --- /dev/null +++ b/assets/src/dashboard/parts/connected/settings/Watermark.js @@ -0,0 +1,79 @@ +/** + * WordPress dependencies. + */ +import { + BaseControl, + Button +} from '@wordpress/components'; + +import { Icon, external } from '@wordpress/icons'; + +const Watermark = () => { + const { options_strings } = optimoleDashboardApp.strings; + + const containerStyle = { + border: '2px solid #DCDCDC', + borderRadius: '8px', + padding: '16px' + }; + + return ( + <> +
+

+ {options_strings.watermark_media_title} +

+

+ {options_strings.watermark_media_desc} +

+
+ +
+
+
+
+ {options_strings.watermark_info_1} +
+
+
+ {options_strings.watermark_info_2} +
+
+
+ {options_strings.watermark_info_3} +
+
+ +
+ + +
+ + {options_strings.watermark_footer} + +
+ + ); +}; + +export default Watermark; diff --git a/assets/src/dashboard/parts/connected/settings/index.js b/assets/src/dashboard/parts/connected/settings/index.js index 4bda66ec..14b80250 100644 --- a/assets/src/dashboard/parts/connected/settings/index.js +++ b/assets/src/dashboard/parts/connected/settings/index.js @@ -10,6 +10,7 @@ import Lazyload from './Lazyload'; import Exclusions from './Exclusions'; import OffloadMedia from './OffloadMedia'; import CloudLibrary from './CloudLibrary'; +import Watermark from './Watermark'; import { saveSettings } from '../../../utils/api'; import { toggleDamSidebarLink } from '../../../utils/helpers'; @@ -129,16 +130,23 @@ const Settings = ({ /> ) } + { 'watermark' === tab && ( + + ) } +
- + { 'watermark' !== tab && ( + + ) } { ( 'disabled' === settings.autoquality && 'compression' === tab ) && (