Entered skill trees for siren and operative

src/components/VaultHunter/index.css

@@ -1,3 +1,106 @@
-pre {
-  white-space: pre-wrap;
-}
+.VaultHunter {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.trees, .tier {
+  display: flex;
+}
+
+.treeName {
+  text-align: center;
+  color: white;
+  order: 1;
+  font-size: 1em;
+}
+
+.tree {
+  display: flex;
+  flex-direction: column;
+  margin: 1rem;
+  background-image: linear-gradient(0deg, var(--themeColor), var(--themeColor));
+  background-size: calc(3.5rem * 3) calc(100% - 1.5rem);
+  background-repeat: no-repeat;
+  background-position: center bottom;
+}
+
+.tier {
+  width: calc(3.5rem * 5);
+  justify-content: center;
+  position: relative;
+}
+
+.skill {
+  position: relative;
+  z-index: 1;
+  flex: 0 1 auto;
+  margin: 0.5rem;
+  padding: 0rem;
+  height: 2.5rem;
+  width: 2.5rem;
+  line-height: 1;
+  display: flex;
+  text-align: center;
+  justify-content: center;
+  align-items: center;
+  color: white;
+}
+
+.skill:before {
+  content: '';
+  background-color: #333;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  height: 100%;
+  width: 100%;
+  z-index: -1;
+}
+
+.skill.bought:before {
+  background-color: #A70;
+}
+
+.actionSkill:before {
+  clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
+}
+
+.chevron:before {
+  clip-path: polygon(0 0, 50% 25%, 100% 0, 100% 75%, 50% 100%, 0 75%);
+}
+
+.diamond:before {
+  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0 50%);
+}
+
+.augment, .actionSkill {
+  margin: 0.25rem;
+  padding: 0.25rem;
+  height: 3em;
+  width: 3em;
+}
+
+.augment {
+  outline: 0.25em solid var(--themeColor);
+  background-color: var(--themeColor);
+}
+
+.augment:first-child {
+  position: absolute;
+  left: 0;
+}
+.augment:last-child {
+  position: absolute;
+  right: 0;
+}
+
+.blue {
+  --themeColor: #007;
+}
+.red {
+  --themeColor: #700;
+}
+.green {
+  --themeColor: #070;
+}