App: browser compat updates

src/components/App/App.css

@@ -15,10 +15,10 @@ h2 {
 }
 
 img {
-  user-select: none;
   -moz-user-select: none;
   -webkit-user-select: none;
   -webkit-user-drag: none;
+  user-select: none;
 }
 
 pre,
@@ -65,9 +65,10 @@ button.main-button {
   transform: translate(0, 0);
   transition: all 0.2s ease;
   cursor: pointer;
-  user-select: none;
   -moz-user-select: none;
   -webkit-user-select: none;
+  -webkit-user-drag: none;
+  user-select: none;
   margin: 0 24px 24px 0;
 }
 

src/components/ColorInput/ColorInput.css

@@ -16,9 +16,9 @@
   left: 50%;
   -ms-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
-  user-select: none;
   -moz-user-select: none;
   -webkit-user-select: none;
+  user-select: none;
   pointer-events: none;
   text-transform: uppercase;
 }

src/components/Footer/Footer.css

@@ -48,9 +48,9 @@ footer .links {
 
 .illustrations-footer {
   display: none;
-  user-select: none;
   -moz-user-select: none;
   -webkit-user-select: none;
+  user-select: none;
   pointer-events: none;
 }
 

src/components/Header/Header.css

@@ -60,7 +60,7 @@ header {
     top: -158px;
   }
 
-  #billiard-ball {
+  .billiard-ball {
     position: absolute;
     left: 132px;
     top: -98px;
@@ -72,13 +72,13 @@ header {
     top: 152px;
   }
 
-  #warning {
+  .warning {
     position: absolute;
     left: 394px;
     top: -304px;
   }
 
-  #tablet {
+  .tablet {
     position: absolute;
     left: 672px;
     top: -900px;
@@ -94,18 +94,18 @@ header {
     height: 612px;
   }
 
-  #cutting-mat {
+  .cutting-mat {
     position: absolute;
     left: 96px;
   }
 
-  #receipt {
+  .receipt {
     position: absolute;
     left: -36px;
     top: 190px;
   }
 
-  #calculator {
+  .calculator {
     position: absolute;
     left: 632px;
     top: 170px;
@@ -131,7 +131,7 @@ header {
     top: -158px;
   }
 
-  #billiard-ball {
+  .billiard-ball {
     position: absolute;
     left: 900px;
     top: 400px;
@@ -148,30 +148,30 @@ header {
     top: 694px;
   }
 
-  #warning {
+  .warning {
     position: absolute;
     left: 1170px;
     top: 400px;
   }
 
-  #tablet {
+  .tablet {
     position: absolute;
     left: 578px;
     top: -900px;
   }
 
-  #cutting-mat {
+  .cutting-mat {
     position: absolute;
     left: 120px;
   }
 
-  #receipt {
+  .receipt {
     position: absolute;
     left: -16px;
     top: 190px;
   }
 
-  #calculator {
+  .calculator {
     position: absolute;
     left: 924px;
     top: 114px;

src/components/Header/Header.tsx

@@ -41,22 +41,22 @@ const Header: React.FC<HeaderProps> = () => {
           <img src={markerPurple} id="marker-purple" alt="" />
           <img src={paperclips} id="paperclips" alt="" />
           <img src={paperclipsThree} id="paperclips-three" alt="" />
-          <img id="tablet" src={tabletSpec} alt="" />
+          <img className="tablet" src={tabletSpec} alt="" />
-          <img id="tablet" className="inspectable xray" src={tablet} alt="" />
+          <img className="tablet inspectable xray" src={tablet} alt="" />
-          <img id="billiard-ball" src={billiardBallSpec} alt="" />
+          <img className="billiard-ball" src={billiardBallSpec} alt="" />
           <img
-            id="billiard-ball"
+            className="billiard-ball inspectable xray"
-            className="inspectable xray"
             src={billiardBall}
             alt=""
           />
 
-          <img id="warning" src={warningSpec} alt="" />
+          <img className="warning" src={warningSpec} alt="" />
-          <img id="warning" className="inspectable xray" src={warning} alt="" />
+          <img className="warning inspectable xray" src={warning} alt="" />
         </div>
         <div className="intro">
           <h2>
-            Phosphor is a flexible icon family for interfaces, diagrams, presentations — 
+            Phosphor is a flexible icon family for interfaces, diagrams,
+            presentations — 
             <wbr />
             whatever, really.
           </h2>
@@ -73,19 +73,17 @@ const Header: React.FC<HeaderProps> = () => {
           <Links />
         </div>
         <div className="illustrations-bottom">
-          <img id="cutting-mat" src={cuttingMatSpec} alt="" />
+          <img className="cutting-mat" src={cuttingMatSpec} alt="" />
           <img
-            id="cutting-mat"
+            className="cutting-mat inspectable xray"
-            className="inspectable xray"
             src={cuttingMat}
             alt=""
           />
-          <img id="receipt" src={receiptSpec} alt="" />
+          <img className="receipt" src={receiptSpec} alt="" />
-          <img id="receipt" className="inspectable xray" src={receipt} alt="" />
+          <img className="receipt inspectable xray" src={receipt} alt="" />
-          <img id="calculator" src={calculatorSpec} alt="" />
+          <img className="calculator" src={calculatorSpec} alt="" />
           <img
-            id="calculator"
+            className="calculator inspectable xray"
-            className="inspectable xray"
             src={calculator}
             alt=""
           />

src/components/IconGrid/IconGrid.css

@@ -22,9 +22,9 @@
   justify-content: center;
   margin: 4px;
   border-radius: 16px;
-  user-select: none;
   -moz-user-select: none;
   -webkit-user-select: none;
+  user-select: none;
   cursor: pointer;
   /* transition: background-color 100ms ease; */
 }
@@ -95,9 +95,9 @@
   align-items: center;
   text-overflow: ellipsis;
   color: black;
-  user-select: all;
   -moz-user-select: all;
   -webkit-user-select: all;
+  user-select: all;
 }
 
 .snippet pre:focus {
@@ -106,9 +106,9 @@
 
 @keyframes select {
   to {
-    user-select: text;
     -moz-user-select: text;
     -webkit-user-select: text;
+    user-select: text;
   }
 }
 

src/components/SearchInput/SearchInput.css

@@ -56,6 +56,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: flex-end;
+  -moz-user-select: none;
+  -webkit-user-select: none;
   user-select: none;
   min-width: 42px;
   font-size: 12px;

src/components/Toolbar/Toolbar.css

@@ -1,4 +1,5 @@
-menu.toolbar {
+nav.toolbar {
+  position: -webkit-sticky;
   position: sticky;
   top: -1px;
   padding: 0;

src/components/Toolbar/Toolbar.tsx

@@ -10,14 +10,14 @@ type ToolbarProps = {};
 
 const Toolbar: React.FC<ToolbarProps> = () => {
   return (
-    <menu className="toolbar" id="toolbar">
+    <nav className="toolbar" id="toolbar">
       <div className="toolbar-contents">
         <StyleInput />
         <SearchInput />
         <SizeInput />
         <ColorInput />
       </div>
-    </menu>
+    </nav>
   );
 };