chore: a couple of changes

Bit Scocail release button and modal added, telemetry modal modified, Others page modified.
Bit-Apps-Pro · Oct 1, 2024 · 293d392 · 293d392
1 parent c28cd43
commit 293d392
Show file tree

Hide file tree

Showing 13 changed files with 664 additions and 409 deletions.
diff --git a/frontend/src/changeLogs.ts b/frontend/src/changeLogs.ts
@@ -1,14 +1,6 @@
 const changeLogs = {
-  improvements: [
-    'SMTP debug enable/disable option added.',
-    'UI modified.',
-    'Improves confirmation message.'
-  ],
-  fixed: [
-    'Namespace conflict issue fixed.',
-    'Illegal string offset (PHP Warning).',
-    'Some minor issue fixed.'
-  ]
+  improvements: ['SMTP debug enable/disable option added.', 'UI modified.'],
+  fixed: ['Namespace conflict issue fixed.', 'Some minor issue fixed.']
 }
 
 export default changeLogs
diff --git a/frontend/src/components/TelemetryPopup/TelemetryPopup.module.css b/frontend/src/components/TelemetryPopup/TelemetryPopup.module.css
@@ -46,6 +46,10 @@
   box-shadow: none;
 }
 
+.bitSocialReleaseBanner img {
+  height: 400px;
+}
+
 .improvements,
 .fixed {
   display: flex;
@@ -83,3 +87,29 @@
 .telemetryContent a:focus {
   box-shadow: none;
 }
+
+.footerBtn {
+  background-color: #fcfbff;
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+  height: 55px;
+  padding-top: 8px;
+  text-align: center;
+}
+
+.footerBtn a {
+  color: white;
+  font-weight: bold;
+  background-color: #5700fa;
+  padding: 12px 30px;
+  border-radius: 10px;
+  margin-bottom: 15px;
+}
+
+.footerBtn a:hover {
+  background-color: #500cce;
+}
+
+.footerBtn a:focus {
+  box-shadow: none;
+}
diff --git a/frontend/src/components/TelemetryPopup/TelemetryPopup.tsx b/frontend/src/components/TelemetryPopup/TelemetryPopup.tsx
@@ -4,7 +4,7 @@
 import type React from 'react'
 import { useState } from 'react'
 import request from '@common/helpers/request'
-import bitSocialBanner from '@resource/img/bit-social-release.png'
+import earlyBirdOffer from '@resource/img/earlyBirdOffer.webp'
 import { Modal as AntModal, Button, Popconfirm, Steps } from 'antd'
 import changeLogs from '../../changeLogs'
 import cls from './TelemetryPopup.module.css'
@@ -46,9 +46,22 @@ function TelemetryPopup({ isTelemetryModalOpen, setIsTelemetryModalOpen }: Telem
       title: '',
       content: (
         <div className={cls.bitSocialReleaseBanner}>
-          <a href="https://bit-social.com/" target="_blank" rel="noreferrer">
-            <img src={bitSocialBanner} alt="Bit Social Release Promotional Banner" width="100%" />
+          <a
+            href="https://bit-social.com/?utm_source=bit-smtp&utm_medium=inside-plugin&utm_campaign=early-bird-offer"
+            target="_blank"
+            rel="noreferrer"
+          >
+            <img src={earlyBirdOffer} alt="Bit Social Release Promotional Banner" width="100%" />
           </a>
+          <div className={cls.footerBtn}>
+            <a
+              href="https://bit-social.com/?utm_source=bit-smtp&utm_medium=inside-plugin&utm_campaign=early-bird-offer"
+              target="_blank"
+              rel="noreferrer"
+            >
+              {`Grab It Before It's Gone!`}
+            </a>
+          </div>
         </div>
       )
     },
@@ -72,39 +85,34 @@ function TelemetryPopup({ isTelemetryModalOpen, setIsTelemetryModalOpen }: Telem
               ))}
             </ul>
           </div>
-          {/* <Checkbox onChange={handleStepToggle}>Install Bit Form to create multi step form</Checkbox> */}
+          <div className={cls.telemetryContent}>
+            <h3>
+              <b>Build a better Bit SMTP</b>
+            </h3>
+            <span>
+              Accept and complete to share non-sensitive diagnostic data to help us improve your
+              experience.
+            </span>
+            <button type="button" onClick={() => setIsDataNoticeShow(true)}>
+              What we collect?
+            </button>
+            {isDataNoticeShow && (
+              <>
+                <br />
+                <span>
+                  Server details (PHP, MySQL, server, WordPress versions), plugin usage
+                  (active/inactive), site name and URL, your name and email. No sensitive data is
+                  tracked.{' '}
+                  <a href="https://bitapps.pro/terms-of-service/" target="_blank" rel="noreferrer">
+                    {' '}
+                    Terms & Conditions.
+                  </a>
+                </span>
+              </>
+            )}
+          </div>
         </>
       )
