Phase 7.3d: Migrate Advanced UI & Developer Tools to Plain CSS

src/app/content/components/Page/__snapshots__/PageToasts.spec.tsx.snap

@@ -18,35 +18,6 @@ exports[`PageToasts matches snapshot 1`] = `
 `;
 
 exports[`PageToasts matches snapshot with toasts when mobile toolbar is open 1`] = `
-.c0 {
-  color: #424242;
-  font-size: 1.6rem;
-  line-height: 2.5rem;
-  padding: 0.5rem 1rem;
-  font-weight: bold;
-  background-color: #fafafa;
-  line-height: 4rem;
-}
-
-.c0 a {
-  color: #027EB5;
-  cursor: pointer;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.c0 a:hover {
-  color: #0064A0;
-}
-
-@media (max-width:75em) {
-  .c0 {
-    padding: 0;
-    line-height: 2rem;
-    background-color: initial;
-  }
-}
-
 <div
   aria-live="polite"
   className="page-toast-container"
@@ -81,7 +52,13 @@ exports[`PageToasts matches snapshot with toasts when mobile toolbar is open 1`]
         className="banner-body banner-body-error"
       >
         <div
-          className="c0 toast-header"
+          className="notification-header toast-header"
+          style={
+            Object {
+              "--neutral-darker-color": "#fafafa",
+              "--text-color": "#424242",
+            }
+          }
         >
           The highlight could not be saved. Please check your connection and try again.
         </div>
@@ -126,35 +103,6 @@ exports[`PageToasts matches snapshot with toasts when mobile toolbar is open 1`]
 `;
 
 exports[`PageToasts matches snapshots with toasts 1`] = `
-.c0 {
-  color: #424242;
-  font-size: 1.6rem;
-  line-height: 2.5rem;
-  padding: 0.5rem 1rem;
-  font-weight: bold;
-  background-color: #fafafa;
-  line-height: 4rem;
-}
-
-.c0 a {
-  color: #027EB5;
-  cursor: pointer;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.c0 a:hover {
-  color: #0064A0;
-}
-
-@media (max-width:75em) {
-  .c0 {
-    padding: 0;
-    line-height: 2rem;
-    background-color: initial;
-  }
-}
-
 <div
   aria-live="polite"
   className="page-toast-container"
@@ -189,7 +137,13 @@ exports[`PageToasts matches snapshots with toasts 1`] = `
         className="banner-body banner-body-error"
       >
         <div
-          className="c0 toast-header"
+          className="notification-header toast-header"
+          style={
+            Object {
+              "--neutral-darker-color": "#fafafa",
+              "--text-color": "#424242",
+            }
+          }
         >
           The highlight could not be saved. Please check your connection and try again.
         </div>

src/app/content/components/popUp/__snapshots__/ToastNotifications.spec.tsx.snap

@@ -3,35 +3,6 @@
 exports[`ToastNotifications matches snapshot 1`] = `null`;
 
 exports[`ToastNotifications matches snapshots with toasts 1`] = `
-.c0 {
-  color: #424242;
-  font-size: 1.6rem;
-  line-height: 2.5rem;
-  padding: 0.5rem 1rem;
-  font-weight: bold;
-  background-color: #fafafa;
-  line-height: 4rem;
-}
-
-.c0 a {
-  color: #027EB5;
-  cursor: pointer;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.c0 a:hover {
-  color: #0064A0;
-}
-
-@media (max-width:75em) {
-  .c0 {
-    padding: 0;
-    line-height: 2rem;
-    background-color: initial;
-  }
-}
-
 <div
   className="popup-toast-notifications-wrapper"
 >
@@ -55,7 +26,13 @@ exports[`ToastNotifications matches snapshots with toasts 1`] = `
         className="banner-body banner-body-error"
       >
         <div
-          className="c0 toast-header"
+          className="notification-header toast-header"
+          style={
+            Object {
+              "--neutral-darker-color": "#fafafa",
+              "--text-color": "#424242",
+            }
+          }
         >
           The highlight could not be deleted. Please check your connection and try again.
         </div>
