feat: add new color variables for price impact and skeleton shine; update confirmation modal state handling; enhance layout in CardDialog component

Author: Ho3einWave

lib/components/Swap/Swap.stories.tsx

@@ -39,6 +39,8 @@ export const Default: Story = {
             text_black: "#000000",
             text_white: "#FFFFFF",
             text_fade: "#9CAACB",
+            price_impact: "#E64646",
+            skeleton_shine: "#FFFFFF",
         },
     },
 };

lib/components/SwapButton/ConfirmationModal.tsx

@@ -17,7 +17,7 @@ type ConfirmationModalProps = {
 const ConfirmationModal: FC<ConfirmationModalProps> = ({ setConfirmModal }) => {
     const { t } = useTranslation();
     const handleConfirmClose = () => {
-        setConfirmModal(ModalState.IN_PROGRESS);
+        setConfirmModal(ModalState.NONE);
     };
     const { tonConnectInstance } = useOptionsStore();
     useEffect(() => {

lib/components/SwapCard/CardDialog.scss

@@ -90,9 +90,13 @@
             .dialog-community-modal {
                 display: flex;
                 flex-direction: column;
+                flex-grow: 1;
                 height: 100%;
             }
             .community-modal-container {
+                display: flex;
+                flex-direction: column;
+                gap: 0.5rem 0.5rem;
                 flex-grow: 1;
             }
             .community-modal-warning {
@@ -118,15 +122,16 @@
                     padding-left: 1.25rem;
                     padding-right: 1.25rem;
                 }
-                .accept-button {
-                    display: flex;
-                    height: 2.5rem;
-                    border-radius: 0.75rem;
-                    width: 100%;
-                    align-items: center;
-                    justify-content: center;
-                    font-size: 0.875rem;
-                }
+            }
+
+            .accept-button {
+                display: flex;
+                height: 2.5rem;
+                border-radius: 0.75rem;
+                width: 100%;
+                align-items: center;
+                justify-content: center;
+                font-size: 0.875rem;
             }
             .pinned-token-container {
                 display: flex;

lib/components/SwapCard/CardDialog.tsx

@@ -162,6 +162,13 @@ const CardDialog: FC<CardDialogProps> = ({
     const assetList = type === "pay" ? assets : receiveAssets;
 
     const handleOnTokenSelect = (asset: Asset) => {
+        if (!communityTokens && asset.warning) {
+            setContractCommunity(asset);
+            setPromptForCommunity(true);
+        }
+        if (promptForCommunity) {
+            setPromptForCommunity(false);
+        }
         setSearchInput("");
         onTokenSelect(asset);
         setPage(1);
@@ -499,8 +506,8 @@ const CardDialog: FC<CardDialogProps> = ({
                                                         contractCommunity!
                                                             .address
                                                     );
-                                                    onTokenSelect(
-                                                        contractCommunity!
+                                                    handleOnTokenSelect(
+                                                        contractCommunity
                                                     );
                                                 }}
                                                 style={{