chore: added new banner component to show messages in Bazecor (#536)

Co-authored-by: Thiago Hernandez <thiago.hernandez@gmail.com>

src/renderer/component/Banner/Banner.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+
+import Styled from "styled-components";
+
+interface BannerProps {
+  variant?: "warning" | "danger" | "success" | "info";
+  children: React.ReactNode;
+  icon?: React.ReactNode;
+}
+const BannerWrapper = Styled.div`
+  border-radius: 8px;
+  padding: 24px;
+  color: ${({ theme }) => theme.styles.banner.textWarning};
+  .banner-inner {
+    display: flex;
+    grid-gap: 24px;
+  }
+  p {
+    font-weight: 401;
+    font-size: 0.85em;
+  }
+  p:last-of-type {
+    margin-bottom: 0;
+  }
+  &.warning {
+    background: ${({ theme }) => theme.styles.banner.backgroundWarning};
+    border: 1px solid rgba(255, 159, 67,0.25);
+    .banner-icon {
+      background: ${({ theme }) => theme.styles.banner.svgBackgroundWarning};
+    }
+  }
+  .banner-icon {
+    display: flex;
+    flex: 0 0 42px;
+    width: 42px;
+    height: 42px;
+    border-radius: 50%;
+    justify-content: center;
+    align-items: center;
+  }
+`;
+
+const Banner = ({ variant = "info", icon, children }: BannerProps) => (
+  <BannerWrapper className={`${variant}`}>
+    <div className="banner-inner">
+      {icon && <div className="banner-icon">{icon}</div>}
+      <div className="banner-content">{children}</div>
+    </div>
+  </BannerWrapper>
+);
+
+export default Banner;

src/renderer/component/Banner/index.tsx

@@ -0,0 +1,3 @@
+import Banner from "./Banner";
+
+export { Banner };

src/renderer/theme/DarkTheme.ts

@@ -158,6 +158,12 @@ const Dark: DefaultTheme = {
       subtleColor: Tokens.colors.gray100,
       subtleBGColor: Tokens.colors.gray700,
     },
+    banner: {
+      backgroundWarning:
+        "linear-gradient(0deg, rgba(254, 202, 87, 0.08) 0%, rgba(254, 202, 87, 0.08) 100%), rgba(63, 66, 90, 0.02)",
+      textWarning: Tokens.colors.gray100,
+      svgBackgroundWarning: "rgba(254, 202, 87, 0.15)",
+    },
     batteryIndicator: {
       pileBackgroundColor: Tokens.colors.gray800,
       pileBackgroundSavingMode: settingColorOpacity(Tokens.colors.brandWarning, 0.15),

src/renderer/theme/LightTheme.ts

@@ -158,6 +158,12 @@ const Light: DefaultTheme = {
       subtleColor: Tokens.colors.gray400,
       subtleBGColor: Tokens.colors.gray50,
     },
+    banner: {
+      backgroundWarning:
+        "linear-gradient(0deg, rgba(254, 202, 87, 0.1) 0%, rgba(254, 202, 87, 0.1) 100%), rgba(255, 255, 255, 0.1)",
+      textWarning: Tokens.colors.gray600,
+      svgBackgroundWarning: "rgba(254, 202, 87, 0.35)",
+    },
     batteryIndicator: {
       pileBackgroundColor: Tokens.colors.gray50,
       pileBackgroundSavingMode: settingColorOpacity(Tokens.colors.brandWarning, 0.25),

src/renderer/theme/styled.d.ts

@@ -132,6 +132,11 @@ declare module "styled-components" {
         subtleColor: string;
         subtleBGColor: string;
       };
+      banner: {
+        backgroundWarning: string;
+        textWarning: string;
+        svgBackgroundWarning: string;
+      };
       batteryIndicator: {
         pileBackgroundColor: string;
         pileBackgroundSavingMode: string;

src/renderer/views/SelectKeyboard.tsx

@@ -29,6 +29,7 @@ import Modal from "react-bootstrap/Modal";
 
 import Dropdown from "react-bootstrap/Dropdown";
 import { USBDevice, USBDeviceDescriptor, NonSerialDeviceDescriptor } from "@Renderer/types/devices";
+import { Banner } from "@Renderer/component/Banner";
 import { PageHeader } from "../modules/PageHeader";
 import { RegularButton } from "../component/Button";
 
@@ -40,7 +41,7 @@ import i18n from "../i18n";
 import NeuronConnection from "../modules/NeuronConnection";
 import ToastMessage from "../component/ToastMessage";
 
-import { IconArrowRight, IconCloudDownload, IconUpload, IconKeyboard } from "../component/Icon";
+import { IconArrowRight, IconCloudDownload, IconUpload, IconKeyboard, IconBluetooth } from "../component/Icon";
 import Title from "../component/Title";
 import Store from "../utils/Store";
 
@@ -600,6 +601,16 @@ const SelectKeyboard: React.FC<SelectKeyboardProps> = (props): JSX.Element => {
             virtualDevice={focus.device}
             connectedDevice={connectedDevice}
           />
+          <div className="card-alert" style={{ marginTop: "16px" }}>
+            <Banner icon={<IconBluetooth />} variant="warning">
+              <Title text="Defy owners!" headingLevel={5} />
+              <p style={{ maxWidth: "610px" }}>
+                To configure your keyboard using Bazecor, you must connect your keyboard either{" "}
+                <strong>through cables or RF (Radio Frequency).</strong> This is necessary to establish the initial connection and
+                settings.
+              </p>
+            </Banner>
+          </div>
           <div className="cardButton-wrapper">
             <div className="cardButton">
               <RegularButton