big overhaul (#474)

* miniflare init

* feat(api): add tests

* chore: more tests, almost 100%

* add sessions/state spec

* add majority of routes and datapaths, start on interactions

* nevermind, no interactions

* nevermind x2, tweetnacl is bad but SubtleCrypto has what we need apparently

* simplify interactions verify

* add brute force interactions tests

* every primary path API route is refactored!

* automatically import from legacy, or die trying.

* check that we only fetch legacy once, ever

* remove old-src, same some historic pieces

* remove interactions & worker-utils package, update misc/types

* update some packages we don't need specific pinning for anymore

* update web references to API routes since they all changed

* fix all linting issues, upgrade most packages

* fix tests, divorce enzyme where-ever possible

* update web, fix integration issues

* pre-build api

* fix tests

* move api pretest to api package.json instead of CI

* remove interactions from terraform, fix deploy side configs

* update to tf 1.1.4

* prevent double writes to worker in GCS, port to newer GCP auth workflow

* fix api.tf var refs, upgrade node action

* change to curl-based script upload for worker script due to terraform provider limitations

* oh no, cloudflare freaked out :(

packages/design-system/atoms/avatar/Avatar.styled.ts

@@ -16,7 +16,7 @@ export const Container = styled.div<ContainerProps>`
   color: ${palette.grey100};
   position: relative;
   background-color: ${palette.grey500};
-  font-weight: bold;
+  font-weight: 700;
   text-align: center;
   line-height: 1;
   overflow: hidden;
@@ -24,7 +24,7 @@ export const Container = styled.div<ContainerProps>`
   ${(props) =>
     props.deliberatelyEmpty &&
     css`
-      border: 4px solid rgba(0, 0, 0, 0.25);
+      border: 4px solid rgb(0 0 0 / 25%);
       background-color: ${palette.taupe400};
       color: ${palette.taupe600};
     `}

packages/design-system/atoms/breakpoints/BreakpointProvider.tsx

@@ -31,7 +31,7 @@ export const BreakpointsProvider = (props: { children: React.ReactNode }) => {
     };
 
     updateScreenSize();
-    setImmediate(() => updateScreenSize());
+    setTimeout(() => updateScreenSize(), 0);
 
     mediaQueries.onDesktop.addEventListener('change', updateScreenSize);
     mediaQueries.onTablet.addEventListener('change', updateScreenSize);

packages/design-system/atoms/button/Button.styled.ts

@@ -25,7 +25,7 @@ const base = css`
   background-color: ${palette.taupe300};
   color: ${palette.grey500};
   border-radius: 3px;
-  border: 2px solid rgba(0, 0, 0, 0.55);
+  border: 2px solid rgb(0 0 0 / 55%);
   transition: all 0.15s ease-in-out;
   outline: 0;
   position: relative;
@@ -41,20 +41,20 @@ const base = css`
     left: 0;
     right: 0;
     background-color: #000;
-    opacity: 0;
+    opacity: 0%;
     transition: all 0.15s ease-in-out;
   }
 
   :hover {
     transform: translateY(-1px);
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
+    box-shadow: 0 1px 2px rgb(0 0 0 / 15%);
   }
 
   :active {
     transform: translateY(1px);
-    box-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
+    box-shadow: 0 0 2px rgb(0 0 0 / 25%);
     ::after {
-      opacity: 0.1;
+      opacity: 10%;
     }
   }
 `;
@@ -70,7 +70,7 @@ const colors = {
     border: 2px solid ${palette.discord200};
   `,
   muted: css`
-    border: 2px solid rgba(0, 0, 0, 0.15);
+    border: 2px solid rgb(0 0 0 / 15%);
     background: none;
     :hover {
       background-color: ${palette.taupe200};

packages/design-system/atoms/colors/colors.stories.tsx

@@ -15,7 +15,7 @@ export default {
 };
 
 const Swatch = styled.div`
-  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
+  box-shadow: 1px 1px 2px rgb(0 0 0 / 25%);
   width: 250px;
   height: 100px;
   margin: 10px;

packages/design-system/atoms/dot-overlay/DotOverlay.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import styled from 'styled-components';
 
 const dotOverlayBase = styled.div`
-  opacity: 0.6;
+  opacity: 60%;
   pointer-events: none;
   position: fixed;
   top: 0;

packages/design-system/atoms/fader/Fader.tsx

@@ -7,7 +7,7 @@ export type FaderProps = {
 };
 
 const FaderOpacityStyled = styled.div<Pick<FaderProps, 'isVisible'>>`
-  opacity: ${(props) => (props.isVisible ? 1 : 0)};
+  opacity: ${(props) => (props.isVisible ? '100%' : '0%')};
   pointer-events: ${(props) => (props.isVisible ? 'unset' : 'none')};
   transition: opacity 0.35s ease-in-out;
 `;

packages/design-system/atoms/hero/Hero.stories.tsx

@@ -41,7 +41,7 @@ const StoryWrapper = ({ topSpacing, bottomSpacing, ...props }: WrapperProps) =>
       <div
         style={{
           height: topSpacing,
-          backgroundColor: 'rgba(255,0,0,0.25)',
+          backgroundColor: 'rgb(255 0 0 / 25%)',
           top: 0,
           left: 0,
           right: 0,
@@ -54,7 +54,7 @@ const StoryWrapper = ({ topSpacing, bottomSpacing, ...props }: WrapperProps) =>
       <div
         style={{
           height: bottomSpacing,
-          backgroundColor: 'rgba(0,0,255,0.25)',
+          backgroundColor: 'rgb(0 0 255 / 25%)',
           bottom: 0,
           left: 0,
           right: 0,

packages/design-system/atoms/placeholder/Placeholder.tsx

@@ -41,10 +41,10 @@ export const PlaceholderBox = styled.div<PlaceholderProps>`
 
 export const opacityInOut = keyframes`
   from {
-    opacity: 0.6;
+    opacity: 60%;
   } 
   to {
-    opacity: 0.3;
+    opacity: 30%;
   }
 `;
 

packages/design-system/atoms/popover/Popover.styled.ts

@@ -13,7 +13,7 @@ export const PopoverBase = styled.div<PopoverStyledProps>`
   position: absolute;
   background-color: ${palette.taupe100};
   padding: 5px;
-  border: 2px solid rgba(0, 0, 0, 0.15);
+  border: 2px solid rgb(0 0 0 / 15%);
   border-radius: 3px;
   z-index: 10;
   transition: opacity ${transitions.out2in}s ease-in,
@@ -24,7 +24,7 @@ export const PopoverBase = styled.div<PopoverStyledProps>`
     !props.active &&
     css`
       transform: translateY(-2vh);
-      opacity: 0;
+      opacity: 0%;
       pointer-events: none;
     `}
   ${onSmallScreen(
@@ -40,11 +40,11 @@ export const PopoverBase = styled.div<PopoverStyledProps>`
       z-index: 200;
       margin: 0 !important;
     `
-  )};
+  )}
 `;
 
 export const DefocusHandler = styled.div<PopoverStyledProps>`
