amelioro · keyserj · Oct 24, 2024 · Oct 22, 2024 · Oct 22, 2024 · Oct 22, 2024
@@ -1,6 +1,24 @@
 import { Head, Html, Main, NextScript } from "next/document";
 
-export const htmlDefaultFontSize = 16; // if we need to manually convert rem to px in many places, we can consider grabbing this from `html`
+// grab default font size from root <html> if we're on the client
+// thanks https://stackoverflow.com/a/49299352
+export const htmlDefaultFontSize =
+  typeof window !== "undefined" && typeof document !== "undefined"
+    ? Number(
+        window
+          .getComputedStyle(document.documentElement)
+          .getPropertyValue("font-size")
+          // remove "px" from the end
+          .slice(0, -2),
+      )
+    : 16; // default, should only be used if we're on the server, where our value should be overridden when on the client
+
+/**
+ * i.e. there's a px value that looks good with 16px font size, but if default font size is different, we should scale the px
+ *
+ * this should only be necessary where there's no option to use rem, i.e. for the layout algorithm
+ */
+export const scalePxViaDefaultFontSize = (px: number) => px * (htmlDefaultFontSize / 16);
 
 export default function Document() {
   return (

@@ -30,13 +30,8 @@ export const AddNodeMenuItem = ({ parentMenuOpen }: Props) => {
       <NestedMenuItem
         label="Add node"
         parentMenuOpen={parentMenuOpen}
-        sx={{
-          paddingX: "16px",
-          "& p": {
-            fontSize: "14px", // match default mui menu item text
-            paddingX: 0,
-          },
-        }}
+        // match default mui menu padding and size
+        className="px-[16px] [&_p]:px-0 [&_p]:text-sm"
       >
         {shownNodeTypes.map((type) => (
           <ContextMenuItem key={type} onClick={() => addNodeWithoutParent(type, "diagram")}>

@@ -24,13 +24,8 @@ export const ChangeEdgeTypeMenuItem = ({ edge, parentMenuOpen }: Props) => {
       <NestedMenuItem
         label="Change edge type"
         parentMenuOpen={parentMenuOpen}
-        sx={{
-          paddingX: "16px",
-          "& p": {
-            fontSize: "14px", // match default mui menu item text
-            paddingX: 0,
-          },
-        }}
+        // match default mui menu padding and size
+        className="px-[16px] [&_p]:px-0 [&_p]:text-sm"
       >
         {getSameCategoryEdgeTypes(edge.label).map((type) => (
           <ContextMenuItem

@@ -24,13 +24,8 @@ export const ChangeNodeTypeMenuItem = ({ node, parentMenuOpen }: Props) => {
       <NestedMenuItem
         label="Change node type"
         parentMenuOpen={parentMenuOpen}
-        sx={{
-          paddingX: "16px",
-          "& p": {
-            fontSize: "14px", // match default mui menu item text
-            paddingX: 0,
-          },
-        }}
+        // match default mui menu padding and size
+        className="px-[16px] [&_p]:px-0 [&_p]:text-sm"
       >
         {getSameCategoryNodeTypes(node.type).map((type) => (
           <ContextMenuItem

@@ -41,9 +41,9 @@ export const Header = () => {
   const isLoggedIn = sessionUser != null;
 
   return (
-    <AppBar position="sticky" className="border-b bg-gray-50 shadow-none">
+    <AppBar position="sticky" className="overflow-x-auto border-b bg-gray-50 shadow-none">
       <Toolbar variant="dense">
-        <div className="flex flex-1 items-center justify-between">
+        <div className="flex flex-1 items-center justify-between gap-4 *:shrink-0">
           <div className="flex items-center gap-4">
             <IconButton onClick={() => setIsSiteDrawerOpen(true)} className="block p-0 sm:hidden">
               <Menu />

@@ -1,5 +1,5 @@
 import { Check } from "@mui/icons-material";
-import { Box, Button, InputBase, Typography, useTheme } from "@mui/material";
+import { Button, InputBase, Typography } from "@mui/material";
 import { ReactNode, useState } from "react";
 
 interface Props {
@@ -10,11 +10,10 @@ interface Props {
 }
 
 export const SubscribeForm = ({ header, headerAnchor, action, buttonText }: Props) => {
-  const theme = useTheme();
   const [submitted, setSubmitted] = useState(false);
 
   return (
-    <div className="flex flex-col justify-center space-y-2 p-4 pt-2 text-center">
+    <div className="flex flex-col justify-center space-y-2 rounded-md border border-gray-300 p-4 pt-2 text-center">
       <Typography variant="body1">
         {header} {headerAnchor}
       </Typography>
@@ -29,35 +28,25 @@ export const SubscribeForm = ({ header, headerAnchor, action, buttonText }: Prop
         style={{ display: "flex", justifyContent: "center" }}
         onSubmit={() => setSubmitted(true)}
       >
-        <Box display="flex" justifyContent="center">
+        <div className="flex flex-wrap justify-center gap-1">
           <InputBase
             placeholder="Type your email..."
             type="email"
             name="email"
             required
-            sx={{
-              border: `1px solid ${theme.palette.primary.main}`,
-              borderTopLeftRadius: "4px",
-              borderBottomLeftRadius: "4px",
-              padding: "8px",
-              fontFamily: theme.typography.body1.fontFamily,
-              fontSize: "14px",
-              width: "200px",
-
-              ":focus": { outline: "none" },
-            }}
+            className="max-w-52 grow rounded border border-primary-main p-2 text-sm focus:outline-none"
           />
 
           <Button
             variant="contained"
             color="primary"
             type="submit"
             disabled={submitted}
-            sx={{ boxShadow: "none", borderTopLeftRadius: "0", borderBottomLeftRadius: "0" }}
+            className="shrink-0 text-nowrap rounded shadow-none"
           >
             {submitted ? <Check /> : buttonText}
           </Button>
-        </Box>
+        </div>
       </form>
 
       {submitted && (

@@ -16,7 +16,7 @@ import {
 
 export const Footer = () => {
   return (
-    <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 [&_a]:text-sm">
+    <div className="flex flex-wrap justify-evenly gap-4 [&_a]:text-sm">
       <div className="flex flex-col">
         <Typography variant="h6">Ameliorate</Typography>
         <NavLink href={docsPage} target="_blank">

@@ -19,8 +19,13 @@ const RotatingDescriptors = () => {
         with an open mind
       </span>
 
-      {/* size the text space to a line's worth, while allowing the rotating words to be absolute and appear in the same spot as each other */}
-      <br />
+      {/*
+        size the text space to the largest of the lines (a line's worth except for small screen + big font),
+        while allowing the rotating words to be absolute and appear in the same spot as each other
+      */}
+      <span className="invisible left-0 w-full text-transparent sm:left-auto">
+        with an open mind
+      </span>
     </>
   );
 };

@@ -25,7 +25,7 @@ export const ImprovingSection = () => {
         </Typography>
       </div>
 
-      <div className="flex flex-col divide-y divide-gray-300 rounded-md border border-gray-300 sm:flex-row sm:divide-x sm:divide-y-0">
+      <div className="flex flex-wrap justify-center gap-1">
         <SubscribeForm
           header="Get progress updates"
           headerAnchor={

@@ -5,9 +5,11 @@ import { Card } from "@/web/home/Card";
 export const UseCasesSection = () => {
   return (
     <div className="flex flex-col items-center gap-4">
-      <Typography variant="h4">Work Constructively</Typography>
+      <Typography variant="h4" className="text-center">
+        Work Constructively
+      </Typography>
 
-      <div className="grid grid-cols-1 gap-2 md:grid-cols-3 md:*:w-56">
+      <div className="flex flex-wrap justify-center gap-2 md:*:w-56">
         <Card
           title="Grasp your own thoughts"
           description="Lay out your ideas with all of their nuance to better think through a problem and make better decisions for yourself."

@@ -45,13 +45,8 @@ export const Indicator = ({
           variant="contained"
           color="neutralContrast"
           onClick={onClickHandler}
-          sx={{
-            pointerEvents: !onClick ? "none" : undefined,
-            // hover color diff for black is impossible to see, so a custom hover is added to darken the gray instead
-            "&:hover > svg": {
-              color: (theme) => theme.palette.neutral.dark,
-            },
-          }}
+          // hover color for black button is impossible to see, so a custom hover is added to the svg instead of the button
+          className={`[&_>_svg]:hover:text-neutral-dark ${!onClick ? "pointer-events-none" : ""}`}
         >
           <Icon color={filled ? color : "paper"} />
         </StyledButton>
@@ -62,11 +57,8 @@ export const Indicator = ({
           variant="contained"
           color={filled ? color : "paper"}
           onClick={onClickHandler}
-          sx={{
-            border: "1px solid",
-            pointerEvents: !onClick ? "none" : undefined,
-            fontSize: "16px", // default seems to be 14px, but 16px fits more snuggly within button size
-          }}
+          // text-base seems to fit more snuggly than the default 14px
+          className={`border border-solid text-base ${!onClick ? "pointer-events-none" : ""}`}
         >
           <Icon color="neutralContrast" fontSize="inherit" />
         </StyledButton>

@@ -6,42 +6,23 @@ import { ContentIndicators } from "@/web/topic/components/Indicator/ContentIndic
 import { StatusIndicators } from "@/web/topic/components/Indicator/StatusIndicators";
 
 export const nodeWidthRem = 11;
+const nodeHeightRem = 4.125;
 
 export const nodeWidthPx = nodeWidthRem * htmlDefaultFontSize;
-export const nodeHeightPx = 66;
+export const nodeHeightPx = nodeHeightRem * htmlDefaultFontSize;
 
-export const YEdgeBox = styled(Box)`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-`;
+export const TopDiv = styled.div``;
+export const NodeTypeDiv = styled.div``;
 
-export const NodeTypeBox = styled(Box)`
-  display: flex;
-  height: 24px;
-  align-items: center;
-`;
-
-export const NodeTypeSpan = styled.span`
-  font-size: 0.875rem;
-  line-height: 1;
-  padding-right: 4px;
-`;
+export const NodeTypeSpan = styled.span``;
 
 export const IndicatorDiv = styled.div`
   display: flex;
 `;
 
-export const XEdgeDiv = styled.div`
-  width: 24px;
-`;
-
 // allow handling mouse events for whole node without mouse icon changing to input for textarea
-export const MiddleDiv = styled.div`
-  display: flex;
-  flex-grow: 1; // fill out remaining space with this div because it contains the textarea
-  padding: 4px 4px 8px;
-`;
+export const MiddleDiv = styled.div``;
+export const BottomDiv = styled.div``;
 
 export const StyledTextareaAutosize = styled(TextareaAutosize)`
   padding: 0;
@@ -102,13 +83,13 @@ export const RightCornerContentIndicators = styled(ContentIndicators)`
   right: 0;
   bottom: 0;
   // amount that looks decent hanging over the edge of node
-  transform: translate(10px, 65%);
+  transform: translate(0.625rem, 65%);
 `;
 
 export const LeftCornerStatusIndicators = styled(StatusIndicators)`
   position: absolute;
   left: 0;
   bottom: 0;
   // amount that looks decent hanging over the edge of node
-  transform: translate(-10px, 65%);
+  transform: translate(-0.625px, 65%);
 `;
@@ -6,14 +6,15 @@ import { openContextMenu } from "@/web/common/store/contextMenuActions";
 import { clearNewlyAddedNode, isNodeNewlyAdded } from "@/web/common/store/ephemeralStore";
 import { CommonIndicators } from "@/web/topic/components/Indicator/CommonIndicators";
 import {
+  BottomDiv,
   LeftCornerStatusIndicators,
   MiddleDiv,
   NodeBox,
-  NodeTypeBox,
+  NodeTypeDiv,
   NodeTypeSpan,
   RightCornerContentIndicators,
   StyledTextareaAutosize,
-  YEdgeBox,
+  TopDiv,
 } from "@/web/topic/components/Node/EditableNode.styles";
 import { WorkspaceContext } from "@/web/topic/components/TopicWorkspace/WorkspaceContext";
 import { setCustomNodeType, setNodeLabel } from "@/web/topic/store/actions";
@@ -91,17 +92,17 @@ const EditableNodeBase = ({ node, className = "" }: Props) => {
           backgroundColor: "white",
           borderColor: color,
 
-          [NodeTypeBox.toString()]: {
+          [NodeTypeDiv.toString()]: {
             backgroundColor: color,
             // anti-aliasing between white node background and colored border/icon background creates a gray line - add colored shadow to hide this https://stackoverflow.com/a/40100710/8409296
             boxShadow: `-1px -1px 0px 1px ${color}`,
           },
 
-          [`&.selected ${NodeTypeBox.toString()}`]: {
+          [`&.selected ${NodeTypeDiv.toString()}`]: {
             boxShadow: "-1px -1px 0px 1px black",
           },
 
-          [`&.spotlight-secondary ${NodeTypeBox.toString()}`]: {
+          [`&.spotlight-secondary ${NodeTypeDiv.toString()}`]: {
             boxShadow: `-1px -1px 0px 1px ${theme.palette.info.main}`,
           },
         };
@@ -115,9 +116,9 @@ const EditableNodeBase = ({ node, className = "" }: Props) => {
       onContextMenu={(event) => openContextMenu(event, { node })}
       sx={nodeStyles}
     >
-      <YEdgeBox height="24px">
-        <NodeTypeBox sx={{ borderTopLeftRadius: "4px", borderBottomRightRadius: "4px" }}>
-          <NodeIcon sx={{ width: "0.875rem", height: "0.875rem", marginX: "4px" }} />
+      <TopDiv className="flex h-6 items-center justify-between">
+        <NodeTypeDiv className="flex h-6 items-center rounded-br rounded-tl">
+          <NodeIcon className="mx-1 size-3.5" />
           <NodeTypeSpan
             contentEditable={customizable}
             suppressContentEditableWarning // https://stackoverflow.com/a/49639256/8409296
@@ -126,14 +127,15 @@ const EditableNodeBase = ({ node, className = "" }: Props) => {
               if (text && text !== nodeDecoration.title && text !== node.data.customType)
                 setCustomNodeType(node, text);
             }}
-            className="nopan"
+            className="nopan pr-1 text-sm leading-none"
           >
             {typeText}
           </NodeTypeSpan>
-        </NodeTypeBox>
+        </NodeTypeDiv>
         <CommonIndicators graphPart={node} notes={node.data.notes} />
-      </YEdgeBox>
-      <MiddleDiv>
+      </TopDiv>
+      {/* grow to fill out remaining space with this div because it contains the textarea */}
+      <MiddleDiv className="flex grow px-1 pb-2 pt-1">
         <StyledTextareaAutosize
           id={textAreaId}
           ref={textAreaRef}
@@ -147,7 +149,7 @@ const EditableNodeBase = ({ node, className = "" }: Props) => {
           readOnly={!editable}
         />
       </MiddleDiv>
-      <YEdgeBox position="relative">
+      <BottomDiv className="relative">
         {node.type !== "rootClaim" && ( // root claim indicators don't seem very helpful
           <>
             {/* TODO?: how to make corner indicators not look bad in the table? they're cut off */}
@@ -159,7 +161,7 @@ const EditableNodeBase = ({ node, className = "" }: Props) => {
             />
           </>
         )}
-      </YEdgeBox>
+      </BottomDiv>
     </NodeBox>
   );
 };