@fortawesome/free-regular-svg-icons#faThumbsUp TypeScript Examples

export default function ListsContent() {
  const lessonInfo = getLessonById('liste');

  return (
    <>
      <LessonCover>
        <Image
          width="2400"
          height="1260"
          alt="Doodle pentru un todo list"
          src={`${process.env.CLOUDFRONT_PUBLIC}/public/seo/lists_2400w.jpg`}
        />
      </LessonCover>
      <LessonFirstSentence>
        În dezvoltarea modernă a web-ului, listele sunt elemente HTML
        utilizate frecvent atât pentru navigație cât și pentru conținut
        general, contribuind la crearea unui document bine structurat,
        accesibil și ușor de întreținut.
      </LessonFirstSentence>
      <section>
        <LessonHeading as="h3" id={lessonInfo.chapters[0].id}>
          {lessonInfo.chapters[0].title}
        </LessonHeading>
        <p>Există două tipuri de liste des folosite în HTML:</p>
        <List variant="bullets">
          <li className="mb-4">
            <FormattedText as="strong">Liste neordonate</FormattedText>
            {' '}
            -
            utilizate pentru a grupa un set de elemente ce nu necesită o
            anumită ordine
          </li>
          <li>
            <FormattedText as="strong">Liste ordonate</FormattedText>
            {' '}
            - utilizate
            pentru a grupa un set de elemente ce au o ordine specifică
          </li>
        </List>
        <p>
          Fiecare tip de listă are un înțeles și un scop specific într-o
          pagină web. Să le luam pe rînd:
        </p>
      </section>
      <section>
        <LessonHeading as="h3" id={lessonInfo.chapters[1].id}>
          {lessonInfo.chapters[1].title}
        </LessonHeading>
        <p>
          Sunt utilizate cînd un set de elemente pot fi folosite în orice
          ordine, ca în lista de cumpărături de mai jos:
        </p>
        <Highlight
          className="my-5"
          language="html"
          code={`
<ul>
  <li> pâine </li>
  <li> cafea </li>
  <li> lapte </li>
  <li> unt </li>
</ul>
`}
        />
        <LessonFigure
          withBorder
          src="https://d3tycb976jpudc.cloudfront.net/demo-assets/liste-neordonate.png"
          alt="Listă neordonată"
          demo="/demo/html/liste-neordonate"
        />
        <LessonTip>
          Observă cum ne folosim de 2 tipuri de elemente pentru a defini o
          listă: în exterior avem
          {' '}
          <FormattedText as="strong">{'<ul>'}</FormattedText>
          {' '}
          (unordered list)
          pentru a defini lista, iar apoi fiecare element în propriul tag
          {' '}
          <FormattedText as="strong">{'<li>'}</FormattedText>
          {' '}
          (list item) .
        </LessonTip>
        <p>
          Cu o stilizare potrivită, listele neordonate sunt folosite la
          {' '}
          <strong>
            realizarea meniurilor paginilor web
          </strong>
          .
          {' '}
          <a href="https://github.com" target="_blank" rel="noreferrer">
            GitHub
          </a>
          {' '}
          e un exemplu bun, ei folosind liste neordonate pentru meniul de
          navigare:
        </p>
        <LessonFigure
          withBorder
          src="https://d3tycb976jpudc.cloudfront.net/demo-assets/github_unordered-list.jpeg"
          alt="GitHub folosește o listă neordonată în meniul de navigație"
        />
        <LessonTip>
          Deși nu am ajuns încă la partea de CSS, e bine să știm că listele
          neordonate au ca și stil implicit niște buline. Putem să le
          personalizăm folosind propria noastră imagine sau putem renunța la
          ele cu totul. Vom discuta mai multe în cadrul capitolului de
          stilizare.
        </LessonTip>
      </section>
      <section>
        <LessonHeading as="h3" id={lessonInfo.chapters[2].id}>
          {lessonInfo.chapters[2].title}
        </LessonHeading>
        <p>
          Listele ordonate afișează elementele enumerate într-o ordine
          specifică, fie că este vorba de enumerări cu cifre arabe, cifre
          romane sau litere. Un exemplu potrivit ar fi instrucțiunile pentru a
          găti o prăjitură:
        </p>
        <Highlight
          className="my-5"
          language="html"
          code={`
<ol>
  <li> Cumpără ingredientele necesare </li>
  <li> Amestecă ingredientele </li>
  <li> Pune amestecul într-un vas de gătit </li>
  <li> Coace în cuptor prăjitura timp de o oră </li>
  <li> Scoate prăjitura din cuptor </li>
</ol>     
`}
        />
        <p>
          Acestea au o structura similară cu cele neordonate, singura
          diferență fiind tag-ul:
          {' '}
          <FormattedText as="strong">{'<ol>'}</FormattedText>
          {' '}
          (ordered list). E
          evident că dacă vom schimba ordinea elementelor din cadrul listei,
          aceasta nu va mai avea nici un sens.
        </p>
        <LessonFigure
          withBorder
          src="https://d3tycb976jpudc.cloudfront.net/demo-assets/liste-ordonate.png"
          alt="Listă ordonată"
          demo="/demo/html/liste-ordonate"
        />
      </section>
      <section>
        <LessonHeading as="h3" id={lessonInfo.chapters[3].id}>
          {lessonInfo.chapters[3].title}
        </LessonHeading>
        <p>
          Dacă vrem ca enumerarea elementelor din listă să se facă cu un
          anumit tip de cifră sau cu litere, ne putem folosi de atributul
          {' '}
          <FormattedText as="strong"> type</FormattedText>
          . Acesta acceptă ca
          valori:
        </p>
        <List variant="bullets">
          <li className="mb-4">
            {' '}
            <FormattedText as="strong">1</FormattedText>
            {' '}
            – pentru enumerare cu
            {' '}
            cifre arabe;
          </li>
          <li className="mb-4">
            {' '}
            <FormattedText as="strong">i</FormattedText>
            {' '}
            sau
            {' '}
            <FormattedText as="strong">I</FormattedText>
            {' '}
            – pentru enumerare cu
            cifre romane mici, respectiv mari
          </li>
          <li className="mb-4">
            {' '}
            <FormattedText as="strong">a</FormattedText>
            {' '}
            sau
            {' '}
            <FormattedText as="strong">A</FormattedText>
            {' '}
            – pentru enumerare cu
            litere mici, respectiv mari.
          </li>
        </List>
        <Highlight
          className="my-5"
          language="html"
          code={`
<ol type="I">
  <li> Pornește laptopul </li>
  <li> Deschide Visual Studio Code </li>
  <li> Începe să codezi </li>
</ol>
`}
        />
        <LessonFigure
          withBorder
          src="https://d3tycb976jpudc.cloudfront.net/demo-assets/atributul-type-pentru-liste-ordonate.png"
          alt="Atributul 'type' pentru liste ordonate"
          demo="/demo/html/atributul-type-pentru-liste-ordonate"
        />
        <p>
          Dacă vrem ca lista să înceapă enumerarea de la cifra/litera cea mai
          avansată și să se termine cu prima, vom folosi atributul
          {' '}
          <FormattedText as="strong">reversed</FormattedText>
          {' '}
          .
        </p>
        <LessonFigure
          withBorder
          src="https://d3tycb976jpudc.cloudfront.net/demo-assets/atributul-reversed-pentru-liste-ordonate.png"
          alt="Atributul 'reversed' pentru liste ordonate"
          demo="/demo/html/atributul-reversed-pentru-liste-ordonate"
        />
        <p>
          Putem opta chiar să enumerăm elementele unei liste ordonate începând
          de la un anumit număr/literă. Pentru asta ne vom folosi de atributul
          {' '}
          <FormattedText as="strong">start</FormattedText>
          {' '}
          dând ca valoare numărul
          sau litera de la care vrem sa începem numărătoarea:
        </p>
        <LessonFigure
          withBorder
          src="https://d3tycb976jpudc.cloudfront.net/demo-assets/atributul-start-pentru-liste-ordonate.png"
          alt="Atributul 'start' pentru liste ordonate"
          demo="/demo/html/atributul-start-pentru-liste-ordonate"
        />
      </section>
      <section>
        <LessonHeading as="h3" id={lessonInfo.chapters[4].id}>
          {lessonInfo.chapters[4].title}
        </LessonHeading>
        <p>
          O listă poate conține o altă listă. Acest lucru este foarte util
          dacă vrem să reprezentăm un meniu de navigare pe mai multe nivele:
        </p>
        <Highlight
          className="my-5"
          language="html"
          code={`
<ol>
  <li> 
    FrontEnd
    <ol>
      <li> HTML </li>
      <li> CSS </li>
      <li> JavaScript </li>
    </ol>
  </li>
  <li> Back-end </li>
  <li> Mobile development </li>
</ol>
`}
        />
        <LessonFigure
          withBorder
          src="https://d3tycb976jpudc.cloudfront.net/demo-assets/sub-liste.png"
          alt="Sub-liste"
          demo="/demo/html/sub-liste"
        />
        <p>
          În exemplul de mai sus am inclus o listă ordonată în cadrul
          unei liste neordonate, dar putem foarte bine să includem orice tip
          de listă în oricare altul. Ce e important să reținem este că nivelul
          de nesting să nu fie mai mare de 3 căci lucrurile pot deveni
          confuze.
        </p>
      </section>
      <section>
        <LessonHeading as="h3" id={lessonInfo.chapters[5].id}>
          {lessonInfo.chapters[5].title}
        </LessonHeading>
        <p>
          Există și un al treilea tip de listă pe care-l vei întâlni mai rar
          dar e totuși bine să-l știi:
          {' '}
          <FormattedText as="strong">{'<dl>'}</FormattedText>
          {' '}
          (description list).
          Îl vom folosi când definim termeni sau asociem perechi de valori, ca
          în exemplul de mai jos:
        </p>
        <Highlight
          language="html"
          code={`
<dl>
  <dt> HTML </dt>
  <dd> Hyper Text Markup Language </dd>

  <dt> CSS </dt>
  <dd> Cascading Style Sheets </dd>
</dl>`}
        />

        <LessonFigure
          withBorder
          src="https://d3tycb976jpudc.cloudfront.net/demo-assets/liste-de-descrieri.png"
          alt="Liste de descrieri"
          demo="/demo/html/liste-de-descrieri"
        />

        <div className="dots" />

        <p>
          Pentru a alege ce tip de listă să folosim ne putem adresa două
          întrebări:
        </p>
        <dl>
          <dt className="text-bold">
            Definesc termeni sau asociez alte perechi nume/valoare?
          </dt>
          <dd className="mb-4">
            {' '}
            Dacă da, vom folosi o listă de descrieri.
            {' '}
          </dd>

          <dt className="text-bold">
            Este importantă ordinea elementelor din listă?
          </dt>
          <dd>
            {' '}
            Dacă da, folosim o listă ordonată, altfel vom folosi o listă
            neordonată.
            {' '}
          </dd>
        </dl>
        <LessonTip icon={faThumbsUp}>
          Iar pe final, nu uita că elementele
          {' '}
          <strong>{'<ul>'}</strong>
          ,
          <strong>{'<ol>'}</strong>
          {' '}
          și
          {' '}
          <strong>{'<dl>'}</strong>
          {' '}
          ajută atât în cazul
          screen-readere-lor cât și pe ceilalți developeri care vor înțelege
          mai ușor codul tău. Hai să le folosim când e vorba de liste.
        </LessonTip>
      </section>
      <div className="dots" />
      <LessonResources
        className="my-5"
        links={[
          {
            text: 'Documentația completă a <ul> pe MDN',
            url:
                'https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul',
          },
          {
            text: 'Documentația completă a <ol> pe MDN',
            url:
                'https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol',
          },
          {
            text: 'Documentația completă a <dl> pe MDN',
            url:
                'https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl',
          },
        ]}
      />
    </>
  );
}

