Share some CSS styles

ReactTraining · Mar 17, 2018 · 0eb43bc · 0eb43bc
1 parent 4307f5a
commit 0eb43bc
Show file tree

Hide file tree

Showing 19 changed files with 338 additions and 344 deletions.
diff --git a/public/shared.css b/public/shared.css
@@ -0,0 +1,27 @@
+html {
+  box-sizing: border-box;
+}
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  background: white;
+}
+
+a:link,
+a:visited {
+  color: rebeccapurple;
+  text-decoration: none;
+}
+a:link:hover {
+  text-decoration: underline;
+}
+
+.hot {
+  color: red;
+}
diff --git a/scripts/build.js b/scripts/build.js
@@ -30,6 +30,7 @@ function HostPage({ bundle, data, title = "React Training" }) {
         content: "width=device-width, initial-scale=1"
       }),
       e("title", null, title),
+      e("link", { rel: "stylesheet", href: "/shared.css" }),
       data &&
         e("script", {
           dangerouslySetInnerHTML: {

diff --git a/subjects/02 Components/styles.css b/subjects/02 Components/styles.css
@@ -13,7 +13,6 @@
   text-align: left;
   margin: 0;
   padding: 10px;
-  box-sizing: border-box;
   font: inherit;
   border-bottom: solid 1px transparent;
 }

diff --git a/subjects/03 Props and State/styles.css b/subjects/03 Props and State/styles.css
@@ -13,7 +13,6 @@
   text-align: left;
   margin: 0;
   padding: 10px;
-  box-sizing: border-box;
   font: inherit;
   border-bottom: solid 1px transparent;
 }

diff --git a/subjects/05 Testing/components/ContentToggle.css b/subjects/05 Testing/components/ContentToggle.css
@@ -13,7 +13,6 @@
   text-align: left;
   margin: 0;
   padding: 10px;
-  box-sizing: border-box;
   font: inherit;
   border-bottom: solid 1px transparent;
 }

diff --git a/subjects/05 Testing/lecture.js b/subjects/05 Testing/lecture.js
@@ -11,101 +11,106 @@ import StatefulContentToggle from "./components/StatefulContentToggle";
 import Tabs from "./components/Tabs";
 import Droppable from "./components/Droppable";
 
-// describe('ContentToggle', () => {
-//   let div
-//   beforeEach(() => div = document.createElement('div'))
-//
-//   it('displays the summary', () => {
-//     ReactDOM.render(<ContentToggle summary="test"/>, div)
-//     expect(div.innerHTML).toMatch(/test/, '"test" was not found in HTML')
-//   })
-//
-//   describe('isOpen prop', () => {
-//     it('does not display children when false', () => {
-//       ReactDOM.render((
-//         <ContentToggle isOpen={false} summary="">
+// describe("ContentToggle", () => {
+//   let div;
+//   beforeEach(() => {
+//     div = document.createElement("div");
+//   });
+
+//   it("displays the summary", () => {
+//     ReactDOM.render(<ContentToggle summary="The Summary" />, div);
+
+//     expect(div.innerHTML).toMatch(
+//       /The Summary/,
+//       '"The Summary" was not found in HTML'
+//     );
+//   });
+
+//   describe("isOpen prop", () => {
+//     it("does not display children when false", () => {
+//       ReactDOM.render(
+//         <ContentToggle isOpen={false} summary="The Summary">
 //           <p>Cheers</p>
-//         </ContentToggle>
-//       ), div)
-//
-//       expect(div.innerHTML).toNotMatch(/Cheers/, '"Cheers" was found in HTML')
-//     })
-//
-//     it('defaults to false', () => {
-//       ReactDOM.render((
-//         <ContentToggle summary="">
+//         </ContentToggle>,
+//         div
+//       );
+
+//       expect(div.innerHTML).toNotMatch(
+//         /Cheers/,
+//         '"Cheers" was found in HTML'
+//       );
+//     });
+
+//     it("defaults to false", () => {
+//       ReactDOM.render(
+//         <ContentToggle summary="The Summary">
 //           <p>Cheers</p>
