remove member-notice.jsx and associated CSS (#6625)

Co-authored-by: Daniel Miranda <manieldiranda@gmail.com>

maintenance/static/css/main.css

@@ -7765,40 +7765,6 @@ a.text-gray-dark:focus, a.text-gray-dark:hover {
       -webkit-transform: rotate(150deg) translate(30px);
               transform: rotate(150deg) translate(30px); }
 
-#member-notice {
-  background: #f2f2f2; }
-  #member-notice > div {
-    padding: 0.75em 1.5rem;
-    line-height: 1.2; }
-  #member-notice .wrapper {
-    -webkit-transition: height 400ms ease-in-out;
-    transition: height 400ms ease-in-out;
-    -webkit-box-flex: 1;
-        -ms-flex-positive: 1;
-            flex-grow: 1; }
-  #member-notice .pane {
-    opacity: 1;
-    -webkit-transition: opacity 300ms ease-in;
-    transition: opacity 300ms ease-in; }
-    #member-notice .pane.pane-hidden {
-      opacity: 0;
-      position: absolute;
-      z-index: -999999; }
-  #member-notice .btn {
-    background: none;
-    font-size: 35px;
-    font-weight: 900;
-    color: #999999;
-    padding: 0;
-    line-height: 1; }
-    #member-notice .btn:active, #member-notice .btn:focus, #member-notice .btn:hover {
-      -webkit-box-shadow: none;
-              box-shadow: none;
-      color: #000000; }
-    #member-notice .btn.btn-expanded {
-      -webkit-transform: rotate(45deg);
-              transform: rotate(45deg); }
-
 #multipage-nav-mobile {
   margin-top: 24px;
   margin-bottom: 24px; }

source/js/components/member-notice/member-notice.jsx

@@ -1,126 +0,0 @@
-import { Component } from "react";
-
-export default class MemberNotice extends Component {
-  constructor(props) {
-    super(props);
-
-    this.toggle = this.toggle.bind(this);
-
-    this.state = {
-      isExpanded: false,
-    };
-  }
-
-  toggle() {
-    // Just controls animation on +/x indicator
-    this.setState({
-      isExpanded: !this.state.isExpanded,
-    });
-
-    let onTransitionEnd = () => {
-      this.refs.wrapper.removeEventListener(`transitionend`, onTransitionEnd);
-
-      this.removeMeasurements();
-
-      if (this.state.isExpanded) {
-        this.refs.pane2.classList.remove(`pane-hidden`);
-      } else {
-        this.refs.pane1.classList.remove(`pane-hidden`);
-      }
-    };
-
-    this.refs.wrapper.addEventListener(`transitionend`, onTransitionEnd);
-
-    this.setMeasurements();
-
-    this.refs.pane1.classList.add(`pane-hidden`);
-    this.refs.pane2.classList.add(`pane-hidden`);
-  }
-
-  // Allow the elements to scale normally (eg: If the window is resized)
-  removeMeasurements() {
-    this.refs.pane1.style.width = `auto`;
-    this.refs.pane2.style.width = `auto`;
-    this.refs.wrapper.style.height = `auto`;
-  }
-
-  // Force specific dimensions for smooth height transition
-  setMeasurements() {
-    let wrapperWidth = this.refs.wrapper.clientWidth;
-
-    this.refs.pane1.style.width = `${wrapperWidth}px`;
-    this.refs.pane2.style.width = `${wrapperWidth}px`;
-
-    // Set "start" height (which is actually just the current height, but not explicitly set)
-    this.refs.wrapper.style.height = this.state.isExpanded
-      ? `${this.refs.pane2.clientHeight}px`
-      : `${this.refs.pane1.clientHeight}px`;
-
-    // Set "end" height (this triggers the transition to start)
-    this.refs.wrapper.style.height = this.state.isExpanded
-      ? `${this.refs.pane1.clientHeight}px`
-      : `${this.refs.pane2.clientHeight}px`;
-  }
-
-  componentDidMount() {
-    if (this.props.whenLoaded) {
-      this.props.whenLoaded();
-    }
-  }
-
-  render() {
-    return (
-      <div className="container d-flex py-3 justify-content-between align-items-top">
-        <div ref="wrapper" className="wrapper align-self-center mr-3">
-          <div ref="pane1" className="pane">
-            <p className="mb-0">
-              Welcome to our member preview. It’s a work in progress and we
-              invite your <a href="https://mzl.la/2ohCL8O">feedback</a>.
-            </p>
-          </div>
-          <div ref="pane2" className="pane pane-hidden">
-            <div className="d-none d-md-block">
-              <h3 className="h5-heading">This is a Barn Raising</h3>
-              <p>
-                There is a movement to keep the Internet healthy taking root
-                around the world. Mozilla is a part of this movement and wants
-                to help it grow.
-              </p>
-              <p>
-                We're building a home for people who care about the health of
-                the Internet, hand in hand with the community that emerged from
-                MozFest and events around the world. It’s a space for us to
-                learn, find resources, and connect to new people and ideas.
-              </p>
-              <p className="mb-0">
-                If you are a part of this movement for Internet Health then we
-                want your <a href="https://mzl.la/2ohCL8O">feedback</a> to help
-                it grow. This is a barn raising.
-              </p>
-            </div>
-            <div className="d-md-none">
-              <h3 className="h5-heading">This is a Movement</h3>
-              <p className="mb-0">
-                We're building a home for people who care about the health of
-                the Internet. This is a space for us to learn, find resources,
-                and connect. If you're a part of the movement for Internet
-                Health, we want your{" "}
-                <a href="https://mzl.la/2ohCL8O">feedback</a> and help.
-              </p>
-            </div>
-          </div>
-        </div>
-        <div>
-          <button
-            className={`btn btn-${
-              this.state.isExpanded ? `expanded` : `collapsed`
-            }`}
-            onClick={this.toggle}
-          >
-            +
-          </button>
-        </div>
-      </div>
-    );
-  }
-}