From 312c86cf03783ff263aae2cbf34b88c48c2d2df1 Mon Sep 17 00:00:00 2001
From: hensm <m@matt.tf>
Date: Wed, 28 Apr 2021 11:06:01 +0100
Subject: [PATCH] Remove options page about box

---
 ext/src/ui/options/About.tsx        | 100 ----------------------------
 ext/src/ui/options/index.tsx        |   2 -
 ext/src/ui/options/styles/index.css |  76 ---------------------
 3 files changed, 178 deletions(-)
 delete mode 100644 ext/src/ui/options/About.tsx

diff --git a/ext/src/ui/options/About.tsx b/ext/src/ui/options/About.tsx
deleted file mode 100644
index 790d5c9..0000000
--- a/ext/src/ui/options/About.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-"use strict";
-
-import React from "react";
-
-
-const LICENSE =
-`Copyright (c) 2018 Matt Hensman <m@matt.tf>
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.`;
-
-
-const Translator = (props: { name: string, tag: string }) =>
-    <li className="translator">
-        { props.name }
-        <div className="translator__tag">
-            { props.tag }
-        </div>
-    </li>;
-
-export default () =>
-    <details className="about">
-        <summary>
-            <h2>About</h2>
-        </summary>
-        <div className="about__container">
-            <ul className="about__links">
-                <li>
-                    <a className="about__link"
-                    href="https://github.com/hensm/fx_cast">
-                        <img src="assets/icons8-github-24.png"
-                            srcSet="assets/icons8-github-48.png 2x"
-                            width="24"
-                            alt="GitHub icon" />
-                        @hensm/fx_cast
-                    </a>
-                </li>
-                <li>
-                    <a className="about__link"
-                        href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=3Z2FTMSG976WN&source=url">
-                        <img src="assets/icons8-paypal-24.png"
-                            srcSet="assets/icons8-paypal-48.png 2x"
-                            width="24"
-                            alt="PayPal icon" />
-                        Donate via PayPal
-                    </a>
-                </li>
-                <li>
-                    <a className="about__link"
-                        href="https://icons8.com">
-                        <img src="assets/icons8-icons8-24.png"
-                            srcSet="assets/icons8-icons8-48.png 2x"
-                            width="24"
-                            alt="icons8 icon" />
-                        Icons by icons8
-                    </a>
-                </li>
-            </ul>
-
-            <hr />
-
-            <details className="about__license">
-                <summary>
-                    <h3>License</h3>
-                </summary>
-                <textarea>
-                    { LICENSE.replace(/(\S)\n(\S)/g, "$1 $2") }
-                </textarea>
-            </details>
-
-            <hr />
-
-            <details className="about__translators">
-                <summary>
-                    <h3>Translators</h3>
-                </summary>
-                <ul>
-                    <Translator name="RAVMN" tag="es" />
-                    <Translator name="rimrul" tag="de" />
-                    <Translator name="ThaDaVos" tag="nl" />
-                    <Translator name="Vistaus" tag="nl" />
-                </ul>
-            </details>
-        </div>
-    </details>;
diff --git a/ext/src/ui/options/index.tsx b/ext/src/ui/options/index.tsx
index efa8bf5..f255dcd 100644
--- a/ext/src/ui/options/index.tsx
+++ b/ext/src/ui/options/index.tsx
@@ -6,7 +6,6 @@ import ReactDOM from "react-dom";
 
 import defaultOptions from "../../defaultOptions";
 
-import About from "./About";
 import Bridge from "./Bridge";
 import EditableList from "./EditableList";
 
@@ -138,7 +137,6 @@ class OptionsApp extends Component<
 
         return (
             <div>
-                <About />
                 <form id="form" ref={ form => { this.form = form; }}
                         onSubmit={ this.handleFormSubmit }
                         onChange={ this.handleFormChange }>
diff --git a/ext/src/ui/options/styles/index.css b/ext/src/ui/options/styles/index.css
index d084a8a..241c8fe 100644
--- a/ext/src/ui/options/styles/index.css
+++ b/ext/src/ui/options/styles/index.css
@@ -398,70 +398,6 @@ button.ghost:not(:hover) {
 }
 
 
-.about {
-    border-radius: 2px;
-    margin-bottom: 40px;
-}
-
-.about > summary {
-    padding: 0 10px;
-}
-
-.about,
-.about > summary {
-    background-color: rgba(0, 0, 0, 0.08);
-}
-
-.about__container {
-    padding: 10px;
-}
-
-.about h1,
-.about h2,
-.about h3,
-.about h4,
-.about h5,
-.about h6 {
-    display: inline-block;
-    font: inherit;
-    font-weight: bold;
-    margin: 5px 0;
-    text-transform: uppercase;
-}
-
-.about hr {
-    border: initial;
-    border-top: 1px solid rgba(0, 0, 0, 0.25);
-    margin: 10px 0;
-}
-
-.about__links {
-    margin: initial;
-    padding: initial;
-    list-style: none;
-}
-.about__link {
-    align-items: center;
-    display: inline-flex;
-    font-size: 1.2em;
-    gap: 5px;
-}
-.about__link > img {
-    vertical-align: middle;
-}
-
-.about__license > textarea {
-    height: 200px;
-    resize: vertical;
-    overflow-y: auto;
-    width: 100%;
-}
-
-.about__translators > ul {
-    margin: initial;
-    padding-left: 20px;
-}
-
 .translator__tag {
     color: #0a84ff;
     display: inline-block;
@@ -477,16 +413,4 @@ button.ghost:not(:hover) {
     .editable-list__item:nth-child(odd) {
         background-color: var(--grey-80);
     }
-
-    .about,
-    .about > summary {
-        background-color: rgba(255, 255, 255, 0.1) !important;
-    }
-    .about hr {
-        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
-    }
-
-    .about__link > img {
-        filter: invert(1);
-    }
 }