tabexseriescomponents 0.0.71 → 0.0.73

package/src-aya/styles/staticpages/signup.module.css

@@ -0,0 +1,206 @@
+@media screen and (max-width: 800px) {
+    .rightContainer,
+    .rightContainerTrans {
+        border-top-right-radius: 0 !important;
+        border-bottom-right-radius: 15px !important;
+        border-bottom-left-radius: 15px !important;
+    }
+    .rightContainerText {
+        font-size: 23px !important;
+    }
+}
+.form_control:focus {
+    -webkit-animation: anim-shadow 0.5s ease-in-out forwards;
+    animation: anim-shadow 0.5s ease-in-out forwards;
+}
+.form_control:focus + .login_input_icon {
+    padding-left: 20px;
+}
+/* Forms */
+.form_control {
+    display: block;
+    width: 100%;
+    height: 35px;
+    /* font-size: 1rem; */
+    /* color: var(--cardtitle); */
+    /* background: no-repeat center bottom, center calc(100% - 1px); */
+    /* background-size: 0 100%, 100% 100%; */
+    background-clip: padding-box;
+    /* font-size: 14px; */
+    /* transition: background 0s ease-out; */
+    /* border: 0; */
+    padding: 0 15px;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    position: relative;
+}
+@media screen and (prefers-reduced-motion: reduce) {
+    .form_control {
+        transition: none;
+    }
+}
+.form_control::-ms-expand {
+    background-color: transparent;
+    border: 0;
+}
+.form_control:focus {
+    outline: 0;
+}
+.form_control::placeholder {
+    opacity: 1;
+}
+.form_control:disabled,
+.form_control[readonly] {
+    background-color: #e9ecef;
+    opacity: 1;
+    cursor: not-allowed;
+}
+textarea.form_control {
+    height: auto;
+}
+.form_control:focus {
+    /* background-size: 100% 100%, 100% 100%; */
+    transition-duration: 0.3s;
+    box-shadow: none;
+}
+.form_control::-moz-placeholder {
+    color: #aaaaaa;
+    font-weight: 400;
+    font-size: 14px;
+}
+.form_control:-ms-input-placeholder {
+    color: #aaaaaa;
+    font-weight: 400;
+    font-size: 14px;
+}
+.form_control::-webkit-input-placeholder {
+    color: #aaaaaa;
+    font-weight: 400;
+    font-size: 14px;
+}
+.form_control {
+    /* background-image: linear-gradient(to top, #000 2px, rgba(156, 39, 176, 0) 2px), linear-gradient(to top, #d2d2d2 1px, rgba(210, 210, 210, 0) 1px); */
+}
+.form_control_border_none {
+    background-image: none;
+}
+.form_control.disabled,
+.form_control:disabled,
+.form_control[disabled] {
+    /* background-image: linear-gradient(to right, #d2d2d2 0%, #d2d2d2 30%, transparent 30%, transparent 100%); */
+    /* background-repeat: repeat-x;
+    background-size: 3px 1px; */
+    cursor: not-allowed;
+}
+@media screen and (max-width: 500px) {
+    .form_control {
+        /* padding: 0 5px !important; */
+    }
+    .login_input_icon {
+        padding-left: 0 !important;
+    }
+    .rightContainer {
+        border-radius: 15px 15px 0 0 !important;
+    }
+    .leftcontainer {
+        border-radius: 15px 15px 0 0 !important;
+    }
+}
+.form_controltextarea{
+    min-height: 10vh !important;
+}
+.checkbox {
+    --border: #022648;
+    --border-hover: #959ed0;
+    --tick: #fff;
+    position: relative;
+    /* color: var(--cardheader); */
+}
+.checkbox_label {
+    font-size: 16px;
+    text-transform: capitalize;
+    font-weight: 500;
+    cursor: pointer;
+}
+.checkbox:hover {
+    /* color: var(--border-hover); */
+}
+.checkbox input,
+.checkbox svg {
+    width: 16px;
+    height: 16px;
+    display: block;
+}
+.checkbox_sub input {
+    width: 15px;
+    height: 15px;
+}
+.checkbox input {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    position: relative;
+    outline: none;
+    background: white;
+    border: none;
+    margin: 0;
+    padding: 0;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: box-shadow 0.3s;
+    box-shadow: inset 0 0 0 var(--s, 1px) var(--b, var(--border));
+}
+.checkbox input:disabled {
+    cursor: not-allowed;
+}
+.checkbox input:hover {
+    /* --s: 2px; */
+    /* --b: var(--border-hover); */
+}
+.checkbox input:checked {
+    /* --b: var(--secondary); */
+}
+.checkbox svg {
+    pointer-events: none;
+    fill: none;
+    stroke-width: 2px;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    /* stroke: var(--stroke, var(--secondary)); */
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 16px;
+    height: 21px;
+    transform: scale(var(--scale, 1)) translateZ(0);
+}
+.checkbox_sub svg {
+    pointer-events: none;
+    fill: none;
+    stroke-width: 2px;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke: var(--stroke, var(--secondary));
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 16px;
+    height: 21px;
+    transform: scale(var(--scale, 1)) translateZ(0);
+}
+.checkboxtranslated svg {
+    right: 0;
+}
+.checkbox input:checked {
+    --s: 2px;
+    transition-delay: 0.4s;
+}
+.checkbox input:checked + svg {
+    --a: 16.1 86.12;
+    --o: 102.22;
+}
+.checkbox svg {
+    stroke-dasharray: var(--a, 86.12);
+    stroke-dashoffset: var(--o, 86.12);
+    transition: stroke-dasharray 0.6s, stroke-dashoffset 0.6s;
+}

