diff --git a/src/components/common/Header/MobileHeader/styles.js b/src/components/common/Header/MobileHeader/styles.js
index 5bee1b87e..647346593 100644
--- a/src/components/common/Header/MobileHeader/styles.js
+++ b/src/components/common/Header/MobileHeader/styles.js
@@ -67,27 +67,36 @@ export const useStyles = theme => ({
borderTopColor: theme.palette.text.white,
paddingTop: 30,
"& ul": {
- justifyContent: "space-evenly",
+ marginLeft: "29%",
+ justifyContent: "flex-start",
+ '& > div':{
+ "@media (max-width:550px)": { display: "none" },
+ },
+ "@media(max-width: 480px)":{ margin: 0 },
"& li": {
margin: 0,
padding: 0,
border: "none",
- "&:last-of-type a": {
+ "&:first-of-type": { marginRight: 15 },
+ "&:last-of-type span": {
padding: "10px 28px",
borderWidth: 1,
borderStyle: "solid",
borderColor: theme.palette.text.white,
borderRadius: 4,
},
+ "@media (max-width:550px)": { display: "block" },
},
"& span": {
fontSize: 24,
textTransform: "capitalize",
},
- "& a": {
- paddingBottom: 0,
- },
+ "& a": { paddingBottom: 0 },
},
+ "@media(max-width: 480px)":{
+ display: 'flex',
+ justifyContent: 'center'
+ }
},
subMenues: {
"& li": {
@@ -108,5 +117,4 @@ export const useStyles = theme => ({
"&:nth-child(2) a": { paddingTop: 0 },
},
},
- loggedInState: { display: "none" },
});
diff --git a/src/components/common/Header/NavBar.js b/src/components/common/Header/NavBar.js
index f21afdba0..1c2385b87 100644
--- a/src/components/common/Header/NavBar.js
+++ b/src/components/common/Header/NavBar.js
@@ -29,8 +29,8 @@ const NavBar = ({ data, history }) => {
/>
))}
{data.dropdowns.map(dropdown => (
-
-
+
+
))}
diff --git a/src/components/common/Header/styles.js b/src/components/common/Header/styles.js
index c5ceae0df..242519185 100644
--- a/src/components/common/Header/styles.js
+++ b/src/components/common/Header/styles.js
@@ -17,7 +17,7 @@ export const useStyles = makeStyles(theme => ({
width: "30%",
display: "flex",
alignItems: "center",
- "@media (max-width:1024px)": { width: "65%" },
+ "@media (max-width:1024px)": { width: "40%" },
},
h1: {
margin: 0,
@@ -36,7 +36,11 @@ export const useStyles = makeStyles(theme => ({
marginBottom: 10,
"@media (max-width:1024px)": { display: "none" },
},
- headerDropDown:{
+ headerDropDown: {
+ "& > div": {
+ display: "flex",
+ alignItems: "flex-start",
+ },
"&:hover": {
"& button": { color: theme.palette.text.white },
"& svg": { color: theme.palette.text.white },
@@ -58,15 +62,12 @@ export const useStyles = makeStyles(theme => ({
paddingLeft: 5,
color: "#9b9b9b",
cursor: "pointer",
- verticalAlign: "middle",
},
},
navLinks: {
marginRight: 53,
listStyle: "none",
- "@media (max-width:1280px) and (min-width: 1024px)": {
- marginRight: 26,
- },
+ "@media (max-width:1280px) and (min-width: 1024px)": { marginRight: 26 },
"& a": {
textDecoration: "none",
fontSize: 16,
@@ -85,14 +86,13 @@ export const useStyles = makeStyles(theme => ({
borderBottomWidth: 2,
borderBottomStyle: "solid",
borderBottomColor: theme.palette.text.white,
- color: '#fff !important',
+ color: "#fff !important",
fontWeight: 600,
},
loginBtnsSection: {
width: "30%",
marginBottom: 6,
- "@media (max-width:1024px)": { width: "35%" },
- "@media (max-width: 587px)": { width: "50%" },
+ "@media (max-width:1024px)": { width: "59%" }
},
loginBtnsUl: {
margin: 0,
@@ -100,9 +100,7 @@ export const useStyles = makeStyles(theme => ({
display: "flex",
alignItems: "center",
justifyContent: "flex-end",
- "& a": {
- textDecoration: "none",
- },
+ "& a": { textDecoration: "none" }
},
loginBtnsLi: {
marginRight: 30,
@@ -112,6 +110,7 @@ export const useStyles = makeStyles(theme => ({
"@media (max-width:768px)": { display: "none" },
},
},
+ "@media (max-width:550px)": { display: "none" },
},
signupBtn: {
padding: "4px 24px",
diff --git a/src/components/common/ProgressBar/styles.js b/src/components/common/ProgressBar/styles.js
index fd190fe9d..e03152d27 100644
--- a/src/components/common/ProgressBar/styles.js
+++ b/src/components/common/ProgressBar/styles.js
@@ -28,7 +28,7 @@ export const useStyles = theme => ({
display: "inline-block",
backgroundColor: theme.palette.text.lightGray,
verticalAlign: "middle",
- "@media (max-width:724px)": { display: "none" },
+ "@media (max-width:1150px)": { width: 50 },
},
"& i": {
marginRight: 5,
diff --git a/src/components/common/StyledLinearProgress/styles.js b/src/components/common/StyledLinearProgress/styles.js
index fd6774537..e319429f0 100644
--- a/src/components/common/StyledLinearProgress/styles.js
+++ b/src/components/common/StyledLinearProgress/styles.js
@@ -5,5 +5,6 @@ export const useStyles = theme => ({
margin: "9px auto 5px",
backgroundColor: "rgba(64, 134, 255, 0.3)",
"& div": { backgroundColor: theme.palette.text.primary },
+ "@media (max-width: 1045px)": { width: "auto" },
},
});
diff --git a/src/components/common/UserProfileCard/index.js b/src/components/common/UserProfileCard/index.js
index 0e62b8e4a..f0ff3b697 100644
--- a/src/components/common/UserProfileCard/index.js
+++ b/src/components/common/UserProfileCard/index.js
@@ -6,14 +6,14 @@ import CloseIcon from "@material-ui/icons/Close";
import { useStyles } from "./styles";
-const UserProfileCard = ({ classes, nickName }) => {
+const UserProfileCard = ({ classes, nickName, onClose }) => {
return (
);
};
diff --git a/src/components/common/UserProfileCard/styles.js b/src/components/common/UserProfileCard/styles.js
index 397983037..99deded85 100644
--- a/src/components/common/UserProfileCard/styles.js
+++ b/src/components/common/UserProfileCard/styles.js
@@ -29,6 +29,7 @@ export const useStyles = theme => ({
},
closeIcon: {
position: "absolute",
+ cursor: "pointer",
top: 10,
right: 20,
display: "none",
diff --git a/src/utility/Validation.js b/src/utility/Validation.js
index dfead51ae..ca3c1c11f 100644
--- a/src/utility/Validation.js
+++ b/src/utility/Validation.js
@@ -1,3 +1,5 @@
+import validate from "validate.js";
+
export const isValidEmail = email => {
let reg = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return reg.test(String(email).toLowerCase());
@@ -14,3 +16,38 @@ export const hasNumber = string => /[0-9]/.test(string);
// eslint-disable-next-line no-useless-escape
export const hasSpecialChar = string => /[\^\$\*\.\[\]\{\}\(\)\?\-\"\!\@\#\%\&\/\,\>\<\'\:\;\|\_\~\`]/.test(string);
export const minChars = (string, length) => string.length >= length;
+
+validate.validators.hasLowerCase = (value, options, key, attributes) => {
+ if (/[a-z]/.test(value)) {
+ return;
+ }
+ return options.message || "must contain a lowercase character";
+};
+
+validate.validators.hasUpperCase = (value, options, key, attributes) => {
+ if (/[A-Z]/.test(value)) {
+ return;
+ }
+ return options.message || "must contain an uppercase character";
+};
+
+validate.validators.hasNumber = (value, options, key, attributes) => {
+ if (/[0-9]/.test(value)) {
+ return;
+ }
+ return options.message || "must contain a number";
+};
+
+validate.validators.hasAWSPasswordSplChar = (value, options, key, attributes) => {
+ // eslint-disable-next-line no-useless-escape
+ if (/[\^\$\*\.\[\]\{\}\(\)\?\-\"\!\@\#\%\&\/\,\>\<\'\:\;\|\_\~\`]/.test(value)) {
+ return;
+ }
+ return options.message || "must contain a special character";
+};
+
+validate.options = { format: "flat" };
+
+const snetValidator = validate;
+
+export default snetValidator;
diff --git a/src/utility/constants/GetStarted.js b/src/utility/constants/GetStarted.js
index bbb639701..b4468eb2f 100644
--- a/src/utility/constants/GetStarted.js
+++ b/src/utility/constants/GetStarted.js
@@ -5,35 +5,8 @@ import ThumbsUpDownIcon from "@material-ui/icons/ThumbsUpDown";
import SettingsIcon from "@material-ui/icons/Settings";
import CheckCircleIcon from "@material-ui/icons/CheckCircle";
-import CardorListViews from "../../assets/images/GetStarted/BrowsingTheMarketplace/CardorListViews.png";
-import ChangeFilterOptions from "../../assets/images/GetStarted/BrowsingTheMarketplace/ChangeFilterOptions.png";
-import SortOptions from "../../assets/images/GetStarted/BrowsingTheMarketplace/SortOptions.png";
-import RatingandRanking from "../../assets/images/GetStarted/BrowsingTheMarketplace/RatingandRanking.png";
-import Search from "../../assets/images/GetStarted/BrowsingTheMarketplace/Search.png";
-
-import AboutDetails from "../../assets/images/GetStarted/ChooseingYourAi/AboutDetails.png";
-import Pricing from "../../assets/images/GetStarted/ChooseingYourAi/Pricing.png";
-import DemoTrial from "../../assets/images/GetStarted/ChooseingYourAi/DemoTrial.png";
-import InstallRun from "../../assets/images/GetStarted/ChooseingYourAi/Install&Run.png";
-import Tutorials from "../../assets/images/GetStarted/ChooseingYourAi/Tutorials.png";
-
-import AccessingtheDemo from "../../assets/images/GetStarted/DemoAiServices/AccessingtheDemo.png";
-import ConfigureAIParameters from "../../assets/images/GetStarted/DemoAiServices/ConfigureAIParameters.png";
-import Metamask from "../../assets/images/GetStarted/DemoAiServices/Metamask.png";
-import Seeoutputresults from "../../assets/images/GetStarted/DemoAiServices/Seeoutputresults.png";
-
-import RatingAIServices from "../../assets/images/GetStarted/RateReviewImprove/RatingAIServices.png";
-import AccessingSortingrReviews from "../../assets/images/GetStarted/RateReviewImprove/AccessingSortingrReviews.png";
-import WritingReview from "../../assets/images/GetStarted/RateReviewImprove/WritingReview.png";
-
-import Install from "../../assets/images/GetStarted/MakeItYourAI/Install.png";
-import Run from "../../assets/images/GetStarted/MakeItYourAI/Run.png";
-import MultipleChannels from "../../assets/images/GetStarted/MakeItYourAI/MultipleChannels.png";
-import Documentation from "../../assets/images/GetStarted/MakeItYourAI/Documentation.png";
-
-import ManagingyourAGItokens from "../../assets/images/GetStarted/UsingAgi/ManagingyourAGItokens.png";
-import Metamaskwalletsupport from "../../assets/images/GetStarted/UsingAgi/Metamaskwalletsupport.png";
-import Usingchannelbalances from "../../assets/images/GetStarted/UsingAgi/Usingchannelbalances.png";
+const imgPath = (directory, file, extension = "png") =>
+ `${process.env.REACT_APP_SNET_CDN}/assets/images/GetStarted/${directory}/${file}.${extension}`;
export const GetStartedCategoriesData = [
{
@@ -42,11 +15,26 @@ export const GetStartedCategoriesData = [
categoryDescription:
"Exploring AI - The SingularityNET AI Marketplace hosts a wide variety of AI services that range from Text generation to Face detection. You can view all of them by default in “List view” as shown here but also search by category, rating, most recent and favourites.",
categoryTabs: [
- { title: "Card or List Views ", media: { type: "img", content: CardorListViews } },
- { title: "Change Filter Options", media: { type: "img", content: ChangeFilterOptions } },
- { title: "Sort Options", media: { type: "img", content: SortOptions } },
- { title: "Rating and Rankings", media: { type: "img", content: RatingandRanking } },
- { title: "Search", media: { type: "img", content: Search } },
+ {
+ title: "Card or List Views ",
+ media: {
+ type: "img",
+ content: imgPath("BrowsingTheMarketplace", "CardorListViews"),
+ },
+ },
+ {
+ title: "Change Filter Options",
+ media: { type: "img", content: imgPath("BrowsingTheMarketplace", "ChangeFilterOptions") },
+ },
+ {
+ title: "Sort Options",
+ media: { type: "img", content: imgPath("BrowsingTheMarketplace", "SortOptions") },
+ },
+ {
+ title: "Rating and Rankings",
+ media: { type: "img", content: imgPath("BrowsingTheMarketplace", "RatingandRanking") },
+ },
+ { title: "Search", media: { type: "img", content: imgPath("BrowsingTheMarketplace", "Search") } },
],
},
{
@@ -55,11 +43,11 @@ export const GetStartedCategoriesData = [
categoryDescription:
"AI Services - Each AI service on this platform is unique. Click on any service you would like to use to find out more about its required input, expected output, cost, usage, developer’s note and much more!",
categoryTabs: [
- { title: "About Details", media: { type: "img", content: AboutDetails } },
- { title: "Pricing", media: { type: "img", content: Pricing } },
- { title: "Demo Trial", media: { type: "img", content: DemoTrial } },
- { title: "Install & Run", media: { type: "img", content: InstallRun } },
- { title: "Tutorials", media: { type: "img", content: Tutorials } },
+ { title: "About Details", media: { type: "img", content: imgPath("ChooseingYourAi", "AboutDetails") } },
+ { title: "Pricing", media: { type: "img", content: imgPath("ChooseingYourAi", "Pricing") } },
+ { title: "Demo Trial", media: { type: "img", content: imgPath("ChooseingYourAi", "DemoTrial") } },
+ { title: "Install & Run", media: { type: "img", content: imgPath("ChooseingYourAi", "Install&Run") } },
+ { title: "Tutorials", media: { type: "img", content: imgPath("ChooseingYourAi", "Tutorials") } },
],
},
{
@@ -68,10 +56,22 @@ export const GetStartedCategoriesData = [
categoryDescription:
"Try it out yourself! – Majority of services have free demo calls that you can try right away. Input your parameters and data and let AI process your request instantly. After your trial demo calls used up, you can still run the demos using MetaMask via AGI tokens. ",
categoryTabs: [
- { title: "Accessing the demo", media: { type: "img", content: AccessingtheDemo } },
- { title: "Configure AI parameters", media: { type: "gif", content: ConfigureAIParameters } },
- { title: "See output results", media: { type: "gif", content: Seeoutputresults } },
- { title: "Metamask (coming soon)", media: { type: "gif", content: Metamask } },
+ {
+ title: "Accessing the demo",
+ media: { type: "img", content: imgPath("DemoAiServices", "AccessingtheDemo") },
+ },
+ {
+ title: "Configure AI parameters",
+ media: { type: "gif", content: imgPath("DemoAiServices", "ConfigureAIParameters") },
+ },
+ {
+ title: "See output results",
+ media: { type: "gif", content: imgPath("DemoAiServices", "Seeoutputresults") },
+ },
+ {
+ title: "Metamask (coming soon)",
+ media: { type: "gif", content: imgPath("DemoAiServices", "Metamask") },
+ },
],
},
{
@@ -80,9 +80,15 @@ export const GetStartedCategoriesData = [
categoryDescription:
"Feedback - Democratizing AI requires collaboration, and not just between developers. Ratings and reviews help developers improve their algorithms as well as the design of their AI service. It’s also an opportunity for new teams to be born. ",
categoryTabs: [
- { title: "Rating AI Services", media: { type: "img", content: RatingAIServices } },
- { title: "Accessing & sorting reviews", media: { type: "img", content: AccessingSortingrReviews } },
- { title: "Writing review ", media: { type: "img", content: WritingReview } },
+ {
+ title: "Rating AI Services",
+ media: { type: "img", content: imgPath("RateReviewImprove", "RatingAIServices") },
+ },
+ {
+ title: "Accessing & sorting reviews",
+ media: { type: "img", content: imgPath("RateReviewImprove", "AccessingSortingrReviews") },
+ },
+ { title: "Writing review ", media: { type: "img", content: imgPath("RateReviewImprove", "WritingReview") } },
],
},
{
@@ -91,10 +97,13 @@ export const GetStartedCategoriesData = [
categoryDescription:
"Install & run it - It has never been easier to find and integrate AI algorithms. Regardless of your internal tech capabilities, you can now seamlessly integrate a service to your website, app or other product via the SingularityNET AI Marketplace. ",
categoryTabs: [
- { title: "Install", media: { type: "img", content: Install } },
- { title: "Run", media: { type: "img", content: Run } },
- { title: "Multiple languages", media: { type: "img", content: MultipleChannels } },
- { title: "documentation", media: { type: "img", content: Documentation } },
+ { title: "Install", media: { type: "img", content: imgPath("MakeItYourAI", "Install") } },
+ { title: "Run", media: { type: "img", content: imgPath("MakeItYourAI", "Run") } },
+ {
+ title: "Multiple languages",
+ media: { type: "img", content: imgPath("MakeItYourAI", "MultipleChannels") },
+ },
+ { title: "documentation", media: { type: "img", content: imgPath("MakeItYourAI", "Documentation") } },
],
},
{
@@ -103,9 +112,18 @@ export const GetStartedCategoriesData = [
categoryDescription:
"Own your funds - Whether you want to use services, delete your account or use your funds outside of the platform, you are the sole controller of your funds. Your wallet, your cryptographic key, your AGI. ",
categoryTabs: [
- { title: "Managing your AGI tokens", media: { type: "img", content: ManagingyourAGItokens } },
- { title: "Metamask wallet support", media: { type: "img", content: Metamaskwalletsupport } },
- { title: "Using channel balances", media: { type: "img", content: Usingchannelbalances } },
+ {
+ title: "Managing your AGI tokens",
+ media: { type: "img", content: imgPath("UsingAgi", "ManagingyourAGItokens") },
+ },
+ {
+ title: "Metamask wallet support",
+ media: { type: "img", content: imgPath("UsingAgi", "Metamaskwalletsupport") },
+ },
+ {
+ title: "Using channel balances",
+ media: { type: "img", content: imgPath("UsingAgi", "Usingchannelbalances") },
+ },
],
},
];
diff --git a/src/utility/constants/ValidtionMessages.js b/src/utility/constants/ValidtionMessages.js
index 7147970a5..b429f5e80 100644
--- a/src/utility/constants/ValidtionMessages.js
+++ b/src/utility/constants/ValidtionMessages.js
@@ -5,7 +5,3 @@ export const PasswordCriteria = {
SPECIAL_CHAR: "A Special Char",
NUMBER: "Number",
};
-
-export const ValidationMessages = {
- INVALID_EMAIL: "invalid email",
-};