refactor(dashboard): apply community improve (#128)

* refactor(apply-community): ui improve

* refactor(apply-community): wip

* refactor(apply-community): wip

* refactor(apply-community): wip

* refactor(apply-community): wip

* refactor(apply-community): add tada animation

* refactor(apply-community): ui adjust

* refactor(apply-community): ui adjust

* refactor(apply-community): add extra info step

* refactor(apply-community): ui adjust

* refactor(apply-community): ui adjust

* refactor(apply-community): ui adjust

* refactor(dashboard): communities ui adjust

* refactor(dashboard): communities ui adjust

* refactor(dashboard): wip

* refactor(dashboard): moderator editor wip

* refactor(dashboard): select workflow wip

* refactor(global): @/utils/css -> @/css

* chore: update generator

* feat(dashboard): view passport of user workflow

* feat(dashboard): view passport of user workflow wip

* feat(dashboard): view passport of user workflow wip

* refactor(apply-community): improve ux

* refactor(apply-community): improve ux

* refactor(apply-community): improve ux

* refactor(apply-community): add city/source selector

* refactor(apply-community): ui adjust

* refactor: add link arrow

* refactor: add link arrow

* refactor: add arrow button

* refactor: header dashbaord style

* refactor: header dashbaord style fix

* refactor(globallayout): adjust page/content margin system

* refactor(globallayout): adjust page/content margin system

* refactor(globallayout): adjust dashboard content width

* refactor(globallayout): adjust dashboard content width

* refactor(globallayout): click elements with hoverBg effect

* chore: fix edge ase

* chore(dashboard): align offset

* chore(dashboard): wip

* refactor(dashboard): fix nameAlias merge logic

* refactor(article): new upvote template

* refactor(global): flex short names

* chore: clean up

.eslintrc.js

@@ -32,6 +32,7 @@ module.exports = {
           '@/stores': 'src/stores',
           '@/model': 'src/stores/Model',
           '@/utils': 'utils',
+          '@/css': 'utils/css',
           '@/schemas': 'src/schemas',
           '@/Img': 'src/widgets/Img',
           '@/SvgIcons': 'src/widgets/SvgIcons',

jsconfig.json

@@ -17,6 +17,8 @@
       "@/model*": ["src/stores/Model/*"],
       "@/utils": ["utils"],
       "@/utils/*": ["utils/*"],
+      "@/css": ["utils/css"],
+      "@/css/*": ["utils/css/*"],
       "@/schemas": ["src/schemas"],
       "@/Img": ["src/widgets/Img"],
       "@/SvgIcons/*": ["src/widgets/SvgIcons/*"],

package.json

@@ -79,7 +79,7 @@
     "react-dom": "^18.2.0",
     "react-flip-numbers": "^3.0.7",
     "react-highlight-words": "^0.18.0",
-    "react-lazy-load-image-component": "^1.5.6",
+    "react-lazy-load-image-component": "^1.6.0",
     "react-masonry-css": "^1.0.14",
     "react-pin-field": "3.0.16",
     "react-portal": "^4.2.2",
@@ -92,6 +92,7 @@
     "react-trend": "^1.2.4",
     "react-use": "17.4.0",
     "react-waypoint": "^10.3.0",
+    "react-wrap-balancer": "^1.1.0",
     "remarkable": "2.0.0",
     "remarkable-emoji": "^0.1.3",
     "remarkable-mentions": "^0.1.0",
@@ -107,6 +108,7 @@
     "stylis": "^4.3.0",
     "timeago-react": "^3.0.5",
     "tinykeys": "^1.4.0",
+    "tsparticles-confetti": "^2.12.0",
     "typewriter-effect": "^2.19.0",
     "urql": "^3.0.3"
   },

src/containers/content/ArticleContent/styles/desktop_view/changelog_layout.ts

@@ -1,12 +1,12 @@
 import styled from 'styled-components'
 
-import css from '@/utils/css'
+import css from '@/css'
 
 import { Wrapper as WrapperBase } from '.'
 
 export { InnerWrapper, MainWrapper, ArticleWrapper, CommentsWrapper } from '.'
 
 export const Wrapper = styled(WrapperBase)`
-  ${css.flex('justify-center')};
+  ${css.row('justify-center')};
   padding: 0;
 `