-    },
-    {
-      title: '',
-      content: (
-        <div className={cls.telemetryContent}>
-          <h3>
-            <b>Build a better Bit SMTP</b>
-          </h3>
-          <span>
-            Accept and complete to share non-sensitive diagnostic data to help us improve your
-            experience.
-          </span>
-          <button type="button" onClick={() => setIsDataNoticeShow(true)}>
-            What we collect?
-          </button>
-          {isDataNoticeShow && (
-            <>
-              <br />
-              <span>
-                Server details (PHP, MySQL, server, WordPress versions), plugin usage (active/inactive),
-                site name and URL, your name and email. No sensitive data is tracked.{' '}
-                <a href="https://bitapps.pro/terms-of-service/" target="_blank" rel="noreferrer">
-                  {' '}
-                  Terms & Conditions.
-                </a>
-              </span>
-            </>
-          )}
-        </div>
-      )
     }
   ]
 
@@ -114,7 +122,7 @@ function TelemetryPopup({ isTelemetryModalOpen, setIsTelemetryModalOpen }: Telem
   const footerBtnStyle: React.CSSProperties = {
     display: 'flex',
     justifyContent: 'space-between',
-    flexFlow: current !== 2 ? 'row-reverse' : 'initial',
+    flexFlow: current !== 1 ? 'row-reverse' : 'initial',
     marginTop: '30px'
   }
 
@@ -127,7 +135,7 @@ function TelemetryPopup({ isTelemetryModalOpen, setIsTelemetryModalOpen }: Telem
       }
       open={isTelemetryModalOpen}
       closable={false}
-      width="400px"
+      width="450px"
       centered
       className="telemetry-popup"
       footer={null}
@@ -141,7 +149,7 @@ function TelemetryPopup({ isTelemetryModalOpen, setIsTelemetryModalOpen }: Telem
               Next
             </Button>
           )}
-          {current === 2 && (
+          {current === 1 && (
             <Popconfirm
               title="Help Us Improve Your Experience"
               description={

diff --git a/frontend/src/pages/Layout/Layout.module.css b/frontend/src/pages/Layout/Layout.module.css
@@ -1,3 +1,4 @@
+/* stylelint-disable color-function-notation */
 .topbar {
   display: flex;
   justify-content: space-between;
@@ -76,3 +77,129 @@ input[type='password']:focus {
   border-radius: 10px;
   font-size: 12px;
 }
+
+.bitSocialMenu .btn {
+  position: relative;
+
+  --active: 0.15;
+
+  box-shadow: 0 0 calc(var(--active) * 6em) calc(var(--active) * 3em) hsl(30deg 97% 61% / 75%),
+    0 0.05em 0 0 hsl(30deg calc(var(--active) * 97%) calc((var(--active) * 50%) + 30%)) inset,
+    0 -0.05em 0 0 hsl(30deg calc(var(--active) * 97%) calc(var(--active) * 60%)) inset !important;
+}
+
+.bitSocialMenu button {
+  color: black;
+  font-weight: bold;
+  animation: scaleUpDown 1s ease-in-out infinite;
+  cursor: pointer;
+  margin-left: 200px;
+  background-color: orange;
+  padding: 8px 10px;
+  border-radius: 10px;
+  border: none;
+}
+
+/* stylelint-disable-next-line keyframes-name-pattern */
+@keyframes scaleUpDown {
+  0% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.1);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+.star {
+  position: absolute;
+  background-color: white;
+  clip-path: polygon(
+    50% 0%,
+    61% 35%,
+    98% 35%,
+    68% 57%,
+    79% 91%,
+    50% 70%,
+    21% 91%,
+    32% 57%,
+    2% 35%,
+    39% 35%
+  );
+  animation: twinkle 2s infinite;
+}
+
+.star:nth-child(1) {
+  top: -5px;
+  right: 0;
+  width: 24px;
+  height: 24px;
+  animation-delay: 0s;
+}
+
+.star:nth-child(2) {
+  bottom: -8px;
+  left: 12%;
+  width: 20px;
+  height: 20px;
+  animation-delay: 0.5s;
+}
+
+.star:nth-child(3) {
+  top: 60%;
+  left: 80%;
+  width: 16px;
+  height: 16px;
+  animation-delay: 1s;
+}
+
+.star:nth-child(4) {
+  top: -20%;
+  left: 0;
+  width: 16px;
+  height: 16px;
+  animation-delay: 1s;
+}
+
+@keyframes twinkle {
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1) rotate(0deg);
+  }
+
+  50% {
+    opacity: 0.5;
+    transform: scale(0.5) rotate(180deg);
+  }
+}
+
+.footerBtn {
+  background-color: #fcfbff;
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+  height: 55px;
+  padding-top: 8px;
+  text-align: center;
+}
+
+.footerBtn a {
+  color: white;
+  font-weight: bold;
+  background-color: #5700fa;
+  padding: 12px 30px;
+  border-radius: 10px;
+  margin-bottom: 15px;
+}
+
+.footerBtn a:hover {
+  background-color: #500cce;
+}
+
+.footerBtn a:focus {
+  box-shadow: none;
+}