More styling changes

frontend/components/Analytics/index.tsx

@@ -1,50 +1,22 @@
 import React from "react";
 
-const Chevron = () => (
-  <svg
-    xmlnsXlink="http://www.w3.org/1999/xlink"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 12 12"
-    className="sc-hHftDr bphBpT"
-    rotate="0"
-    data-test="IconComponent"
-    width="16"
-    height="20"
-  >
-    <rect
-      rotate="0"
-      data-test="IconComponent"
-      className="sc-fKFyDc gYoavR"
-      fillOpacity="0"
-      fill="#000000"
-    />
-    <polygon
-      transform="translate(5.949747, 4.949747) rotate(-45.000000) translate(-5.949747, -4.949747) "
-      points="4.44974747 6.44974747 4.44974747 1.44974747 2.44974747 1.44974747 2.44974747 8.44974747 9.44974747 8.44974747 9.44974747 6.44974747"
-      fill="#0A0B0D"
-    />
-  </svg>
-);
 interface AnalyticsProps {
   clicks: number;
 }
 
 const Analytics: React.FC<AnalyticsProps> = ({ clicks }) => {
   return (
-    <div className="w-full h-12 lt-lg:h-16 mr-0 px-4 lt-lg:px-6 flex flex-row border-b border-analytics-border text-sm font-karla">
-      <div className="w-full h-full flex-analytics flex flex-row justify-start items-center">
+    <div className="w-full h-12 lt-lg:h-16 mr-0 px-4 lt-lg:px-6 flex border-b border-gray-300 text-sm font-karla">
+      <div className="w-full h-full flex-analytics flex items-center">
         <span className="mr-4 font-bold">Lifetime Analytics:</span>
-        <div className="mr-8 flex flex-row justify-center items-center">
+        <div className="mr-8 flex justify-center items-center">
           <div className="h-2 w-2 mr-2 rounded bg-analytics-click-icon"></div>
-          <div className="flex flex-col lt-lg:flex-row text-xs lt-lg:text-base font-normal">
+          <div className="flex text-xs lt-lg:text-base font-normal">
             <p className="whitespace-pre">Clicks: </p>
             <p className="font-bold lt-lg:font-normal">{clicks || "-"}</p>
           </div>
         </div>
       </div>
-      <div className="w-full h-full flex-chevron flex flex-row justify-center items-center">
-        <Chevron />
-      </div>
     </div>
   );
 };

frontend/components/Editor/Link.tsx

