2 files changed, 283 insertions, 2 deletions

diff --git a/app/static/styles/invoice.css b/app/static/styles/invoice.css
new file mode 100644
index 0000000..2b863f9
--- /dev/null
+++ b/app/static/styles/invoice.css
@@ -0,0 +1,204 @@
+@font-face {
+    font-family: "Public Sans";
+    src: url("/static/fonts/PublicSans-Regular.otf");
+}
+
+@font-face {
+    font-family: "Inconsolata";
+    src: url("/static/fonts/Inconsolata.otf");
+}
+
+.clearfix:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+a {
+  color: #0087C3;
+  text-decoration: none;
+}
+
+body {
+  position: relative;
+  width: 21cm;  
+  height: 29.7cm; 
+  margin: 0 auto; 
+  color: #555555;
+  background: #FFFFFF; 
+  font-family: Arial, sans-serif; 
+  font-size: 14px; 
+  font-family: "Public Sans";
+}
+
+header {
+  padding: 10px 0;
+  margin-bottom: 20px;
+  border-bottom: 1px solid #AAAAAA;
+}
+
+#logo {
+  float: left;
+  margin-top: 8px;
+}
+
+#logo img {
+  height: 70px;
+}
+
+#company {
+  float: right;
+  text-align: right;
+}
+
+
+#details {
+  margin-bottom: 50px;
+}
+
+#client {
+  padding-left: 6px;
+  border-left: 6px solid #0087C3;
+  float: left;
+}
+
+#client .to {
+  color: #777777;
+}
+
+h2.name {
+  font-size: 1.4em;
+  font-weight: normal;
+  margin: 0;
+}
+
+#invoice {
+  float: right;
+  text-align: right;
+}
+
+#invoice h1 {
+  color: #0087C3;
+  font-size: 2.4em;
+  line-height: 1em;
+  font-weight: normal;
+  margin: 0  0 10px 0;
+}
+
+#invoice .date {
+  font-size: 1.1em;
+  color: #777777;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+  margin-bottom: 20px;
+}
+
+table th,
+table td {
+  padding: 20px;
+  background: #EEEEEE;
+  text-align: center;
+  border-bottom: 1px solid #FFFFFF;
+}
+
+table th {
+  white-space: nowrap;        
+  font-weight: normal;
+}
+
+table td {
+  text-align: right;
+}
+
+table td h3{
+  color: #57B223;
+  font-size: 1.2em;
+  font-weight: normal;
+  margin: 0 0 0.2em 0;
+}
+
+table .no {
+  color: #FFFFFF;
+  font-size: 1.6em;
+  background: #57B223;
+}
+
+table .desc {
+  text-align: left;
+}
+
+table .unit {
+  background: #DDDDDD;
+}
+
+table .qty {
+}
+
+table .total {
+  background: #57B223;
+  color: #FFFFFF;
+}
+
+table td.unit,
+table td.qty,
+table td.total {
+  font-size: 1.2em;
+}
+
+table tbody tr:last-child td {
+  border: none;
+}
+
+table tfoot td {
+  padding: 10px 20px;
+  background: #FFFFFF;
+  border-bottom: none;
+  font-size: 1.2em;
+  white-space: nowrap; 
+  border-top: 1px solid #AAAAAA; 
+}
+
+table tfoot tr:first-child td {
+  border-top: none; 
+}
+
+table tfoot tr:last-child td {
+  color: #57B223;
+  font-size: 1.4em;
+  border-top: 1px solid #57B223; 
+
+}
+
+table tfoot tr td:first-child {
+  border: none;
+}
+
+#thanks{
+  font-size: 2em;
+  margin-bottom: 50px;
+}
+
+#notices{
+  padding-left: 6px;
+  border-left: 6px solid #0087C3;  
+}
+
+#notices .notice {
+  font-size: 1.2em;
+}
+
+footer {
+  color: #777777;
+  width: 100%;
+  height: 30px;
+  position: absolute;
+  bottom: 0;
+  border-top: 1px solid #AAAAAA;
+  padding: 8px 0;
+  text-align: center;
+}
+
diff --git a/app/static/styles/style.css b/app/static/styles/style.css
index ca60a7b..402e802 100644
--- a/app/static/styles/style.css
+++ b/app/static/styles/style.css
@@ -11,7 +11,7 @@
 }
 
 body {
-    font-family: 'Public Sans', sans-serif;
+    font-family: "Public Sans", sans-serif;
     line-height: 1.2;
     margin: 0;
     padding: 0;
@@ -38,12 +38,18 @@ body {
     src: url("/static/fonts/PublicSans-Regular.otf");
 }
 
+@font-face {
+    font-family: "Inconsolata";
+    src: url("/static/fonts/Inconsolata.otf");
+}
+
 nav {
     display: flex;
     background: darkgrey;
     color: white;
-    margin: 0.5em;
+    /* margin: 0.5em; */
     padding: 0.5em;
+    justify-content: space-between;
 }
 
 h1 {
@@ -71,9 +77,80 @@ nav ul li {
     color: white;
     border-radius: 8px;
     text-decoration: none;
+    border: 1px dimgray solid;
 }
 
 .button:hover {
     background: white;
     color: black;
+    border: 1px dimgray solid;
+}
+
+table {
+    font-family: "Inconsolata";
+    line-height: 1.5;
+    /* border-collapse: collapse; */
+    width: 80vw;
+    margin: 2em auto;
+}
+
+table thead {
+    background: dimgray;
+    color: white;
+}
+
+table tr:nth-child(even) {
+    background: lightgray;
+}
+
+#actions {
+    background: darkgray;
+    padding: 1em 0.5em;
+    top: 0;
+    position: sticky;
+}
+
+.flashes {
+    position: fixed;
+    width: 30%;
+    bottom: 0;
+    right: 0;
+    margin: 1em;
+    list-style-type: none;
+    padding: 0;
+}
+
+@keyframes fadeIn {
+  0% {
+      opacity: 0;
+      transform: translateY(100%);
+  }
+  100% {
+      opacity: 0.7;
+      transform: translateY(0);
+  }
+}
+
+.alert {
+    padding: 1em;
+    border-radius: 8px;
+    margin: 1em;
+    border: 1px dimgray solid;
+    opacity: 0.7;
+    animation: 0.5s ease-out 0s 1 fadeIn;
+}
+
+.alert-info {
+    background: darkblue;
+    color: white;
+}
+
+.alert-error {
+    background: maroon;
+    color: white;
+}
+
+fieldset {
+    margin: 0 auto;
+    width: 12em;
 }