-//         </ContentToggle>
-//       ), div)
-//
-//       expect(div.innerHTML).toNotMatch(/Cheers/, '"Cheers" was found in HTML')
-//     })
-//
-//     it('displays children when true', () => {
-//       ReactDOM.render((
-//         <ContentToggle isOpen={true} summary="">
+//         </ContentToggle>,
+//         div
+//       );
+
+//       expect(div.innerHTML).toNotMatch(
+//         /Cheers/,
+//         '"Cheers" was found in HTML'
+//       );
+//     });
+
+//     it("displays children when true", () => {
+//       ReactDOM.render(
+//         <ContentToggle isOpen={true} summary="The Summary">
 //           <p>Cheers</p>
-//         </ContentToggle>
-//       ), div)
-//
-//       expect(div.innerHTML).toMatch(/Cheers/, '"Cheers" was not found in HTML')
-//     })
-//   })
-// })
-
-// describe('StatefulContentToggle', () => {
-//   let div
-//   beforeEach(() => div = document.createElement('div'))
-//
-//   it('opens when clicked', () => {
-//     ReactDOM.render((
-//       <StatefulContentToggle summary="test">
-//         children
-//       </StatefulContentToggle>
-//     ), div)
-//     Simulate.click(div.querySelector('button'))
-//     expect(div.innerHTML).toMatch(/children/, '"children" was not found in HTML')
-//   })
-// })
-
-// describe('Droppable', () => {
-//   let div
+//         </ContentToggle>,
+//         div
+//       );
+
+//       expect(div.innerHTML).toMatch(
+//         /Cheers/,
+//         '"Cheers" was not found in HTML'
+//       );
+//     });
+//   });
+// });
+
+// describe("StatefulContentToggle", () => {
+//   let div;
 //   beforeEach(() => {
-//     div = document.createElement('div')
-//     document.body.appendChild(div)
-//   })
-//
-//   afterEach(() => document.body.removeChild(div))
-//
-//   it('accepts files', () => {
-//     ReactDOM.render(<Droppable/>, div)
-//     Simulate.dragOver(div.querySelector('div.Droppable'), {
-//       dataTransfer: { types: ['Files'] }
-//     })
-//     expect(div.innerHTML).toMatch(/Drop it!/, '"Drop it!" was not found in HTML')
-//   })
-// })
-
-// describe('ContactList', () => {
-//   let ActionStub, StoreStub, div
-//
+//     div = document.createElement("div");
+//   });
+
+//   it("opens when clicked", () => {
+//     ReactDOM.render(
+//       <StatefulContentToggle summary="The Summary">
+//         <p>The Content</p>
+//       </StatefulContentToggle>,
+//       div
+//     );
+
+//     Simulate.click(div.querySelector("button"));
+
+//     expect(div.innerHTML).toMatch(
+//       /The Content/,
+//       '"The Content" was not found in HTML'
+//     );
+//   });
+// });
+
+// describe("Droppable", () => {
+//   let div;
 //   beforeEach(() => {
-//     div = document.createElement('div')
-//     ActionStub = { loadContacts(){}, deleteContact(){} }
-//     StoreStub = { getState(){}, removeChangeListener(){}, addChangeListener(){} }
-//   })
-//
-//   it('loads contacts when mounted', () => {
-//     const loadContacts = expect.spyOn(ActionStub, 'loadContacts')
-//
-//     ReactDOM.render(<ContactList
-//       ViewActions={ActionStub}
-//       StoreStub={StoreStub}
-//     />, div)
-//
-//     expect(loadContacts).toHaveBeenCalled()
-//   })
-// })
+//     div = document.createElement("div");
+//   });
+
+//   it("accepts files", () => {
+//     ReactDOM.render(<Droppable />, div);
+//     Simulate.dragOver(div.querySelector("div.Droppable"), {
+//       dataTransfer: { types: ["Files"] }
+//     });
+//     expect(div.innerHTML).toMatch(
+//       /Drop it!/,
+//       '"Drop it!" was not found in HTML'
+//     );
+//   });
+// });
 
 // - render to a node that isn't in the dom
 // - match innerHTML

