Implemented GNS and fixed UI issuesfeature/services

11 files changed, 111 insertions, 33 deletions

diff --git a/src/scss/components/_alert.scss b/src/scss/components/_alert.scss
new file mode 100644
index 0000000..b2b222e
--- /dev/null
+++ b/src/scss/components/_alert.scss
@@ -0,0 +1,31 @@
+
+.c-alert {
+  padding: $baseline-x2;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: .25rem;
+}
+
+.c-alert--error{
+  color: $error-color;
+  background-color: $error-bgcolor;
+  border-color: $error-border-color;
+}
+
+.c-alert--warning{
+  color: $warning-color;
+  background-color: $warning-bgcolor;
+  border-color: $warning-border-color;
+}
+
+.c-alert--success{
+  color: $success-color;
+  background-color: $success-bgcolor;
+  border-color: $success-border-color;
+}
+
+.c-alert--information{
+  color: $info-color;
+  background-color: $info-bgcolor;
+  border-color: $info-border-color;
+}
diff --git a/src/scss/components/_badge.scss b/src/scss/components/_badge.scss
new file mode 100644
index 0000000..615425f
--- /dev/null
+++ b/src/scss/components/_badge.scss
@@ -0,0 +1,11 @@
+.c-badge {
+    display: inline-block;
+    padding: .25em .4em;
+    font-size: 75%;
+    font-weight: 700;
+    line-height: 1;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: baseline;
+    border-radius: .25rem;
+}
diff --git a/src/scss/components/_button.scss b/src/scss/components/_button.scss
index a16d5e4..9f7b70b 100644
--- a/src/scss/components/_button.scss
+++ b/src/scss/components/_button.scss
@@ -1,13 +1,13 @@
 $button-padding : $baseline-x2 $baseline-x4;
-$button-bgcolor : $color-blue;
-$button-bgcolor-hover : darken($color-blue, 10%);
+$button-bgcolor : $color-secondary;
+$button-bgcolor-hover : darken($color-secondary, 10%);
 $button-color : $color-white;
 $button-radius : 3px;
 
 $button-outline-padding : ( $baseline-x2 - 2 )( $baseline-x3 - 2 );
 $button-outline-bgcolor: transparent;
-$button-outline-color: $color-blue;
-$button-outline-color-hover: darken( $color-blue, 10% );
+$button-outline-color: $color-secondary;
+$button-outline-color-hover: darken( $color-secondary, 10% );
 
 .c-button {
   padding: $button-padding;
@@ -33,6 +33,28 @@ $button-outline-color-hover: darken( $color-blue, 10% );
   background-color: $button-outline-bgcolor;
 }
 