export default function AddMedia({
    isActive,
    partyItemsSet,
    setAddMediaIsActive,
    socket,
    setPlayerFocused,
    handleItemEditSave
}: Props): JSX.Element {
    const { t } = useTranslation();

    const user = useSelector((state: RootAppState) => state.globalState.user);
    const party = useSelector((state: RootAppState) => state.globalState.party);
    const userItems = useSelector(
        (state: RootAppState) => state.globalState.userItems
    );

    const mediaItemDefault: NewMediaItem = {
        name: '',
        type: 'file',
        owner: user ? user.id : null,
        url: ''
    };

    const [activeTab, setActiveTab] = useState<'user' | 'web' | 'file'>('file');
    const [file, setFile] = useState<File | null>(null);
    const [mediaItem, setMediaItem] = useState(mediaItemDefault);
    const [uploadStartTime, setUploadStartTime] = useState(0);
    const [isUploading, setIsUploading] = useState(false);
    const [progress, setProgress] = useState(0);
    const [addedSuccessfully, setAddedSuccessfully] = useState(false);
    const [lastCreatedItem, setLastCreatedItem] = useState<NewMediaItem>();
    const [uploadError, setUploadError] = useState(false);
    const [fetchingLinkMetadata, setFetchingLinkMetadata] = useState(false);
    const [linkMetadata, setLinkMetadata] = useState<{
        videoTitle: string;
        channelTitle: string;
    } | null>(null);

    const dispatch = useDispatch();

    // Preselect user tab if there are items to add
    useEffect(() => {
        if (userItems && party)
            if (
                userItems.filter(
                    (userItem: MediaItem) => !partyItemsSet.has(userItem.id)
                ).length
            ) {
                setActiveTab('user');
            }
    }, [userItems, party, partyItemsSet]);

    const addUserItem = async (item: MediaItem): Promise<void> => {
        if (party) {
            try {
                const response = await Axios.post(
                    '/api/partyItems',
                    { mediaItem: item, partyId: party.id },
                    axiosConfig()
                );

                if (response.data.success === true) {
                    updatePartyAndUserParties();
                } else {
                    dispatch(
                        setGlobalState({
                            errorMessage: t(
                                `apiResponseMessages.${response.data.msg}`
                            )
                        })
                    );
                }
            } catch (error) {
                dispatch(
                    setGlobalState({
                        errorMessage: t(`errors.addToPartyError`)
                    })
                );
            }
        }
    };

    const addWebItem = async (event: React.MouseEvent): Promise<void> => {
        event.preventDefault();

        if (party) {
            try {
                const response = await Axios.post(
                    '/api/mediaItem',
                    { mediaItem: mediaItem, partyId: party.id },
                    axiosConfig()
                );

                if (response.data.success === true) {
                    updatePartyAndUserParties();
                    getUpdatedUserItems(dispatch, t);
                    resetUploadForm();
                    setIsUploading(false);
                    setLastCreatedItem(mediaItem);
                    setAddedSuccessfully(true);
                    hideFinishInAFewSecs();
                    toggleCollapseAddMediaMenu();
                } else {
                    dispatch(
                        setGlobalState({
                            errorMessage: t(
                                `apiResponseMessages.${response.data.msg}`
                            )
                        })
                    );
                }
            } catch (error) {
                dispatch(
                    setGlobalState({
                        errorMessage: t(`errors.addItemError`)
                    })
                );
            }
        }
    };

    const addFileItem = async (event: React.MouseEvent): Promise<void> => {
        event.preventDefault();

        if (party && file && mediaItem.owner) {
            const formData = new FormData();
            formData.append('owner', mediaItem.owner);
            formData.append('name', mediaItem.name);
            formData.append('file', file);
            formData.append('partyId', party.id);
            setIsUploading(true);
            setAddedSuccessfully(false);
            setUploadStartTime(Date.now());
            try {
                const response = await Axios.post('/api/file', formData, {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    },
                    onUploadProgress: (progressEvent) => {
                        const percentCompleted = Math.round(
                            (progressEvent.loaded * 100) / progressEvent.total
                        );
                        setProgress(percentCompleted);
                    },
                    withCredentials: true
                });

                if (response.data.success === true) {
                    updatePartyAndUserParties();
                    getUpdatedUserItems(dispatch, t);
                    resetUploadForm();
                    setLastCreatedItem(mediaItem);
                    setIsUploading(false);
                    setAddedSuccessfully(true);
                    hideFinishInAFewSecs();
                    toggleCollapseAddMediaMenu();
                } else {
                    dispatch(
                        setGlobalState({
                            errorMessage: t(
                                `apiResponseMessages.${response.data.msg}`
                            )
                        })
                    );
                }
            } catch (error) {
                dispatch(
                    setGlobalState({
                        errorMessage: t(`errors.uploadError`)
                    })
                );

                resetUploadForm();
                setIsUploading(false);
                setUploadError(true);
            }
        }
    };

    const updatePartyAndUserParties = async (): Promise<void> => {
        if (socket && party && userItems) {
            // Update userParties
            const updatedUserParties = await getUpdatedUserParties(dispatch, t);

            const updatedParty = updatedUserParties.find(
                (userParty: ClientParty) => userParty.id === party.id
            );

            // Preselect file tab if there are no items left to add
            if (
                updatedParty &&
                !userItems.filter(
                    (userItem: MediaItem) =>
                        !updatedParty.items.find(
                            (item: MediaItem) => item.id === userItem.id
                        )
                ).length
            ) {
                setActiveTab('file');
            }

            // Update current party
            dispatch(
                setGlobalState({
                    party: updatedParty
                })
            );

            // Ask other users to update their userParties
            socket.emit('partyUpdate', { partyId: party.id });
        }
    };

    const handleLinkInput = async (
        event: React.ChangeEvent<HTMLInputElement>
    ): Promise<void> => {
        let url = event.target.value;

        // YT: Remove list-related URL params
        if (
            url.indexOf('https://www.youtube.com') === 0 &&
            url.indexOf('&list=') > -1
        ) {
            url = url.slice(0, url.indexOf('&list='));
        }

        const webMediaItem: NewMediaItem = {
            ...mediaItem,
            url: url,
            type: 'web'
        };

        setMediaItem(webMediaItem);

        if (url.indexOf('https://www.youtube.com') === 0) {
            setFetchingLinkMetadata(true);

            try {
                const response = await Axios.post(
                    '/api/linkMetadata',
                    { url: url },
                    { ...axiosConfig(), timeout: 3000 }
                );

                setLinkMetadata({
                    videoTitle: response.data.videoTitle,
                    channelTitle: response.data.channelTitle
                });

                setMediaItem({
                    ...webMediaItem,
                    name: response.data.videoTitle
                });

                setFetchingLinkMetadata(false);
            } catch (error) {
                setMediaItem({ ...webMediaItem, name: '' });
                setFetchingLinkMetadata(false);
            }
        }
    };

    const toggleCollapseAddMediaMenu = (): void => {
        if (isActive) {
            setActiveTab('file');
        }
        setAddMediaIsActive(!isActive);
        setUploadError(false);
        resetUploadForm();
    };

    const changeTab = (tab: 'user' | 'web' | 'file'): void => {
        setActiveTab(tab);
        setFile(null);
        setMediaItem(mediaItemDefault);
        setUploadError(false);
    };

    const resetUploadForm = (): void => {
        setFile(null);
        setMediaItem(mediaItemDefault);
    };

    const hideFinishInAFewSecs = (): void => {
        setTimeout(() => {
            setAddedSuccessfully(false);
        }, 5000);
    };

    return (
        <div
            className={'mt-2' + (!isActive ? '' : ' flex flex-col flex-shrink')}
        >
            {isActive && (
                <>
                    <AddMediaTabBar
                        activeTab={activeTab}
                        changeTab={changeTab}
                        isUploading={isUploading}
                        toggleCollapseAddMediaMenu={toggleCollapseAddMediaMenu}
                    ></AddMediaTabBar>
                    <div className="flex flex-col">
                        {!isUploading && !uploadError && userItems && party ? (
                            <>
                                {activeTab === 'user' && (
                                    <AddMediaTabUser
                                        partyItemsSet={partyItemsSet}
                                        addUserItem={addUserItem}
                                        setPlayerFocused={(
                                            focused: boolean
                                        ): void => setPlayerFocused(focused)}
                                        handleItemEditSave={handleItemEditSave}
                                    ></AddMediaTabUser>
                                )}
                                {activeTab === 'web' && (
                                    <AddMediaTabWeb
                                        mediaItem={mediaItem}
                                        setMediaItem={(
                                            mediaItem: NewMediaItem
                                        ): void => setMediaItem(mediaItem)}
                                        addWebItem={addWebItem}
                                        handleLinkInput={handleLinkInput}
                                        setPlayerFocused={(
                                            focused: boolean
                                        ): void => setPlayerFocused(focused)}
                                        linkMetadata={linkMetadata}
                                        fetchingLinkMetadata={
                                            fetchingLinkMetadata
                                        }
                                    ></AddMediaTabWeb>
                                )}
                                {activeTab === 'file' && (
                                    <AddMediaTabFile
                                        file={file}
                                        setFile={(file: File): void =>
                                            setFile(file)
                                        }
                                        mediaItem={mediaItem}
                                        setMediaItem={(
                                            mediaItem: NewMediaItem
                                        ): void => setMediaItem(mediaItem)}
                                        addFileItem={addFileItem}
                                        resetUploadForm={resetUploadForm}
                                        setPlayerFocused={(
                                            focused: boolean
                                        ): void => setPlayerFocused(focused)}
                                    ></AddMediaTabFile>
                                )}
                            </>
                        ) : !uploadError ? (
                            <AddMediaUploadProgress
                                progress={progress}
                                uploadStartTime={uploadStartTime}
                            ></AddMediaUploadProgress>
                        ) : (
                            <div className="my-3">
                                {t('mediaMenu.uploadError')}
                            </div>
                        )}
                    </div>
                </>
            )}

            {!isActive && (
                <>
                    <Button
                        padding="p-1"
                        title={t('mediaMenu.addMediaTitle')}
                        text={
                            <>
                                <FontAwesomeIcon
                                    icon={faPlus}
                                ></FontAwesomeIcon>
                                <span>{' ' + t('mediaMenu.addMedia')}</span>
                            </>
                        }
                        onClick={toggleCollapseAddMediaMenu}
                    ></Button>
                    {addedSuccessfully && lastCreatedItem && (
                        <div className="my-3 breakLongWords">
                            <FontAwesomeIcon
                                className="text-purple-400"
                                icon={faThumbsUp}
                            ></FontAwesomeIcon>{' '}
                            {lastCreatedItem.type === 'file'
                                ? t('mediaMenu.uploadFinished')
                                : t('mediaMenu.addingFinished')}
                            {lastCreatedItem.name}
                        </div>
                    )}
                </>
            )}
        </div>
    );
}

