Merge branch 'main' into remove-puppeteer-test-delays3-2-cybersemics#…

…2110

panda.config.ts

@@ -102,6 +102,11 @@ const keyframes = defineKeyframes({
       opacity: 0,
     },
   },
+  ellipsis: {
+    to: {
+      width: '1.25em',
+    },
+  },
 })
 
 const globalCss = defineGlobalStyles({

src/App.css

@@ -115,83 +115,6 @@
   top: 2px;
 }
 
-.content {
-  background-color: white;
-  color: #000;
-  padding: 80px 10px 153px 50px
-    /* padding-bottom must cover the footer (logged out: 79px, logged in: 93px) plus some additional visual spacing */;
-  position: relative;
-  transition:
-    transform 0 ease-out,
-    margin 0 ease-out; /* add transition time after initial load and scroll into place */
-  box-sizing: border-box; /* make height include padding so that the min-height can be exctly 100vh */
-  max-width: 55em; /* limit line width for easier reading */
-  margin: 0 auto;
-  min-height: 100vh; /* forces footer to bottom when there is little content */
-}
-
-@media (max-width: 960px) {
-  .content {
-    max-width: 80%;
-  }
-}
-
-@media (max-width: 560px) {
-  .content {
-    max-width: 50em;
-    padding-left: 40px;
-  }
-}
-
-/* reduce bottom space during tutorial to try to keep the tutorial in view as much as possible */
-.content-tutorial {
-  min-height: auto;
-  padding-bottom: 20px;
-}
-
-.dark .root,
-.dark .content {
-  background-color: black;
-  color: white;
-}
-
-/* Navigation styles */
-.nav {
-  position: sticky;
-  z-index: var(--z-index-stack);
-  padding: 0 15px 0 10px;
-  bottom: 0;
-}
-
-.nav-container {
-  position: absolute;
-  width: calc(100% - 30px); /* offset .nav padding */
-  transition: background-color 0.2s ease-out;
-}
-
-.nav-container .nav-right-button-group {
-  display: grid;
-  grid-auto-flow: column;
-  grid-column-gap: 15px;
-  align-items: center;
-}
-
-.nav-top {
-  top: 0;
-}
-
-.nav-bottom {
-  padding: 0 15px;
-}
-
-.nav-bottom .nav-container {
-  position: relative;
-  width: 100%;
-  display: flex;
-  align-items: flex-end;
-  /* rounded screens */
-  padding-bottom: calc(max(10px, var(--safe-area-bottom)));
-}
 
 /* react-transition-group animation: fade */
 .fade-enter {
@@ -404,20 +327,6 @@
   margin-left: -30px;
 }
 
-.absolute-center {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 10%; /* slightly above the fold */
-  left: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  user-select: none;
-  cursor: default;
-}
-
 .text-note {
   font-style: italic;
   color: rgba(7, 7, 7, 0.5);
@@ -637,12 +546,6 @@
   color: lightblue;
 }
 
-.indent {
-  display: inline-block;
-  margin-top: 5px;
-  margin-left: 18px;
-}
-
 .tutorial-next-wait {
   margin-left: 10px;
   font-style: italic;
@@ -729,77 +632,6 @@
   text-align: center;
 }
 
-.drop-down-wrapper {
-  background-color: white;
-  box-shadow: 0 0 10px 0px black;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-evenly;
-  border: 1px solid white;
-  position: absolute;
-  right: 3px;
-  padding: 0px 5px;
-  z-index: var(--z-index-stack);
-}
-
-.drop-down-wrapper .drop-down-option-wrapper {
-  cursor: pointer;
-  padding: 2px 0px;
-  border-top: 1px solid #444;
-  transition: opacity 150ms ease-in;
-}
-
-.drop-down-wrapper .drop-down-option-wrapper:hover {
-  opacity: 0.85;
-}
-
-.drop-down-wrapper .drop-down-option-wrapper:first-child {
-  border-top: none;
-}
-
-.drop-down-wrapper .drop-down-option {
-  display: flex;
-  align-items: center;
-  margin-left: 10px;
-}
-
-.drop-down-wrapper .drop-down-option .drop-down-label {
-  margin-left: 10px;
-  width: 95px;
-}
-
-.dark .drop-down-wrapper {
-  background-color: black;
-}
-
-/* Publish */
-
-.publish-meta {
-  margin: 15px 0;
-  font-size: 85%;
-  overflow: hidden;
-  line-height: 1.4;
-}
-
-.publish-meta .react-gravatar {
-  margin: 10px 10px 10px 0;
-  border-radius: 9999px;
-  float: left;
-}
-
-.publish-meta .byline:first-of-type {
-  margin-top: 15px;
-}
-
-.publish-meta .byline:nth-of-type(2) {
-  opacity: 0.6;
-}
-
-.quick-add-button {
-  display: inline-flex;
-  transition: transform 200ms ease-in-out;
-}
-
 .latest-shortcuts-wrapper {
   position: absolute;
   /* Using vh here allows shortcuts diagram to always appear keyboard in mobile. */
@@ -818,28 +650,6 @@
   margin: 0 2px;
 }
 
-.quick-add-button.rotate {
-  transform: rotate(135deg);
-}
-
-@keyframes ellipsis {
-  to {
-    width: 1.25em;
-  }
-}
-
-.loading-ellipsis:after {
-  overflow: hidden;
-  position: absolute;
-  display: inline-block;
-  vertical-align: bottom;
-  -webkit-animation: ellipsis steps(4, end) 1000ms infinite;
-  animation: ellipsis steps(4, end) 1000ms infinite;
-  content: '\2026'; /* ascii code for the ellipsis character */
-  width: 0;
-  margin-left: 0.1em;
-}
-
 @keyframes toblack {
   to {
     color: black;
@@ -859,24 +669,6 @@
   fill: #666;
 }
 
-.graypulse {
-  color: #666;
-  fill: #666;
-  -webkit-animation: toblack 400ms infinite alternate ease-in-out;
-}
-
-.dark .graypulse {
-  -webkit-animation: towhite 400ms infinite alternate ease-in-out;
-}
-
-.no-select {
-  user-select: none;
-}
-
-.empty-thoughtspace {
-  animation: 0.4s ease-out 0s normal forwards fadein;
-}
-
 .advance-setting-wrapper {
   display: flex;
   justify-content: center;

src/components/Bullet.tsx

@@ -284,6 +284,7 @@ const BulletLeaf = ({
   return (
     <ellipse
       aria-label='bullet-glyph'
+      data-graypulse={pending}
       className={glyphFg({
         gray: missing,
         graypulse: pending,

src/components/Byline.tsx

@@ -1,4 +1,5 @@
 import Gravatar from 'react-gravatar'
+import { css } from '../../styled-system/css'
 import ThoughtId from '../@types/ThoughtId'
 import attribute from '../selectors/attribute'
 import findDescendant from '../selectors/findDescendant'
@@ -15,10 +16,25 @@ const Byline = ({ id }: { id: ThoughtId }) => {
   const email = publishId && attribute(state, publishId, 'Email')
 
   return email || bylineChildren.length > 0 ? (
-    <div className='publish-meta'>
-      {email && <Gravatar email={email} />}
+    <div className={css({ margin: '15px 0', fontSize: '85%', overflow: 'hidden', lineHeight: '1.4' })}>
+      {email && (
+        <Gravatar
+          className={css({
+            margin: '10px 10px 10px 0',
+            borderRadius: '9999px',
+            float: 'left',
+          })}
+          email={email}
+        />
+      )}
       {bylineChildren.map(child => (
-        <div key={child.value} className='byline'>
+        <div
+          key={child.value}
+          className={css({
+            '&:first-of-type': { marginTop: '15px' },
+            '&:nth-of-type(2)': { opacity: 0.6 },
+          })}
+        >
           {child.value}
         </div>
       ))}

src/components/ChevronImg.tsx

@@ -1,4 +1,5 @@
 import { CSSProperties } from 'react'
+import { css, cx } from '../../styled-system/css'
 import fastClick from '../util/fastClick'
 
 interface ChevronImgProps {
@@ -14,9 +15,9 @@ const ChevronImg = ({ dark, onClickHandle, className, additonalStyle }: ChevronI
     viewBox='0 0 48 48'
     height='22px'
     width='22px'
-    style={{ ...additonalStyle, cursor: 'pointer' }}
+    style={additonalStyle}
     {...fastClick(onClickHandle)}
-    className={className || ''}
+    className={cx(className, css({ cursor: 'pointer' }))}
   >
     <path d='M14.83 16.42l9.17 9.17 9.17-9.17 2.83 2.83-12 12-12-12z' fill={dark ? '#fff' : '#000'} />
     <path d='M0-.75h48v48h-48z' fill='none' />

src/components/Content.tsx

@@ -1,6 +1,6 @@
-import classNames from 'classnames'
-import React, { FC, useMemo, useRef, useState } from 'react'
+import React, { FC, useRef, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
+import { css } from '../../styled-system/css'
 import Dispatch from '../@types/Dispatch'
 import SimplePath from '../@types/SimplePath'
 import { Thunk } from '../@types/Thunk'
@@ -16,7 +16,6 @@ import isTutorial from '../selectors/isTutorial'
 import fastClick from '../util/fastClick'
 import head from '../util/head'
 import isAbsolute from '../util/isAbsolute'
-import publishMode from '../util/publishMode'
 import Editable from './Editable'
 import EmptyThoughtspace from './EmptyThoughtspace'
 import LayoutTree from './LayoutTree'
@@ -71,23 +70,36 @@ const Content: FC = () => {
     ])
   }
 
-  /** Generate class names. */
-  const contentClassNames = useMemo(
-    () =>
-      classNames({
-        content: true,
-        'content-tutorial': isTouch && tutorial && tutorialStep !== TUTORIAL2_STEP_SUCCESS,
-        publish: publishMode(),
-      }),
-    [tutorialStep, tutorial],
-  )
-
   return (
     <div id='content-wrapper'>
       <div
         id='content'
         ref={contentRef}
-        className={contentClassNames}
+        className={css({
+          backgroundColor: 'bg',
+          color: 'fg',
+          padding: '80px 10px 153px 50px',
+          position: 'relative',
+          transition: 'transform 0 ease-out, margin 0 ease-out',
+          boxSizing: 'border-box',
+          maxWidth: '66%',
+          margin: '0 auto',
+          minHeight: '100vh',
+          '@media (max-width: 960px)': {
+            maxWidth: '80%',
+          },
+          '@media (max-width: 560px)': {
+            maxWidth: '50em',
+            paddingLeft: '40px',
+          },
+          ...(isTouch &&
+            tutorial &&
+            tutorialStep !== TUTORIAL2_STEP_SUCCESS && {
+              /* reduce bottom space during tutorial to try to keep the tutorial in view as much as possible */
+              minHeight: 'auto',
+              paddingBottom: '20px',
+            }),
+        })}
         {...fastClick(() => dispatch(clickOnEmptySpace))}
         onMouseDown={() => setIsPressed(true)}
       >