Update quarters card

ekaterinburgdev · Nov 5, 2023 · 01f94fa · 01f94fa · ekbdev · Nov 5, 2023
1 parent 30b2dfc
commit 01f94fa
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 32 deletions.
diff --git a/components/Layers/Quarter/CardContent/CardContent.module.css b/components/Layers/Quarter/CardContent/CardContent.module.css
@@ -15,26 +15,16 @@
     position: relative;
     svg {
         position: relative;
-        top: 0;
+        top: 2px;
         left: 2px;
         path {
             fill: #000;
         }
     }
     a {
-        color: #000;
-        height: 35px;
+        border-radius: 8px;
+        font-size: 16px;
         width: 100%;
-        background-color: #ffd400;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        border-radius: 6px;
-    }
-    a:hover {
-        color: #000;
-        path {
-            fill: #000;
-        }
+        text-align: center;
     }
 }
diff --git a/components/Layers/Quarter/CardContent/CardContent.tsx b/components/Layers/Quarter/CardContent/CardContent.tsx
@@ -1,4 +1,5 @@
 import { QuarterObject } from 'components/Layers/Quarter/quarterObject';
+import { Button, ButtonSize, ButtonType } from 'components/UI/Button/Button';
 import { Header } from 'components/UI/Card/components/Header/Header';
 import { Info } from 'components/UI/Card/components/Info/Info';
 import { Section } from 'components/UI/Card/components/Section/Section';
@@ -21,10 +22,19 @@ export function QuarterCardContent({ placemark }: QuarterCardContentProps) {
             <Header title={placemark.quarterTitle} />
 
             <div className={styles.description}>
-                <a href={placemark.url} target="_blank" rel="noreferrer">
+                {/* <a href={placemark.url} target="_blank" rel="noreferrer">
                     Посмотреть телефон и почту квартального&nbsp;
                     <Icon type={IconType.External} color="#000" />
-                </a>
+                </a> */}
+                <Button
+                    size={ButtonSize.SMALL}
+                    onClick={() => {}}
+                    link={placemark.url}
+                    type={ButtonType.YELLOW}
+                >
+                    Посмотреть телефон и почту квартального&nbsp;
+                    <Icon type={IconType.External} color="#000" />
+                </Button>
             </div>
 
             <Section>

diff --git a/components/UI/Button/Button.module.css b/components/UI/Button/Button.module.css
@@ -5,22 +5,18 @@
     font-size: 15px;
     line-height: 1.33;
     cursor: pointer;
-    transition: .15s ease;
-}
-
-.button:hover {
-    filter: contrast(0.75);
-}
-
-.button:active {
-    filter: contrast(0.65);
+    transition: all 0.15s ease;
 }
 
 .button_yellow {
-    background: #FFD400;
+    background: #ffd400;
     color: black;
 }
 
+.button_yellow:hover {
+    background: #e1bb00;
+}
+
 .button_black {
     background: black;
     color: white;
@@ -34,7 +30,6 @@
     padding: 12px 32px;
 }
 
-
 @media screen and (width >= 768px) {
     .button {
         font-size: 16px;

diff --git a/components/UI/Button/Button.tsx b/components/UI/Button/Button.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import classNames from 'classnames';
 import styles from './Button.module.css';
 
@@ -23,22 +22,28 @@ const buttonStylesBySize: Record<ButtonSize, any> = {
 };
 
 type TButtonProps = {
-    text: string;
+    text?: string;
     type: ButtonType;
     size: ButtonSize;
     onClick: VoidFunction;
     link?: string;
+    children?: React.ReactNode;
 };
 
-export function Button({ text, type, size, onClick, link }: TButtonProps) {
+export function Button({ text, type, size, onClick, link, children }: TButtonProps) {
     const className = classNames(styles.button, buttonStylesByType[type], buttonStylesBySize[size]);
 
     if (link) {
         return (
-            <a className={className} href={link}>{text}</a>
+            <a className={className} href={link}>
+                {text || children}
+            </a>
         );
     }
+
     return (
-        <button type="button" className={className} onClick={onClick}>{text}</button>
+        <button type="button" className={className} onClick={onClick}>
+            {text}
+        </button>
     );
 }