Rewrite in Rust

1 files changed, 399 insertions, 0 deletions

diff --git a/assets/main.css b/assets/main.css
new file mode 100644
index 0000000..ba43f85
--- /dev/null
+++ b/assets/main.css
@@ -0,0 +1,399 @@
+/* Constants */
+
+:root {
+  /* Colors */
+  --color-red: #CF5C56;
+  --color-brown: #A04642;
+  --color-green: #9FD2A5;
+  --color-blue: #6CA2A4;
+  --color-gray: #EEEEEE;
+  --color-yellow: #FFF09E;
+
+  /* Sizes */
+  --size-bee: 0.2rem;
+  --size-mouse: 0.5rem;
+  --size-cat: 0.75rem;
+  --size-dog: 1rem;
+  --size-lion: 1.25rem;
+  --size-bear: 1.5rem;
+  --size-horse: 2rem;
+  --size-camel: 2.625rem;
+  --size-rhino: 3.375rem;
+  --size-elephant: 4.25rem;
+  --size-mammoth: 5.25rem;
+}
+
+/* Reset */
+
+html { box-sizing: border-box; }
+*, *:before, *:after { box-sizing: inherit; }
+body { margin: 0; }
+p { margin: 0; }
+a { color: inherit; text-decoration: none; }
+h1 { font-size: inherit; font-weight: normal; margin: 0; }
+select { height: inherit; font-size: inherit; }
+input { color: inherit; font-size: inherit; }
+ul { list-style-type: none; margin: 0; padding-left: 0; }
+
+/* Media */
+
+@media screen and (max-width: 500px) {
+    html { font-size: 14px; }
+    .g-Media__Large {
+        display: none !important;
+    }
+}
+
+@media screen and (min-width: 500px) and (max-width: 900px) {
+    html { font-size: 16px; }
+}
+
+@media screen and (min-width: 900px) {
+    html { font-size: 18px; }
+}
+
+/* Layout */
+
+body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.g-Header {
+    width: 100%;
+}
+
+.g-Header__Primary {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--size-cat) var(--size-dog);
+}
+
+.g-Header__Title {
+    display: block;
+    font-size: var(--size-horse);
+    color: var(--color-red);
+}
+
+.g-Header__Logout {
+    cursor: pointer;
+    margin-left: var(--size-cat);
+    background-color: transparent;
+    border: none;
+}
+
+.g-Header__Logout:hover {
+    text-decoration: underline;
+}
+
+.g-Header__Logout:focus {
+    text-decoration: underline;
+}
+
+.g-Header__Secondary {
+    display: flex;
+    background-color: var(--color-red);
+    color: white;
+    overflow-y: auto;
+}
+
+.g-Header__Link {
+    padding: var(--size-mouse) var(--size-dog);
+}
+
+.g-Header__Link:hover {
+    background-color: var(--color-brown);
+}
+
+.g-Header__Link:focus {
+    background-color: var(--color-brown);
+}
+
+.g-Header__Link--Current {
+    background-color: var(--color-brown);
+}
+
+.g-Main {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    padding: 0 var(--size-bear);
+    margin: var(--size-horse) 0;
+    overflow-x: hidden;
+}
+
+.g-Title {
+    font-size: var(--size-lion);
+    color: var(--color-red);
+    margin-bottom: var(--size-lion);
+    text-decoration: underline;
+}
+
+.g-Paragraph {
+    margin-bottom: var(--size-lion);
+}
+
+/* Heading */
+
+.g-H1 {
+    font-size: var(--size-lion);
+    text-decoration: underline;
+    margin-bottom: var(--size-lion);
+}
+
+/* Link */
+
+.g-Link {
+    color: var(--color-blue);
+}
+
+.g-Link:hover {
+    text-decoration: underline;
+}
+
+/* Table */
+
+.g-Table {
+    display: table;
+    margin: 0 auto var(--size-bear);
+}
+
+.g-Table__Row {
+    display: table-row;
+    text-decoration: none;
+    color: inherit;
+}
+
+.g-Table__Row--Highlight {
+    background-color: var(--color-yellow);
+}
+
+.g-Table__Row:not(.g-Table__Row--Header):not(.g-Table__Row--Highlight):hover {
+    background-color: var(--color-gray);
+}
+
+.g-Table__Row--Header {
+    font-weight: bold;
+}
+
+.g-Table__Cell {
+    display: table-cell;
+    padding: var(--size-mouse) var(--size-dog);
+    white-space: nowrap;
+}
+
+.g-Table__Cell:first-child {
+    padding-left: 0;
+}
+
+.g-Table__Cell:last-child {
+    padding-right: 0;
+}
+
+.g-Table__NumericCell {
+    text-align: right;
+}
+
+/* Paging */
+
+.g-Paging {
+    display: flex;
+    justify-content: center;
+}
+
+.g-Paging__Link {
+    padding: 0 var(--size-dog);
+}
+
+.g-Paging__Link--Active {
+    color: var(--color-blue);
+}
+
+/* Form */
+
+.g-Form {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: var(--size-lion);
+}
+
+@media screen and (min-width: 500px) {
+    .g-Form {
+        width: 450px;
+    }
+}
+
+
+.g-Form__Label {
+    margin-bottom: var(--size-mouse);
+}
+
+.g-Form__Input {
+    margin-bottom: var(--size-lion);
+    background-color: white;
+    border: 1px solid black;
+    height: var(--size-camel);
+    padding: 0 var(--size-cat);
+    width: 100%;
+}
+
+.g-Form__InputColor {
+  padding: 0;
+}
+
+.g-Form__Select {
+    margin-bottom: var(--size-lion);
+    background-color: white;
+    border: 1px solid black;
+    height: var(--size-camel);
+    padding: 0 var(--size-cat);
+    width: 100%;
+}
+
+.g-Form__Error {
+    color: var(--color-red);
+    text-align: center;
+    margin-bottom: var(--size-bear);
+}
+
+/* Buttons */
+
+.g-Button__Search {
+    cursor: pointer;
+    background-color: var(--color-gray);
+    color: white;
+    border: none;
+    height: var(--size-camel);
+    padding: 0 var(--size-dog);
+    border-top: 1px solid black;
+    border-right: 1px solid black;
+    border-bottom: 1px solid black;
+}
+
+.g-Button__Validate {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    background-color: var(--color-green);
+    color: white;
+    border: none;
+    height: var(--size-camel);
+    padding: 0 var(--size-dog);
+    border-radius: var(--size-bee);
+}
+
+.g-Button__Validate:hover {
+    text-decoration: underline;
+}
+
+.g-Button__Danger {
+    cursor: pointer;
+    background-color: var(--color-red);
+    color: white;
+    border: none;
+    height: var(--size-camel);
+    padding: 0 var(--size-dog);
+    border-radius: var(--size-bee);
+}
+
+.g-Button__Danger:hover {
+    text-decoration: underline;
+}
+
+.g-Button__Danger:disabled {
+    background-color: var(--color-gray);
+    cursor: pointer;
+}
+
+/* Login */
+
+.g-Login {
+    margin-top: var(--size-elephant);
+}
+
+.g-Login__Button {
+    width: 100%;
+}
+
+/* Payment */
+
+.g-Payments__NoResults {
+    margin-top: var(--size-camel);
+    text-align: center;
+}
+
+.g-Payments__Header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+@media screen and (max-width: 500px) {
+    .g-Payments__Header {
+        flex-direction: column;
+    }
+}
+
+.g-Payments__FrequenciesAndSearch {
+    display: flex;
+    align-items: center;
+}
+
+.g-Payments__Search {
+    display: flex;
+    margin: 0 var(--size-bear) 0 0;
+}
+
+.g-Payments__SearchInput {
+    margin-bottom: 0;
+    width: 150px;
+}
+
+.g-Payments__Frequencies {
+    display: flex;
+    margin: 0 var(--size-dog);
+}
+
+.g-Payments__Frequency {
+    margin: 0 var(--size-mouse);
+}
+
+.g-Payments__Frequency--Selected {
+    color: var(--color-red);
+    font-weight: bold;
+}
+
+@media screen and (max-width: 500px) {
+    .g-Payments__New {
+        margin-top: var(--size-dog);
+    }
+}
+
+.g-Payments__Refund {
+    color: var(--color-green);
+}
+
+/* Balance */
+
+.g-Balance__ExceedingPayers {
+    background-color: var(--color-green);
+    border-radius: var(--size-bee);
+    color: white;
+    margin-bottom: var(--size-bear);
+    text-align: center;
+}
+
+.g-Balance__ExceedingPayer {
+    padding: var(--size-mouse);
+}
+
+/* Chart */
+
+.g-Chart {
+    width: 80%;
+    margin: 0 auto;
+}