tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

WallpaperFeatureHighlight.jsx (3873B)

      1 /* This Source Code Form is subject to the terms of the Mozilla Public
      2 * License, v. 2.0. If a copy of the MPL was not distributed with this file,
      3 * You can obtain one at http://mozilla.org/MPL/2.0/. */
      4 
      5 import React, { useCallback } from "react";
      6 import { useSelector } from "react-redux";
      7 import { actionCreators as ac, actionTypes as at } from "common/Actions.mjs";
      8 import { FeatureHighlight } from "./FeatureHighlight";
      9 
     10 export function WallpaperFeatureHighlight({
     11  position,
     12  dispatch,
     13  handleDismiss,
     14  handleClick,
     15  handleBlock,
     16 }) {
     17  const onDismiss = useCallback(() => {
     18    handleDismiss();
     19    handleBlock();
     20  }, [handleDismiss, handleBlock]);
     21 
     22  const onToggleClick = useCallback(
     23    elementId => {
     24      dispatch({ type: at.SHOW_PERSONALIZE });
     25      dispatch(ac.UserEvent({ event: "SHOW_PERSONALIZE" }));
     26      handleClick(elementId);
     27      onDismiss();
     28    },
     29    [dispatch, onDismiss, handleClick]
     30  );
     31 
     32  // Extract the strings and feature ID from OMC
     33  const { messageData } = useSelector(state => state.Messages);
     34 
     35  return (
     36    <div
     37      className={`wallpaper-feature-highlight ${messageData.content?.darkModeDismiss ? "is-inverted-dark-dismiss-button" : ""}`}
     38    >
     39      <FeatureHighlight
     40        position={position}
     41        data-l10n-id="feature-highlight-wallpaper"
     42        feature={messageData.content.feature}
     43        dispatch={dispatch}
     44        message={
     45          <div className="wallpaper-feature-highlight-content">
     46            <picture className="follow-section-button-highlight-image">
     47              <source
     48                srcSet={
     49                  messageData.content?.darkModeImageURL ||
     50                  "chrome://newtab/content/data/content/assets/highlights/omc-newtab-wallpapers.svg"
     51                }
     52                media="(prefers-color-scheme: dark)"
     53              />
     54              <source
     55                srcSet={
     56                  messageData.content?.imageURL ||
     57                  "chrome://newtab/content/data/content/assets/highlights/omc-newtab-wallpapers.svg"
     58                }
     59                media="(prefers-color-scheme: light)"
     60              />
     61              <img width="320" height="195" alt="" />
     62            </picture>
     63            {messageData.content?.cardTitle ? (
     64              <p className="title">{messageData.content.cardTitle}</p>
     65            ) : (
     66              <p
     67                className="title"
     68                data-l10n-id={
     69                  messageData.content.title ||
     70                  "newtab-new-user-custom-wallpaper-title"
     71                }
     72              />
     73            )}
     74            {messageData.content?.cardMessage ? (
     75              <p className="subtitle">{messageData.content.cardMessage}</p>
     76            ) : (
     77              <p
     78                className="subtitle"
     79                data-l10n-id={
     80                  messageData.content.subtitle ||
     81                  "newtab-new-user-custom-wallpaper-subtitle"
     82                }
     83              />
     84            )}
     85            <span className="button-wrapper">
     86              {messageData.content?.cardCta ? (
     87                <moz-button
     88                  type="default"
     89                  onClick={() => onToggleClick("open-customize-menu")}
     90                  label={messageData.content.cardCta}
     91                />
     92              ) : (
     93                <moz-button
     94                  type="default"
     95                  onClick={() => onToggleClick("open-customize-menu")}
     96                  data-l10n-id={
     97                    messageData.content.cta ||
     98                    "newtab-new-user-custom-wallpaper-cta"
     99                  }
    100                />
    101              )}
    102            </span>
    103          </div>
    104        }
    105        toggle={<div className="icon icon-help"></div>}
    106        openedOverride={true}
    107        showButtonIcon={false}
    108        dismissCallback={onDismiss}
    109        outsideClickCallback={handleDismiss}
    110      />
    111    </div>
    112  );
    113 }