web/about/community: redesign the page, add descriptions

web/src/routes/about/community/+page.svelte

@@ -4,61 +4,76 @@
     import { contacts } from "$lib/env";
     import { t } from "$lib/i18n/translations";
 
-    import DonateAltItem from "$components/donate/DonateAltItem.svelte";
+    import AboutSupport from "$components/about/AboutSupport.svelte";
+
+    let buttonContainerWidth: number;
 </script>
 
-<!--
-    this page is not final and is more of a quick mockup. this is why donate alt item is used for links.
--->
-<div id="community-body">
-    {#if $locale !== "ru"}
-        <DonateAltItem
-            type="open"
-            name={$t("about.community.discord")}
-            address={contacts.discord}
+<div id="support-page">
+    <div
+        id="support-buttons"
+        bind:offsetWidth={buttonContainerWidth}
+
+        class:two={$locale === "ru"}
+        class:one={buttonContainerWidth < 500}
+    >
+        <AboutSupport
+            platform="github"
+            externalLink={contacts.github}
         />
 
-        <DonateAltItem
-            type="open"
-            name={$t("about.community.twitter")}
-            address={contacts.twitter}
-            title="@justusecobalt"
-        />
-    {/if}
+        {#if $locale === "ru"}
+            <AboutSupport
+                platform="telegram"
+                externalLink={contacts.telegram_ru}
+            />
+        {:else}
+            <AboutSupport
+                platform="discord"
+                externalLink={contacts.discord}
+            />
+            <AboutSupport
+                platform="twitter"
+                externalLink={contacts.twitter}
+            />
+        {/if}
+    </div>
 
-    <DonateAltItem
-        type="open"
-        name={$t("about.community.github")}
-        address={contacts.github}
-    />
+    <div class="subtext support-note">
+        {$t("about.support.description.issue")}
 
-    <DonateAltItem
-        type="open"
-        name={$t("about.community.email")}
-        address="mailto:{contacts.email}"
-        title="{contacts.email}"
-    />
+        {#if $locale !== "ru"}
+            {$t("about.support.description.help")}
+        {/if}
 
-    {#if $locale === "ru"}
-        <DonateAltItem
-            type="open"
-            name={$t("about.community.telegram")}
-            address={contacts.telegram_ru}
-            title="@justusecobalt_ru"
-        />
-    {/if}
+        {$t("about.support.description.best-effort")}
+    </div>
 </div>
 
 <style>
-    #community-body {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 10px;
+    #support-page {
+        display: flex;
+        flex-direction: column;
+        gap: 18px;
     }
 
-    @media screen and (max-width: 1030px) {
-        #community-body {
-            grid-template-columns: 1fr;
-        }
+    #support-buttons {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        overflow-x: scroll;
+        gap: var(--padding);
+    }
+
+    #support-buttons.two {
+        grid-template-columns: 1fr 1fr;
+    }
+
+    #support-buttons.one {
+        grid-template-columns: 1fr;
+    }
+
+    .support-note {
+        text-align: left;
+        padding: 0;
     }
 </style>