css and other cleanup for info UI

1 files changed, 20 insertions, 40 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
index 7661f5aff..24aedfa56 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
@@ -18,9 +18,9 @@ export const StateMessageGIF = Symbol('StateMessageGIF');
 export const StateEntryFunc = Symbol('StateEntryFunc');
 export class infoState {
     [StateMessage]: string = '';
-    [key: string]: infoArc;
     [StateMessageGIF]?: string = '';
     [StateEntryFunc]?: () => any;
+    [key: string]: infoArc;
     constructor(message: string, arcs: { [key: string]: infoArc }, messageGif?: string, entryFunc?: () => any) {
         this[StateMessage] = message;
         Object.assign(this, arcs);
@@ -58,6 +58,7 @@ export interface CollectionFreeFormInfoStateProps {
 export class CollectionFreeFormInfoState extends ObservableReactComponent<CollectionFreeFormInfoStateProps> {
     _disposers: IReactionDisposer[] = [];
     @observable _hide = false;
+    @observable _expanded = false;
 
     constructor(props: any) {
         super(props);
@@ -72,22 +73,16 @@ export class CollectionFreeFormInfoState extends ObservableReactComponent<Collec
     }
 
     clearState = () => this._disposers.map(disposer => disposer());
-    initState = () =>
-        (this._disposers = this.Arcs.map(arc => ({ test: arc[0], act: arc[1] })).map(arc => {
-            return reaction(
-                //
+    initState = () => (this._disposers = 
+        this.Arcs.map(arc => ({ test: arc[0], act: arc[1] })).map(
+            arc => reaction(
                 arc.test,
-                res => {
-                    if (res) {
-                        const next = arc.act(res);
-                        this._props.next(next);
-                    }
-                },
+                res => res && this._props.next(arc.act(res)),
                 { fireImmediately: true }
-            );
-        }));
+            )
+        )); // prettier-ignore
 
-    componentDidMount(): void {
+    componentDidMount() {
         this.initState();
     }
     componentDidUpdate(prevProps: Readonly<CollectionFreeFormInfoStateProps>) {
@@ -95,39 +90,24 @@ export class CollectionFreeFormInfoState extends ObservableReactComponent<Collec
         this.clearState();
         this.initState();
     }
-    componentWillUnmount(): void {
+    componentWillUnmount() {
         this.clearState();
     }
 
-    toggleGIF(): void {
-        let dots = document.getElementById('dots');
-        var moreText = document.getElementById('gif');
-        var btnText = document.getElementById('toggle-gif');
-
-        if (dots && btnText && moreText) {
-            if (dots.style.display === 'none') {
-                dots.style.display = 'inline';
-                moreText.style.display = 'none';
-                btnText.innerHTML = 'Show more';
-            } else {
-                dots.style.display = 'none';
-                moreText.style.display = 'inline';
-                btnText.innerHTML = 'Show less';
-            }
-        }
-    }
     render() {
+        const gif = this.State?.[StateMessageGIF];
         return (
-            <div className="collectionFreeform-infoUI" style={{ display: this._hide ? 'none' : undefined }}>
-                <div className="msg">{this.State?.[StateMessage]}</div>
-                <div className="gif-container" style={{ display: this.State?.[StateMessageGIF] ? undefined : 'none' }}>
-                    <span id="dots"></span>
-                    <img id="gif" className="gif" src={`/assets/${this.State?.[StateMessageGIF]}`} alt="state message gif"></img>
-                    <button id="toggle-gif" onClick={() => this.toggleGIF()}>
-                        Show less
+            <div className={'collectionFreeform-' + (this._hide ? 'hidden' : 'infoUI')}>
+                <p className="collectionFreeform-infoUI-msg">
+                    {this.State?.[StateMessage]}
+                    <button className={'collectionFreeform-' + (!gif ? 'hidden' : 'infoUI-button')} onClick={action(() => (this._expanded = !this._expanded))}>
+                        {this._expanded ? 'Less...' : 'More...'}
                     </button>
+                </p>
+                <div className={'collectionFreeform-' + (!this._expanded || !gif ? 'hidden' : 'infoUI-gif-container')}>
+                    <img src={`/assets/${gif}`} alt="state message gif" />
                 </div>
-                <div style={{ position: 'absolute', top: -10, left: -10 }}>
+                <div className="collectionFreeform-infoUI-close">
                     <IconButton icon="x" color={SettingsManager.userColor} size={Size.XSMALL} type={Type.TERT} background={SettingsManager.userBackgroundColor} onClick={action(e => this.props.close())} />
                 </div>
             </div>