ktl-674 fix: review fixes

components/community/community-keep-in-touch-card/community-keep-in-touch-card.module.css → blocks/community/keep-in-touch-card/keep-in-touch-card.module.css

@@ -1,45 +1,25 @@
 .card {
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    padding: 16px;
-    background: #fff;
-    text-decoration: none;
-    color: inherit;
-    border: 1px solid rgba(39, 40, 44, 0.2);
-    border-radius: 8px;
     min-height: 170px;
 }
 
-.card:hover {
-    text-decoration: none;
-    color: inherit;
-    border: 1px solid #19191C;
-}
-
-.icon {
-
+.wrapper {
+    box-sizing: border-box;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
 }
 
 .bottom {
     margin-top: auto;
 }
 
-.title {
-
-}
-
-.description {
-
-}
-
 @media (max-width: 767px) {
-    .title .ktl-h3 {
+    .title {
         font-size: 13px;
         line-height: 24px;
     }
 
-    .description .ktl-text-1 {
+    .description {
         font-size: 13px;
         line-height: 24px;
     }

blocks/community/keep-in-touch-card/keep-in-touch-card.tsx

@@ -0,0 +1,36 @@
+import React, {FC} from 'react';
+import classNames from 'classnames';
+import {cardCn} from "@rescui/card";
+import styles from './keep-in-touch-card.module.css'
+
+export interface KeepInTouchCardProps {
+    icon: string;
+    title: string;
+    description: string;
+    link: string;
+}
+
+export const KeepInTouchCard: FC<KeepInTouchCardProps> = ({icon, title, description, link}) => {
+
+    const cardClassName = classNames(cardCn({paddings: 16, isClickable: true}), styles.card);
+
+    return (
+        <a href={link} target="_blank" rel="noopener noreferrer" className={cardClassName}>
+            <div className={styles.wrapper}>
+                <div className={classNames(styles.icon)}>
+                    <img src={icon} alt={title}/>
+                </div>
+                <div className={classNames(styles.bottom)}>
+                    <div className={classNames(styles.title, 'ktl-h3')}>
+                        {title}
+                    </div>
+                    <div className={"ktl-offset-top-xs"}>
+                        <div className={classNames(styles.description, 'ktl-text-1', 'ktl-dimmed-text')}>
+                            {description}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </a>
+    )
+}

blocks/community/community-keep-in-touch/community-keep-in-touch.tsx → blocks/community/keep-in-touch/keep-in-touch.tsx

@@ -1,23 +1,24 @@
 import React, {FC} from 'react';
-import {CommunityKeepInTouchCard} from "../../../components/community/community-keep-in-touch-card/community-keep-in-touch-card";
+import {KeepInTouchCard} from "../keep-in-touch-card/keep-in-touch-card";
 import classNames from 'classnames';
 
-import styles from './community-keep-in-touch.module.css';
+import styles from './keep-in-touch.module.css';
 
-import {CommunityKeepInTouchCardProps} from '../../../components/community/community-keep-in-touch-card/community-keep-in-touch-card'
+import {KeepInTouchCardProps} from '../keep-in-touch-card/keep-in-touch-card'
 
-interface CommunityKeepInTouchProps {
-    links: CommunityKeepInTouchCardProps[]
+interface KeepInTouchProps {
+    links: KeepInTouchCardProps[]
 }
 
-export const CommunityKeepInTouch: FC<CommunityKeepInTouchProps> = ({links}) => {
+export const KeepInTouch: FC<KeepInTouchProps> = ({links}) => {
     return (
         <div className={classNames(styles.wrapper)}>
             <section className="ktl-container">
                 <h2 className="ktl-h1">Keep in Touch</h2>
                 <div className={classNames(styles.grid, 'ktl-offset-top-l')}>
                     {links.map(link => (
-                        <CommunityKeepInTouchCard
+                        <KeepInTouchCard
+                            key={link.title}
                             icon={link.icon}
                             title={link.title}
                             description={link.description}

next.config.js

@@ -15,7 +15,7 @@ const withTranspile = nextTranspileModules(transpiledPackages);
 
 const nextConfig = {
   pageExtensions: ['ts', 'tsx', 'js', 'jsx'],
-  fileExtensions: ["jpg", "jpeg", "png", "gif"],
+  fileExtensions: ["jpg", "jpeg", "png", "gif", "svg"],
   inlineImageLimit: 0,
   images: {
     disableStaticImages: true,
@@ -26,7 +26,7 @@ module.exports = withPlugins([
   [withConfigCss],
   [withTranspile],
   [optimizedImages, {
-    handleImages: ['jpeg', 'png'],
+    handleImages: ['jpeg', 'png', "svg"],
     imagesFolder: 'images',
     optimizeImagesInDev: true
   }]

package.json

@@ -13,6 +13,7 @@
     "@jetbrains/kotlin-web-site-ui": "4.0.0-alpha.3",
     "@react-hook/resize-observer": "1.2.5",
     "@rescui/button": "0.4.0",
+    "@rescui/card": "0.5.0",
     "@rescui/checkbox": "0.1.0",
     "@rescui/colors": "0.0.4",
     "@rescui/icons": "0.3.0",

pages/community/index.tsx

@@ -2,9 +2,9 @@ import React from "react";
 
 import {CommunityBanner} from '../../blocks/community/community-banner/community-banner';
 import {CommunityLayout} from "../../layouts/community-layout";
-import {CommunityKeepInTouch} from "../../blocks/community/community-keep-in-touch/community-keep-in-touch";
+import {KeepInTouch} from "../../blocks/community/keep-in-touch/keep-in-touch";
 
-import SlackIcon from '../../public/community/icons/keep-in-touch-slack-icon.svg';
+import SlackIcon from '../../public/community/icons/keep-in-touch-slack-icon.svg'
 import TwitterIcon from '../../public/community/icons/keep-in-touch-twitter-icon.svg';
 import KotlinIcon from '../../public/community/icons/keep-in-touch-kotlin-icon.svg';
 import RedditIcon from '../../public/community/icons/keep-in-touch-reddit-icon.svg';
@@ -25,7 +25,7 @@ function Index() {
                 JetBrains is here to provide help and support.
             </CommunityBanner>
 
-            <CommunityKeepInTouch links={[
+            <KeepInTouch links={[
                 {
                     icon: SlackIcon,
                     title: 'Slack',
@@ -66,7 +66,7 @@ function Index() {
                     icon: TalkingKotlinIcon,
                     title: 'Talking Kotlin',
                     description: 'Let’s chat with us in real time',
-                    link: 'http://talkingkotlin.com/?_gl=1*e9nbis*_ga*MjAxODgxMzAwNi4xNjQ4MzA1Nzg2*_ga_J6T75801PF*MTY0ODgxOTM3MS44LjEuMTY0ODgxOTM4Ny4w'
+                    link: 'http://talkingkotlin.com/'
                 },
                 {
                     icon: LinkedInIcon,
@@ -78,7 +78,7 @@ function Index() {
                     icon: YoutrackIcon,
                     title: 'Issue Tracker',
                     description: 'Find the issues',
-                    link: 'https://youtrack.jetbrains.com/issues/KT?_gl=1*e9nbis*_ga*MjAxODgxMzAwNi4xNjQ4MzA1Nzg2*_ga_J6T75801PF*MTY0ODgxOTM3MS44LjEuMTY0ODgxOTM4Ny4w'
+                    link: 'https://youtrack.jetbrains.com/issues/'
                 },
             ]}/>
         </CommunityLayout>

yarn.lock

@@ -1332,6 +1332,15 @@
     classnames "^2.2.6"
     core-js "^3.9.1"
 
+"@rescui/[email protected]":
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/@rescui/card/-/card-0.5.0.tgz#25ac29fdeabf80029593f1b54516d2f982c5da0e"
+  integrity sha512-r6grVbMnI9Wg4ksBrWzZ2sFkagVn20LkKPQ22cWmpMwjyZeOhgGxzctz8hRpJpimJiqwiFTHneaMLUPnds3aaA==
+  dependencies:
+    "@babel/runtime-corejs3" "^7.14.0"
+    classnames "^2.2.6"
+    core-js "^3.9.1"
+
 "@rescui/[email protected]":
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/@rescui/checkbox/-/checkbox-0.1.0.tgz#5d85eb4f0a93eafede7bf44dedb34dd4ea8ce043"