import React from 'react';
import Icon from '@mdi/react';
import { mdiCloseCircleOutline, mdiGithubCircle } from '@mdi/js';

import content from '../../../../CHANGELOG.md';
import Modal from '../page/Modal';

interface ChangelogProps {
    close: () => void;
}

const Changelog: React.FC<ChangelogProps> = ({ close }) => (
    <Modal close={close}>
        <div className="overlay-modal-content changelog" dangerouslySetInnerHTML={{ __html: content }} />
        <div className="border-top ptm">
            <a href="https://github.com/benct/tomlin-web/blob/master/CHANGELOG.md" target="_blank" rel="noopener noreferrer">
                <Icon path={mdiGithubCircle} size="28px" title="View on GitHub" className="valign-middle" />
                <span className="valign-middle mlm">View on GitHub</span>
            </a>
            <button className="button-icon pan float-right" onClick={close}>
                <Icon path={mdiCloseCircleOutline} size="28px" title="Close" />
            </button>
        </div>
    </Modal>
);

export default React.memo(Changelog);

import React from 'react';
import Icon from '@mdi/react';
import { mdiCloseCircleOutline } from '@mdi/js';

import content from '../../../../CHANGELOG.md';
import Modal from '../page/Modal';

interface ChangelogProps {
    close: () => void;
}

const Changelog: React.FC<ChangelogProps> = ({ close }) => (
    <Modal close={close}>
        <div className="overlay-modal-content changelog" dangerouslySetInnerHTML={{ __html: content }} />
        <div className="border-top ptm">
            <a href="https://github.com/benct/tomlin-web/blob/master/CHANGELOG.md" target="_blank" rel="noopener noreferrer">
                View on GitHub
            </a>
            <button className="button-blank float-right" onClick={close}>
                <Icon path={mdiCloseCircleOutline} size="28px" title="Close" />
            </button>
        </div>
    </Modal>
);

export default React.memo(Changelog);

--- 
+++ 
@@ -1,6 +1,6 @@
 import React from 'react';
 import Icon from '@mdi/react';
-import { mdiCloseCircleOutline } from '@mdi/js';
+import { mdiCloseCircleOutline, mdiGithubCircle } from '@mdi/js';
 
 import content from '../../../../CHANGELOG.md';
 import Modal from '../page/Modal';
@@ -14,9 +14,10 @@
         <div className="overlay-modal-content changelog" dangerouslySetInnerHTML={{ __html: content }} />
         <div className="border-top ptm">
             <a href="https://github.com/benct/tomlin-web/blob/master/CHANGELOG.md" target="_blank" rel="noopener noreferrer">
-                View on GitHub
+                <Icon path={mdiGithubCircle} size="28px" title="View on GitHub" className="valign-middle" />
+                <span className="valign-middle mlm">View on GitHub</span>
             </a>
-            <button className="button-blank float-right" onClick={close}>
+            <button className="button-icon pan float-right" onClick={close}>
                 <Icon path={mdiCloseCircleOutline} size="28px" title="Close" />
             </button>
         </div>
Add github icon to changelog modal
