Polish UI

src/index.css

@@ -77,6 +77,8 @@ a.hashLink { font-size: 1.1em;}
 
 .indicator { padding: 0px 5px; background: transparent; border: none; cursor: pointer; vertical-align: middle; color:rgba(0, 0, 0, 0.25) }
 
+.expanded { display: block;}
+.collapsed { display: none;}
 
 .error { color: maroon; }
 
@@ -102,7 +104,7 @@ button.link-button {text-decoration: underline;}
     margin-left: 5px;
 }
 
-.solid-border { border: solid 1px rgba(255, 255, 255, 0.8);}
+.solid-border { border: solid 1px rgba(255, 255, 255, 0.8); border-radius: 5px;}
 
 .zero { opacity: 0.5}
 .dim-extra-bits .extra-bit { opacity: 0.1;}

src/shell/AppState.ts

@@ -11,6 +11,7 @@ export type PersistedAppData = {
     donationClicked: boolean;
     annotateTypes: boolean;
     dimExtrBits: boolean;
+    cookieDisclaimerHidden: boolean
 }
 
 export type CommandResultView = {
@@ -39,6 +40,7 @@ export default class AppState {
     showSettings: boolean = false;
     annotateTypes: boolean = false;
     dimExtraBits: boolean = false;
+    cookieDisclaimerHidden: boolean = false;
 
     constructor(persistData: PersistedAppData, env: string) {
 
@@ -53,6 +55,7 @@ export default class AppState {
         this.donationClicked = persistData.donationClicked;
         this.annotateTypes = !!persistData.annotateTypes;
         this.dimExtraBits = !!persistData.dimExtrBits;
+        this.cookieDisclaimerHidden = !!persistData.cookieDisclaimerHidden
     }
 
     addCommandResult(input: string, view: ViewFactory) {
@@ -126,6 +129,11 @@ export default class AppState {
         return true;
     }
 
+    setCookieDisclaimerHidden(value: boolean) {
+        this.cookieDisclaimerHidden = value;
+        this.triggerChanged();
+    }
+
     getPersistData(): PersistedAppData {
         return {
             emphasizeBytes: this.emphasizeBytes,
@@ -135,7 +143,8 @@ export default class AppState {
             pageVisistsCount: this.pageVisitsCount,
             donationClicked: this.donationClicked,
             annotateTypes: this.annotateTypes,
-            dimExtrBits: this.dimExtraBits
+            dimExtrBits: this.dimExtraBits,
+            cookieDisclaimerHidden: this.cookieDisclaimerHidden
         }
     }
 };

src/shell/appStateStore.ts

@@ -10,7 +10,8 @@ const DEFAULT_DATA : PersistedAppData = {
     pageVisistsCount: 0,
     donationClicked: false,
     annotateTypes: false,
-    dimExtrBits: false
+    dimExtrBits: false,
+    cookieDisclaimerHidden: false
 }
 
 export default {

src/shell/components/AppRoot.tsx

@@ -10,6 +10,7 @@ import TopLinks from './TopLinks';
 import SettingsPane from './SettingsPane';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faGear } from '@fortawesome/free-solid-svg-icons';
+import CookieDisclaimerFooter from './CookieDisclaimerFooter';
 
 
 type AppRootProps = {
@@ -51,6 +52,7 @@ export default class AppRoot extends React.Component<AppRootProps, AppRootState>
         const enableNewUi = this.props.appState.env != 'prod' || true;
         const newUi = enableNewUi ? 'new-ui' : '';
         const settingsCss = "settings-button" + (this.props.appState.showSettings ? '' : ' soft');
+        
         return <div className={`app-root ${this.state.uiTheme} ${newUi}`}>
                     <DebugIndicators appState={this.props.appState} />
                     <div className="header">
@@ -69,6 +71,7 @@ export default class AppRoot extends React.Component<AppRootProps, AppRootState>
                     <div id="output">
                     {this.getResultViews()}
                     </div>
+                    <CookieDisclaimerFooter appSate={this.props.appState} />
                 </div>;
     }
 }

src/shell/components/CookieDisclaimerFooter.css

@@ -0,0 +1,13 @@
+.cookie-disclaimer {
+    position: fixed;
+    bottom: 0;
+    padding: 10px;
+    margin: 5px;
+    padding-bottom: 0;
+    background:green;
+    color: white;
+    border-radius: 5px;
+}
+.cookie-disclaimer .button { border-color: white !important}
+.cookie-disclaimer .button { color: white; }
+.cookie-disclaimer p { margin-top: 0; margin-bottom: 10px;}

src/shell/components/CookieDisclaimerFooter.tsx

@@ -0,0 +1,43 @@
+import { useState } from "react";
+import "./CookieDisclaimerFooter.css";
+import AppState from "../AppState";
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCaretDown, faCaretUp, faCircleXmark, faCross } from "@fortawesome/free-solid-svg-icons";
+
+function CookieDisclaimerFooter(props: { appSate: AppState }): JSX.Element {
+
+    const [expanded, setShowMore] = useState(false);
+    const longCss = expanded ? " expanded" : " collapsed";
+    const shortCss = expanded ? " collapsed" : " expanded";
+    const buttonText = expanded ? "Read Less" : "Read More";
+
+    if (props.appSate.cookieDisclaimerHidden)
+        return <React.Fragment></React.Fragment>;
+
+    return <div className="cookie-disclaimer">
+
+        <div className={"short" + shortCss}>
+            <p>
+                By using BitwiseCmd, you agree to the use of cookies for Google Analytics. These cookies help analyze and enhance your browsing experience. Click 'Read More' to learn about how your data is handled.
+            </p>
+        </div>
+
+        <div className={"details" + longCss}>
+            <p>By using BitwiseCmd, you agree to the use of cookies, including those used for Google Analytics. These cookies are employed to collect information about your usage of the website and help analyze and improve its performance and features.</p>
+
+            <p>Google Analytics cookies allow BitwiseCmd to gather anonymous data such as the pages you visit, the duration of your stay on each page, the website you came from, and the browser and device you are using. This information helps understand which features and content are most popular and enables informed decisions to enhance your browsing experience.</p>
+
+            <p>Rest assured that the data collected through Google Analytics cookies is used in an aggregated and anonymized manner. No personally identifiable information is collected, and your privacy and data protection are of utmost importance.</p>
+
+            <p>By continuing to use BitwiseCmd, you consent to the use of Google Analytics cookies for the purposes described above. If you prefer not to have your data collected by Google Analytics cookies, you can adjust your browser settings to disable cookies or use browser extensions that block third-party cookies.</p>
+        </div>
+        <div>
+            <p>
+                <button className="button" onClick={() => setShowMore(!expanded)}><FontAwesomeIcon icon={expanded ? faCaretDown : faCaretUp} />{buttonText}</button> <button className="button" onClick={() => props.appSate.setCookieDisclaimerHidden(true)}><FontAwesomeIcon icon={faCircleXmark} />Hide</button>
+            </p>
+        </div>
+    </div>
+}
+
+export default CookieDisclaimerFooter;