add initial test client

client/src/global-styles/atomic.css

@@ -0,0 +1,6 @@
+/* Atomic Styles */
+.text-select { user-select: text; }
+.pad { padding: 0.5rem; }
+.gap { gap: 0.5rem; }
+.flex-grow { flex-grow: 1; }
+.flex-row { flex-direction: row; }

client/src/global-styles/colors.css

@@ -0,0 +1,34 @@
+/* Coloring */
+:root {
+  /* Color Definitions */
+  --cl-md-50: #FAFAFA;
+  --cl-md-100: #F5F5F5;
+  --cl-md-200: #EEEEEE;
+  --cl-md-300: #E0E0E0;
+  --cl-md-400: #BDBDBD;
+  --cl-md-500: #9E9E9E;
+  --cl-md-600: #757575;
+  --cl-md-700: #616161;
+  --cl-md-800: #424242;
+  --cl-md-900: #212121;
+
+  /* Color Uses */
+  --cl-bg: var(--cl-md-900);
+  --cl-bg-mid: var(--cl-md-800);
+  --cl-bg-low: var(--cl-md-700);
+  --cl-fg: var(--cl-md-100);
+
+  /* Apply as default */
+  background-color: var(--cl-bg);
+  color: var(--cl-fg);
+}
+
+/* Changes for light mode */
+@media screen and (prefers-color-scheme: light) {
+  :root {
+    --cl-bg: var(--cl-md-100);
+    --cl-bg-mid: var(--cl-md-200);
+    --cl-bg-low: var(--cl-md-300);
+    --cl-fg: var(--cl-md-900);
+  }
+}

client/src/global-styles/components.css

@@ -0,0 +1,75 @@
+/* CSS Components */
+button, .button {
+  all: unset;
+
+  display: flex;
+  flex-flow: row nowrap;
+  overflow: hidden;
+  vertical-align: center;
+  
+  padding: 0.5rem;
+  gap: 0.5rem;
+  
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  
+  background-color: var(--cl-bg-low);
+}
+.button > svg, button > svg {
+  min-width: 1.5rem;
+  min-height: 1.5rem;
+}
+.button:hover, button:hover {
+  background-color: var(--cl-bg-mid);
+}
+
+form {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  padding: 0.5rem;
+  gap: 0.5rem;
+
+  background-color: var(--cl-bg-low);
+}
+form > :is(button, .button, h1) {
+  grid-column: 1 / 3;
+}
+form button, form .button {
+  background-color: var(--cl-bg);
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+thead {
+  background-color: var(--cl-bg-low);
+}
+th:hover {
+  background-color: var(--cl-bg-mid);
+  cursor: pointer;
+}
+th, td {
+  padding: 0.5rem;
+  border: 0.125rem solid var(--cl-bg-mid);
+}
+th > *{
+  justify-content: center;
+  align-items: center;
+}
+th svg {
+  height: 1rem;
+}
+tbody tr:nth-child(even) {
+  background-color: var(--cl-bg-mid)
+}
+
+.search-bar {
+  display: block;
+  padding: 0.4rem;
+  background-color: var(--cl-bg-low);
+  color: inherit;
+  border: 1px solid var(--cl-fg);
+}

client/src/global-styles/mlfe.css

@@ -0,0 +1,33 @@
+/* MLFE: Marginless FlexEverything (A CSS Reset for creating Layouts) */
+:root {
+  font-family: sans-serif;
+  line-height: 1;
+  user-select: none; 
+}
+
+* {
+  box-sizing: border-box;
+  padding: 0px;
+  margin: 0px;
+  user-select: inherit;
+  color: inherit;
+  overflow: hidden;
+}
+
+div, ul, ol, nav {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+}
+
+h1 { font-size: calc(1rem + calc(1rem / 1))}
+h2 { font-size: calc(1rem + calc(1rem / 2))}
+h3 { font-size: calc(1rem + calc(1rem / 3))}
+h4 { font-size: calc(1rem + calc(1rem / 4))}
+h5 { font-size: calc(1rem + calc(1rem / 5))}
+h6 { font-size: calc(1rem + calc(1rem / 6))}
+
+ul, ol {
+  gap: 0.5rem;
+  padding-left: 1rem;
+}

client/src/global-styles/transitions.css

@@ -0,0 +1,6 @@
+.fade-enter-active, .fade-leave-active { 
+  transition: opacity 0.2s ease-out !important;
+}
+.fade-enter-from, .fade-leave-to {
+  opacity: 0;
+}