From e03896820dfe6d753e0e62245cc200eda4c3f078 Mon Sep 17 00:00:00 2001 From: nataly Date: Tue, 2 Aug 2022 11:15:07 -0400 Subject: [PATCH 1/2] Fixes button and icons on billing page. Updates credits icon in sidebar. --- .../src/components/icons/CreditsIcon.tsx | 20 +++++++++++++++++++ airbyte-webapp/src/locales/en.json | 2 +- .../components/RemainingCredits.tsx | 10 +--------- .../cloud/views/layout/SideBar/SideBar.tsx | 9 ++------- 4 files changed, 24 insertions(+), 17 deletions(-) create mode 100644 airbyte-webapp/src/components/icons/CreditsIcon.tsx diff --git a/airbyte-webapp/src/components/icons/CreditsIcon.tsx b/airbyte-webapp/src/components/icons/CreditsIcon.tsx new file mode 100644 index 000000000000..85bdbba52e39 --- /dev/null +++ b/airbyte-webapp/src/components/icons/CreditsIcon.tsx @@ -0,0 +1,20 @@ +import { theme } from "theme"; + +interface Props { + color?: string; +} + +export const CreditsIcon = ({ color = theme.greyColor20 }: Props) => ( + + + + +); diff --git a/airbyte-webapp/src/locales/en.json b/airbyte-webapp/src/locales/en.json index 93c417d86ee2..8dd406f155e2 100644 --- a/airbyte-webapp/src/locales/en.json +++ b/airbyte-webapp/src/locales/en.json @@ -488,7 +488,7 @@ "credits.credits": "Credits", "credits.whatAreCredits": "What are credits?", - "credits.buyCredits": "Buy credits", + "credits.buyCredits": "+ Buy credits", "credits.talkToSales": "Talk to Sales", "credits.remainingCredits": "Remaining credits", "credits.creditUsage": "Credit Usage", diff --git a/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/RemainingCredits.tsx b/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/RemainingCredits.tsx index d9bec676f7c4..eb5777c38d4f 100644 --- a/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/RemainingCredits.tsx +++ b/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/RemainingCredits.tsx @@ -1,5 +1,3 @@ -import { faStar } from "@fortawesome/free-regular-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import React, { useEffect, useRef, useState } from "react"; import { FormattedMessage, FormattedNumber } from "react-intl"; import { useSearchParams } from "react-router-dom"; @@ -40,10 +38,6 @@ const Count = styled.div` font-size: 24px; line-height: 29px; `; -const StarIcon = styled(FontAwesomeIcon)` - margin-right: 6px; - font-size: 22px; -`; const Actions = styled.div` display: flex; gap: 12px; @@ -116,21 +110,19 @@ const RemainingCredits: React.FC = ({ selfServiceCheckoutEnabled }) => { - - diff --git a/airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx b/airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx index f6251008171d..d2d98715ae29 100644 --- a/airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx +++ b/airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx @@ -1,4 +1,3 @@ -import { faStar } from "@fortawesome/free-regular-svg-icons"; import { faQuestionCircle } from "@fortawesome/free-regular-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import React from "react"; @@ -22,16 +21,12 @@ import OnboardingIcon from "views/layout/SideBar/components/OnboardingIcon"; import SettingsIcon from "views/layout/SideBar/components/SettingsIcon"; import SidebarPopout, { Icon, Item } from "views/layout/SideBar/components/SidebarPopout"; import SourceIcon from "views/layout/SideBar/components/SourceIcon"; +import { CreditsIcon } from "../../../../../components/icons/CreditsIcon"; import { NotificationIndicator } from "views/layout/SideBar/NotificationIndicator"; import { useCalculateSidebarStyles, getPopoutStyles } from "views/layout/SideBar/SideBar"; import { RoutePaths } from "../../../../../pages/routePaths"; -const CreditsIcon = styled(FontAwesomeIcon)` - font-size: 21px; - line-height: 21px; -`; - const Bar = styled.nav` width: 100px; min-width: 65px; @@ -131,7 +126,7 @@ const SideBar: React.FC = () => {
  • - + From 09870c2a8edc46172b7328164c8d1ce1b92b9a68 Mon Sep 17 00:00:00 2001 From: nataly Date: Fri, 5 Aug 2022 17:09:46 -0400 Subject: [PATCH 2/2] Requested changes. --- airbyte-webapp/src/components/icons/CreditsIcon.tsx | 2 +- .../src/packages/cloud/views/layout/SideBar/SideBar.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/airbyte-webapp/src/components/icons/CreditsIcon.tsx b/airbyte-webapp/src/components/icons/CreditsIcon.tsx index 85bdbba52e39..54deb3372bef 100644 --- a/airbyte-webapp/src/components/icons/CreditsIcon.tsx +++ b/airbyte-webapp/src/components/icons/CreditsIcon.tsx @@ -5,7 +5,7 @@ interface Props { } export const CreditsIcon = ({ color = theme.greyColor20 }: Props) => ( - +