feat(web): community section like figma desktop

Author: kemuru

web/src/consts/community-elements.tsx

@@ -1,14 +1,10 @@
 import React from "react";
 import styled, { css } from "styled-components";
-import { IElement } from "../pages/home/Community/Element";
+import { IElement } from "../pages/Home/Community/Element";
 import PNKIcon from "svgs/icons/pnk.svg";
 import SnapshotIcon from "svgs/icons/snapshot-color.svg";
 import FrenchFlagIcon from "svgs/icons/french-flag.svg";
-import PhoneIcon from "svgs/icons/phone.svg";
-import ChatIcon from "svgs/icons/chat.svg";
-import DiscordIcon from "svgs/socialmedia/discord.svg";
 import TelegramIcon from "svgs/socialmedia/telegram.svg";
-import SlackIcon from "svgs/socialmedia/slack.svg";
 
 const StyledLabel = styled.label`
   color: ${({ theme }) => theme.primaryBlue};
@@ -25,34 +21,17 @@ const StyledPNKIcon = styled(PNKIcon)`
   ${fillWithSecondaryPurple}
 `;
 
-const StyledPhoneIcon = styled(PhoneIcon)`
-  ${fillWithSecondaryPurple}
-`;
-
-const StyledChatIcon = styled(ChatIcon)`
-  ${fillWithSecondaryPurple}
-`;
-
 const fillWithPrimaryBlue = css`
   fill: ${({ theme }) => theme.primaryBlue};
 `;
 
-const StyledDiscordIcon = styled(DiscordIcon)`
-  ${fillWithPrimaryBlue}
-`;
-
 const StyledTelegramIcon = styled(TelegramIcon)`
   ${fillWithPrimaryBlue}
 `;
 
-const StyledSlackIcon = styled(SlackIcon)`
-  ${fillWithPrimaryBlue}
-`;
-
-export const firstSection: IElement[] = [
+export const section: IElement[] = [
   {
     Icon: StyledPNKIcon,
-    primaryText: "Join the discussions",
     urls: [
       {
         node: <StyledLabel>Kleros Forum</StyledLabel>,
@@ -62,51 +41,29 @@ export const firstSection: IElement[] = [
   },
   {
     Icon: SnapshotIcon,
-    primaryText: "Vote on proposals",
     urls: [
       {
-        node: <StyledLabel>Snapshot</StyledLabel>,
+        node: <StyledLabel>Vote on proposals</StyledLabel>,
         link: "https://snapshot.org/#/kleros.eth/",
       },
     ],
   },
   {
-    Icon: FrenchFlagIcon,
+    Icon: StyledTelegramIcon,
+    primaryText: "Wednesday, 18h UTC",
     urls: [
       {
-        node: <StyledLabel>Cooperative Kleros</StyledLabel>,
-        link: "https://kleros.io/coop/",
-      },
-    ],
-  },
-];
-
-export const secondSection: IElement[] = [
-  {
-    Icon: StyledPhoneIcon,
-    primaryText: "Join the Community Call",
-    urls: [
-      {
-        node: <StyledLabel>Join</StyledLabel>,
+        node: <StyledLabel>Community Calls</StyledLabel>,
         link: "https://t.me/kleros",
       },
     ],
   },
   {
-    Icon: StyledChatIcon,
-    primaryText: "Talk with us",
+    Icon: FrenchFlagIcon,
     urls: [
       {
-        node: <StyledDiscordIcon />,
-        link: "https://discord.gg/MhXQGCyHd9",
-      },
-      {
-        node: <StyledTelegramIcon />,
-        link: "https://t.me/kleros",
-      },
-      {
-        node: <StyledSlackIcon />,
-        link: "https://kleros.slack.com/join/signup",
+        node: <StyledLabel>Join the Coopérative</StyledLabel>,
+        link: "https://kleros.io/coop/",
       },
     ],
   },

web/src/pages/Home/Community/Element.tsx

@@ -4,6 +4,9 @@ import styled from "styled-components";
 const Container = styled.div`
   display: flex;
   gap: 8px;
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: center;
 
   svg {
     width: 16px;
@@ -18,6 +21,12 @@ const Container = styled.div`
 
 const StyledLabel = styled.label`
   color: ${({ theme }) => theme.primaryText};
+  font-weight: 600;
+`;
+
+const StyledA = styled.a`
+  display: flex;
+  align-items: center;
 `;
 
 export interface IElement {
@@ -29,17 +38,18 @@ export interface IElement {
 export const Element: React.FC<IElement> = ({ primaryText, urls, Icon }) => (
   <Container>
     {Icon && <Icon />}
-    {primaryText && (
-      <>
-        <StyledLabel>{primaryText}</StyledLabel> <StyledLabel>|</StyledLabel>
-      </>
-    )}
+
     <div className="link-container">
       {urls.map(({ node, link }, i) => (
-        <a key={i} href={link} target="_blank" rel="noreferrer">
+        <StyledA key={i} href={link} target="_blank" rel="noreferrer">
           {node}
-        </a>
+        </StyledA>
       ))}
     </div>
+    {primaryText && (
+      <>
+        <StyledLabel>{primaryText}</StyledLabel>
+      </>
+    )}
   </Container>
 );

web/src/pages/Home/Community/index.tsx

@@ -3,7 +3,7 @@ import styled, { css } from "styled-components";
 import { landscapeStyle } from "styles/landscapeStyle";
 import { Card } from "@kleros/ui-components-library";
 import { Element } from "./Element";
-import { firstSection, secondSection } from "consts/community-elements";
+import { section } from "consts/community-elements";
 
 const Container = styled.div`
   margin-top: 64px;
@@ -16,17 +16,8 @@ const Container = styled.div`
 const StyledCard = styled(Card)`
   width: 100%;
   height: auto;
-`;
-
-const StyledSeparator = styled.hr`
-  margin: 0;
-`;
-
-const Section = styled.div`
-  width: 100%;
-  gap: 8px;
+  gap: 12px;
   flex-direction: column;
-  height: auto;
   flex-wrap: wrap;
   padding: 12px;
   display: flex;
@@ -37,21 +28,23 @@ const Section = styled.div`
     () => css`
       flex-direction: row;
       justify-content: space-between;
-      gap: 0px;
-      padding: 0 32px;
-      min-height: 64px;
+      gap: 20px;
+      padding: 24px 32px;
     `
   )}
 `;
 
-const TwoElementContainer = styled.div`
+const ThreeElementContainer = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
 
   ${landscapeStyle(
     () => css`
       flex-direction: row;
+      justify-content: space-between;
       gap: 48px;
     `
   )}
@@ -61,20 +54,12 @@ const Community = () => (
   <Container>
     <h1>Community</h1>
     <StyledCard>
-      <Section>
-        <TwoElementContainer>
-          {firstSection.slice(0, 2).map((element) => (
-            <Element key={element.primaryText} {...element} />
-          ))}
-        </TwoElementContainer>
-        <Element {...firstSection[2]} />
-      </Section>
-      <StyledSeparator />
-      <Section>
-        {secondSection.map((element) => (
-          <Element key={element.primaryText} {...element} />
+      <ThreeElementContainer>
+        {section.slice(0, 3).map((element) => (
+          <Element key={element.Icon} {...element} />
         ))}
-      </Section>
+      </ThreeElementContainer>
+      <Element {...section[3]} />
     </StyledCard>
   </Container>
 );