Merge pull request #151 from deriv-com/michio/update-buttons-with-quill

deriv-com · Nov 13, 2023 · 1838b05 · 1838b05
2 parents 9c638a3 + a53610b
commit 1838b05
Show file tree

Hide file tree

Showing 18 changed files with 115 additions and 214 deletions.
diff --git a/apps/deriv-hk/pages/_app.tsx b/apps/deriv-hk/pages/_app.tsx
@@ -1,14 +1,16 @@
 import { AppProps } from 'next/app';
 import '../styles.css';
-import { ThemeProvider } from '@deriv/quill-design';
+import { BreakpointProvider, ThemeProvider } from '@deriv/quill-design';
 import { BuildVariantProvider } from '@deriv-com/providers';
 
 function CustomApp({ Component, pageProps }: AppProps) {
   return (
     <BuildVariantProvider buildVariant="hk">
-      <ThemeProvider theme="light">
-        <Component {...pageProps} />
-      </ThemeProvider>
+      <BreakpointProvider>
+        <ThemeProvider theme="light">
+          <Component {...pageProps} />
+        </ThemeProvider>
+      </BreakpointProvider>
     </BuildVariantProvider>
   );
 }

diff --git a/libs/blocks/src/lib/search/index.tsx b/libs/blocks/src/lib/search/index.tsx
@@ -1,32 +1,31 @@
-import { SearchChip } from '@deriv-com/components';
+import { SearchField } from '@deriv/quill-design';
 import { ReactNode } from 'react';
 
 export type SearchBlockProps = {
-  showSearchresults: (e: string) => void;
+  showSearchResults: (e: string) => void;
   content?: ReactNode;
   placeholder: string;
   onChange: (e: string) => void;
 };
 
 export const SearchBlock = ({
-  showSearchresults,
+  showSearchResults,
   content,
   placeholder,
   onChange,
 }: SearchBlockProps) => {
   return (
     <section className="flex w-full max-w-[1024px] flex-col gap-general-xl py-general-xl">
-      <SearchChip
+      <SearchField
         placeholder={placeholder}
-        onChange={(value) => {
-          showSearchresults(value);
+        onChange={(e) => {
+          showSearchResults(e.target.value);
 
           if (onChange) {
-            onChange(value);
+            onChange(e.target.value);
           }
         }}
-        className="w-full "
-        inputClassName="!bg-gradient-slate-110"
+        className="w-full"
       />
       {content && content}
     </section>

diff --git a/libs/components/src/index.ts b/libs/components/src/index.ts
@@ -7,6 +7,5 @@ export * from './lib/optimized-image';
 export * from './lib/page-layout';
 export * from './lib/link';
 export * from './lib/table/account-table';
-export * from './lib/search-chip';
 export * from './lib/action-sheet/bottom-sheet';
 export * from './lib/table-cell';
diff --git a/libs/components/src/lib/card/base/index.tsx b/libs/components/src/lib/card/base/index.tsx
@@ -1,4 +1,4 @@
-import { Heading, Text, TextSize, qtMerge } from '@deriv/quill-design';
+import { Heading, Text, qtMerge } from '@deriv/quill-design';
 import clsx from 'clsx';
 import { CardContent } from '../types';
 import CustomLink, { textSize } from '../../link';
@@ -42,7 +42,7 @@ const sizeVariantTextGap = {
   lg: 'gap-gap-xl',
 };
 
-const textSizeVariant: { [key: string]: TextSize } = {
+const textSizeVariant: { [key: string]: 'sm' | 'md' | 'lg' } = {
   sm: 'md',
   md: 'lg',
   lg: 'lg',

diff --git a/libs/components/src/lib/card/live-market/buy-sell.buttons.tsx b/libs/components/src/lib/card/live-market/buy-sell.buttons.tsx
@@ -1,4 +1,4 @@
-import { Text, Button } from '@deriv/quill-design';
+import { Text, TradeButton } from '@deriv/quill-design';
 import { MarketStatus } from '../types';
 
 export const BuySellButtons = ({
@@ -19,16 +19,22 @@ export const BuySellButtons = ({
         </Text>
       </div>
       <div className="flex flex-row gap-gap-md">
-        <Button disabled={status === 'closed'} className="flex-1">
+        <TradeButton
+          tradeType="buy"
+          variant="secondary"
+          disabled={status === 'closed'}
+          className="flex-1"
+        >
           Buy
-        </Button>
-        <Button
+        </TradeButton>
+        <TradeButton
+          tradeType="sell"
+          variant="secondary"
           disabled={status === 'closed'}
           className="flex-1"
-          colorStyle="black"
         >
           Sell
-        </Button>
+        </TradeButton>
       </div>
     </div>
   );

diff --git a/libs/components/src/lib/search-chip/index.tsx b/libs/components/src/lib/search-chip/index.tsx
diff --git a/libs/components/src/lib/search-chip/search-chip.stories.tsx b/libs/components/src/lib/search-chip/search-chip.stories.tsx
diff --git a/libs/components/src/lib/search-chip/search.module.css b/libs/components/src/lib/search-chip/search.module.css
diff --git a/libs/features/src/lib/navigation/main/main-navigation.buttons.tsx b/libs/features/src/lib/navigation/main/main-navigation.buttons.tsx
@@ -25,25 +25,24 @@ export const MainNavigationButtons = () => {
         <Button
           variant="secondary"
           colorStyle="coral"
-          size="md"
+          size="lg"
           onClick={onTradersHubClick}
-          renderLeftIcon={() => (
-            <StandalonePlaceholderRegularIcon width={12} height={12} />
-          )}
+          icon={StandalonePlaceholderRegularIcon}
+          iconPosition="start"
         >
           Traders Hub
         </Button>
       ) : (
         <>
           <Button
             variant="secondary"
-            colorStyle="coral"
-            size="md"
+            colorStyle="black"
+            size="lg"
             onClick={onLoginClick}
           >
             Log in
           </Button>
-          <Button size="md" className="hidden lg:block" onClick={onSignupClick}>
+          <Button size="lg" className="hidden lg:block" onClick={onSignupClick}>
             Create free demo account
           </Button>
         </>

diff --git a/libs/templates/src/lib/help-center/sections/search/components.tsx b/libs/templates/src/lib/help-center/sections/search/components.tsx
@@ -1,5 +1,5 @@
 import { CustomLink, CustomLinkProps } from '@deriv-com/components';
-import { BodyTypographyProps, Text, qtMerge } from '@deriv/quill-design';
+import { Text, qtMerge, BodyTypographyProps } from '@deriv/quill-design';
 import { PropsWithChildren, ReactNode } from 'react';
 
 //todo: removed [slugify] from utils/../utils and added here. we need to update this because we are using this on multiple places

diff --git a/libs/templates/src/lib/help-center/sections/search/search-results.tsx b/libs/templates/src/lib/help-center/sections/search/search-results.tsx
@@ -15,7 +15,7 @@ export const SearchResults = ({ onSearchKeyChange }: SearchResultsProps) => {
   const [results, setResults] = useState<FAQSearchResults[]>([]);
   const [searchKey, setSearchKey] = useState('');
 
-  const showSearchresults = (query: string) => {
+  const showSearchResults = (query: string) => {
     const finalMatches: FAQSearchResults[] = [];
 
     FAQData.forEach(({ header, questions }) => {
@@ -37,7 +37,7 @@ export const SearchResults = ({ onSearchKeyChange }: SearchResultsProps) => {
     <FluidContainer className="flex w-full flex-col items-center">
       <SearchBlock
         placeholder='Try "Trade"'
-        showSearchresults={showSearchresults}
+        showSearchResults={showSearchResults}
         onChange={(e) => setSearchKey(e)}
         content={
           (results.length || searchKey) && (

diff --git a/libs/templates/src/lib/home/sections/account-section/data.tsx b/libs/templates/src/lib/home/sections/account-section/data.tsx
@@ -8,7 +8,7 @@ export const TableData: TableContent = {
   description:
     'Direct market access with fast order execution and no dealing desk intervention.',
   cta: (
-    <Button variant="secondary" className="w-1/2">
+    <Button variant="secondary" colorStyle="black" size="lg" className="w-1/2">
       Get this account
     </Button>
   ),

diff --git a/libs/templates/src/lib/home/sections/cta/data.tsx b/libs/templates/src/lib/home/sections/cta/data.tsx
@@ -23,7 +23,7 @@ export const CTABlockContent = () => {
       }
     >
       <Button
-        colorStyle="black"
+        colorStyle="coral"
         className="lg:mt-general-xl"
         size="lg"
         onClick={() => scrollTop()}

diff --git a/libs/templates/src/lib/home/sections/hero/data.tsx b/libs/templates/src/lib/home/sections/hero/data.tsx
@@ -5,12 +5,14 @@ import { Swiper, SwiperSlide } from 'swiper/react';
 // @ts-ignore
 import { Autoplay, EffectFade } from 'swiper';
 import { ReactNode } from 'react';
-import { Button, FluidContainer, Text } from '@deriv/quill-design';
 import {
-  SocialAppleIcon,
-  SocialFacebookIcon,
-  SocialGoogleIcon,
-} from '@deriv/quill-icons/Social';
+  Button,
+  FacebookSocialButton,
+  SocialAppleButton,
+  SocialGoogleButton,
+  Text,
+  TextField,
+} from '@deriv/quill-design';
 
 export const heroItems: { key: string; image: ReactNode }[] = [
   {
@@ -69,46 +71,29 @@ export const renderHomeHeroSliderContent = () => (
 
 export const HomeHeroForm = () => {
   return (
-    <FluidContainer className={`flex flex-col gap-general-lg pr-general-3xl`}>
-      <div className="flex flex-col justify-between gap-gap-lg md:flex-row">
-        <input
-          placeholder="This component is not styled yet"
-          className="rounded-2xl border-300 border-solid-red-600"
-        />
+    <div className={'flex flex-col gap-general-lg'}>
+      <div className="flex flex-col items-center justify-between gap-gap-lg md:flex-row">
+        <TextField placeholder="Email Address" type="email" />
         <Button size="lg" fullWidth>
-          Create a demo account
+          Open demo account
         </Button>
       </div>
       <Text>or sign up with</Text>
-      <div className="flex flex-row items-center justify-between gap-general-sm">
-        <Button
-          renderLeftIcon={() => <SocialGoogleIcon iconSize="sm" />}
-          variant="tertiary"
-          colorStyle="black"
-          fullWidth
-          className="rounded-800 border-75 border-solid-slate-300"
-        >
-          Google
-        </Button>
-        <Button
-          renderLeftIcon={() => <SocialFacebookIcon iconSize="sm" />}
-          variant="tertiary"
-          colorStyle="black"
-          fullWidth
-          className="rounded-800 border-75 border-solid-slate-300"
-        >
-          Facebook
-        </Button>
-        <Button
-          renderLeftIcon={() => <SocialAppleIcon iconSize="sm" />}
-          variant="tertiary"
-          colorStyle="black"
+      <div className="flex flex-row items-center justify-between gap-general-sm sm:hidden">
+        <SocialGoogleButton variant="secondary" fullWidth size="lg" hideLabel />
+        <FacebookSocialButton
+          variant="secondary"
           fullWidth
-          className="rounded-800 border-75 border-solid-slate-300"
-        >
-          Apple
-        </Button>
+          size="lg"
+          hideLabel
+        />
+        <SocialAppleButton variant="secondary" fullWidth size="lg" hideLabel />
+      </div>
+      <div className="hidden flex-row items-center justify-between gap-general-sm sm:flex">
+        <SocialGoogleButton variant="secondary" fullWidth size="lg" />
+        <FacebookSocialButton variant="secondary" fullWidth size="lg" />
+        <SocialAppleButton variant="secondary" fullWidth size="lg" />
       </div>
-    </FluidContainer>
+    </div>
   );
 };