open-metadata · ShaileshParmar11 · Nov 16, 2023 · Nov 16, 2023 · Nov 16, 2023 · Nov 16, 2023
@@ -17,9 +17,10 @@ import { CookieStorage } from 'cookie-storage';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link, useLocation } from 'react-router-dom';
+import { ReactComponent as CloseIcon } from '../../assets/svg/close.svg';
 import { ReactComponent as StarGithubIcon } from '../../assets/svg/ic-star-github.svg';
 import { ReactComponent as StarIcon } from '../../assets/svg/ic-start-filled-github.svg';
-import { ROUTES, STAR_OMD_USER } from '../../constants/constants';
+import { BLACK_COLOR, ROUTES, STAR_OMD_USER } from '../../constants/constants';
 import { OMD_REPOSITORY_LINK } from '../../constants/docs.constants';
 import { getRepositoryData } from '../../rest/commonAPI';
 import { getReleaseVersionExpiry } from '../../utils/WhatsNewModal.util';
@@ -88,6 +89,10 @@ const GithubStarCard = () => {
     ]
   );
 
+  const handleCancel = useCallback(() => {
+    setShowGithubStarPopup(false);
+  }, []);
+
   useEffect(() => {
     updateGithubPopup(!usernameExistsInCookie);
 
@@ -104,12 +109,21 @@ const GithubStarCard = () => {
       }
       `}>
       <Card data-testid="github-star-popup-card">
-        <Space>
-          <StarIcon className="github-star-icon" />
-
-          <Typography.Text className="github-star-popup-header">
-            {t('label.star-us-on-github')}
-          </Typography.Text>
+        <Space align="center" className="d-flex justify-between">
+          <Space>
+            <StarIcon className="github-star-icon" />
+
+            <Typography.Text className="github-star-popup-header">
+              {t('label.star-us-on-github')}
+            </Typography.Text>
+          </Space>
+          <Button
+            className="flex-center m--t-xss"
+            data-testid="close-whats-new-alert"
+            icon={<CloseIcon color={BLACK_COLOR} height={12} width={12} />}
+            type="text"
+            onClick={handleCancel}
+          />
         </Space>
 
         <Typography.Paragraph className="github-star-popup-description">

@@ -15,7 +15,6 @@
 
 .github-star-popup-card {
   border: none;
-  text-align: center;
   position: fixed;
   right: 30px;
   bottom: -100%;
@@ -24,10 +23,15 @@
 
   .ant-card {
     position: relative;
-    width: 342px;
+    width: 338px;
     overflow: hidden;
     border-radius: 14px;
-    box-shadow: @box-shadow-base;
+    box-shadow: 0 0 20px rgba(117, 117, 117, 0.3);
+    border: 1px solid @primary-color;
+
+    .ant-card-body {
+      padding: 26px;
+    }
   }
 
   .github-star-icon {
@@ -38,14 +42,14 @@
 
   .github-star-popup-header {
     color: @primary-color;
-    font-size: 20px;
-    font-weight: 500;
+    font-size: 16px;
+    font-weight: 600;
   }
 
   .github-star-popup-description {
     margin-top: 10px;
-    color: @text-grey-muted;
-    font-size: 14px;
+    color: @text-color;
+    font-size: 12px;
     font-weight: 400;
   }
 
@@ -90,7 +94,7 @@
 
 @keyframes scrollInWithAlert {
   to {
-    bottom: 200px;
+    bottom: 160px;
   }
 }
 

@@ -14,14 +14,12 @@ import { Affix, Button, Card, Col, Row, Space, Typography } from 'antd';
 import { CookieStorage } from 'cookie-storage';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link, useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import UpdateLoaderGif from '../../../../assets/gif/whats-new-loader.gif';
 import { ReactComponent as CloseIcon } from '../../../../assets/svg/close.svg';
 import { ReactComponent as RightArrowIcon } from '../../../../assets/svg/ic-arrow-right-full.svg';
 import { ReactComponent as PlayIcon } from '../../../../assets/svg/ic-play-button.svg';
-import { ReactComponent as StarIcon } from '../../../../assets/svg/ic-star.svg';
 import { BLACK_COLOR, ROUTES } from '../../../../constants/constants';
-import { OMD_REPOSITORY_LINK } from '../../../../constants/docs.constants';
 import { useAuth } from '../../../../hooks/authHooks';
 import { getReleaseVersionExpiry } from '../../../../utils/WhatsNewModal.util';
 import { COOKIE_VERSION, LATEST_VERSION_ID, WHATS_NEW } from '../whatsNewData';
@@ -113,25 +111,6 @@ const WhatsNewAlert = () => {
                   <RightArrowIcon className="whats-new-alert-content-icon-arrow" />
                 </Space>
               </Col>
-
-              <Col className="whats-new-alert-content" span={24}>
-                <Space align="center" size={12}>
-                  <div className="whats-new-alert-content-icon-container">
-                    <StarIcon className="whats-new-alert-content-icon" />
-                  </div>
-                  <Link
-                    className="whats-new-alert-sub-header"
-                    component={Typography.Link}
-                    target="_blank"
-                    to={{
-                      pathname: OMD_REPOSITORY_LINK,
-                    }}>
-                    {t('label.star-open-metadata')}
-                  </Link>
-
-                  <RightArrowIcon className="whats-new-alert-content-icon-arrow" />
-                </Space>
-              </Col>
             </Row>
 
             <div className="update-icon-container">

@@ -75,7 +75,7 @@
 
   .whats-new-alert-content {
     .whats-new-alert-sub-header {
-      color: @black;
+      color: @text-color;
       font-weight: 500;
       font-size: 12px;
     }
@@ -120,7 +120,7 @@
     position: absolute;
     bottom: 0;
     right: 0;
-    transform: translate(35%, 45%) scaleX(-1);
+    transform: translate(35%, 55%) scaleX(-1);
     opacity: 0.1;
 
     .update-icon {

@@ -1562,7 +1562,7 @@
     "sql-query-tooltip": "Abfragen, die eine oder mehrere Zeilen zurückgeben, führen dazu, dass der Test fehlschlägt.",
     "sso-provider-not-supported": "SSO-Provider {{provider}} wird nicht unterstützt.",
     "stage-file-location-message": "Temporärer Dateiname zum Speichern der Abfrageprotokolle vor der Verarbeitung. Es wird ein absoluter Dateipfad benötigt.",
-    "star-on-github-description": "Spread the word to help data enthusiasts discover OpenMetadata. Show your support by contributing to the open-source project with Stars!",
+    "star-on-github-description": "Contribute with Stars to help data enthusiasts discover OpenMetadata!",
     "still-running-into-issue": "Wenn Sie immer noch auf Probleme stoßen, kontaktieren Sie uns bitte über Slack.",
     "success-status-for-entity-deploy": "<0>{{entity}}</0> wurde {{entityStatus}} und erfolgreich bereitgestellt",
     "successfully-completed-the-tour": "Sie haben die Tour erfolgreich abgeschlossen.",

@@ -1562,7 +1562,7 @@
     "sql-query-tooltip": "Queries returning one or more rows will result in the test failing.",
     "sso-provider-not-supported": "SSO Provider {{provider}} is not supported.",
     "stage-file-location-message": "Temporary file name to store the query logs before processing. Absolute file path required.",
-    "star-on-github-description": "Spread the word to help data enthusiasts discover OpenMetadata. Show your support by contributing to the open-source project with Stars!",
+    "star-on-github-description": "Contribute with Stars to help data enthusiasts discover OpenMetadata!",
     "still-running-into-issue": "If you are still running into issues, please reach out to us on slack.",
     "success-status-for-entity-deploy": "<0>{{entity}}</0>  has been {{entityStatus}} and deployed successfully",
     "successfully-completed-the-tour": "You’ve successfully completed the tour.",

@@ -1562,7 +1562,7 @@
     "sql-query-tooltip": "Las consultas que devuelvan una o varias filas provocarán el fallo del test.",
     "sso-provider-not-supported": "No se admite el proveedor SSO {{provider}}.",
     "stage-file-location-message": "Nombre de archivo temporal para almacenar los registros de consulta antes del procesamiento. Se requiere una ruta de archivo absoluta.",
-    "star-on-github-description": "Spread the word to help data enthusiasts discover OpenMetadata. Show your support by contributing to the open-source project with Stars!",
+    "star-on-github-description": "Contribute with Stars to help data enthusiasts discover OpenMetadata!",
     "still-running-into-issue": "Si todavía tienes problemas, contáctanos en Slack.",
     "success-status-for-entity-deploy": "<0>{{entity}}</0> se ha {{entityStatus}} y desplegado con éxito",
     "successfully-completed-the-tour": "Has completado el recorrido con éxito.",

@@ -1562,7 +1562,7 @@
     "sql-query-tooltip": "Requête avec 1 ligne ou plus entraînera l'échec du test.",
     "sso-provider-not-supported": "Le fournisseur SSO {{provider}} n’est pas pris en charge.",
     "stage-file-location-message": "Nom du fichier temporaire pour stocker les journaux de requête avant le traitement. Chemin de fichier absolu requis.",
-    "star-on-github-description": "Spread the word to help data enthusiasts discover OpenMetadata. Show your support by contributing to the open-source project with Stars!",
+    "star-on-github-description": "Contribute with Stars to help data enthusiasts discover OpenMetadata!",
     "still-running-into-issue": "Si vous rencontrez toujours des problèmes, veuillez nous contacter sur slack.",
     "success-status-for-entity-deploy": "<0>{{entity}}</0> a été {{entityStatus}} et déployé avec succès",
     "successfully-completed-the-tour": "Vous avez fini la visite avec succès.",

@@ -1562,7 +1562,7 @@
     "sql-query-tooltip": "Queries returning one or more rows will result in the test failing.",
     "sso-provider-not-supported": "SSO Provider {{provider}} is not supported.",
     "stage-file-location-message": "処理前のクエリログを保存するための一時ファイルの名前です。絶対パスである必要があります。",
-    "star-on-github-description": "Spread the word to help data enthusiasts discover OpenMetadata. Show your support by contributing to the open-source project with Stars!",
+    "star-on-github-description": "Contribute with Stars to help data enthusiasts discover OpenMetadata!",
     "still-running-into-issue": "まだ問題が発生している場合は, Slackでご連絡ください。",
     "success-status-for-entity-deploy": "<0>{{entity}}</0>  has been {{entityStatus}} and deployed successfully",
     "successfully-completed-the-tour": "あなたは無事ツアーを終了しました。",

@@ -1562,7 +1562,7 @@
     "sql-query-tooltip": "Consultas que retornam uma ou mais linhas resultarão na falha do teste.",
     "sso-provider-not-supported": "O provedor SSO {{provider}} não é suportado.",
     "stage-file-location-message": "Nome do arquivo temporário para armazenar os logs de consulta antes do processamento. É necessário um caminho absoluto para o arquivo.",
-    "star-on-github-description": "Spread the word to help data enthusiasts discover OpenMetadata. Show your support by contributing to the open-source project with Stars!",
+    "star-on-github-description": "Contribute with Stars to help data enthusiasts discover OpenMetadata!",
     "still-running-into-issue": "Se você ainda estiver enfrentando problemas, entre em contato conosco no Slack.",
     "success-status-for-entity-deploy": "<0>{{entity}}</0> foi {{entityStatus}} e implantado com sucesso",
     "successfully-completed-the-tour": "Você concluiu o tour com sucesso.",

@@ -1562,7 +1562,7 @@
     "sql-query-tooltip": "Запросы, возвращающие одну или несколько строк, приведут к сбою теста.",
     "sso-provider-not-supported": "Поставщик единого входа {{provider}} не поддерживается.",
     "stage-file-location-message": "Имя временного файла для хранения журналов запросов перед обработкой. Требуется абсолютный путь к файлу.",
-    "star-on-github-description": "Spread the word to help data enthusiasts discover OpenMetadata. Show your support by contributing to the open-source project with Stars!",
+    "star-on-github-description": "Contribute with Stars to help data enthusiasts discover OpenMetadata!",
     "still-running-into-issue": "Если у вас по-прежнему возникают проблемы, свяжитесь с нами в Slack.",
     "success-status-for-entity-deploy": "<0>{{entity}}</0> был {{entityStatus}} и успешно развернут",
     "successfully-completed-the-tour": "Вы успешно завершили экскурсию.",

@@ -1562,7 +1562,7 @@
     "sql-query-tooltip": "返回一行或多行的查询将导致测试失败",
     "sso-provider-not-supported": "不支持 SSO 提供程序{{provider}}",
     "stage-file-location-message": "临时文件名用于存储处理前的查询日志，需要使用绝对文件路径",
-    "star-on-github-description": "Spread the word to help data enthusiasts discover OpenMetadata. Show your support by contributing to the open-source project with Stars!",
+    "star-on-github-description": "Contribute with Stars to help data enthusiasts discover OpenMetadata!",
     "still-running-into-issue": "如果您仍然遇到问题，请在 slack 上与我们联系",
     "success-status-for-entity-deploy": "<0>{{entity}}</0>已{{entityStatus}}并成功部署",
     "successfully-completed-the-tour": "您已成功完成导览",