Merge branch 'master' of https://github.com/thecodingwizard/usaco-guide

content/1_Intro/Using_This_Guide.mdx

@@ -20,7 +20,7 @@ The following _section_ (not module!) "General" will contain a list of modules n
 As you use this guide, here are some features that you may find helpful:
 
 1. Use the "Module Progress" dropdowns to track your progress through this guide!
-2. Use the "Report an Issue<Asterisk>Suggestions can be reported here, too!</Asterisk>" or "Get Help" buttons on the bottom left corner of the screen as needed.
+2. Use the "Complain<Asterisk>Suggestions can be reported here, too!</Asterisk>" or "Get Help" buttons on the bottom left corner of the screen as needed.
 3. If you're not sure which problems/resources to do, try doing the starred ones first.
 
 

src/components/ModuleLayout/ModuleLayout.tsx

@@ -124,7 +124,7 @@ const SidebarBottomButtons = ({ onReportIssue, onGetHelp }) => (
         >
           <path d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
         </svg>
-        Report an Issue
+        Complain
       </button>
     </div>
     <div className="flex-shrink-0 border-t border-gray-200 flex">
@@ -470,8 +470,14 @@ export default function ModuleLayout({
                   </nav>
                 </div>
                 <SidebarBottomButtons
-                  onReportIssue={() => setIsReportIssueActive(true)}
+                  onReportIssue={() => {
-                  onGetHelp={() => setIsGetHelpActive(true)}
+                    setIsMobileNavOpen(false);
+                    setIsReportIssueActive(true);
+                  }}
+                  onGetHelp={() => {
+                    setIsMobileNavOpen(false);
+                    setIsGetHelpActive(true);
+                  }}
                 />
               </div>
             </Transition>

src/components/ReportIssueSlideover.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import Transition from './Transition';
 import { ModuleInfo } from '../module';
 import { divisionLabels } from '../../content/ordering';
+import Slideover from './Slideover/Slideover';
 
 export default function ReportIssueSlideover({
   isOpen,
@@ -21,70 +22,33 @@ export default function ReportIssueSlideover({
     else setIssueLocation('');
   }, [activeModule]);
   return (
-    <Transition show={isOpen} timeout={700}>
+    <Slideover
-      <div className="fixed inset-0 overflow-hidden">
+      isOpen={isOpen}
-        <div className="absolute inset-0 overflow-hidden">
+      onClose={onClose}
-          <Transition
+      title="Complaint Form"
-            enter="ease-in-out duration-500"
+      subtitle="If you encounter an error while using the website, please fill out the form below. Thank you!"
-            enterFrom="opacity-0"
+      footerButtons={
-            enterTo="opacity-100"
+        <>
-            leave="ease-in-out duration-500"
+          <span className="inline-flex rounded-md shadow-sm">
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-          >
-            <div
-              className="absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
-              onClick={onClose}
-            />
-          </Transition>
-
-          <section className="absolute inset-y-0 pl-16 max-w-full right-0 flex">
-            <Transition
-              enter="transform transition ease-in-out duration-500 sm:duration-700"
-              enterFrom="translate-x-full"
-              enterTo="translate-x-0"
-              leave="transform transition ease-in-out duration-500 sm:duration-700"
-              leaveFrom="translate-x-0"
-              leaveTo="translate-x-full"
-            >
-              <div className="w-screen max-w-md">
-                <div className="h-full divide-y divide-gray-200 flex flex-col bg-white shadow-xl">
-                  <div className="flex-1 h-0 overflow-y-auto">
-                    <header className="space-y-1 py-6 px-4 bg-blue-700 sm:px-6">
-                      <div className="flex items-center justify-between space-x-3">
-                        <h2 className="text-lg leading-7 font-medium text-white">
-                          Report an Issue
-                        </h2>
-                        <div className="h-7 flex items-center">
             <button
-                            aria-label="Close panel"
+              type="button"
-                            className="text-blue-200 hover:text-white"
+              className="py-2 px-4 border border-gray-300 rounded-md text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800 transition duration-150 ease-in-out"
               onClick={onClose}
             >
-                            <svg
+              Cancel
-                              className="h-6 w-6"
-                              fill="none"
-                              viewBox="0 0 24 24"
-                              stroke="currentColor"
-                            >
-                              <path
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                strokeWidth="2"
-                                d="M6 18L18 6M6 6l12 12"
-                              />
-                            </svg>
             </button>
-                        </div>
+          </span>
-                      </div>
+          <span className="inline-flex rounded-md shadow-sm">
-                      <div>
+            <button
-                        <p className="text-sm leading-5 text-blue-300">
+              type="submit"
-                          If you encounter an error while using the website,
+              className="inline-flex justify-center py-2 px-4 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-blue-600 hover:bg-blue-500 focus:outline-none focus:border-blue-700 focus:shadow-outline-blue active:bg-blue-700 transition duration-150 ease-in-out"
-                          please fill out the form below. Thank you!
+            >
-                        </p>
+              Submit Complaint
-                      </div>
+            </button>
-                    </header>
+          </span>
-                    <div className="flex-1 flex flex-col justify-between">
+        </>
+      }
+    >
       <div className="px-4 divide-y divide-gray-200 sm:px-6">
         <div className="space-y-6 pt-6 pb-5">
           <div className="space-y-1">
@@ -272,33 +236,6 @@ export default function ReportIssueSlideover({
           </div>
         </div>
       </div>
-                    </div>
+    </Slideover>
-                  </div>
-                  <div className="flex-shrink-0 px-4 py-4 space-x-4 flex justify-end">
-                    <span className="inline-flex rounded-md shadow-sm">
-                      <button
-                        type="button"
-                        className="py-2 px-4 border border-gray-300 rounded-md text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800 transition duration-150 ease-in-out"
-                        onClick={onClose}
-                      >
-                        Cancel
-                      </button>
-                    </span>
-                    <span className="inline-flex rounded-md shadow-sm">
-                      <button
-                        type="submit"
-                        className="inline-flex justify-center py-2 px-4 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-blue-600 hover:bg-blue-500 focus:outline-none focus:border-blue-700 focus:shadow-outline-blue active:bg-blue-700 transition duration-150 ease-in-out"
-                      >
-                        Submit Report
-                      </button>
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </Transition>
-          </section>
-        </div>
-      </div>
-    </Transition>
   );
 }

src/components/Slideover/Slideover.tsx

@@ -0,0 +1,92 @@
+import * as React from 'react';
+import Transition from '../Transition';
+
+type SlideoverProps = {
+  isOpen: boolean;
+  onClose: Function;
+  title: React.ReactNode;
+  subtitle: React.ReactNode;
+  children: React.ReactNode;
+  footerButtons: React.ReactNode;
+};
+
+export default function Slideover(props: SlideoverProps) {
+  return (
+    <Transition show={props.isOpen} timeout={700}>
+      <div className="fixed inset-0 overflow-hidden">
+        <div className="absolute inset-0 overflow-hidden">
+          <Transition
+            enter="ease-in-out duration-500"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="ease-in-out duration-500"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <div
+              className="absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
+              onClick={() => props.onClose()}
+            />
+          </Transition>
+
+          <section className="absolute inset-y-0 max-w-full right-0 flex">
+            <Transition
+              enter="transform transition ease-in-out duration-500 sm:duration-700"
+              enterFrom="translate-x-full"
+              enterTo="translate-x-0"
+              leave="transform transition ease-in-out duration-500 sm:duration-700"
+              leaveFrom="translate-x-0"
+              leaveTo="translate-x-full"
+            >
+              <div className="w-screen max-w-md">
+                <div className="h-full divide-y divide-gray-200 flex flex-col bg-white shadow-xl">
+                  <div className="flex-1 h-0 overflow-y-auto">
+                    <header className="space-y-1 py-6 px-4 bg-blue-700 sm:px-6">
+                      <div className="flex items-center justify-between space-x-3">
+                        <h2 className="text-lg leading-7 font-medium text-white">
+                          {props.title}
+                        </h2>
+                        <div className="h-7 flex items-center">
+                          <button
+                            aria-label="Close panel"
+                            className="text-blue-200 hover:text-white"
+                            onClick={() => props.onClose()}
+                          >
+                            <svg
+                              className="h-6 w-6"
+                              fill="none"
+                              viewBox="0 0 24 24"
+                              stroke="currentColor"
+                            >
+                              <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                strokeWidth="2"
+                                d="M6 18L18 6M6 6l12 12"
+                              />
+                            </svg>
+                          </button>
+                        </div>
+                      </div>
+                      <div>
+                        <p className="text-sm leading-5 text-blue-300">
+                          {props.subtitle}
+                        </p>
+                      </div>
+                    </header>
+                    <div className="flex-1 flex flex-col justify-between">
+                      {props.children}
+                    </div>
+                  </div>
+                  <div className="flex-shrink-0 px-4 py-4 space-x-4 flex justify-end">
+                    {props.footerButtons}
+                  </div>
+                </div>
+              </div>
+            </Transition>
+          </section>
+        </div>
+      </div>
+    </Transition>
+  );
+}

src/components/markdown/MDXProvider.tsx

@@ -135,6 +135,11 @@ const components = {
   ),
 
   p: props => <p {...props} className="mb-4" />,
+  'ol.li': ({ children, ...props }) => (
+    <li {...props}>
+      <div>{children}</div>
+    </li>
+  ),
 };
 
 export default function ({ children }) {

src/components/markdown/Resources.tsx

@@ -86,9 +86,9 @@ export function ResourceComponent(props) {
       throw `URL ${url} is not valid. Did you make a typo in the source (${source}), or in the URL? Resource name: ${props.title}`;
   }
   return (
-    <tr>
+    <tr className="block sm:table-row">
       {props.source && (
-        <td className="pl-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-500">
+        <td className="pl-6 pt-4 pb-1 sm:pb-4 whitespace-no-wrap text-sm leading-5 text-gray-500">
           {sourceTooltip.hasOwnProperty(props.source) ? (
             <TextTooltip content={sourceTooltip[props.source]}>
               {props.source}
@@ -98,11 +98,12 @@ export function ResourceComponent(props) {
           )}
         </td>
       )}
-      <td className="pl-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-500 w-4">
+      <td className="px-6 pt-4 pb-1 sm:pb-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-900">
+        <div className="flex items-center">
           {props.starred && (
             <Tooltip content="Starred resources are ones we think are worth the read. Use starred resources first, and if you're still stuck, try reading some of the unstarred ones!">
               <svg
-              className="h-4 w-4 text-blue-400"
+                className="h-4 w-6 text-blue-400 pr-2"
                 fill="currentColor"
                 viewBox="0 0 20 20"
               >
@@ -110,11 +111,10 @@ export function ResourceComponent(props) {
               </svg>
             </Tooltip>
           )}
-      </td>
-      <td className="pl-2 pr-6 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-900">
           <a href={url}>{props.title}</a>
+        </div>
       </td>
-      <td className="w-100 px-6 py-4 text-sm leading-5 text-gray-500">
+      <td className="block sm:table-cell px-6 sm:pt-4 pb-4 text-sm leading-5 text-gray-500">
         {props.children}
       </td>
     </tr>

src/pages/index.tsx

@@ -396,8 +396,8 @@ export default function IndexPage(props: PageProps) {
                     <p className="text-base leading-6 text-gray-500">
                       If you encounter an issue while using the guide (website
                       bug, typo, broken link, unclear explanation, etc), use the
-                      "Report an Issue" button on the bottom left of the screen,
+                      "Complain" button on the bottom left of the screen, or
-                      or contact the guide coordinator directly.
+                      contact the guide coordinator directly.
                     </p>
                   </dd>
                 </div>