-  background-color: rgba(0, 0, 0, 0.01);
+  background-color: rgb(0 0 0 / 1%);
   position: fixed;
   z-index: 0;
   top: 0;
@@ -82,7 +82,7 @@ export const PopoverHeadCloser = styled.div`
   )}
 
   &:hover {
-    background: rgba(0, 0, 0, 0.1);
+    background: rgb(0 0 0 / 10%);
   }
 `;
 

packages/design-system/atoms/role/Role.styled.tsx

@@ -62,7 +62,7 @@ export const Outer = styled.div<StyledProps>`
       ? onTablet(css`
           &:hover {
             transform: translateY(-2px);
-            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
+            box-shadow: 0 1px 2px rgb(0 0 0 / 15%);
             ${Circle} svg {
               fill-opacity: 1;
             }
@@ -73,7 +73,7 @@ export const Outer = styled.div<StyledProps>`
             box-shadow: 0 0 0 transparent;
           }
         `)
-      : null};
+      : null}
 `;
 
 export const Text = styled.div`

packages/design-system/atoms/tab-view/TabView.styled.ts

@@ -65,7 +65,7 @@ export const TabContent = styled.div`
 export const TabContentTitle = styled.div`
   ${text500}
 
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  border-bottom: 1px solid rgb(0 0 0 / 10%);
   padding: 0.5em 7px;
 `;
 

packages/design-system/atoms/text-input/TextInput.tsx

@@ -21,13 +21,13 @@ const common = css`
   :focus {
     outline: none;
     border-color: ${palette.grey100};
-    box-shadow: 1px 0 3px rgba(0, 0, 0, 0.25);
+    box-shadow: 1px 0 3px rgb(0 0 0 / 25%);
   }
 
   [disabled],
   :disabled {
     cursor: not-allowed;
-    color: rgba(255, 255, 255, 0.75);
+    color: rgb(255 255 255 / 75%);
     font-style: italic;
   }
 
@@ -41,7 +41,7 @@ const common = css`
 `;
 
 export const StyledTextInput = styled.input`
-  ${common};
+  ${common}
 `;
 
 type TextInputProps<T extends HTMLInputElement | HTMLTextAreaElement> =
@@ -87,8 +87,8 @@ export const TextInputWithIcon = (props: TextInputWithIconProps) => {
 };
 
 const StyledTextarea = styled.textarea`
-  ${common};
-  ${fontCSS};
+  ${common}
+  ${fontCSS}
 
   margin: 0.5em 0;
 `;

packages/design-system/atoms/toggle/Toggle.styled.tsx

@@ -24,7 +24,7 @@ export const ToggleSwitch = styled.div<{ state: boolean }>`
   width: 2.675rem;
   border-radius: 1.375rem;
   position: relative;
-  border: 1px solid rgba(0, 0, 0, 0.1);
+  border: 1px solid rgb(0 0 0 / 10%);
   top: 0.23em;
   transition: background-color ${transitions.in2in}s ease-in-out;
   cursor: pointer;

packages/design-system/atoms/typography/typography.stories.tsx

@@ -87,7 +87,7 @@ const SpacingHead = styled.p`
 
 const SpacingSection = styled(Section)`
   max-width: 50vw;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
+  border-bottom: 1px solid rgb(0 0 0 / 25%);
 `;
 
 export const Spacing = () => (

packages/design-system/atoms/typography/typography.tsx

@@ -14,55 +14,46 @@ const reset = css`
 
 export const text900 = css`
   ${reset}
-
   font-size: 2.3rem;
 `;
 
 export const text800 = css`
   ${reset}
-
   font-size: 2rem;
 `;
 
 export const text700 = css`
   ${reset}
-
   font-size: 1.7rem;
 `;
 
 export const text600 = css`
   ${reset}
-
   font-size: 1.4rem;
 `;
 
 export const text500 = css`
   ${reset}
-
   font-size: 1.2rem;
 `;
 
 export const text400 = css`
   ${reset}
-
   font-size: 1rem;
 `;
 
 export const text300 = css`
   ${reset}
-
   font-size: 0.9rem;
 `;
 
 export const text200 = css`
   ${reset}
-
   font-size: 0.7rem;
 `;
 
 export const text100 = css`
   ${reset}
-
   font-size: 0.5rem;
 `;