Refactor node packages to yarn workspaces & ditch next.js for CRA. (#161)

* chore: restructure project into yarn workspaces, remove next

* fix tests, remove webapp from terraform

* remove more ui deployment bits

* remove pages, fix FUNDING.yml

* remove isomorphism

* remove next providers

* fix linting issues

* feat: start basis of new web ui system on CRA

* chore: move types to @roleypoly/types package

* chore: move src/common/utils to @roleypoly/misc-utils

* chore: remove roleypoly/ path remappers

* chore: renmove vercel config

* chore: re-add worker-types to api package

* chore: fix type linting scope for api

* fix(web): craco should include all of packages dir

* fix(ci): change api webpack path for wrangler

* chore: remove GAR actions from CI

* chore: update codeql job

* chore: test better github dar matcher in lint-staged

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

@@ -0,0 +1,82 @@
+import { palette } from '@roleypoly/design-system/atoms/colors';
+import { transitions } from '@roleypoly/design-system/atoms/timings';
+import styled, { css } from 'styled-components';
+
+export type StyledProps = {
+    selected: boolean;
+    defaultColor: boolean;
+    disabled: boolean;
+    type?: 'delete';
+};
+
+export const Circle = styled.div<StyledProps>`
+    width: 24px;
+    height: 24px;
+    border-radius: 25px;
+    background-color: ${(props) =>
+        props.defaultColor && !props.selected ? 'transparent' : 'var(--role-color)'};
+    border: 1px solid
+        ${(props) =>
+            props.defaultColor
+                ? 'var(--role-color)'
+                : props.selected
+                ? 'var(--role-accent)'
+                : 'transparent'};
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: border ${transitions.in2in}s ease-in-out,
+        background-color ${transitions.in2in}s ease-in-out;
+    flex-shrink: 0;
+
+    svg {
+        width: 10px;
+        height: 10px;
+        fill-opacity: ${(props) => (props.selected || props.disabled ? 1 : 0)};
+        transition: fill-opacity ${transitions.in2in}s ease-in-out;
+        fill: ${(props) =>
+            props.disabled && props.defaultColor
+                ? 'var(--role-color)'
+                : 'var(--role-contrast)'};
+    }
+`;
+
+export const Outer = styled.div<StyledProps>`
+    border-radius: 24px;
+    background-color: ${(props) =>
+        props.selected && !props.defaultColor ? 'var(--role-color)' : palette.taupe100};
+    color: ${(props) => (props.selected ? 'var(--role-contrast)' : palette.grey600)};
+    transition: color ${transitions.in2in}s ease-in-out,
+        background-color ${transitions.in2in}s ease-in-out,
+        transform ${transitions.actionable}s ease-in-out,
+        box-shadow ${transitions.actionable}s ease-in-out;
+    display: flex;
+    padding: 4px;
+    user-select: none;
+    overflow: hidden;
+    cursor: pointer;
+    ${(props) =>
+        !props.disabled
+            ? css`
+                  &:hover {
+                      transform: translateY(-2px);
+                      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
+                      ${Circle} svg {
+                          fill-opacity: 1;
+                      }
+                  }
+
+                  &:active {
+                      transform: translateY(0);
+                      box-shadow: 0 0 0 transparent;
+                  }
+              `
+            : null};
+`;
+
+export const Text = styled.div`
+    padding: 0 4px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+`;