update channel unfollow dialog (#1142)

src/components/Dialogs/ActionDialog/ActionDialog.style.ts

@@ -1,14 +1,7 @@
-import { css } from '@emotion/react'
 import styled from '@emotion/styled'
 
-import { Button } from '@/shared/components'
 import { media, sizes } from '@/shared/theme'
 
-type ButtonProps = {
-  error?: boolean
-  warning?: boolean
-}
-
 export const ButtonsContainer = styled.div`
   display: flex;
   flex-direction: column;
@@ -52,58 +45,3 @@ export const AdditionalActionsContainer = styled.div`
     margin-right: ${sizes(6)};
   }
 `
-
-const buttonColorsFromProps = ({ error, warning }: ButtonProps) => {
-  let color, bgColor, borderColor, bgActiveColor, borderActiveColor
-
-  if (warning) {
-    color = 'var(--warning-font-color)'
-    bgColor = 'var(--warning-bg-color)'
-    borderColor = 'var(--warning-bg-color)'
-    bgActiveColor = 'var(--warning-bg-active-color)'
-    borderActiveColor = 'var(--warning-border-active-color)'
-  }
-  if (error) {
-    color = 'var(--error-font-color)'
-    bgColor = 'var(--error-bg-color)'
-    borderColor = 'var(--error-bg-color)'
-    bgActiveColor = 'var(--error-bg-active-color)'
-    borderActiveColor = 'var(--error-border-active-color)'
-  }
-
-  const boxShadow = error || warning ? `inset 0px 0px 0px 1px ${borderActiveColor}` : 'none'
-
-  return css`
-    color: ${color};
-    background-color: ${bgColor};
-    border-color: ${borderColor};
-
-    &:hover {
-      color: ${color};
-      background-color: ${bgColor};
-      border-color: ${borderColor};
-      box-shadow: none;
-    }
-
-    &:active {
-      color: ${color};
-      background-color: ${bgActiveColor};
-      border-color: ${borderActiveColor};
-      box-shadow: ${boxShadow};
-    }
-  `
-}
-
-export const StyledPrimaryButton = styled(Button)<ButtonProps>`
-  --warning-bg-color: #f49525;
-  --warning-bg-active-color: #da7b0b;
-  --warning-border-active-color: #49290440;
-  --warning-font-color: #492904;
-
-  --error-bg-color: #e53333;
-  --error-bg-active-color: #cc1a1a;
-  --error-border-active-color: #44090966;
-  --error-font-color: #440909;
-
-  ${buttonColorsFromProps}
-`

src/components/Dialogs/ActionDialog/ActionDialog.tsx

@@ -2,12 +2,7 @@ import React from 'react'
 
 import { Button, ButtonProps } from '@/shared/components'
 
-import {
-  ActionsContainer,
-  AdditionalActionsContainer,
-  ButtonsContainer,
-  StyledPrimaryButton,
-} from './ActionDialog.style'
+import { ActionsContainer, AdditionalActionsContainer, ButtonsContainer } from './ActionDialog.style'
 
 import { BaseDialog, BaseDialogProps } from '../BaseDialog'
 
@@ -44,9 +39,9 @@ export const ActionDialog: React.FC<ActionDialogProps> = ({
           {additionalActionsNode && <AdditionalActionsContainer>{additionalActionsNode}</AdditionalActionsContainer>}
           <ButtonsContainer>
             {primaryButton?.text && (
-              <StyledPrimaryButton warning={warning} error={error} {...primaryButton}>
+              <Button variant={error ? 'destructive' : warning ? 'warning' : 'primary'} {...primaryButton}>
                 {primaryButton.text}
-              </StyledPrimaryButton>
+              </Button>
             )}
             {secondaryButton?.text && (
               <Button variant="secondary" {...secondaryButton}>

src/views/viewer/ChannelView/ChannelView.style.tsx

@@ -217,7 +217,12 @@ export const SearchButton = styled(IconButton)`
   position: absolute;
 `
 
-export const DialogAccentText = styled.span`
+export const UnfollowDescriptionContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`
+
+export const UnfollowDescriptionAccentText = styled.span`
   font-size: ${typography.sizes.body2};
   line-height: ${typography.lineHeights.body2};
   font-weight: ${typography.weights.regular};

src/views/viewer/ChannelView/ChannelView.tsx

@@ -27,7 +27,6 @@ import { formatNumberShort } from '@/utils/number'
 
 import { ChannelAbout } from './ChannelAbout'
 import {
-  DialogAccentText,
   PaginationContainer,
   SearchButton,
   SearchContainer,
@@ -44,6 +43,8 @@ import {
   TitleContainer,
   TitleSection,
   TitleSkeletonLoader,
+  UnfollowDescriptionAccentText,
+  UnfollowDescriptionContainer,
   VideoSection,
 } from './ChannelView.style'
 
@@ -119,11 +120,16 @@ export const ChannelView: React.FC = () => {
           error: true,
           title: 'Would you consider staying?',
           description: (
-            <>
-              {channel?.title} released <DialogAccentText>{videosLastMonth} new videos </DialogAccentText>
-              this month.
-              <br /> Cancel to follow for more fresh content!
-            </>
+            <UnfollowDescriptionContainer>
+              {videosLastMonth && (
+                <span>
+                  {channel?.title} released{' '}
+                  <UnfollowDescriptionAccentText>{videosLastMonth} new videos </UnfollowDescriptionAccentText>
+                  this month.
+                </span>
+              )}
+              <span>Keep following for more fresh content!</span>
+            </UnfollowDescriptionContainer>
           ),
           primaryButton: {
             text: 'Unfollow',