diff --git a/subjects/09 Higher-order Components/styles.css b/subjects/09 Higher-order Components/styles.css
@@ -1,10 +1,3 @@
-html {
-  box-sizing: border-box;
-}
-*, *:before, *:after {
-  box-sizing: inherit;
-}
-
 .container {
   position: absolute;
   width: 100vw;

diff --git a/subjects/12 Animation/exercise.js b/subjects/12 Animation/exercise.js
@@ -94,21 +94,21 @@ class DropGrid extends React.Component {
     return (
       <div className="grid" ref={node => (this.node = node)}>
         <Draggable
-          className="marker"
+          className="grid-marker"
           style={markerStyle}
           onDragStart={this.handleDragStart}
           onDrag={this.handleDrag}
           onDrop={this.handleDrop}
         />
-        <div className="cell">1</div>
-        <div className="cell">2</div>
-        <div className="cell">3</div>
-        <div className="cell">4</div>
-        <div className="cell">5</div>
-        <div className="cell">6</div>
-        <div className="cell">7</div>
-        <div className="cell">8</div>
-        <div className="cell">9</div>
+        <div className="grid-cell">1</div>
+        <div className="grid-cell">2</div>
+        <div className="grid-cell">3</div>
+        <div className="grid-cell">4</div>
+        <div className="grid-cell">5</div>
+        <div className="grid-cell">6</div>
+        <div className="grid-cell">7</div>
+        <div className="grid-cell">8</div>
+        <div className="grid-cell">9</div>
       </div>
     );
   }

diff --git a/subjects/12 Animation/solution.js b/subjects/12 Animation/solution.js
@@ -99,23 +99,23 @@ class DropGrid extends React.Component {
         <Motion style={markerStyle}>
           {style => (
             <Draggable
-              className="marker"
+              className="grid-marker"
               style={style}
               onDragStart={this.handleDragStart}
               onDrag={this.handleDrag}
               onDrop={this.handleDrop}
             />
           )}
         </Motion>
-        <div className="cell">1</div>
-        <div className="cell">2</div>
-        <div className="cell">3</div>
-        <div className="cell">4</div>
-        <div className="cell">5</div>
-        <div className="cell">6</div>
-        <div className="cell">7</div>
-        <div className="cell">8</div>
-        <div className="cell">9</div>
+        <div className="grid-cell">1</div>
+        <div className="grid-cell">2</div>
+        <div className="grid-cell">3</div>
+        <div className="grid-cell">4</div>
+        <div className="grid-cell">5</div>
+        <div className="grid-cell">6</div>
+        <div className="grid-cell">7</div>
+        <div className="grid-cell">8</div>
+        <div className="grid-cell">9</div>
       </div>
     );
   }

diff --git a/subjects/12 Animation/styles.css b/subjects/12 Animation/styles.css
@@ -1,12 +1,9 @@
-html {
-  box-sizing: border-box;
-}
-*, *:before, *:after {
-  box-sizing: inherit;
-}
-
 body {
-  padding: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  margin: 0;
 }
 
 .toggle-switch {
@@ -50,7 +47,7 @@ body {
   width: 451px;
   height: 451px;
 }
-.grid .cell {
+.grid-cell {
   border: 1px solid #999;
   border-width: 0 0 1px 1px;
   width: 150px;
@@ -62,11 +59,12 @@ body {
   -webkit-user-select: none;
   user-select: none;
 }
-.grid .marker, .grid .drop-hint {
+
+.grid-marker, .grid .drop-hint {
   position: absolute;
   background: red;
-  width: 150;
-  height: 150;
+  width: 150px;
+  height: 150px;
   opacity: 0.6;
 }
 .grid .drop-hint {