@@ -112,7 +89,13 @@ exports[`ToastNotifications matches snapshots with toasts 1`] = `
         className="banner-body banner-body-warning"
       >
         <div
-          className="c0 toast-header"
+          className="notification-header toast-header"
+          style={
+            Object {
+              "--neutral-darker-color": "#fafafa",
+              "--text-color": "#424242",
+            }
+          }
         >
           The note could not be saved. Please check your connection and try again.
           <span

src/app/developer/components/Books.css

@@ -0,0 +1,18 @@
+/* Books component - Developer page book list */
+
+.developer-book-li {
+  display: flex;
+  flex-direction: row;
+  overflow: visible;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.developer-book-li h3 {
+  padding-bottom: 0;
+}
+
+.developer-book-li small {
+  margin-top: -0.2rem;
+  color: #ccc;
+}

src/app/developer/components/Books.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from 'react';
-import styled from 'styled-components/macro';
 import { BookVersionConfig } from '../../../config.books';
 import { getBooksConfigSync } from '../../../gateways/createBookConfigLoader';
 import { DotMenuDropdown, DotMenuDropdownList } from '../../components/DotMenu';
@@ -13,23 +12,7 @@ import { AppServices } from '../../types';
 import { downloadFile } from '../utils/downloadFile';
 import { generateBookPageSpreadsheet } from '../utils/generateBookPageSpreadsheet';
 import Panel from './Panel';
-
-const BookLI = styled.li`
-  display: flex;
-  flex-direction: row;
-  overflow: visible;
-  align-items: center;
-  justify-content: space-between;
-
-  h3 {
-    padding-bottom: 0;
-  }
-
-  small {
-    margin-top: -0.2rem;
-    color: #ccc;
-  }
-`;
+import './Books.css';
 
 export const exportBookHandler = (book: Book, services: AppServices) => async() => {
   downloadFile(`${book.title}.csv`, await generateBookPageSpreadsheet(book, services));
@@ -78,9 +61,9 @@ const Books = () => {
 
   return <Panel title='Books'>
     <ul style={{paddingBottom: '5rem'}}>
-      {books.map(([id, config, book]) => <BookLI key={id}>
+      {books.map(([id, config, book]) => <li key={id} className="developer-book-li">
         <BookLink id={`${id}@${config.defaultVersion}`} book={book} />
-      </BookLI>)}
+      </li>)}
     </ul>
   </Panel>;
 };

src/app/developer/components/Home.css

@@ -0,0 +1,28 @@
+/* Home component - Developer homepage */
+
+.developer-home-style {
+  /* textRegularStyle equivalent */
+  color: var(--text-color, #424242); /* theme.color.text.default */
+  font-size: 1.6rem;
+  line-height: 2.5rem;
+  max-width: 128rem; /* contentWrapperMaxWidth = 82.5 + 37.5 + 8 */
+  margin: 0 auto;
+  padding: 2rem 0;
+  flex: 1;
+}
+
+.developer-home-row {
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+}
+
+.developer-home-col {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.developer-home-wrapper {
+  flex: 1;
+}

src/app/developer/components/Home.tsx

@@ -1,55 +1,37 @@
 import React from 'react';
-import styled from 'styled-components/macro';
 import Footer from '../../components/Footer';
 import Layout, { LayoutBody } from '../../components/Layout';
-import { H1, textRegularStyle } from '../../components/Typography';
-import { contentWrapperMaxWidth } from '../../content/components/constants';
+import { H1 } from '../../components/Typography';
 import DisplayNotifications from '../../notifications/components/Notifications';
 import Books from './Books';
 import Notifications from './Notifications';
 import Routes from './Routes';
+import './Home.css';
+import theme from '../../theme';
 
-const HomeStyle = styled.div`
-  ${textRegularStyle}
-  max-width: ${contentWrapperMaxWidth}rem;
-  margin: 0 auto;
-  padding: 2rem 0;
-  flex: 1;
-`;
-
-const Row = styled.div`
-  display: flex;
-  flex-direction: row;
-  flex: 1;
-`;
-
-const Col = styled.div`
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-`;
-
-const Wrapper = styled(LayoutBody)`
-  flex: 1;
-`;
-
-const Home: React.SFC = () => <Layout>
-  <DisplayNotifications />
-  <Wrapper>
-    <HomeStyle>
-      <H1>REX Developer Homepage</H1>
-      <Row>
-        <Col>
-          <Notifications />
-          <Routes />
-        </Col>
-        <Col>
-          <Books />
-        </Col>
-      </Row>
-    </HomeStyle>
-  </Wrapper>
-  <Footer />
-</Layout>;
+function Home() {
+  return (
+    <Layout>
+      <DisplayNotifications />
+      <LayoutBody className="developer-home-wrapper">
+        <div className="developer-home-style" style={{
+          '--text-color': theme.color.text.default,
+        } as React.CSSProperties}>
+          <H1>REX Developer Homepage</H1>
+          <div className="developer-home-row">
+            <div className="developer-home-col">
+              <Notifications />
+              <Routes />
+            </div>
+            <div className="developer-home-col">
+              <Books />
+            </div>
+          </div>
+        </div>
+      </LayoutBody>
+      <Footer />
+    </Layout>
+  );
+}
 
 export default Home;

src/app/developer/components/Panel.css

@@ -0,0 +1,5 @@
+/* Panel component - Developer page panel wrapper */
+
+.developer-panel-wrapper {
+  padding: 1rem;
+}

src/app/developer/components/Panel.tsx

@@ -1,20 +1,20 @@
 import React from 'react';
-import styled from 'styled-components/macro';
 import { H2 } from '../../components/Typography';
+import './Panel.css';
 
 interface Props {
   title: string;
 }
 
-const Wrappper = styled.div`
-  padding: 1rem;
-`;
-
-const Panel = ({title, children}: React.PropsWithChildren<Props>) => <div>
-  <H2>{title}</H2>
-  <Wrappper>
-    {children}
-  </Wrappper>
-</div>;
+function Panel({title, children}: React.PropsWithChildren<Props>) {
+  return (
+    <div>
+      <H2>{title}</H2>
+      <div className="developer-panel-wrapper">
+        {children}
+      </div>
+    </div>
+  );
+}
 
 export default Panel;