Extension design changes

public/manifest.json

@@ -1,6 +1,6 @@
 {
-  "name": "REBL One",
-  "description": "A starter app using React with Blockstack",
+  "name": "Vaultilo",
+  "description": "Store your private credentials",
   "icons": [
     {
     "src": "favicon.ico",

src/components/ExtensionRoute/ExtNoteShow.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, {Card} from "react";
 import "../Sidebar.css";
 import {Link } from 'react-router-dom';
 
@@ -7,6 +7,7 @@ export default function ExNoteShow(props) {
     props.notes === null ? [] : JSON.parse(props.notes);
   console.log(notes)
   return (
+
       <div classname="ui segment">
           <Link to="/extension/view">
               <button>

src/components/ExtensionRoute/ExtPwShow.js

@@ -1,17 +1,25 @@
 import React, { useState } from "react";
-import "../Sidebar.css";
+import "./extension.css";
 import { Link } from 'react-router-dom';
 
 export default function ExPwShow(props) {
   const passwords =
     props.passwords === null ? [] : JSON.parse(props.passwords);
   console.log(passwords)
   return (
+      <div className="container">
       <div classname="ui segment">
-          <Link to="/extension/view"><button>
-              <i className="fa fa-arrow-left"></i>Back
-              </button>
-              </Link>
+          <div className="row">
+                <div > <Link to="/extension/view">
+                    <span className="nav-back"><i className="fa fa-angle-left"></i></span>
+
+                    <span>Vaultilo</span>
+                </Link></div>
+
+
+          </div>
+
+
     <div className="ui list">
         {passwords.map(passwords =>{
             const {domainName,password,domainAddress,domainUsername}=passwords
@@ -31,6 +39,7 @@ export default function ExPwShow(props) {
 
     </div>
     </div>
+      </div>
   );
 }
 

src/components/ExtensionRoute/Extension.js

@@ -1,7 +1,9 @@
 import React, { useState } from "react";
-import "../Sidebar.css";
-import {Link,Redirect } from 'react-router-dom';
-//import {}
+import "./extension.css";
+import {Link} from 'react-router-dom';
+import logo from "../ExtensionRoute/Icons/logo.png";
+import OpenVaultilo from '../ExtensionRoute/Icons/OpenVaultilo.png'
+
 
 export default function Extension(props) {
   const credentials =
@@ -17,58 +19,76 @@ export default function Extension(props) {
 
   };
   return (
-    <div className="side-content" style={{borderRadius:"0px",height:"650px",width:"410px"}} >
+    <div className="extension-container" style={{borderRadius:"0px",height:"600px",width:"410px"}} >
+
+        <div className="logo-bar"><img  src={logo}/></div>
       <Link
         className={`dropdown-btn ${activeNav === "passwords" ? "active" : ""}`}
         to='/extension/passwords'
         onClick={() => handleNavClick("passwords")}
       >
-        <div className="nav-item">
+        <div className="password">
           <i className="fa fa-lock" />
           <span className="nav-title">Passwords</span>
+            <span className="nav-right-angle"><i className="fa fa-angle-right"></i></span>
+
         </div>
       </Link>
+
       <Link
         className={`dropdown-btn ${activeNav === "crypto" ? "active" : ""}`}
         onClick={() => handleNavClick("crypto")}
 
       >
-        <div className="nav-item">
+        <div className="password" style={{top:"140px"}}>
           <i className="fa fa-lock" />
           <span className="nav-title">Crypto Wallets</span>
+            <span className="nav-right-angle"><i className="fa fa-angle-right"></i></span>
+
           <div
             className={`dropdown-container ${
               activeNav === "crypto" ? "d-block" : "d-none"
             }`}
           >
-            {[...new Set(credentials.map(cred => cred.subType))].map(
-              subType => {
-                return (
-                  <Link
-                    key={`crypto-${subType}`}
-                    className={`${activeSubNav === subType ? "active" : ""}`}
-                    to={`/extension/crypto/${subType}`}
-                    onClick={() => handleSubNavClick(subType)}
-                  >
-                   <div style={{color:"#FFFFFF"}}>{subType}</div>
-                  </Link>
-                );
-              }
-            )}
+
           </div>
         </div>
+
       </Link>
       <Link
         className={`dropdown-btn ${activeNav === "notes" ? "active" : ""}`}
         to="/extension/notes"
         onClick={() => handleNavClick("notes")}
       >
-        <div className="nav-item">
+        <div className="password" style={{top:"210px"}}>
           <i className="fa fa-lock" />
           <span className="nav-title">Note</span>
+
+            <span className="nav-right-angle"><i className="fa fa-angle-right"></i></span>
+
         </div>
       </Link>
-    </div>
+        <Link
+            className={`dropdown-btn ${activeNav === "notes" ? "active" : ""}`}
+            to="/extension/notes"
+            onClick={() => handleNavClick("NFT")}
+        >
+            <div className="password" style={{top:"280px"}}>
+                <i className="fa fa-lock" />
+                <span className="nav-title">NFT</span>
+
+                <span className="nav-right-angle"><i className="fa fa-angle-right"></i></span>
+
+            </div>
+        </Link>
+        <div className="open-vaultilo">
+            <img src={OpenVaultilo}/>
+
+        </div>
+
+        </div>
+
+
   );
 }
 

src/components/ExtensionRoute/Icons/icon.js

@@ -0,0 +1,42 @@
+import React from 'react'
+import bitcoin_icon from './icon_bitcoin.png';
+import ethereum_icon from './icon_ethereum.png';
+import icon_icon from './icon_logo.png';
+import ripple_icon from './icon_ripple.png';
+import other_icon from './icon_other.png';
+import default_icon from './icon_default.jpg'
+
+
+export default function   Icon  (props) {
+    const image =this.props.image
+    if (image==="bitcoin"){
+        return(
+            {bitcoin_icon}
+        )
+    }
+    if (image==="ethereum"){
+        return(
+            <img src={ethereum_icon}/>
+        )
+    }
+    if (image==="icon"){
+        return(
+            <img src={icon_icon}/>
+        )
+    }
+    if (image==="ripple"){
+        return(
+            <img src={ripple_icon}/>
+        )
+    }
+    if (image==="other"){
+        return(
+            <img src={other_icon}/>
+        )
+    }
+
+    return(
+        <img src={default_icon}/>
+    )
+
+}

src/components/ExtensionRoute/NoteShow.js

@@ -0,0 +1,26 @@
+import React from "react";
+import "../Sidebar.css";
+
+
+export default function NoteShow(props) {
+    const notes =
+        props.notes === null ? [] : JSON.parse(props.notes);
+    console.log(notes)
+    return (
+        <div classname="container" style={{width:"410px", height:"610px",borderRadius:"0px"}}>
+            <div className="row">
+                <div className="col-10">
+                    Row 1 Col1
+                </div>
+                <div className="col-2">
+                    Row 1 Col2
+                </div>
+            </div>
+            <div className="row">
+                Row 2
+            </div>
+
+        </div>
+    );
+}
+

src/components/ExtensionRoute/cryptoDetailView.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function cryptoDetailView(props){
+    return(
+        <div>
+            Detail View
+        </div>
+    )
+}