From a008080900e06a1b7f163c62d699dc45c35ca2d7 Mon Sep 17 00:00:00 2001 From: ashik-75 Date: Wed, 27 Sep 2023 16:41:05 +0600 Subject: [PATCH] fix dashboard , popsearch and add privacy policy page --- .../components/General/PopupSearch/index.tsx | 25 +- ui/src/components/Layouts/Footer/index.tsx | 2 +- ui/src/index.css | 43 ++++ .../PrivacyPolicy/PrivacyPolicy.module.scss | 9 + ui/src/pages/Footer/PrivacyPolicy/index.tsx | 223 +++++++++++------- .../Footer/PrivacyPolicy/utils/constants.tsx | 118 +++++++++ .../pages/Footer/PrivacyPolicy/utils/types.ts | 11 + ui/src/pages/Home/Home.module.scss | 18 +- ui/src/pages/Home/components/Features.tsx | 21 +- ui/src/pages/Home/components/Hero.tsx | 23 +- .../Tools/Diffchecker/Diffchecker.module.scss | 4 + ui/src/pages/Tools/Diffchecker/index.tsx | 4 +- 12 files changed, 393 insertions(+), 108 deletions(-) create mode 100644 ui/src/pages/Footer/PrivacyPolicy/utils/constants.tsx create mode 100644 ui/src/pages/Footer/PrivacyPolicy/utils/types.ts diff --git a/ui/src/components/General/PopupSearch/index.tsx b/ui/src/components/General/PopupSearch/index.tsx index bd5b0ee1..e1c6b416 100644 --- a/ui/src/components/General/PopupSearch/index.tsx +++ b/ui/src/components/General/PopupSearch/index.tsx @@ -1,19 +1,23 @@ -import { Input, Modal } from "antd"; +import { Input, InputRef, Modal } from "antd"; import { MENU_ITEMS } from "components/Layouts/Menu/utils/constants"; -import React, { useState } from "react"; +import React, { useContext, useRef, useState } from "react"; import { useNavigate } from "react-router-dom"; import style from "./PopSearch.module.scss"; import Icon from "components/General/Icon"; import { IconName } from "components/General/Icon/utils/types"; import useCombinedKeyPress from "lib/utils/hooks/useCombinedKeyPress"; +import { classNames } from "lib/utils/helper"; +import { DarkModeContext } from "lib/utils/context/DarkModeProvider"; const { Search } = Input; const items = MENU_ITEMS.map((item) => item.children).flat(); const PopupSearch: React.FC = () => { const navigate = useNavigate(); + const { isDarkMode } = useContext(DarkModeContext); const [input, setInput] = useState(""); const [isModalOpen, setIsModalOpen] = useState(false); + const searchInputRef = useRef(null); const handleCancel = () => { setIsModalOpen(false); @@ -24,6 +28,12 @@ const PopupSearch: React.FC = () => { setIsModalOpen(false); }; + const handleAfterOpen = () => { + if (searchInputRef.current) { + searchInputRef.current.focus(); + } + }; + useCombinedKeyPress( () => setIsModalOpen((open) => !open), ["ControlLeft", "KeyK"] @@ -35,14 +45,23 @@ const PopupSearch: React.FC = () => { title="Features" open={isModalOpen} footer={[]} + afterOpenChange={handleAfterOpen} + className={isDarkMode ? "dark" : "light"} > setInput(e.target.value)} + ref={searchInputRef} allowClear + autoFocus /> -
+
{items .filter((item) => item.name.toLowerCase().includes(input.toLowerCase()) diff --git a/ui/src/components/Layouts/Footer/index.tsx b/ui/src/components/Layouts/Footer/index.tsx index 01652a80..76de1291 100644 --- a/ui/src/components/Layouts/Footer/index.tsx +++ b/ui/src/components/Layouts/Footer/index.tsx @@ -120,7 +120,7 @@ const Footer: React.FC = () => {
  • - + Privacy
    • diff --git a/ui/src/index.css b/ui/src/index.css index 7cacb4f4..e3017f04 100644 --- a/ui/src/index.css +++ b/ui/src/index.css @@ -59,6 +59,7 @@ h5 { .ant-layout-content, .notification-container, +.search_container, .ant-menu { &::-webkit-scrollbar { width: var(--bt-size-8); @@ -139,3 +140,45 @@ a:hover { .ant-typography p { margin-bottom: 0px !important; } + +/* modal dark mode */ +.dark .ant-modal-content { + background-color: #383737 !important; + color: white; +} + +.dark .ant-modal-content .ant-modal-header { + background-color: transparent !important; +} + +.dark .ant-modal-content .ant-modal-header .ant-modal-title { + color: white; +} + +.dark .search_container div:hover { + background-color: #817f7f !important; +} + +.dark .ant-input-affix-wrapper { + background-color: transparent !important; + border-color: #afadad !important; +} + +.dark .ant-input-affix-wrapper .ant-input { + background-color: transparent !important; + color: white !important; +} + +.dark .ant-input-affix-wrapper .ant-input::placeholder { + color: rgb(143, 143, 143) !important; +} + +.dark .ant-input-search-button { + background-color: transparent; + color: white !important; +} + +.dark .anticon svg { + color: white !important; +} +/* end modal dark mode */ diff --git a/ui/src/pages/Footer/PrivacyPolicy/PrivacyPolicy.module.scss b/ui/src/pages/Footer/PrivacyPolicy/PrivacyPolicy.module.scss index d923e594..09f1eed1 100644 --- a/ui/src/pages/Footer/PrivacyPolicy/PrivacyPolicy.module.scss +++ b/ui/src/pages/Footer/PrivacyPolicy/PrivacyPolicy.module.scss @@ -15,4 +15,13 @@ padding: 10%; margin-bottom: 64px; } + + &_activity_list { + list-style-type: circle; + color: red; + } + + &_underline { + text-decoration: underline; + } } diff --git a/ui/src/pages/Footer/PrivacyPolicy/index.tsx b/ui/src/pages/Footer/PrivacyPolicy/index.tsx index 92df874d..ef0a4960 100644 --- a/ui/src/pages/Footer/PrivacyPolicy/index.tsx +++ b/ui/src/pages/Footer/PrivacyPolicy/index.tsx @@ -1,6 +1,12 @@ -import { Space, Typography } from "antd"; +import { Space, Table, Typography } from "antd"; import Footer from "components/Layouts/Footer"; import style from "./PrivacyPolicy.module.scss"; +import { + ACTIVITY_COLUMNS, + ACTIVITY_DATA, + PURPOSE_COLUMNS, + PURPOSE_DATA, +} from "./utils/constants"; const PrivacyPolicy = () => { return ( @@ -17,11 +23,13 @@ const PrivacyPolicy = () => { This Privacy Policy informs how BinaryTree (hereinafter also –” Controller”,” Owner”,” we”, “us” or “our”) processes - information and personal data on the website - https://www.binarytree.dev as well as any other media form, - media channel, mobile website or mobile application related, - linked, or otherwise connected thereto (hereinafter – - Platform). + information and personal data on the website{" "} + + https://www.binarytree.dev + {" "} + as well as any other media form, media channel, mobile + website or mobile application related, linked, or otherwise + connected thereto (hereinafter – Platform). We strive to protect all personal information that we @@ -43,7 +51,9 @@ const PrivacyPolicy = () => { use this Platform or any of our other services and do not share any personal information with us. - Data Controller: BinaryTree + + Data Controller: BinaryTree + Contact information: e-mail address: hello@binarytree.dev @@ -116,7 +126,7 @@ const PrivacyPolicy = () => { information.{" "} - 3.1 Contacting us
    + Contacting us
    If you contact us in relation to any of the Services (via email, telephone, post or otherwise), We may collect and retain your contact details and your communication for the @@ -124,7 +134,7 @@ const PrivacyPolicy = () => { communications.     - 3.2 Other Means of Collection.We collect personal + Other Means of Collection.We collect personal information by a variety of means and methods, including the following:
      @@ -177,7 +187,9 @@ const PrivacyPolicy = () => { are uncertain about which Personal Data is mandatory are welcome to contact the Owner. - Generally, we collect the following data: + + Generally, we collect the following data: +

        @@ -212,10 +224,19 @@ const PrivacyPolicy = () => {


      - We collect the following categories of Personal data for the - following activities: + + We collect the following categories of Personal data for the + following activities: +

      + 5. PURPOSE OF DATA COLLECTION @@ -229,69 +250,101 @@ const PrivacyPolicy = () => {
      • - To provide and maintain our Service, including to - monitor the usage of our Service. + + To provide and maintain our Service, + {" "} + including to monitor the usage of our Service.
      • - To manage your Account: to manage your registration of - the Service. The Personal Data you provide can give you - access to different functionalities of the Service that - are available to you. + + To manage your Account: + {" "} + to manage your registration of the Service. The Personal + Data you provide can give you access to different + functionalities of the Service that are available to + you.
      • - For the performance of a contract: the development, - compliance and undertaking of the contract for the - services or of any other contract with us through the - Service. + + For the performance of a contract: + {" "} + the development, compliance and undertaking of the + contract for the services or of any other contract with + us through the Service.
      • - To contact you: To contact you by email, telephone - calls, SMS, or other equivalent forms of electronic - communication. + + To contact you: + {" "} + To contact you by email, telephone calls, SMS, or other + equivalent forms of electronic communication.
      • - To manage your requests: To attend and manage your - requests to us. + + To manage your requests: + {" "} + To attend and manage your requests to us.
      • - To respond to your requests and questions, resolve - disputes, investigate and address your concerns, and - monitor and improve our responses; + + To respond to your requests and questions, + {" "} + resolve disputes, investigate and address your concerns, + and monitor and improve our responses;
      • - To help maintain the safety, security, and integrity of - our Platform, databases, and technology assets and to - detect and prevent transactional fraud; + + To help maintain the safety, security, and integrity + of our Platform, + {" "} + databases, and technology assets and to detect and + prevent transactional fraud;
      • - For testing, research, analysis, and a product and - service development, including to improve our Platform - and services; + + For testing, research, analysis, and a product and + service development, + {" "} + including to improve our Platform and services;
        • -
      • +
      • For facilitating and processing your transactions with us and with our third party affiliates and business partners;
      • - To respond to law enforcement requests and as required - by applicable laws, court orders, or governmental - regulations; + + To respond to law enforcement requests and as + required by applicable laws, + + court orders, or governmental regulations;
      • - For other purposes: We may use Your information for - other purposes, such as data analysis, identifying usage - trends, determining the effectiveness of our promotional - campaigns and to evaluate and improve our Service, - marketing and your experience. + + For other purposes: + {" "} + We may use Your information for other purposes, such as + data analysis, identifying usage trends, determining the + effectiveness of our promotional campaigns and to + evaluate and improve our Service, marketing and your + experience.


      - We process personal data on the following legal basis for the - following purposes: + + We process personal data on the following legal basis for + the following purposes: +

      +
      6. METHODS OF DATA PROCESSING @@ -322,8 +375,8 @@ const PrivacyPolicy = () => { transferring the User's Data to a country other than their own. If any such transfer takes place, Users can find out more by checking the relevant sections of this document or - inquire with BinaryTree using the information provided in - the contact section. + inquire with BinaryTree using the information + provided in the contact section. We may share your personal data with following recipients:
        @@ -337,26 +390,27 @@ const PrivacyPolicy = () => { the protection of your right to privacy.{" "}
      • - Processors – in order to provide the Services, - BinaryTree may communicate your Personal data to other - entities acting as data processors.{" "} + Processors – in order to provide the Services,{" "} + BinaryTree may communicate your Personal data to + other entities acting as data processors.{" "}
      • Partners and third parties – in order to provide - the Services, BinaryTree may communicate your Personal - data to third party service providers.{" "} + the Services, BinaryTree may communicate your + Personal data to third party service providers.{" "}
      • Judicial, administrative and other public authorities - - – BinaryTree may have to share or disclose some of your - Personal data if it is required to do so by the law, by - a request meaning from a competent authority., to comply - with a court order, to obtain legal remedies or defend - BinaryTree’s rights, to contribute with investigations - (e.g. fraud, identity theft, etc.).{" "} + {" "} + - BinaryTree may have to share or disclose some + of your Personal data if it is required to do so by the + law, by a request meaning from a competent authority., + to comply with a court order, to obtain legal remedies + or defend + BinaryTree’s rights, to contribute with + investigations (e.g. fraud, identity theft, etc.).{" "}
      8. RETENTION TIME @@ -383,18 +437,22 @@ const PrivacyPolicy = () => {

      - BinaryTree may be allowed to retain Personal Data for a - longer period whenever the User has given consent to such - processing, as long as such consent is not withdrawn. - Furthermore, the Owner may be obliged to retain Personal Data - for a longer period whenever required to do so for the - performance of a legal obligation or upon order of an authority. -
      -
      - Once the retention period expires, Personal Data shall be - deleted. Therefore, the right of access, the right to erasure, - the right to rectification and the right to data portability - cannot be enforced after expiration of the retention period. + + BinaryTree may be allowed to retain Personal Data for + a longer period whenever the User has given consent to such + processing, as long as such consent is not withdrawn. + Furthermore, the Owner may be obliged to retain Personal + Data for a longer period whenever required to do so for the + performance of a legal obligation or upon order of an + authority. +
      +
      + Once the retention period expires, Personal Data shall be + deleted. Therefore, the right of access, the right to + erasure, the right to rectification and the right to data + portability cannot be enforced after expiration of the + retention period. +       9. ADDITIONAL INFORMATION ABOUT DATA COLLECTION AND PROCESSING @@ -402,7 +460,7 @@ const PrivacyPolicy = () => { Legal action The User's Personal Data may be used for legal purposes by - BinaryTree in Court or in the stages leading to + BinaryTree in Court or in the stages leading to possible legal action arising from improper use of this Platform or the related Services. @@ -416,9 +474,9 @@ const PrivacyPolicy = () => { Information not contained in this policy More details concerning the collection or processing of - Personal Data may be requested from BinaryTree at any time. - Please see the contact information at the beginning of this - document. + Personal Data may be requested from BinaryTree at any + time. Please see the contact information at the beginning of + this document. Visiting Third-Party Platforms @@ -444,16 +502,19 @@ const PrivacyPolicy = () => { privacy policy at any time by notifying its Users on this page and possibly within this Platform and/or - as far as technically and legally feasible - sending a notice to Users - via any contact information available to BinaryTree. It is - strongly recommended to check this page often, referring to - the date of the last modification listed at the bottom. + via any contact information available to BinaryTree. + It is strongly recommended to check this page often, + referring to the date of the last modification listed at the + bottom. Should the changes affect processing activities performed on the basis of the User’s consent, BinaryTree shall collect new consent from the User, where required. - Latest update: September 23, 2023 + + Latest update: September 23, 2023 +
      diff --git a/ui/src/pages/Footer/PrivacyPolicy/utils/constants.tsx b/ui/src/pages/Footer/PrivacyPolicy/utils/constants.tsx new file mode 100644 index 00000000..11f53dff --- /dev/null +++ b/ui/src/pages/Footer/PrivacyPolicy/utils/constants.tsx @@ -0,0 +1,118 @@ +import { ColumnsType } from "antd/es/table"; +import { ActivityTableDataType, PurposeTableDataType } from "./types"; + +const PURPOSE_COLUMNS: ColumnsType = [ + { + title: "Purpose", + dataIndex: "purpose", + key: "purpose", + }, + { + title: "Legal basis", + dataIndex: "legal", + key: "legal", + }, +]; + +const PURPOSE_DATA = [ + { + id: "1", + purpose: "Offering communication between BinaryTree and the visitor.", + legal: `Legitimate interest of BinaryTree to offer visitors an efficient way to communicate with its teams.`, + }, + { + id: "2", + purpose: + "Responding to the User/visitor’s request for information related to the Services offered by BinaryTree or request for assistance", + legal: `Legitimate interest of BinaryTree to offer its visitors a mean to contact support teams. + Contract with User (i.e. specific Terms of Service).`, + }, + { + id: "3", + purpose: + "Manage the request(s) of the Users related to their data protection rights", + legal: `Legal obligation of BinaryTree`, + }, + { + id: "4", + purpose: "Enhance and improve the Services and Platform", + legal: `Legitimate interests of BinaryTree to offer optimized Services.`, + }, + { + id: "5", + purpose: + "Justify and demonstrate BinaryTree’s compliance with legal obligations in case of legal request and/or legal proceedings", + legal: `Legitimate interest of BinaryTree to be able to demonstrate its compliance.`, + }, + { + id: "6", + purpose: "Allow access to Services as provided on the Platform", + legal: `Contract (Terms of Service).`, + }, +]; + +const ACTIVITY_COLUMNS: ColumnsType = [ + { + title: "Activity", + dataIndex: "activity", + key: "activity", + }, + { + title: "Categories of Personal data", + dataIndex: "categories", + key: "categories", + render: (categories: string[]) => ( +
        + {categories.map((cat) => ( +
      • {cat}
        • + ))} +
      + ), + }, +]; + +const ACTIVITY_DATA = [ + { + id: "1", + activity: "Visiting the Platform", + categories: ["Browsing data"], + }, + { + id: "2", + activity: "Contacting BinaryTree support teams", + categories: [ + "Identification data", + "Contact data.", + "Content of your request", + ], + }, + { + id: "3", + activity: + "Allowing the visitors and Users to exercise their data protection rights", + categories: [ + "Identification data", + "Contact data.", + "Content of your request", + "Data necessary to reply to the request addressed to BinaryTree", + ], + }, + { + id: "4", + activity: "Complying with legal requests or manage litigation", + categories: [ + "Identification data", + "Contact data.", + "Content of your request", + ], + }, + { + id: "5", + activity: "Complying with legal requests or manage litigation", + categories: [ + "Data necessary to prove BinaryTree’s compliance to its obligations and/or manage legal proceedings", + ], + }, +]; + +export { PURPOSE_COLUMNS, PURPOSE_DATA, ACTIVITY_DATA, ACTIVITY_COLUMNS }; diff --git a/ui/src/pages/Footer/PrivacyPolicy/utils/types.ts b/ui/src/pages/Footer/PrivacyPolicy/utils/types.ts new file mode 100644 index 00000000..062475ce --- /dev/null +++ b/ui/src/pages/Footer/PrivacyPolicy/utils/types.ts @@ -0,0 +1,11 @@ +interface PurposeTableDataType { + purpose: string; + legal: string; +} + +interface ActivityTableDataType { + activity: string; + categories: string[]; +} + +export type { PurposeTableDataType, ActivityTableDataType }; diff --git a/ui/src/pages/Home/Home.module.scss b/ui/src/pages/Home/Home.module.scss index f2665a5f..5a840bbc 100644 --- a/ui/src/pages/Home/Home.module.scss +++ b/ui/src/pages/Home/Home.module.scss @@ -15,16 +15,32 @@ gap: 100px; &_text { display: flex; + flex: 2; flex-direction: column; - align-items: center; justify-content: center; text-align: center; + gap: var(--bt-size-10); + &_title { + text-align: left; + } + &_paragraph { + text-align: left; + max-width: 700px; + } + } + + &_image { + flex: 1; } } &__features { display: flex; align-items: center; + + &_card { + height: 100%; + } } &__contribution { diff --git a/ui/src/pages/Home/components/Features.tsx b/ui/src/pages/Home/components/Features.tsx index 2da11a55..013c8d1c 100644 --- a/ui/src/pages/Home/components/Features.tsx +++ b/ui/src/pages/Home/components/Features.tsx @@ -28,19 +28,22 @@ const Features: React.FC = () => {
      {FEATURES.map((feature) => ( - + navigate(feature.link)} hoverable + className={style.home__features_card} > - - - - {feature.title} - - - {feature.description} - + + + + + {feature.title} + + + {feature.description} + + diff --git a/ui/src/pages/Home/components/Hero.tsx b/ui/src/pages/Home/components/Hero.tsx index 4eb12f1c..d64a4b85 100644 --- a/ui/src/pages/Home/components/Hero.tsx +++ b/ui/src/pages/Home/components/Hero.tsx @@ -8,9 +8,11 @@ const Hero: React.FC = () => { return (
      - Your Mate in Software Development + + Your Mate in Software Development + At binarytree.dev, we provide an array of developer productivity tools designed to help you save time. With an{" "} @@ -24,15 +26,14 @@ const Hero: React.FC = () => { constantly evolving to meet the needs of developers like you
      - + +
      + +
      ); }; diff --git a/ui/src/pages/Tools/Diffchecker/Diffchecker.module.scss b/ui/src/pages/Tools/Diffchecker/Diffchecker.module.scss index 35ed64fd..26534db8 100644 --- a/ui/src/pages/Tools/Diffchecker/Diffchecker.module.scss +++ b/ui/src/pages/Tools/Diffchecker/Diffchecker.module.scss @@ -4,4 +4,8 @@ justify-content: center; padding: var(--bt-size-20) 0; } + + &_output { + overflow: auto; + } } diff --git a/ui/src/pages/Tools/Diffchecker/index.tsx b/ui/src/pages/Tools/Diffchecker/index.tsx index 5c3ce4a1..c20e5263 100644 --- a/ui/src/pages/Tools/Diffchecker/index.tsx +++ b/ui/src/pages/Tools/Diffchecker/index.tsx @@ -56,7 +56,7 @@ const Diffchecker: React.FC = () => { {lineDifferences.length > 0 && ( -
      + 
       								{lineDifferences
 									.filter((part) => !part.added)
@@ -79,7 +79,7 @@ const Diffchecker: React.FC = () => {
 
 				{lineDifferences.length > 0 && (
 					
-						
      
+						
      
 							
       								{lineDifferences
 									.filter((part) => !part.removed)