nestiq-component-library 1.0.9 → 1.0.10

package/src/components/SharePopup/PopUp.css

@@ -1,359 +0,0 @@
-.popup-overlay {
-  position: fixed; /* Fixed position to cover the whole screen */
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color:  rgba(0, 0, 0, 0.5); /* Semi-transparent background */
-  display: flex; /* Flexbox to center the popup */
-  justify-content: center; /* Center horizontally */
-  align-items: center; /* Center vertically */
-  z-index: 2000; /* Ensure it's above other content */
- 
-}
-
-.shareSection {
-  height: 340px;
-  padding: 40px;
-  border-radius: 16px;
-  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
-  border: solid 1px #d7d9e3;
-  background-color: #fff;
-  
-}
-.popUpHeader {
-  height: 48px;
-  font-size: 32px;
-  font-weight: 600;
-  color: #1b1b1b;
-}
-
-.closeIcon {
-  width: 16px;
-  height: 16px;
-  cursor: pointer;
-}
-
-.socialMediaIconsSection {
-  gap: 60px !important;
-}
-
-.socialMediaIcons {
-  width: 28px !important;
-  height: 28px !important;
-  cursor: pointer;
-}
-
-.socialMediaIconText {
-  height: 36px;
-  font-size: 13px;
-  font-weight: 500;
-  line-height: 3;
-  color: #344041;
-  cursor: pointer;
-}
-
-.popup_search-input {
-  height: 60px;
-  padding-inline-end: 190px;
-  font-size: 20px;
-  box-shadow: inset 0 4px 4px 0 rgba(0, 0, 0, 0.25);
-  background-color: rgba(0, 0, 0, 0.05);
-}
-
-.popup_search-input::placeholder {
-  font-size: 20px;
-  color: rgba(140, 140, 140, 0.5);
-}
-
-.popup_search-input:focus {
-  outline: none;
-}
-
-.popupcustom-button {
-  height: 35px;
-  color: #000;
-  cursor: pointer;
-  border-color: #ffb525;
-  right: 0;
-  z-index: 1;
-  background-color: #ffb525;
-  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
-}
-.button-text {
-  width: 115px;
-  height: 19px;
-  flex-grow: 0;
-  font-family: Inter;
-  font-size: 16px;
-  font-weight: 500;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: normal;
-  letter-spacing: normal;
-  text-align: center;
-}
-.button_success-right {
-  width: 184px;
-  height: 43px;
-  flex-grow: 0;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 24px;
-  border-radius: 16px;
-  border-color: #000;
-  background-color: transparent;
-}
-.button_success-left {
-  width: 200px;
-  height: 43px;
-  flex-grow: 0;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 24px;
-  border-radius: 16px;
-  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
-  background-color: #ffb525;
-}
-.shareSection-Success {
-  height: 510px;
-  padding: 40px;
-  border-radius: 16px;
-  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
-  border: solid 1px #d7d9e3;
-  background-color: #fff;
-}
-.shareSection-Error {
-  height: 400px;
-  padding:10px;
-  border-radius: 16px;
-  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
-  border: solid 1px #d7d9e3;
-  background-color: #fff;
-}
-.MessageShareSection {
-  height: 513px;
-  padding: 14px 14px;
-  border-radius: 16px;
-  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
-  border: solid 1px #d7d9e3;
-  background-color: #fff;
-}
-
-.popup-tags {
-  font-size: large;
-  font-weight: bold;
-}
-.button_icon-left {
-  width: 184px;
-  height: 43px;
-  flex-grow: 0;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 24px;
-  border-radius: 16px;
-  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
-  background-color: #ffb525;
-}
-.button-text {
-  width: 85px;
-  height: 19px;
-  flex-grow: 0;
-  font-family: Inter;
-  font-size: 16px;
-  font-weight: 500;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: normal;
-  letter-spacing: normal;
-  text-align: center;
-}
-.button_icon-right {
-  width: 184px;
-  height: 43px;
-  flex-grow: 0;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 24px;
-  border-radius: 16px;
-  border-color: #000;
-  background-color: transparent;
-}
-.circle {
-  height: 55px;
-  width: 55px;
-  background-color: transparent;
-  border-radius: 50%;
-  border-style: solid;
-  border-color: #000;
-  border-width: 2px;
-}
-.Line-9, .Line-10 {
-  height: 1px;
-  flex-grow: 1;
-  background-color: rgba(140, 140, 140, 0.5);
-  max-width:23rem;
-  align-self: center;
-  align-content: center;
- 
-}
-
-.middle-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.middle-text {
-  margin: 25px 25px;
-}
-.google-button{
-  width: 260px;
-  height: 45px;
-  flex-grow: 0;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 24px;
-  border-radius: 4px;
-  background-color: #000000;
-  background: linear-gradient(to top, #000 , #666 );
-  
-  
-}
-.Account-popup{
-   
-    height: 713px;
-    padding: 10px;
-    border-radius: 16px;
-    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
-    border: solid 1px #d7d9e3;
-    background-color: #fff;
-    max-width: 1000px;
-  
-}
-.lightertxt{
-  color: #797979;
-}
-
-.filter {
-  height: 343px;
-  align-self: stretch;
-  flex-grow: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  padding: 32px;
-  border-radius: 32px;
-  box-shadow: inset 0 4px 10px 0 rgba(0, 0, 0, 0.15);
-  background-color: #f2f2f2;
-}
-.loginFilter {
-  height: 280px;
-  align-self: stretch;
-  flex-grow: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  padding: 32px;
-  border-radius: 32px;
-  box-shadow: inset 0 4px 10px 0 rgba(0, 0, 0, 0.15);
-  background-color: #f2f2f2;
-}
-.radioLabel {
-  width: 176px;
-  height: 19px;
-  flex-grow: 0;
-  font-family: Inter;
-  font-size: 16px;
-  font-weight: normal;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: normal;
-  letter-spacing: normal;
-  text-align: left;
-  color: #1b1b1b;
-}
-.goButton-text {
-  width: 78px;
-  height: 19px;
-  flex-grow: 0;
-  font-family: Inter;
-  font-size: 16px;
-  font-weight: 500;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: normal;
-  letter-spacing: normal;
-  text-align: center;
-  color: #1b1b1b;
-}
-.placeholders {
-  width: 232px;
-  height: 45px;
-  flex-grow: 0;
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 24px;
-  border-radius: 4px;
-  background-image: linear-gradient(to top, #000 100%, #666 0%);
-}
-.TagW.active {
-  height: 40px;
-  flex-grow: 1;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  gap: 6px;
-  padding: 0 24px;
-  border-radius: 16px;
-  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
-  background-image: linear-gradient(to top, #000 , #666);
-  color: white;
-}
-.Tag {
-  height: 40px;
-  flex-grow: 1;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  gap: 6px;
-  padding: 0 24px;
-  border-radius: 16px;
-  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
-background-image: linear-gradient(to top, rgba(255, 0, 0, 0), rgba(255,0,0,1));}
-.TagW {
-  height: 40px;
-  flex-grow: 1;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  gap: 6px;
-  padding: 0 24px;
-  border-radius: 16px;
-  border: solid 1px #000;
-  background-color: #fff;
-    color: #000;
-
-}
-/* */

package/src/components/SharePopup/PopUp.tsx

@@ -1,99 +0,0 @@
-import React, { useRef } from "react";
-import { toast } from "react-toastify";
-import email from "../../../assets/Images/envelope-fill.svg";
-import facebook from "../../../assets/Images/facebook.svg";
-import x from "../../../assets/Images/icon_close 2.png";
-import linkedln from "../../../assets/Images/linkedin.svg";
-import Xtwitter from "../../../assets/Images/twitter-x.svg";
-import whatsapp from "../../../assets/Images/whatsapp.svg";
-import "./PopUp.css";
-
-export default function PopUp({ onClick }) {
-  const handleClose = () => {
-    onClick();
-  };
-
-  const urlInputRef = useRef(null);
-
-  const copyToClipboard = () => {
-    urlInputRef.current.select();
-    document.execCommand("copy");
-    toast.success("URL copied to clipboard!");
-  };
-
-  return (
-    <div className="popup-overlay">
-      <div className="shareSection  col-12 d-flex position-relative flex-column mx-auto justify-content-center col-5 col-lg-6 d-flex gap-4">
-        <div className="end-0 top-0 position-absolute ">
-          <img
-            src={x}
-            alt="close"
-            className="closeIcon me-2"
-            onClick={handleClose}
-          />
-        </div>
-        <div className="popUpHeader col-lg-12 d-flex justify-content-center mb-2">
-          Jetzt teilen und weitersagen!
-        </div>
-        <div className="h-25 col-lg-12 socialMediaIconsSection d-flex flex-row align-items-center justify-content-center mx-auto">
-        
-        <a href="https://twitter.com/intent/tweet?url=https://www.nestiq.de&text=Nestiq" className="text-decoration-none" target="blank">
-          <div className=" flex-column d-flex align-items-center">
-            <img src={Xtwitter} alt="twitter" className="socialMediaIcons" />
-            <span className="socialMediaIconText" >Xtwitter</span>
-          </div>
-          </a>
-
-          <a href="https://www.facebook.com/sharer/sharer.php?u=https://www.nestiq.de" className="text-decoration-none" target="blank" >
-          <div className=" flex-column d-flex align-items-center">
-            <img src={facebook} alt="facebook" className="socialMediaIcons " />
-            <span className="socialMediaIconText">Facebook</span>
-          </div>
-          </a>
-
-          <a href="https://api.whatsapp.com/send?text=https://www.nestiq.de" target="blank" className="text-decoration-none">
-          <div className=" flex-column d-flex  align-items-center">
-            <img src={whatsapp} alt="whatsapp" className=" socialMediaIcons" />
-            <span className="socialMediaIconText">WhatsApp</span>
-          </div>
-          </a>
-          
-          <a href="https://www.linkedin.com/shareArticle?mini=true&url=https://www.nestiq.de" target="blank" className="text-decoration-none">
-          <div className=" flex-column d-flex  align-items-center">
-            <img src={linkedln} alt="linkedin" className=" socialMediaIcons" />
-            <span className="socialMediaIconText">LinkedIn</span>
-          </div>
-          </a>
-
-          <a href="https://www.nestiq.de" target="blank" className="text-decoration-none">
-          <div className=" flex-column d-flex  align-items-center">
-            <img src={email} alt="email" className=" socialMediaIcons" />
-            <span className="socialMediaIconText">E-mail</span>
-          </div>
-          </a>
-
-        </div>
-        <div className="col-10 mx-auto">
-          <div className=" row align-items-center position-relative">
-            <input
-              ref={urlInputRef}
-              type="text"
-              className="popup_search-input rounded-4 border border-0 "
-              placeholder="Enter link here"
-              value={window.location.href}
-              readOnly
-            />
-            <button
-              onClick={copyToClipboard}
-              className="popupcustom-button border border-0 position-absolute me-2 col-lg-3 col-md-3 col-sm-3 rounded-4 fs-6"
-              type="button"
-              id="button"
-            >
-              <strong>Kopieren</strong>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}