From 3aa5055301b46665669dd45d80f91713a76818e9 Mon Sep 17 00:00:00 2001
From: Kirill Revenkov <revenkov-k@yandex-team.ru>
Date: Fri, 28 Jun 2024 17:10:55 +0300
Subject: [PATCH] feat: use selectable card component

---
 .../BorderCard/BorderCard.scss                | 29 ------------------
 .../BorderRadiusTab/BorderCard/BorderCard.tsx | 30 +++++--------------
 2 files changed, 8 insertions(+), 51 deletions(-)
 delete mode 100644 src/components/Themes/ui/BorderRadiusTab/BorderCard/BorderCard.scss

diff --git a/src/components/Themes/ui/BorderRadiusTab/BorderCard/BorderCard.scss b/src/components/Themes/ui/BorderRadiusTab/BorderCard/BorderCard.scss
deleted file mode 100644
index 5787ed41bb73..000000000000
--- a/src/components/Themes/ui/BorderRadiusTab/BorderCard/BorderCard.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-@use '../../../../../variables.scss';
-
-$block: '.#{variables.$ns}border-card';
-
-#{$block} {
-    position: relative;
-    display: flex;
-    padding: 26px;
-    height: 80px;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-
-    &__icon {
-        position: absolute;
-        top: 4px;
-        right: 4px;
-        color: var(--g-color-base-brand);
-    }
-
-    &__fake-button {
-        width: 69px;
-        height: 28px;
-        background-color: var(--g-color-base-brand);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-}
diff --git a/src/components/Themes/ui/BorderRadiusTab/BorderCard/BorderCard.tsx b/src/components/Themes/ui/BorderRadiusTab/BorderCard/BorderCard.tsx
index 4a7128588e8c..c5ac417af6aa 100644
--- a/src/components/Themes/ui/BorderRadiusTab/BorderCard/BorderCard.tsx
+++ b/src/components/Themes/ui/BorderRadiusTab/BorderCard/BorderCard.tsx
@@ -1,28 +1,15 @@
-import {CircleCheckFill} from '@gravity-ui/icons';
-import {Card, Text} from '@gravity-ui/uikit';
 import React, {useCallback} from 'react';
 import {useTranslation} from 'react-i18next';
+import {SelectableCard} from 'src/components/SelectableCard/SelectableCard';
 import {RADIUS_PRESETS} from 'src/components/Themes/lib/constants';
 import {RadiusPresetName} from 'src/components/Themes/lib/types';
 
-import {block} from '../../../../../utils';
-
-import './BorderCard.scss';
-
-const b = block('border-card');
-
 export type BorderCardProps = {
     preset: RadiusPresetName;
     selected: boolean;
     onClick: (preset: RadiusPresetName) => void;
 };
 
-const FakeButton = ({preset, text}: {preset: RadiusPresetName; text: string}) => (
-    <div className={b('fake-button')} style={{borderRadius: RADIUS_PRESETS[preset]?.m + 'px'}}>
-        <Text color="inverted-primary">{text}</Text>
-    </div>
-);
-
 export const BorderCard = ({selected, preset, onClick}: BorderCardProps) => {
     const {t} = useTranslation('themes');
 
@@ -33,13 +20,12 @@ export const BorderCard = ({selected, preset, onClick}: BorderCardProps) => {
     const displayName = t(preset);
 
     return (
-        <Card className={b()} type="selection" selected={selected} onClick={handleClick}>
-            {preset === RadiusPresetName.Custom ? (
-                <Text variant="body-2">{displayName}</Text>
-            ) : (
-                <FakeButton preset={preset} text={displayName} />
-            )}
-            {selected && <CircleCheckFill className={b('icon')} />}
-        </Card>
+        <SelectableCard
+            text={displayName}
+            onClick={handleClick}
+            selected={selected}
+            pureText={preset === RadiusPresetName.Custom}
+            contentStyle={{borderRadius: RADIUS_PRESETS[preset]?.m + 'px'}}
+        />
     );
 };