WIP

5 years ago · c99aa8d387
9 changed files with 98 additions and 31 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -129,6 +129,12 @@
            "integrity": "sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw==",
            "dev": true
        },
+        "@csstools/normalize.css": {
+            "version": "10.1.0",
+            "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
+            "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==",
+            "dev": true
+        },
        "@fortawesome/fontawesome-common-types": {
            "version": "0.2.25",
            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.25.tgz",
@ -5740,6 +5746,15 @@
                }
            }
        },
+        "postcss-browser-comments": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/postcss-browser-comments/-/postcss-browser-comments-3.0.0.tgz",
+            "integrity": "sha512-qfVjLfq7HFd2e0HW4s1dvU8X080OZdG46fFbIBFjW7US7YPDcWfRvdElvwMJr2LI6hMmD+7LnH2HcmXTs+uOig==",
+            "dev": true,
+            "requires": {
+                "postcss": "^7"
+            }
+        },
        "postcss-color-functional-notation": {
            "version": "2.0.1",
            "resolved": "https://registry.npmjs.org/postcss-color-functional-notation/-/postcss-color-functional-notation-2.0.1.tgz",
@ -6046,6 +6061,19 @@
                "postcss": "^7.0.2"
            }
        },
+        "postcss-normalize": {
+            "version": "8.0.1",
+            "resolved": "https://registry.npmjs.org/postcss-normalize/-/postcss-normalize-8.0.1.tgz",
+            "integrity": "sha512-rt9JMS/m9FHIRroDDBGSMsyW1c0fkvOJPy62ggxSHUldJO7B195TqFMqIf+lY5ezpDcYOV4j86aUp3/XbxzCCQ==",
+            "dev": true,
+            "requires": {
+                "@csstools/normalize.css": "^10.1.0",
+                "browserslist": "^4.6.2",
+                "postcss": "^7.0.17",
+                "postcss-browser-comments": "^3.0.0",
+                "sanitize.css": "^10.0.0"
+            }
+        },
        "postcss-overflow-shorthand": {
            "version": "2.0.0",
            "resolved": "https://registry.npmjs.org/postcss-overflow-shorthand/-/postcss-overflow-shorthand-2.0.0.tgz",
@ -6859,6 +6887,12 @@
            "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
            "dev": true
        },
