Morda hovers

client/api/main-page/main-page.types.ts

@@ -1,12 +1,10 @@
+export type TCardType = "public" | "car" | "pedestrian" | "other";
+
 export interface Card {
     id: number;
     attributes: {
         title: string;
-        titleColor: string;
-        titleBackground: null;
         url: null | string;
-        invert: boolean | null;
-        backgroundColor: null | string;
         backgroundImage: {
             data: {
                 attributes: {
@@ -29,12 +27,11 @@ export interface Card {
                 };
             };
         };
-        type: CardType;
+        type: TCardType;
         priority: number;
-        size: CardSize;
         cardId: null;
         headerCaption: null | string;
-        bottomCaption: null | string;
+        footerCaption: null | string;
         dynamicId: string;
         createdAt: Date;
         updatedAt: Date;
@@ -85,13 +82,3 @@ export interface Marquee {
     };
 }
 
-enum CardType {
-    All = 'all',
-    Citizen = 'citizen',
-}
-
-enum CardSize {
-    L = 'L',
-    M = 'M',
-    S = 'S',
-}

client/components/MainPage/Card/Card.module.css

@@ -1,13 +1,6 @@
 .Card {
-    --CardTitleColor: inherit;
     --CardTitleBgrColor: transparent;
-
-    --CardTitleUnderlineColor: inherit;
-
-    --CardBgrColor: transparent;
-    --CardBgrImage: none;
-
-    --CardSubtitleColor: inherit;
+    --CardBgImage: none;
 
     position: relative;
     z-index: 1;
@@ -16,7 +9,6 @@
     flex-direction: column;
 
     align-items: flex-start;
-    justify-content: space-between;
     height: 100%;
 
     padding: 16px;
@@ -25,20 +17,76 @@
     background-size: 100% auto;
     background-repeat: no-repeat;
     background-position: 100% 100%;
-    background-color: var(--CardBgrColor);
-    background-image: var(--CardBgrImage);
-    transition: .15s ease;
+    color: white;
+    background-image: var(--CardBgImage);
+    transition: .15s ease background-color;
     overflow: hidden;
 }
 
+.Card_Public {
+    background-color: var(--cards-public-bgr);
+    color: var(--cards-public-text);
+}
+
+.Card_Public .CardTitle {
+    text-decoration-color: rgba(4, 72, 21, .15);
+}
+
+.Card_Public:hover {
+    background-color: var(--cards-public-bgr-hover);
+    color: white;
+}
+
+.Card_Pedestrian {
+    background-color: var(--cards-pedestrian-bgr);
+    color: var(--cards-pedestrian-text);
+}
+
+.Card_Pedestrian .CardTitle {
+    text-decoration-color: rgba(76, 63, 0, .15);
+}
+
+.Card_Pedestrian:hover {
+    background-color: var(--cards-pedestrian-bgr-hover);
+    color: white;
+}
+
+.Card_Car {
+    background-color: var(--cards-automobile-bgr);
+    color: var(--cards-automobile-text);
+}
+
+.Card_Car .CardTitle {
+    text-decoration-color: rgba(92, 17, 10, .15);
+}
+
+.Card_Car:hover {
+    background-color: var(--cards-automobile-bgr-hover);
+    color: white;
+}
+
+.Card_Other {
+    background-color: var(--cards-other-bgr);
+    color: var(--cards-other-text);
+}
+
+.Card_Other .CardTitle {
+    text-decoration-color: rgba(12, 27, 39, .15);
+}
+
+.Card_Other:hover {
+    background-color: var(--cards-other-bgr-hover);
+    color: white;
+}
+
 @media (hover: hover) {
     .Card:hover {
         filter: brightness(0.98);
     }
 }
 
 .Card:active {
-    filter: brightness(0.95);
+    filter: brightness(0.9);
 }
 
 .CardTitle {
@@ -47,51 +95,53 @@
     font-weight: 500;
     line-height: 1.05;
     margin-bottom: 8px;
-    color: var(--CardTitleColor);
     background-color: var(--CardTitleBgrColor);
     text-decoration: underline;
-    text-decoration-color: rgba(var(--CardTitleUnderlineColor), 0.2);
+    text-decoration-color: rgba(255, 255, 255, 0.2);
     text-underline-offset: 3px;
-    transition: .15s ease text-decoration;
+    transition: .15s ease color, .15s ease text-decoration;
+}
+
+.CardDynamic {
+    width: 100%;
+    margin-top: auto;
 }
 
-.CardBottomCapture, .CardBottomCapture_NoSubtitle {
-    color: var(--CardTitleColor);
+.CardFooterCaption, .CardFooterCaption_NoSubtitle {
     font-weight: 500;
-    margin: 0;
+    margin-top: auto;
+    margin-bottom: 0;
 }
 
 .CardTitle_Bg {
     padding: .5em .75em;
 }
 
 .Card:hover .CardTitle {
-    text-decoration-color: rgba(var(--CardTitleUnderlineColor), 0.6);
+    text-decoration-color: rgba(255, 255, 255, 0.6);
 }
 
-.CardSubtitle {
+.CardHeaderCaption {
     font-size: 13px;
     line-height: 1.35;
     margin-top: 15px;
-    color: var(--CardSubtitleColor);
 }
 
-
 @media screen and (min-width: 375px) {
     .Card {
         padding: 16px;
     }
 
     .CardTitle {
-        font-size: clamp(16px, 20px, 20px);
+        font-size: clamp(16px, 1vw, 20px);
     }
 
-    .CardBottomCapture {
+    .CardFooterCaption {
         font-size: 20px;
     }
 
-    .CardBottomCapture_NoSubtitle {
-        font-size: 34px;
+    .CardFooterCaption_NoSubtitle {
+        font-size: clamp(16px, 1vw, 34px);
     }
 }
 
@@ -101,11 +151,11 @@
         border-radius: 24px;
     }
 
-    .CardBottomCapture {
+    .CardFooterCaption {
         font-size: 24px;
     }
 
-    .CardBottomCapture_NoSubtitle {
+    .CardFooterCaption_NoSubtitle {
         font-size: 48px;
     }
 
@@ -114,7 +164,7 @@
         border-radius: 8px;
     }
 
-    .CardSubtitle {
+    .CardHeaderCaption {
         font-size: 24px;
     }
 }
@@ -128,8 +178,12 @@
         font-size: clamp(24px, 1.5vw, 32px);
     }
 
-    .CardSubtitle {
-        font-size: clamp(16px, 16px, 24px);
-        line-height: 1.375em;
+    .CardHeaderCaption {
+        font-size: clamp(16px, 1.1vw, 24px);
+    }
+
+    .CardFooterCaption {
+        font-size: clamp(20px, 3vw, 3em);
+        line-height: 1.3;
     }
 }

client/components/MainPage/Card/Card.tsx

@@ -2,60 +2,54 @@ import classNames from 'classnames/bind';
 import { CardProps } from './Card.types';
 import styles from './Card.module.css';
 import t from 'utils/typograph';
-import React from "react";
+import React, { ReactElement } from "react";
 
 const cn = classNames.bind(styles);
 
-const hexToRgb = (hex) => {
-    const [r, g, b] = hex.match(/\w\w/g).map(x => parseInt(x, 16));
-    return `${r}, ${g}, ${b}`;
-};
-
 export function Card({
     title,
-    titleColor,
-    titleBackground,
+    type,
     url,
-    backgroundColor,
     backgroundImage,
+    dynamicContent,
     headerCaption,
-    bottomCaption,
-    dynamicContent
+    footerCaption
 }: CardProps) {
+    const getStylesByType = (type: CardProps["type"]) => {
+        switch (type) {
+            case "public":
+                return cn(styles.Card, styles.Card_Public)
+            case "car":
+                return cn(styles.Card, styles.Card_Car)
+            case "other":
+                return cn(styles.Card, styles.Card_Other)
+            case "pedestrian":
+                return cn(styles.Card, styles.Card_Pedestrian)
+            default:
+                return cn(styles.Card)
+        }
+    }
+
     return (
         <a
-            className={cn(styles.Card)}
+            className={getStylesByType(type)}
             href={url}
             style={{
-                "--CardTitleColor": titleColor,
-                "--CardTitleBgrColor": titleBackground,
-                "--CardTitleUnderlineColor": titleColor && hexToRgb(titleColor),
-                "--CardBgrColor": backgroundColor,
-                "--CardBgrImage": backgroundImage && `url(https://transport-cms.ekaterinburg.city${backgroundImage})`,
-                "--CardSubtitleColor": titleColor
+                "--CardBgImage": backgroundImage && `url(https://transport-cms.ekaterinburg.city${backgroundImage})`,
             } as React.CSSProperties}
         >
-           <div>
-               {title && <div className={cn(styles.CardTitle, { [styles.CardTitle_Bg]: Boolean(titleBackground) })}>
-                   {t(title)}
-               </div>}
-               {headerCaption && <p className={cn(styles.CardSubtitle)}>
-                   {headerCaption}
-               </p>}
-           </div>
-
-            {
-                dynamicContent
-                    ? dynamicContent
-                    : <div>
-                        {bottomCaption &&
-                            <p className={headerCaption ?
-                                cn(styles.CardBottomCapture)
-                                : cn(styles.CardBottomCapture_NoSubtitle)}>
-                            {bottomCaption}
-                        </p>}
-                    </div>
-            }
+            {title && <div className={cn(styles.CardTitle)}>
+                {t(title)}
+            </div>}
+            {headerCaption && <p className={cn(styles.CardHeaderCaption)}>
+                {t(headerCaption)}
+            </p>}
+            {footerCaption && <p className={cn(styles.CardFooterCaption)}>
+                {t(footerCaption)}
+            </p>}
+            {dynamicContent && <div className={cn(styles.CardDynamic)}>
+                {dynamicContent}
+            </div>}
         </a>
     );
 }

client/components/MainPage/Card/Card.types.ts

@@ -1,15 +1,13 @@
 import { ReactElement } from "react";
+import {TCardType} from "api/main-page/main-page.types";
 
 export type CardProps = {
+    type: TCardType | undefined;
     title: string;
-    titleColor: string;
-    titleBackground: string;
     url: string;
-    backgroundColor: string;
     backgroundImage: string;
     headerCaption: string;
-    bottomCaption: string;
-    invert: boolean;
+    footerCaption: string;
     dynamicContent: ReactElement;
     key: number;
 };

client/components/MainPage/Card/CardDynamic/CardMap.module.css

@@ -1,6 +1,3 @@
-.CardMap {
-}
-
 .CardMap,
 .CardMap__Widget,
 .CardMap__NonClick {

client/components/MainPage/Card/CardDynamic/CardTrafficJams.module.css

@@ -1,13 +1,7 @@
-.CardTrafficLight__Container {
-    display: flex;
-    align-self: end;
-}
-
 .CardTrafficLight {
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 110px;
     width: 1.9em;
     height: 1.7em;
     padding-top: 0.1em;
@@ -17,6 +11,7 @@
     background-repeat: no-repeat;
     font-weight: 500;
     font-size: clamp(48px, 5vw, 100px);
+    margin-left: auto;
 }
 
 .CardTrafficLight_Green {