update styles

.gitignore

@@ -5,3 +5,4 @@
 /node_modules
 /umd
 npm-debug.log*
+.vscode/*

demo/src/index.js

@@ -39,7 +39,7 @@ const [state,setState]=useState({count:0});
 const steps = [
   {
     stepName: "Select Files",
-    stepIcon: "fas fa-home",
+    // stepIcon: "fas fa-home",
     component: Comp1,
     stepProps: {
       formData: { test: "test" },
@@ -49,7 +49,7 @@ const steps = [
   },
   {
     stepName: "Select Jobs",
-    stepIcon: "fas fa-surprise",
+    // stepIcon: "fas fa-surprise",
     component: Comp2,
     // stepProps: {
     //     updateFormData,
@@ -62,7 +62,7 @@ const steps = [
   },
   {
     stepName: "Map Headers",
-    stepIcon: "fas fa-swimmer",
+    // stepIcon: "fas fa-swimmer",
     component: Comp3,
     // stepProps: {
     //     updateFormData,
@@ -74,7 +74,7 @@ const steps = [
   },
   {
     stepName: "Map Headers",
-    stepIcon: "fas fa-swimmer",
+    // stepIcon: "fas fa-swimmer",
     component: Comp1,
     // stepProps: {
     //     updateFormData,
@@ -90,7 +90,7 @@ const steps = [
   return <div className="container">
 
     <ReactWizard
-      color="success"
+      color="primary"
       steps={steps}
       navSteps={false}
       validate

package.json

@@ -1,6 +1,6 @@
 {
   "name": "reactbootstrap-wizard-rb",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "description": "reactbootstrap-wizard React component",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -21,14 +21,14 @@
   },
   "dependencies": {},
   "peerDependencies": {
-    "react": "16.x",
-    "classnames": "2.x.x"
+    "react": "16.x||17.x",
+    "classnames": "2.x.x",
+    "react-bootstrap": "^1.x"
   },
   "devDependencies": {
     "bootstrap": "^4.3.1",
     "nwb": "0.23.x",
-    "react": "^16.8.6",
-    "react-bootstrap": "^1.0.0-beta.10",
+    "react": "^16.8.6", 
     "react-dom": "^16.8.6"
   },
   "author": "",

src/index.css

@@ -1,8 +1,40 @@
+.wizard-container .step-container {
+  font-size: 1rem;
+}
+.wizard-container .progress-container .progress {
+  height: 1px;
+  background-color: rgba(112, 112, 112, 0.66);
+  margin-top: 4px;
+}
+
+.wizard-container .step-container .step-progress .nav-link {
+  /* border-radius: 50% !important; */
+  color: #fff;
+  border: 1px solid;
+  width: 2.25rem;
+  height: 2.25rem;
+  padding: 0;
+}
+.wizard-container .step-container .step-progress .nav-link.active {
+  border: none;
+}
+.wizard-container .step-container .step-progress .nav-link span {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+.wizard-container .step-container .step-progress .step-name {
+  padding-left: 0.875rem;
+}
+
+
+/* 
 .wizard-container .progress-wrapper {
   top: 45%;
   position: absolute;
   width: 75%;
-  left:15%;
+  left: 15%;
 }
 .wizard-container .progress-wrapper .progress {
   height: 5px;
@@ -11,19 +43,24 @@
 .wizard-container .nav-item a {
   display: inline-block;
   background-color: #e9ecef;
-  color:black;
+  color: black;
 }
 
 .wizard-container .nav-item a.checked,
 .wizard-container .nav-item a.active {
   /* background-color: #007bff; */
-  color: #fff;
+  /* color: #fff;
 }
 
 .wizard-container .nav {
   position: relative;
 }
 
-.wizard-container .nav-item .rounded{
+.wizard-container .nav-item .rounded {
   border-radius: 5rem !important;
-}
+}
+
+.wizard-container .nav-item .step-name::after {
+  color: red;
+  content: ">";
+} */