new info box (now card) styling - Partial

added a class to the info card to style different types in css.
also rearranged colors in helpers.js

(alon: changed implementation and broke the edit, will fix in the
morning)

6 files changed, 122 insertions, 29 deletions

diff --git a/res/css/partials/buttons.scss b/res/css/partials/buttons.scss
index e69de29b..379157c4 100644
--- a/res/css/partials/buttons.scss
+++ b/res/css/partials/buttons.scss
@@ -0,0 +1,24 @@
+.btn-regular {
+	cursor: pointer;
+	background-color: white;
+	font-family: $base-font-family;
+	font-size: $h4-size;
+	color: $blue;
+	padding: $one-baseline $two-baselines $one-baseline $two-baselines;
+	margin-right: 6px;	
+	border-radius: 4px;
+	border: none;
+}
+
+.btn-regular:hover {
+	color: $dark-cyan;
+	border-color: $dark-cyan;
+}
+
+.btn-regular:focus {
+	outline: none;
+}
+
+.btn-regular-outline {
+	border: 1px solid $blue;
+}
\ No newline at end of file
diff --git a/res/css/partials/graph-view.scss b/res/css/partials/graph-view.scss
index 758285ea..44575d4e 100644
--- a/res/css/partials/graph-view.scss
+++ b/res/css/partials/graph-view.scss
@@ -1,6 +1,7 @@
 .graph-view {
   width:100%;
   background-color: #f5f5fa; //$light-grey
+  position: relative;
 }
 
 .node {
@@ -106,9 +107,8 @@
   fill: $blue;
 }
 
-
 .circle.club {
-  fill: $purple;
+  fill: $magenta;
 }
 
 .circle.skill {
@@ -116,7 +116,7 @@
 }
 
 .circle.interest {
-  fill: $orange;
+  fill: $purple;
 }
 
 .circle.project {
@@ -124,23 +124,23 @@
 }
 
 .circle.third-internship-proposal {
-  fill: $magenta;
+  fill: $cyan;
 }
 
 .circle.internship {
-  fill: $cyan;
+  fill: $orange;
 }
 
 .circle.empty {
-  fill: #080808;
+  fill: $mid-grey;
 }
 
 .circle.chainlink {
-  fill: #fff;
+  fill: $dark-grey;
 }
 
 .circle.bubble {
-  fill: rgba(0,0,0,0.2);
+  fill: rgba(255,255,255,0.2);
 }
 
 
diff --git a/res/css/partials/info-box.scss b/res/css/partials/info-box.scss
deleted file mode 100644
index 0b0a4c08..00000000
--- a/res/css/partials/info-box.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-.subtitle{
-  font-style:italic;
-  color: #bbb;
-  font-size: 12px;
-  float:right;
-}
-
-.edge_info, .info {
-  background-color: rgba(17,17,17,0.8);
-  position:fixed;
-  top:150px;
-  width:250px;
-  right:10px;
-  font-size: 18px;
-  border: 1px solid;
-  padding: 5px;
-  line-height: 45px;
-  border-color: #303030;
-}
\ No newline at end of file
diff --git a/res/css/partials/info-card.scss b/res/css/partials/info-card.scss
new file mode 100644
index 00000000..d3907679
--- /dev/null
+++ b/res/css/partials/info-card.scss
@@ -0,0 +1,88 @@
+@import '../modules/mixins'; // For box-shadow and box-sizing
+
+.info-container {
+  position: absolute;
+  right: $doc-margin;
+  top: $two-baselines;
+}
+
+.subtitle{
+  font-style:italic;
+  color: #bbb;
+  font-size: 12px;
+  float:right;
+}
+
+.edge_info, .info {
+  color: $dark-grey;
+  background-color: white;
+  @include rz-box-shadow(0px, 1px, 6px, 0px, rgba(0,0,0,0.3) );
+  position: relative;
+  width:250px;
+  padding: 24px;
+  @include rz-box-sizing-border;
+  border-top: 6px solid $dark-grey;
+}
+
+// change card top border color by node type
+.info.type-person {
+  border-top: 6px solid $blue;
+}
+
+.info.type-club {
+  border-top: 6px solid $magenta;
+}
+
+.info.type-skill {
+  border-top: 6px solid $yellow;
+}
+
+.info.type-third-internship-proposal {
+  border-top: 6px solid $cyan;
+}
+
+.info.type-internship {
+  border-top: 6px solid $orange;
+}
+
+.info.type-interest {
+  border-top: 6px solid $purple;
+}
+
+.info.type-empty {
+  border-top: 6px solid $mid-grey;
+}
+
+.info.type-chainlink {
+  border-top: 6px solid $dark-grey;
+}
+
+.info.type-project {
+  border-top: 6px solid $green;
+}
+
+// card elements styles
+
+.info .info-card-attr {
+  display: block;
+  text-transform: capitalize;
+  font-size: $h4-size;
+  font-family: $bold-font-family;
+}
+
+.info .info-card-attr-val {
+  display: block;
+  text-transform: capitalize;
+  font-size: $h2-size;
+  margin: 12px 0px 24px 0px;
+}
+
+.info hr {
+  width: 250px;
+  position: relative;
+  left: -24px;
+  border: none;
+  background-color: $mid-light-grey;
+  height: 2px;
+  margin: $two-baselines 0px $two-baselines 0px;
+}
\ No newline at end of file
diff --git a/res/css/partials/input-bar.scss b/res/css/partials/input-bar.scss
index 1bce345c..913c7e48 100644
--- a/res/css/partials/input-bar.scss
+++ b/res/css/partials/input-bar.scss
@@ -1,4 +1,4 @@
-@import '../modules/mixins';
+@import '../modules/mixins'; // For box-shadow
 
 .input-container {
   position: fixed;
diff --git a/res/css/partials/search-bar.scss b/res/css/partials/search-bar.scss
index cd671f33..db46df31 100644
--- a/res/css/partials/search-bar.scss
+++ b/res/css/partials/search-bar.scss
@@ -1,4 +1,4 @@
-@import '../modules/mixins';
+@import '../modules/mixins'; // For box-shadow
 
 .search-bar{
   width:100%;