package/srcOLD/Contexts/ProductsCardsSectionContext.jsx

@@ -0,0 +1,28 @@
+import React, { useEffect, useState } from 'react';
+
+export const ProductsCardsSectionContext = React.createContext();
+export const ProductsCardsSectionContext_Provider = (props) => {
+    // let history = useHistory();
+
+    const [ParentCollectionsForCollectionQueryArrContext, setParentCollectionsForCollectionQueryArrContext] = useState('');
+
+    const [ProductFilterObjContext, setProductFilterObjContext] = useState({
+        Isfiltercollections: 0,
+        isfilter: 0,
+        ProductFetchingType: '',
+        collections: [],
+        FilterOptions: [],
+    });
+    return (
+        <ProductsCardsSectionContext.Provider
+            value={{
+                ProductFilterObjContext,
+                setProductFilterObjContext,
+                ParentCollectionsForCollectionQueryArrContext,
+                setParentCollectionsForCollectionQueryArrContext,
+            }}
+        >
+            {props.children}
+        </ProductsCardsSectionContext.Provider>
+    );
+};

package/srcOLD/StylesJS/Customstyles.js

@@ -0,0 +1,235 @@
+export const selectcustomStyles = {
+    option: (provided, state) => ({
+        ...provided,
+        borderBottom: '1px solid #e6e6e6',
+        backgroundColor: state.isSelected ? '' : '',
+        padding: 5,
+        textTransform: 'capitalize',
+        color: state.isSelected ? '#eac435' : '#022648',
+        transition: '.3s',
+        '&:hover': {
+            color: '#eac435',
+            cursor: 'pointer',
+        },
+    }),
+    control: () => ({
+        border: '2px solid #e6e6e6',
+        boxShadow: '0 0 10px #e6e6e6',
+        borderRadius: '10px',
+        display: 'flex',
+        cursor: 'pointer',
+        transition: '.3s',
+        '&:hover': {
+            boxShadow: '0px 9px 20px rgba(75, 72, 72, 0.3)',
+        },
+    }),
+};
+export const selectcustomStylesTranslated = {
+    option: (provided, state) => ({
+        ...provided,
+        borderBottom: '1px solid #e6e6e6',
+        backgroundColor: state.isSelected ? '' : '',
+        padding: 5,
+        textTransform: 'capitalize',
+        color: state.isSelected ? '#eac435' : '#022648',
+        transition: '.3s',
+        textAlign: 'right',
+        '&:hover': {
+            color: '#eac435',
+            cursor: 'pointer',
+        },
+    }),
+    control: () => ({
+        border: '2px solid #e6e6e6',
+        boxShadow: '0 0 10px #e6e6e6',
+        borderRadius: '10px',
+        display: 'flex',
+        cursor: 'pointer',
+        transition: '.3s',
+        textAlign: 'right',
+        '&:hover': {
+            boxShadow: '0px 9px 20px rgba(75, 72, 72, 0.3)',
+        },
+    }),
+    placeholder: (provided, state) => ({
+        ...provided,
+        textAlign: 'right',
+    }),
+};
+export const tabexselect = {
+    option: (provided, state) => ({
+        ...provided,
+        borderBottom: '1px solid #e6e6e6',
+        backgroundColor: state.isSelected ? '' : '',
+        padding: 5,
+        textTransform: 'capitalize',
+        color: state.isSelected ? '#eac435' : '#022648',
+        transition: '.3s',
+        '&:hover': {
+            color: '#eac435',
+            cursor: 'pointer',
+        },
+    }),
+    control: () => ({
+        borderBottom: '2px solid #e6e6e6',
+        display: 'flex',
+        cursor: 'pointer',
+        padding: 0,
+        height: '30px',
+        transition: '.3s',
+        fontSize: '13px',
+        fontWeight: 600,
+        '&:hover': {
+            boxShadow: '0px 9px 20px rgba(75, 72, 72, 0.3)',
+            borderRadius: '10px',
+        },
+    }),
+    dropdownIndicator: (provided) => ({
+        ...provided,
+        '&:hover': {
+            color: '#eac435',
+        },
+    }),
+};
+export const selectcustomStylesfromSelect = {
+    option: (provided, state) => ({
+        ...provided,
+        borderBottom: '1px solid #e6e6e6',
+        backgroundColor: state.isSelected ? '' : '',
+        padding: 5,
+        textTransform: 'capitalize',
+        color: state.isSelected ? '#eac435' : '#022648',
+        transition: '.3s',
+        '&:hover': {
+            color: '#eac435',
+            cursor: 'pointer',
+        },
+    }),
+    control: () => ({
+        borderBottom: '2px solid #e6e6e6',
+        display: 'flex',
+        cursor: 'pointer',
+        padding: 0,
+        transition: '.3s',
+        '&:hover': {
+            boxShadow: '0px 9px 20px rgba(75, 72, 72, 0.3)',
+            borderRadius: '10px',
+        },
+    }),
+    dropdownIndicator: (provided) => ({
+        ...provided,
+        '&:hover': {
+            color: '#eac435',
+        },
+    }),
+};
+export const selectcustomStylesfromSelectTranslated = {
+    option: (provided, state) => ({
+        ...provided,
+        borderBottom: '1px solid #e6e6e6',
+        backgroundColor: state.isSelected ? '' : '',
+        padding: 5,
+        textTransform: 'capitalize',
+        color: state.isSelected ? '#eac435' : '#022648',
+        transition: '.3s',
+        textAlign: 'right',
+        '&:hover': {
+            color: '#eac435',
+            cursor: 'pointer',
+        },
+    }),
+    control: () => ({
+        borderBottom: '2px solid #e6e6e6',
+        display: 'flex',
+        cursor: 'pointer',
+        padding: 0,
+        transition: '.3s',
+        textAlign: 'right',
+        '&:hover': {
+            boxShadow: '0px 9px 20px rgba(75, 72, 72, 0.3)',
+        },
+    }),
+    placeholder: (provided, state) => ({
+        ...provided,
+        textAlign: 'right',
+    }),
+    dropdownIndicator: (provided) => ({
+        ...provided,
+        '&:hover': {
+            color: '#eac435',
+        },
+    }),
+};
+export const defaultstyles = {
+    option: (provided, state) => ({
+        ...provided,
+        borderBottom: '1px solid #e6e6e6',
+        backgroundColor: state.isSelected ? '' : '',
+        padding: 5,
+        textTransform: 'capitalize',
+        color: state.isSelected ? '#eac435' : '#022648',
+        transition: '.3s',
+        '&:hover': {
+            // color: '#eac435',
+            cursor: 'pointer',
+        },
+    }),
+    control: () => ({
+        borderBottom: '1px solid #ccc',
+        backgroundColor: 'white',
+        display: 'flex',
+        cursor: 'pointer',
+        padding: 0,
+        transition: '.3s',
+        '&:hover': {
+            // boxShadow: '0px 9px 20px rgba(75, 72, 72, 0.3)',
+            // borderRadius: '10px',
+        },
+    }),
+    dropdownIndicator: (provided) => ({
+        ...provided,
+        '&:hover': {
+            // color: '#eac435',
+        },
+    }),
+};
+
+export const defaultstylestranslated = {
+    option: (provided, state) => ({
+        ...provided,
+        borderBottom: '1px solid #e6e6e6',
+        backgroundColor: state.isSelected ? '' : '',
+        padding: 5,
+        textTransform: 'capitalize',
+        // color: state.isSelected ? '#eac435' : '#022648',
+        transition: '.3s',
+        textAlign: 'right',
+        '&:hover': {
+            // color: '#eac435',
+            cursor: 'pointer',
+        },
+    }),
+    control: () => ({
+        borderBottom: '1px solid #ccc',
+        backgroundColor: 'white',
+        display: 'flex',
+        cursor: 'pointer',
+        padding: 0,
+        transition: '.3s',
+        textAlign: 'right',
+        '&:hover': {
+            // boxShadow: '0px 9px 20px rgba(75, 72, 72, 0.3)',
+            // borderRadius: '10px',
+        },
+    }),
+    dropdownIndicator: (provided) => ({
+        ...provided,
+        '&:hover': {
+            // color: '#eac435',
+        },
+    }),
+    placeholder: (provided, state) => ({
+        ...provided,
+        textAlign: 'right',
+    }),
+};

