redesign base component (#232)

* redesign base component

* rebrand base component

* redesign base component

* rewrite & optimize base component

* redesign base component

* address feedback

Co-authored-by: Waheed Ahmed <waheed.ahmed@arbisoft.com>

src/common-components/BaseComponent.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Responsive from 'react-responsive';
+
+import SmallScreenLayout from './SmallScreenLayout';
+import MediumScreenLayout from './MediumScreenLayout';
+import LargeScreenLayout from './LargeScreenLayout';
+
+const BaseComponent = ({ children }) => (
+  <>
+    <Responsive maxWidth={767}>
+      <SmallScreenLayout>
+        {children}
+      </SmallScreenLayout>
+    </Responsive>
+    <Responsive minWidth={768} maxWidth={1199}>
+      <MediumScreenLayout>
+        {children}
+      </MediumScreenLayout>
+    </Responsive>
+    <Responsive minWidth={1200}>
+      <LargeScreenLayout>
+        {children}
+      </LargeScreenLayout>
+    </Responsive>
+  </>
+);
+
+BaseComponent.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default BaseComponent;

src/common-components/LargeScreenLayout.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Row } from '@edx/paragon';
+
+import LargeScreenLeftLayout from './LargeScreenLeftLayout';
+import LargeScreenRightLayout from './LargeScreenRightLayout';
+
+const LargeScreenLayout = (props) => {
+  const { children } = props;
+
+  return (
+    <>
+      <div className="large-screen-top-stripe" />
+      <Row className="large-screen-container">
+        <LargeScreenLeftLayout />
+        <LargeScreenRightLayout>
+          { children }
+        </LargeScreenRightLayout>
+      </Row>
+    </>
+  );
+};
+
+LargeScreenLayout.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default LargeScreenLayout;

src/common-components/LargeScreenLeftLayout.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { getConfig } from '@edx/frontend-platform';
+import { Col } from '@edx/paragon';
+
+import messages from './messages';
+
+const LargeScreenLeftLayout = (props) => {
+  const { intl } = props;
+
+  return (
+    <Col xs={6} className="pr-0">
+      <img alt="edx" className="logo" src={getConfig().LOGO_WHITE_URL} />
+      <div className="d-flex mt-7">
+        <svg className="svg-line pl-5">
+          <line x1="50" y1="0" x2="10" y2="215" />
+        </svg>
+        <h1 className="large-heading">
+          {intl.formatMessage(messages['start.learning'])}
+          <span className="text-accent-a"><br />
+            {intl.formatMessage(messages['with.site.name'], { siteName: getConfig().SITE_NAME })}
+          </span>
+        </h1>
+      </div>
+    </Col>
+  );
+};
+
+LargeScreenLeftLayout.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(LargeScreenLeftLayout);

src/common-components/LargeScreenRightLayout.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Col } from '@edx/paragon';
+
+const LargeScreenRightLayout = (props) => {
+  const { children } = props;
+
+  return (
+    <Col xs={6} className="min-vh-100 pt-5 pl-0">
+      { children }
+    </Col>
+  );
+};
+
+LargeScreenRightLayout.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default LargeScreenRightLayout;

src/common-components/MediumScreenHeader.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { getConfig } from '@edx/frontend-platform';
+
+import messages from './messages';
+
+const MediumScreenHeader = (props) => {
+  const { intl } = props;
+
+  return (
+    <>
+      <div className="medium-screen-top-stripe" />
+      <div className="medium-screen-header">
+        <img alt="edx" className="logo" src={getConfig().LOGO_WHITE_URL} />
+        <div className="row mt-4">
+          <svg className="svg-line pl-5">
+            <line x1="50" y1="0" x2="10" y2="215" />
+          </svg>
+          <h1 className="large-heading pb-3">
+            {intl.formatMessage(messages['start.learning'])}
+            <span className="text-accent-a"><br />
+              {intl.formatMessage(messages['with.site.name'], { siteName: getConfig().SITE_NAME })}
+            </span>
+          </h1>
+        </div>
+      </div>
+    </>
+  );
+};
+
+MediumScreenHeader.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(MediumScreenHeader);

src/common-components/MediumScreenLayout.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import MediumScreenHeader from './MediumScreenHeader';
+
+const MediumScreenLayout = (props) => {
+  const { children } = props;
+
+  return (
+    <>
+      <MediumScreenHeader />
+      { children }
+    </>
+  );
+};
+
+MediumScreenLayout.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default MediumScreenLayout;

src/common-components/SmallScreenHeader.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { getConfig } from '@edx/frontend-platform';
+
+import messages from './messages';
+
+const SmallScreenHeader = (props) => {
+  const { intl } = props;
+
+  return (
+    <>
+      <div className="small-screen-top-stripe" />
+      <div className="bg-primary">
+        <img alt="edx" className="logo" src={getConfig().LOGO_WHITE_URL} />
+        <div className="d-flex mt-3">
+          <svg className="small-screen-svg-line">
+            <line x1="55" y1="0" x2="40" y2="65" />
+          </svg>
+          <h1 className="small-heading">
+            {intl.formatMessage(messages['start.learning'])}
+            <br />
+            <span className="text-accent-a">
+              {intl.formatMessage(messages['with.site.name'], { siteName: getConfig().SITE_NAME })}
+            </span>
+          </h1>
+        </div>
+      </div>
+    </>
+  );
+};
+
+SmallScreenHeader.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(SmallScreenHeader);

src/common-components/SmallScreenLayout.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import SmallScreenHeader from './SmallScreenHeader';
+
+const SmallScreenLayout = (props) => {
+  const { children } = props;
+
+  return (
+    <>
+      <SmallScreenHeader />
+      { children }
+    </>
+  );
+};
+
+SmallScreenLayout.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default SmallScreenLayout;

src/common-components/index.jsx

@@ -12,3 +12,4 @@ export { default as APIFailureMessage } from './APIFailureMessage';
 export { default as reducer } from './data/reducers';
 export { default as saga } from './data/sagas';
 export { storeName } from './data/selectors';
+export { default as BaseComponent } from './BaseComponent';

src/common-components/messages.jsx

@@ -60,6 +60,16 @@ const messages = defineMessages({
     defaultMessage: 'Create account using {providerName}',
     description: 'Screen reader text that appears before social auth provider name',
   },
+  'start.learning': {
+    id: 'start.learning',
+    defaultMessage: 'Start Learning',
+    description: 'Header text for logistration MFE pages',
+  },
+  'with.site.name': {
+    id: 'with.site.name',
+    defaultMessage: 'with {siteName}',
+    description: 'Header text with site name for logistration MFE pages',
+  },
 });
 
 export default messages;