@@ -44,7 +44,7 @@ const Link: React.FC<LinkProps> = ({ index, link, onChange, onDelete }) => {
     <Draggable key={index} draggableId={index.toString()} index={index}>
       {(provided) => (
         <div {...provided.draggableProps} ref={provided.innerRef}>
-          <div className="p-2 container flex">
+          <div className="py-2 flex rounded-md md:container">
             <div
               className="flex justify-center w-1/12 flex items-center border-r bg-white rounded-sm shadow-sm"
               {...provided.dragHandleProps}

frontend/components/Editor/index.tsx

@@ -61,70 +61,75 @@ const Editor: React.FC<EditorProps> = ({ links, setLinks }) => {
   };
 
   return (
-    <div className="flex">
-      <div className="space-y-4 bg-gray-100 w-1/2 p-2">
-        {/* add link button */}
-        <button
-          className="block flex py-2 items-center justify-center rounded-md bg-purple-600 hover:bg-purple-500 cursor-pointer text-white w-full"
-          onClick={handleOnClickAdd}
-        >
-          Add New Link
-        </button>
-        {displayDragDrop && (
-          <DragDropContext onDragEnd={handleOnDragEnd}>
-            <Droppable droppableId="links">
-              {(provided) => (
-                <div
-                  className="links"
-                  {...provided.droppableProps}
-                  ref={provided.innerRef}
-                >
-                  {editableLinks.map((link, index) => (
-                    <Link
-                      key={index}
-                      index={index}
-                      link={link}
-                      onChange={(newLink: EditableLink) =>
-                        setEditableLinks([
-                          ...editableLinks.slice(0, index),
-                          newLink,
-                          ...editableLinks.slice(index + 1),
-                        ])
-                      }
-                      onDelete={() =>
-                        setEditableLinks([
-                          ...editableLinks.slice(0, index),
-                          ...editableLinks.slice(index + 1),
-                        ])
-                      }
-                    />
-                  ))}
-                  {provided.placeholder}
-                </div>
-              )}
-            </Droppable>
-          </DragDropContext>
-        )}
-        <div className="mb-16" />
-        <div className="flex">
+    <div className="flex flex-col bg-gray-100 md:h-full md:flex-row">
+      <div className="space-y-4 md:w-3/5 md:border-r md:border-gray-300 md:overflow-y-scroll">
+        <div className="m-8">
           <button
-            className="block flex py-2 items-center justify-center rounded-md bg-purple-600 hover:bg-purple-500 cursor-pointer text-white w-full disabled:opacity-50"
-            onClick={onSubmit}
-            disabled={equal(editableLinks, links)}
+            className="block flex py-2 items-center justify-center rounded-lg bg-purple-600 hover:bg-purple-500 cursor-pointer text-white w-full"
+            onClick={handleOnClickAdd}
           >
-            Submit
-          </button>
-          <div className="mr-4" />
-          <button
-            className="block flex py-2 items-center justify-center rounded-md bg-purple-600 hover:bg-purple-500 cursor-pointer text-white w-full disabled:opacity-50"
-            onClick={onCancel}
-            disabled={equal(editableLinks, links)}
-          >
-            Cancel
+            Add New Link
           </button>
+          <div className="mb-8" />
+          {displayDragDrop && (
+            <DragDropContext onDragEnd={handleOnDragEnd}>
+              <Droppable droppableId="links">
+                {(provided) => (
+                  <div
+                    className="links"
+                    {...provided.droppableProps}
+                    ref={provided.innerRef}
+                  >
+                    {editableLinks.map((link, index) => (
+                      <Link
+                        key={index}
+                        index={index}
+                        link={link}
+                        onChange={(newLink: EditableLink) =>
+                          setEditableLinks([
+                            ...editableLinks.slice(0, index),
+                            newLink,
+                            ...editableLinks.slice(index + 1),
+                          ])
+                        }
+                        onDelete={() =>
+                          setEditableLinks([
+                            ...editableLinks.slice(0, index),
+                            ...editableLinks.slice(index + 1),
+                          ])
+                        }
+                      />
+                    ))}
+                    {provided.placeholder}
+                  </div>
+                )}
+              </Droppable>
+            </DragDropContext>
+          )}
+          <div className="mb-8" />
+          <div className="flex">
+            <button
+              className="block flex py-2 items-center justify-center rounded-lg bg-purple-600 hover:bg-purple-500 cursor-pointer text-white w-full disabled:opacity-50"
+              onClick={onSubmit}
+              disabled={equal(editableLinks, links)}
+            >
+              Submit
+            </button>
+            <div className="mr-4" />
+            <button
+              className="block flex py-2 items-center justify-center rounded-lg bg-purple-600 hover:bg-purple-500 cursor-pointer text-white w-full disabled:opacity-50"
+              onClick={onCancel}
+              disabled={equal(editableLinks, links)}
+            >
+              Cancel
+            </button>
+          </div>
         </div>
       </div>
-      <Preview links={editableLinks.filter((link) => link.active)} />
+      <div className="mb-8 md:none" />
+      <div className="flex items-center justify-center md:w-2/5">
+        <Preview links={editableLinks.filter((link) => link.active)} />
+      </div>
     </div>
   );
 };

frontend/components/Links/index.tsx

@@ -23,18 +23,16 @@ export const Links: React.FC<Props> = ({ links, logClicks = false }) => {
   };
 
   return (
-    <div
-      className={`text-s flex flex-col items-center w-full  top-6 font-karla`}
-    >
+    <div className="text-s flex flex-col items-center w-full top-6 font-karla">
       <img className="mb-3" src="csc_logo.png" alt="CSC Logo" width="100px" />
       <h1 className="font-bold">@uwcsclub</h1>
       <ul className="flex flex-col my-6 w-full">
         {links.map(({ name, url }, i) => (
-          <li key={i} className="w-full contents">
+          <li key={i} className="w-full flex justify-center">
             <a
-              className="btn bg-gray-450 p-3 text-white font-bold text-center self-center my-1.5
-        hover:bg-white hover:text-black border-2 border-gray-800 transition duration-200 ease-in-out
-        w-11/12 sm:w-4/12"
+              className="btn bg-gray-450 p-3 text-white font-karla font-bold text-center self-center my-1.5
+        hover:bg-white hover:text-black border-2 border-gray-800 transition duration-300 ease-in-out
+        w-11/12 sm:w-4/12 min-h-link"
               href={url}
               target="_blank"
               rel="noreferrer"

frontend/components/Preview/styles.module.css

@@ -9,6 +9,9 @@
   height: 100%;
   overflow-y: scroll;
   padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
-  padding-left: 5px;
+  padding-left: 7px;
   box-sizing: content-box; /* So the width will be 100% + 17px */
 }
+.child a {
+  width: 90%;
+}

frontend/pages/editor.tsx

@@ -22,10 +22,10 @@ const EditorPage: React.FC = () => {
   }, [loggedIn, headers]);
 
   return loggedIn ? (
-    <>
+    <div>
       <Analytics clicks={links.reduce((acc, curr) => acc + curr.clicks, 0)} />
       <Editor links={links} setLinks={setLinks} />
-    </>
+    </div>
   ) : (
     <Login />
   );

frontend/styles/globals.css

@@ -15,3 +15,12 @@ input,
 button {
   outline: none;
 }
+
+/* NextJS reset styles https://gist.github.com/dmurawsky/d45f068097d181c733a53687edce1919 */
+html,
+body,
+body > div:first-child,
+div#__next,
+div#__next > div {
+  height: 100%;
+}

frontend/tailwind.config.js

@@ -19,7 +19,6 @@ module.exports = {
     extend: {
       colors: {
         analytics: {
-          border: "#d7dce1",
           "view-icon": "#39e09b",
           "click-icon": "#8a86e5",
         },
@@ -47,9 +46,9 @@ module.exports = {
       borderWidth: {
         preview: "0.75rem",
       },
-    },
-    container: {
-      center: true,
+      minHeight: {
+        link: "48px",
+      },
     },
   },
   variants: {