package/{src1-10 → srcOLD}/TabexComponents/Cards/CategoryCardwithhoveraction/CategoryCardwithhoveraction.jsx

@@ -1,13 +1,22 @@
 import React, { useEffect, useState, useContext } from 'react';
+// import { LanguageContext } from '../../../LanguageContext';
+// import { FetchingContext } from '../../../FetchingContext';
+// import { WebsiteDesignWorkPlaceContext } from '../../../../WebsiteDesignWorkPlaceContext';
+// import { TemplateRoutingContext } from '../../../TemplateRoutingContext';
 import { css } from 'glamor';
 import cardstyles from '../../../styles/cards/categorycard.module.css';
 import { IKImage } from 'imagekitio-react';
 import { IKpublicKey, IKurlEndpoint } from '../../../../Env';
 import { BsArrowLeft, BsArrowRight } from 'react-icons/bs';
 const CategoryCardwithhoveraction = (props) => {
+    // const { lang, langdetect } = useContext(LanguageContext);
+    // const { fetch_inst_tabex_websitetemplatesQueryContext, sectionindexcontext, pageindexcontext, StatePagePropertiesContext } = useContext(WebsiteDesignWorkPlaceContext);
+    // const { addtofavoritescontext, setShowProductInfoModalContext, ProductIdProdutInfoModalContext, setProductIdProdutInfoModalContext } = useContext(FetchingContext);
+    // const { routingcountext, StaticPagesLinksContext } = useContext(TemplateRoutingContext);
     const [sectionproperties, setsectionproperties] = useState('');
     const [item, setitem] = useState(props.cardinfoitemprops);
     const [index, setindex] = useState(props.cardinfoindexprops);
+
     const StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
     const lang = props.actions.lang;
     const langdetect = props.actions.langdetect;

package/{src1-10 → srcOLD}/TabexComponents/Cards/Categorycard_fullimage/Categorycard_fullimage.jsx

@@ -1,14 +1,33 @@
 import React, { useEffect, useState, useContext } from 'react';
+// import { LanguageContext } from '../../../LanguageContext';
+// import { FetchingContext } from '../../../FetchingContext';
+// import { WebsiteDesignWorkPlaceContext } from '../../../../WebsiteDesignWorkPlaceContext';
+// import { TemplateRoutingContext } from '../../../TemplateRoutingContext';
 import cardstyles from '../../../styles/cards/Categorcycard_fullimage.module.css';
 import { css } from 'glamor';
 import { IKImage } from 'imagekitio-react';
 import { IKpublicKey, IKurlEndpoint } from '../../../../Env';
 
+import { FiShoppingCart } from 'react-icons/fi';
+import { AiFillStar } from 'react-icons/ai';
+
 const Categorycard_fullimage = (props) => {
+    // const { lang, langdetect } = useContext(LanguageContext);
+    // const { StatePagePropertiesContext } = useContext(WebsiteDesignWorkPlaceContext);
+    // const { setShowProductInfoModalContext, setProductIdProdutInfoModalContext } = useContext(FetchingContext);
+    // const { routingcountext, StaticPagesLinksContext } = useContext(TemplateRoutingContext);
+
     const [sectionproperties, setsectionproperties] = useState('');
     const [item, setitem] = useState(props.cardinfoitemprops);
     const [index, setindex] = useState(props.cardinfoindexprops);
+
     const StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
+    const lang = props.actions.lang;
+    const langdetect = props.actions.langdetect;
+    const setShowProductInfoModalContext = props.actions.setShowProductInfoModalContext;
+    const addtofavoritescontext = props.actions.addtofavoritescontext;
+    const setProductIdProdutInfoModalContext = props.actions.setProductIdProdutInfoModalContext;
+    const AddtoCartContext = props.actions.AddtoCartContext;
     const StaticPagesLinksContext = props.actions.StaticPagesLinksContext;
     const routingcountext = props.actions.routingcountext;
 

package/{src1-10 → srcOLD}/TabexComponents/Cards/Categorycard_slidebgscaled/Categorycard_slidebgscaled.jsx

@@ -1,13 +1,21 @@
 import React, { useEffect, useState, useContext } from 'react';
+// import { WebsiteDesignWorkPlaceContext } from '../../../../WebsiteDesignWorkPlaceContext';
 import { css } from 'glamor';
 import cardstyles from '../../../styles/cards/Categorycard_slidebgscaled.module.css';
+// import { TemplateRoutingContext } from '../../../TemplateRoutingContext';
 import { IKImage } from 'imagekitio-react';
 import { IKpublicKey, IKurlEndpoint } from '../../../../Env';
+// import { LanguageContext } from '../../../LanguageContext';
 
 const Categorycard_slidebgscaled = (props) => {
+    // const { lang, langdetect } = useContext(LanguageContext);
+    // const { StatePagePropertiesContext } = React.useContext(WebsiteDesignWorkPlaceContext);
+    // const { routingcountext, StaticPagesLinksContext } = useContext(TemplateRoutingContext);
     const [sectionproperties, setsectionproperties] = useState('');
     const [item, setitem] = useState(props.cardinfoitemprops);
+
     const StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
+    const lang = props.actions.lang;
     const langdetect = props.actions.langdetect;
     const routingcountext = props.actions.routingcountext;
     const StaticPagesLinksContext = props.actions.StaticPagesLinksContext;

package/{src1-10 → srcOLD}/TabexComponents/Cards/Categorycard_with_trianglebg/Categorycard_with_trianglebg.jsx

@@ -1,10 +1,17 @@
 import React, { useEffect, useState, useContext } from 'react';
+// import { LanguageContext } from '../../../LanguageContext';
+// import { WebsiteDesignWorkPlaceContext } from '../../../../WebsiteDesignWorkPlaceContext';
 import { css } from 'glamor';
+// import { TemplateRoutingContext } from '../../../TemplateRoutingContext';
 import { IKpublicKey, IKurlEndpoint } from '../../../../Env';
 import { IKImage } from 'imagekitio-react';
 const Categorycard_with_trianglebg = (props) => {
+    // const { lang, langdetect } = useContext(LanguageContext);
+    // const { StatePagePropertiesContext } = useContext(WebsiteDesignWorkPlaceContext);
+    // const { routingcountext, StaticPagesLinksContext } = useContext(TemplateRoutingContext);
     const [sectionproperties, setsectionproperties] = useState('');
     const [item, setitem] = useState(props.cardinfoitemprops);
+
     const StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
     const lang = props.actions.lang;
     const langdetect = props.actions.langdetect;