+.c-button--danger {
+  padding: $button-outline-padding;
+  color: $error-color;
+  border: 1px solid $error-border-color;
+  background-color: $error-bgcolor;
+}
+
+.c-button--danger:hover {
+  background-color: darken($error-bgcolor, 10%);
+}
+
+.c-button--rename {
+  padding: $button-outline-padding;
+  color: $info-color;
+  border: 1px solid $info-border-color;
+  background-color: $info-bgcolor;
+}
+
+.c-button--rename:hover {
+  background-color: darken($info-bgcolor, 10%);
+}
+
 .c-button--disabled {
   padding: $button-outline-padding;
   color: $color-grey;
diff --git a/src/scss/components/_error.scss b/src/scss/components/_error.scss
deleted file mode 100644
index eaf6e51..0000000
--- a/src/scss/components/_error.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-$error-bgcolor: #f79191;
-$error-color: #9e0c0c;
-
-.c-error {
-  padding: $baseline-x3;
-  color: $error-color;
-  background-color: $error-bgcolor;
-  border-radius: 2px;
-}
diff --git a/src/scss/components/_footer.scss b/src/scss/components/_footer.scss
new file mode 100644
index 0000000..8bd8664
--- /dev/null
+++ b/src/scss/components/_footer.scss
@@ -0,0 +1,6 @@
+.c-footer{
+  bottom: 0px;
+  width: 100%;
+  background-color: $color-primary;
+  color: $color-contrary;
+}
diff --git a/src/scss/components/_header.scss b/src/scss/components/_header.scss
new file mode 100644
index 0000000..0bf8635
--- /dev/null
+++ b/src/scss/components/_header.scss
@@ -0,0 +1,7 @@
+.c-header{
+  top:0px;
+  position: sticky;
+  width: 100%;
+  background-color: $color-primary;
+  color: $color-contrary;
+}
diff --git a/src/scss/components/_input.scss b/src/scss/components/_input.scss
index e2d7338..347e98c 100644
--- a/src/scss/components/_input.scss
+++ b/src/scss/components/_input.scss
@@ -1,14 +1,8 @@
-$input-padding : $baseline-x2 $baseline-x2;
-$button-bgcolor : $color-blue;
-$button-bgcolor-hover : darken($color-blue, 10%);
-$button-color : $color-white;
-$input-bgcolor : darken($color-white, 5%);
-$button-radius : 3px;
-
-$button-outline-padding : ( $baseline-x2 - 2 )( $baseline-x3 - 2 );
-$button-outline-bgcolor: transparent;
-$button-outline-color: $color-blue;
-$button-outline-color-hover: darken( $color-blue, 10% );
+$input-padding : $baseline-x2 $baseline-x4 $baseline-x2 $baseline;
+$input-bgcolor-hover : darken($color-blue, 10%);
+$input-bgcolor : $color-white;
+$input-radius : 3px;
+$input-border-color: darken($color-grey-light, 5%);
 
 .c-input {
   padding: $input-padding;
@@ -17,13 +11,14 @@ $button-outline-color-hover: darken( $color-blue, 10% );
   white-space: nowrap;
   vertical-align: middle;
   text-decoration: none;
-  background-color: $color-grey-light;
+  background-color: $input-bgcolor;
   color: $color-black;
-  border-style: none;
-  border-color: grey;
-  border-radius: $button-radius;
+  border-style: solid;
+  border-width: 1px;
+  border-color: $color-grey;
+  border-radius: $input-radius;
 }
 
 .c-input:focus {
-  box-shadow: 0 0 2px 2px $button-bgcolor-hover;
+  box-shadow: 0 0 2px 2px $input-bgcolor-hover;
 }
diff --git a/src/scss/components/_link.scss b/src/scss/components/_link.scss
index a51e9ed..73f6e00 100644
--- a/src/scss/components/_link.scss
+++ b/src/scss/components/_link.scss
@@ -1,8 +1,8 @@
 .c-link {
   text-decoration: none;
-  color: $color-white;
   font-weight: bold;
   cursor: pointer;
+  color: inherit;
 }
 
 .c-link:hover {
diff --git a/src/scss/components/_progressbar.scss b/src/scss/components/_progressbar.scss
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/scss/components/_progressbar.scss
diff --git a/src/scss/components/_spinner.scss b/src/scss/components/_spinner.scss
new file mode 100644
index 0000000..b05af1c
--- /dev/null
+++ b/src/scss/components/_spinner.scss
@@ -0,0 +1,15 @@
+.c-spinner {
+    border: 5px solid $color-grey-light; /* Light grey */
+    border-top: 5px solid $color-secondary;
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    animation: spin 1s linear infinite;
+    top: 1000px;
+    display: inline-block;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
diff --git a/src/scss/components/_table.scss b/src/scss/components/_table.scss
index ce5e3fb..40d1b43 100644
--- a/src/scss/components/_table.scss
+++ b/src/scss/components/_table.scss
@@ -9,12 +9,12 @@
 
 .c-table tr:nth-child(even){background-color: $color-grey-light;}
 
-.c-table tr:hover {background-color: #ddd;}
+.c-table tr:hover {background-color: $color-white;}
 
 .c-table th {
     padding-top: 12px;
     padding-bottom: 12px;
     text-align: left;
-    background-color: $color-purple;
-    color: white;
+    background-color: $color-primary;
+    color: $color-contrary;
 }