theme: ThemeConfig = {
  Popover: {
    Title: {
      styles: {
        base: {
          paddingRight: 'major-1'
        }
      }
    }
  },
  Tooltip: {
    Content: {
      styles: {
        base: css`
          z-index: 999;
        `
      }
    }
  },
  PageWithSidebar: {
    styles: {
      base: css`
        z-index: 10;
        position: relative;
      `
    }
  },
  PageWithHeader: {
    styles: {
      base: css`
        display: flex;
        flex-direction: column;
        .bb-PageWithHeaderContent {
          display: flex;
          flex-direction: column;
          flex: 1;
        }
        .bb-PageContentWrapper {
          flex-grow: 1;
          flex-shrink: 1;
          flex-basis: 0%;
        }
      `
    }
  },
  Container: {
    styles: {
      fluid: {
        maxWidth: '100%'
      }
    }
  },
  Icon: {
    styles: {
      base: {
        color: 'text300'
      }
    },
    iconSets: [
      {
        icons: [
          faComment,
          faThumbsUp,
          faBookmark,
          faTrashAlt,
          faPlusSquare,
          faFileCode,
          faArrowAltCircleLeft,
          faArrowAltCircleRight,
          faShareSquare,
          faImage
        ],
        prefix: 'r-',
        type: 'font-awesome'
      },
      {
        icons: [faMarkdown, faJs, faGithub, faReddit, faGoogle],
        prefix: 'b-',
        type: 'font-awesome'
      }
    ]
  },
  global: {
    fontSize: 16,
    styles: {
      base: {
        color: 'text300'
      }
    }
  },
  fonts: {
    // default: 'Comic Sans MS'
  },
  palette: {
    primary: '#d504f8'
  },
  breakpoints: {
    mobile: 520,
    tablet: 960
  },
  SelectMenu: {
    styles: {
      base: {
        backgroundColor: 'white'
      }
    }
  },
  Button: {
    styles: {
      base: {
        color: 'white'
      },
      ghost: {
        color: 'primary',
        borderColor: 'primary',
        borderWidth: '1px',
        borderStyle: 'solid'
      },
      outlined: {
        borderColor: 'primary',
        borderWidth: '1px',
        borderStyle: 'solid'
      }
    },

    defaultProps: {
      palette: 'primary'
    }
  },
  Text: {
    styles: {
      base: {
        color: 'text300'
      }
    }
  },
  Heading: {
    styles: {
      base: {
        color: 'text300'
      }
    },

    h3: {
      styles: {
        base: {
          color: 'text300',
          fontSize: '1.25rem'
        }
      }
    }
  }
}