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

web/i18n/en/about.json

@@ -8,12 +8,6 @@
     "page.terms": "terms and ethics",
     "page.credits": "thanks & licenses",
 
-    "community.discord": "community discord server",
-    "community.twitter": "news account on twitter",
-    "community.github": "github repo",
-    "community.email": "support email",
-    "community.telegram": "news channel on telegram",
-
     "heading.general": "general terms",
     "heading.licenses": "licenses",
     "heading.summary": "best way to save what you love",
@@ -27,5 +21,14 @@
     "heading.responsibility": "user responsibilities",
     "heading.abuse": "reporting abuse",
     "heading.motivation": "motivation",
-    "heading.testers": "beta testers"
+    "heading.testers": "beta testers",
+
+    "support.github": "check out cobalt's source code, contribute changes, or report issues",
+    "support.discord": "chat with the community and developers about cobalt or ask for help",
+    "support.twitter": "follow cobalt's updates and development on your twitter timeline",
+    "support.telegram": "stay up to date with latest cobalt updates via a telegram channel",
+
+    "support.description.issue": "if you want to report a bug or some other recurring issue, please do it on github.",
+    "support.description.help": "use discord for any other questions. describe the issue properly in #cobalt-support or else no one will be able help you.",
+    "support.description.best-effort": "all support is best effort and not guaranteed, a reply might take some time."
 }

web/src/components/about/AboutSupport.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+    import { t } from "$lib/i18n/translations";
+    import { openURL } from "$lib/download";
+
+    import IconExternalLink from "@tabler/icons-svelte/IconExternalLink.svelte";
+
+    import IconBrandGithub from "@tabler/icons-svelte/IconBrandGithub.svelte";
+    import IconBrandTwitter from "@tabler/icons-svelte/IconBrandTwitter.svelte";
+    import IconBrandDiscord from "@tabler/icons-svelte/IconBrandDiscord.svelte";
+    import IconBrandTelegram from "@tabler/icons-svelte/IconBrandTelegram.svelte";
+
+    export let platform: "github" | "discord" | "twitter" | "telegram";
+    export let externalLink: string;
+
+    const platformIcons = {
+        github: {
+            icon: IconBrandGithub,
+            color: "var(--secondary)",
+        },
+        discord: {
+            icon: IconBrandDiscord,
+            color: "#5865f2",
+        },
+        twitter: {
+            icon: IconBrandTwitter,
+            color: "#1da1f2",
+        },
+        telegram: {
+            icon: IconBrandTelegram,
+            color: "#1c9efb",
+        },
+    };
+</script>
+
+<button
+    class="support-card"
+    role="link"
+    on:click={() => {
+        openURL(externalLink);
+    }}
+>
+    <div class="support-card-header">
+        <div
+            class="icon-holder support-icon-{platform}"
+            style="background-color: {platformIcons[platform].color}"
+        >
+            <svelte:component this={platformIcons[platform].icon} />
+        </div>
+        <div class="support-card-title">
+            {platform}
+            <IconExternalLink />
+        </div>
+    </div>
+    <div class="subtext support-card-description">
+        {$t(`about.support.${platform}`)}
+    </div>
+</button>
+
+<style>
+    .support-card {
+        padding: var(--padding);
+        gap: 4px;
+        height: fit-content;
+
+        text-align: left;
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: flex-start;
+    }
+
+    .support-card-header {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 8px;
+    }
+
+    .icon-holder {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: var(--gray);
+
+        padding: 4px;
+        border-radius: 5px;
+    }
+
+    .icon-holder :global(svg) {
+        width: 20px;
+        height: 20px;
+        stroke-width: 1.5px;
+        stroke: var(--white);
+    }
+
+    .support-card-title {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 6px;
+    }
+
+    .support-card-title :global(svg) {
+        stroke: var(--secondary);
+        opacity: 0.5;
+        width: 14px;
+        height: 14px;
+    }
+
+    .support-card-description {
+        padding: 0;
+    }
+
+    :global([data-theme="dark"]) .support-icon-github :global(svg) {
+        stroke: var(--primary);
+    }
+</style>

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>
 
-<!--
+<div id="support-page">
-    this page is not final and is more of a quick mockup. this is why donate alt item is used for links.
+    <div
--->
+        id="support-buttons"
-<div id="community-body">
+        bind:offsetWidth={buttonContainerWidth}
-    {#if $locale !== "ru"}
+
-        <DonateAltItem
+        class:two={$locale === "ru"}
-            type="open"
+        class:one={buttonContainerWidth < 500}
-            name={$t("about.community.discord")}
+    >
-            address={contacts.discord}
+        <AboutSupport
+            platform="github"
+            externalLink={contacts.github}
         />
 
-        <DonateAltItem
+        {#if $locale === "ru"}
-            type="open"
+            <AboutSupport
-            name={$t("about.community.twitter")}
+                platform="telegram"
-            address={contacts.twitter}
+                externalLink={contacts.telegram_ru}
-            title="@justusecobalt"
+            />
-        />
+        {:else}
-    {/if}
+            <AboutSupport
+                platform="discord"
+                externalLink={contacts.discord}
+            />
+            <AboutSupport
+                platform="twitter"
+                externalLink={contacts.twitter}
+            />
+        {/if}
+    </div>
 
-    <DonateAltItem
+    <div class="subtext support-note">
-        type="open"
+        {$t("about.support.description.issue")}
-        name={$t("about.community.github")}
-        address={contacts.github}
-    />
 
-    <DonateAltItem
+        {#if $locale !== "ru"}
-        type="open"
+            {$t("about.support.description.help")}
-        name={$t("about.community.email")}
+        {/if}
-        address="mailto:{contacts.email}"
-        title="{contacts.email}"
-    />
 
-    {#if $locale === "ru"}
+        {$t("about.support.description.best-effort")}
-        <DonateAltItem
+    </div>
-            type="open"
-            name={$t("about.community.telegram")}
-            address={contacts.telegram_ru}
-            title="@justusecobalt_ru"
-        />
-    {/if}
 </div>
 
 <style>
-    #community-body {
+    #support-page {
-        display: grid;
+        display: flex;
-        grid-template-columns: 1fr 1fr;
+        flex-direction: column;
-        gap: 10px;
+        gap: 18px;
     }
 
-    @media screen and (max-width: 1030px) {
+    #support-buttons {
-        #community-body {
+        display: grid;
-            grid-template-columns: 1fr;
+        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>