+        "sanitize.css": {
+            "version": "10.0.0",
+            "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-10.0.0.tgz",
+            "integrity": "sha512-vTxrZz4dX5W86M6oVWVdOVe72ZiPs41Oi7Z6Km4W5Turyz28mrXSJhhEBZoRtzJWIv3833WKVwLSDWWkEfupMg==",
+            "dev": true
+        },
        "sax": {
            "version": "1.2.4",
            "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
--- a/package.json
+++ b/package.json
@ -3,6 +3,9 @@
    "description": "Flexor API server.",
    "version": "1.0.0",
    "private": true,
+    "browserslist": [
+        "defaults"
+    ],
    "scripts": {
        "start": "webpack-dev-server --config webpack.config.ts",
        "build": "npm run build:dev",
@ -35,6 +38,7 @@
        "mini-css-extract-plugin": "^0.8.0",
        "npm-run-all": "^4.1.5",
        "postcss-loader": "^3.0.0",
+        "postcss-normalize": "^8.0.1",
        "postcss-preset-env": "^6.7.0",
        "style-loader": "^1.0.0",
        "ts-loader": "^6.2.1",
--- a/postcss-normalize.d.ts
+++ b/postcss-normalize.d.ts
@ -0,0 +1,15 @@
+declare module 'postcss-normalize' {
+    import {
+        plugin, Plugin, ParserInput,
+        Result, LazyResult, Root, ProcessOptions
+    } from 'postcss'
+
+    interface PluginOptions {
+        allowDuplicates?: boolean
+        forceImport?: string | boolean
+        browsers?: string
+    }
+
+    const PostcssNormalize: Plugin<PluginOptions>
+    export default PostcssNormalize
+}
--- a/postcss-preset-env.d.ts
+++ b/postcss-preset-env.d.ts
@ -2,20 +2,20 @@ declare module 'postcss-preset-env' {
    import {
        plugin, Plugin, ParserInput,
        Result, LazyResult, Root, ProcessOptions
-    } from 'postcss';
+    } from 'postcss'

    interface PluginOptions {
-        stage?: number;
-        features?: any;
-        browsers?: string;
-        insertBefore?: any;
-        insertAfter?: any;
-        autoprefixer?: any;
-        preserve?: boolean;
-        importFrom?: string;
-        exportTo?: string;
+        stage?: number
+        features?: any
+        browsers?: string
+        insertBefore?: any
+        insertAfter?: any
+        autoprefixer?: any
+        preserve?: boolean
+        importFrom?: string
+        exportTo?: string
    }

-    const PostcssPresetEnv: Plugin<PluginOptions>;
-    export default PostcssPresetEnv;
+    const PostcssPresetEnv: Plugin<PluginOptions>
+    export default PostcssPresetEnv
 }
--- a/src/components/app-list-item.tsx
+++ b/src/components/app-list-item.tsx
@ -1,6 +1,5 @@
 import React, { FC } from 'react'
 import { Link } from 'react-router-dom'
-
 import { useConfig, useTheme } from 'src/hooks'
 import { App } from 'src/types'

--- a/src/components/group-list-item.tsx
+++ b/src/components/group-list-item.tsx
@ -1,19 +1,27 @@
 import React, { FC } from 'react'
 import { Link } from 'react-router-dom'
-
+import { useTheme, useConfig } from 'src/hooks'
 import { Group } from 'src/types'

 interface Props {
    group: Group
 }

-const GroupListItem: FC<Props> = ({ group }) => (
-    <div className="group-list-item">
-        <Link to={`/c/${group.id}/register`} className="title has-text-primary">{group.name}</Link>
-
-        {group.about && <p>{group.about}</p>}
-        <br /><br />
-    </div>
-)
+const GroupListItem: FC<Props> = ({ group }) => {
+    const theme = useTheme()
+    const config = useConfig()
+    
+    return (
+        <div className="group-list-item" style={{ backgroundColor: theme.backgroundPrimary, borderColor: theme.backgroundSecondary }}>
+            {group.imageUrl &&
+                <div className="image">
+                    <img src={`${config.blobUrl}${group.imageUrl}`} />
+                </div>
+            }
+            <Link to={`/c/${group.id}/register`} style={{ color: theme.primary }}>{group.name}</Link>
+            {group.about && <p style={{ color: theme.text }}>{group.about}</p>}
+        </div>
+    )
+}

 export default GroupListItem
--- a/src/components/pages/groups.tsx
+++ b/src/components/pages/groups.tsx
@ -9,6 +9,7 @@ import { setTitle } from 'src/utils'
 import { AppState, AppThunkDispatch, Group } from 'src/types'

 import Title from 'src/components/title'
+import Section from 'src/components/section'
 import GroupListItem from 'src/components/group-list-item'
 import PrimaryButton from 'src/components/controls/primary-button'

@ -24,14 +25,16 @@ const Groups: FC = () => {

    return (
        <div>
-            <Title>Communities</Title>
+            <Section>
+                <Title>Communities</Title>

-            {groups.map(group => <GroupListItem group={group} />)}
-            <hr />
+                {groups.map(group => <GroupListItem group={group} />)}
+                <hr />

-            <div style={{ textAlign: 'center' }}>
-                <PrimaryButton text="Create your own Community" icon={faPlusCircle} onClick={() => history.push('/register')} />
-            </div>
+                <div style={{ textAlign: 'center' }}>
+                    <PrimaryButton text="Create your own Community" icon={faPlusCircle} onClick={() => history.push('/register')} />
+                </div>
+            </Section>
        </div>
    )
 }
--- a/src/styles/app.css
+++ b/src/styles/app.css
@ -1,4 +1,5 @@
@charset "utf-8";
+@import "normalize.css";
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap');

 :root {
@ -33,6 +34,7 @@ input, textarea, select {
    box-sizing: border-box;
    font-family: var(--default-font);
    font-size: 1rem;
+    margin: 0px;
    padding: var(--input-padding);
    width: 100%;
 }
@ -375,18 +377,18 @@ div.header img {
    width: 128px;
 }

-div.app-list-item {
+div.app-list-item, div.group-list-item {
    display: flex;
    margin: 1rem 0px;
    padding: 1rem;
 }

-div.app-list-item p {
+div.app-list-item p, div.group-list-item p {
    font-size: 0.8rem;
    padding: 0.5rem;
    padding-top: 0px;
 }

-div.app-list-item img {
+div.app-list-item img, div.group-list-item img {
    width: 64px;
 }
--- a/webpack.config.ts
+++ b/webpack.config.ts
@ -2,6 +2,7 @@ import { Configuration } from 'webpack'
 import HtmlWebpackPlugin from 'html-webpack-plugin'
 import MiniCssExtractPlugin from 'mini-css-extract-plugin'
 import postcssPresetEnv from 'postcss-preset-env'
+import postcssNormalize from 'postcss-normalize'
 // import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'

 import c from './config/config.json'
@ -58,6 +59,7 @@ const config: Configuration = {
                        loader: 'postcss-loader',
                        options: {
                            plugins: [
+                                postcssNormalize(),
                                postcssPresetEnv({
                                    stage: 2,
                                }),