US #2127: Discover section [4]

2016-01-21 18:42:12 +01:00 · 2016-01-21 18:42:12 +01:00 · 5b2f5233c4
parent 555a011cb5
commit 5b2f5233c4
45 changed files with 829 additions and 396 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -4,15 +4,26 @@
 ## 1.10.0 ??? (unreleased)

 ### Features
- Upload attachments on US/issue/task lightbox.
- Attachments image gallery view mode in detail pages.
- Drag files from desktop to attachments section.
- Drag files from desktop in wysiwyg textareas.
 - New design for the detail pages slidebar.
- Sticky project navigation bar.
 - Added 'Assign to me' button in User Stories, Tasks and Issues detail pages. (thanks to [@allistera](https://github.com/allistera)).
+- Attachments:
+    - Upload attachments on US/issue/task lightbox.
+    - Attachments image gallery view mode in detail pages.
+    - Drag files from desktop to attachments section.
+    - Drag files from desktop in wysiwyg textareas.
+- Project:
+    - Add a logo to your project.
+    - Denotes that your project is looking for people and add an explanation.
+- Discover section:
+    - List most liked and most active project (last week/month/year or all time).
+    - List featured project.
+    - Search projects:
+        - Full text search with priorities over title, tags and description fields.
+        - Order results alphabeticaly, by most liked or more actived.
+        - Filter by 'use kanban', 'use scrum' or 'looking for people'.

 ### Misc
+- Sticky project navigation bar.
 - Lots of small and not so small bugfixes.


--- a/app/images/discover.png
+++ b/app/images/discover.png
--- a/app/images/looking-for-people.png
+++ b/app/images/looking-for-people.png
--- a/app/images/project-logos/project-logo-01.png
+++ b/app/images/project-logos/project-logo-01.png
--- a/app/images/project-logos/project-logo-02.png
+++ b/app/images/project-logos/project-logo-02.png
--- a/app/images/project-logos/project-logo-03.png
+++ b/app/images/project-logos/project-logo-03.png
--- a/app/images/project-logos/project-logo-04.png
+++ b/app/images/project-logos/project-logo-04.png
--- a/app/images/project-logos/project-logo-05.png
+++ b/app/images/project-logos/project-logo-05.png
--- a/app/locales/taiga/locale-en.json
+++ b/app/locales/taiga/locale-en.json
@ -450,9 +450,18 @@
            "NUMBER_US_POINTS": "Number of US points (0 for an undetermined quantity)",
            "TAGS": "Tags",
            "DESCRIPTION": "Description",
+            "RECRUITING": "Is this project looking for people?",
+            "RECRUITING_MESSAGE": "Who are you looking for?",
+            "RECRUITING_PLACEHOLDER": "Define the profiles you are looking for",
            "PUBLIC_PROJECT": "Public project",
+            "PUBLIC_PROJECT_DESC": "Users will be able to find and view your project",
            "PRIVATE_PROJECT": "Private project",
-            "DELETE": "Delete this project"
+            "PRIVATE_PROJECT_DESC": "By default, this project will be hidden to the public",
+            "PRIVATE_OR_PUBLIC": "What's the difference between public and private projects?",
+            "DELETE": "Delete this project",
+            "LOGO_HELP": "The image will be scaled to 80x80px.",
+            "CHANGE_LOGO": "Change logo",
+            "ACTION_USE_DEFAULT_LOGO": "Use default image"
        },
        "REPORTS": {
            "TITLE": "Reports",
@ -715,6 +724,10 @@
        "SECTION_PROJECTS": "Projects",
        "HELP": "Reorder your projects to set in the top the most used ones.<br/> The top 10 projects will appear in the top navigation bar project list",
        "PRIVATE": "Private project",
+        "LOOKING_FOR_PEOPLE": "This project is looking for people",
+        "FANS_COUNTER_TITLE": "{total, plural, one{one fan} other{# fans}}",
+        "WATCHERS_COUNTER_TITLE": "{total, plural, one{one watcher} other{# watchers}}",
+        "MEMBERS_COUNTER_TITLE": "{total, plural, one{one member} other{# members}}",
        "STATS": {
            "PROJECT": "project<br/> points",
            "DEFINED": "defined<br/> points",
@ -744,6 +757,7 @@
            "TITLE_NEXT_PROJECT": "Show next projects",
            "HELP_TITLE": "Taiga Support Page",
            "HELP": "Help",
+            "HOMEPAGE": "Homepage",
            "FEEDBACK_TITLE": "Send feedback",
            "FEEDBACK": "Feedback",
            "NOTIFICATIONS_TITLE": "Edit your notification settings",
@ -1269,9 +1283,9 @@
        }
    },
    "USER_PROFILE": {
-        "IMAGE_HELP": "The image will be scaled to 80x80px.<br />",
+        "IMAGE_HELP": "The image will be scaled to 80x80px.",
        "ACTION_CHANGE_IMAGE": "Change",
-        "ACTION_USE_GRAVATAR": "Use gravatar image",
+        "ACTION_USE_GRAVATAR": "Use default image",
        "ACTION_DELETE_ACCOUNT": "Delete Taiga account",
        "CHANGE_EMAIL_SUCCESS": "<strong>Check your inbox!</strong><br />We have sent a mail to your account<br />with the instructions to set your new address",
        "CHANGE_PHOTO": "Change photo",
@ -1429,5 +1443,33 @@
                "TEXT2": "Good luck!"
            }
        }
+    },
+    "DISCOVER": {
+        "DISCOVER_TITLE": "Discover projects",
+        "DISCOVER_SUBTITLE": "{projects, plural, one{One public project to discover} other{# public projects to discover}}",
+        "MOST_ACTIVE": "Most active",
+        "MOST_ACTIVE_EMPTY": "There are no ACTIVE projects yet",
+        "MOST_LIKED": "Most liked",
+        "MOST_LIKED_EMPTY": "There are no LIKED projects yet",
+        "VIEW_MORE": "View more",
+        "RECRUITING": "This project is looking for people",
+        "FEATURED": "Featured Projects",
+        "EMPTY": "There are no projects to show with this search criteria.<br> Try again!",
+        "FILTERS": {
+            "ALL": "All",
+            "KANBAN": "Kanban",
+            "SCRUM": "Scrum",
+            "PEOPLE": "Looking for people",
+            "WEEK": "Last week",
+            "MONTH": "Last month",
+            "YEAR": "Last year",
+            "ALL_TIME": "All time",
+            "CLEAR": "Clear filters"
+        },
+        "SEARCH": {
+            "INPUT_PLACEHOLDER": "Type something...",
+            "ACTION_TITLE": "Search",
+            "RESULTS": "Search results"
+        }
    }
 }
--- a/app/modules/components/vote-button/vote-button.jade
+++ b/app/modules/components/vote-button/vote-button.jade
@ -16,7 +16,6 @@ a.vote-inner(
    ) {{ vm.item.total_voters }}

 //- Anonymous user button
-
 span.vote-inner(ng-if="::!vm.user")
    span.track-icon
        include ../../../svg/upvote.svg
--- a/app/modules/profile/profile-favs/items/project.jade
+++ b/app/modules/profile/profile-favs/items/project.jade
@ -1,13 +1,26 @@
 .list-itemtype-project
-    .list-itemtype-project-data
-        h2
-            a(
+    .list-itemtype-project-left
+        .list-itemtype-project-data-wrapper
+
+            a.list-itemtype-project-image(
                href="#"
                tg-nav="project:project=vm.item.get('slug')"
                title="{{ ::vm.item.get('name') }}"
-            ) {{ ::vm.item.get('name') }}
-            span.private(ng-if="::project.get('is_private')", title="{{'PROJECT.PRIVATE' | translate}}")
-        p {{ ::vm.item.get('description') }}
+            )
+                img(
+                    tg-project-logo-src="vm.item"
+                    title="{{ ::vm.item.get('name') }}"
+                )
+
+            .list-itemtype-project-data
+                h2
+                    a(
+                        href="#"
+                        tg-nav="project:project=vm.item.get('slug')"
+                        title="{{ ::vm.item.get('name') }}"
+                    ) {{ ::vm.item.get('name') }}
+                    span.private(ng-if="::project.get('is_private')", title="{{'PROJECT.PRIVATE' | translate}}")
+                p {{ ::vm.item.get('description') }}

        .list-itemtype-project-tags.tags-container(ng-if="::vm.item.get('tags_colors').size")
            span.tag(
--- a/app/modules/profile/profile-projects/profile-projects.jade
+++ b/app/modules/profile/profile-projects/profile-projects.jade
@ -13,15 +13,24 @@ section.profile-projects

    .list-itemtype-project(tg-repeat="project in vm.projects")
        .list-itemtype-project-left
-
-            .project-list-single-title
-                h2
-                    a(
-                        href="#"
-                        tg-nav="project:project=project.get('slug')"
-                        title="{{ ::project.get('name') }}"
-                    ) {{::project.get('name')}}
-                p {{ ::project.get('description') | limitTo:300 }}
+            .project-list-single-title-wrapper
+                a.list-itemtype-project-image(
+                    href="#"
+                    tg-nav="project:project=project.get('slug')"
+                    title="{{ ::project.get('name') }}"
+                )
+                    img(
+                        tg-project-logo-src="::project"
+                        alt="{{::project.get('name')}}"
+                    )
+                .project-list-single-title
+                    h2
+                        a(
+                            href="#"
+                            tg-nav="project:project=project.get('slug')"
+                            title="{{ ::project.get('name') }}"
+                        ) {{::project.get('name')}}
+                    p {{ ::project.get('description') | limitTo:300 }}

            .list-itemtype-project-tags.tags-container(ng-if="::project.get('tags').size")
                span.tag(
--- a/app/modules/profile/styles/profile-content-tabs.scss
+++ b/app/modules/profile/styles/profile-content-tabs.scss
@ -4,7 +4,7 @@
    .tab {
        color: $gray-light;
        display: inline-block;
-        padding: 1rem 1.25rem;
+        padding: 1rem;
        &:hover,
        &.active {
            color: $grayer;
--- a/app/modules/projects/listing/projects-listing.jade
+++ b/app/modules/projects/listing/projects-listing.jade
@ -1,28 +1,60 @@
-div.project-list-wrapper.centered
-    div.project-list-title
+.project-list-wrapper.centered
+    .project-list-title
        h1(translate="PROJECTS.MY_PROJECTS")
-        div.create-options
-            a.create-project-btn.button-green(href="#", ng-click="vm.newProject()", title="{{'PROJECT.NAVIGATION.ACTION_CREATE_PROJECT' | translate}}", translate="PROJECT.NAVIGATION.ACTION_CREATE_PROJECT")
+        .create-options
+            a.create-project-btn.button-green(
+                href="#"
+                ng-click="vm.newProject()"
+                title="{{'PROJECT.NAVIGATION.ACTION_CREATE_PROJECT' | translate}}"
+                translate="PROJECT.NAVIGATION.ACTION_CREATE_PROJECT"
+            )
            span(tg-import-project-button)
-                a.button-blackish.import-project-button(href="", title="{{'PROJECT.NAVIGATION.TITLE_IMPORT_PROJECT' | translate}}")
+                a.button-blackish.import-project-button(
+                    href=""
+                    title="{{'PROJECT.NAVIGATION.TITLE_IMPORT_PROJECT' | translate}}"
+                )
                    span.icon.icon-upload
                input.import-file.hidden(type="file")

    section.project-list-section
-        div.project-list
+        .project-list
            ul(tg-sort-projects="vm.projects")
-                li.list-itemtype-project(tg-bind-scope, tg-repeat="project in vm.projects track by project.get('id')")
-                    div.list-itemtype-project-left
-                        div.list-itemtype-project-data
-                            h2 
-                                a(href="#", tg-nav="project:project=project.get('slug')", title="{{ ::project.get('name') }}") {{project.get('name')}}
-                                span.private(ng-if="project.get('is_private')", title="{{'PROJECT.PRIVATE' | translate}}")
-                                    include ../../../svg/lock.svg
-                            p {{ ::project.get('description') | limitTo:300 }}
-                                span(ng-if="::project.get('description').length > 300") ...
-                            
-                        div.list-itemtype-project-tags.tag-container(ng-if="::project.get('tags').size")
-                            span.tag(style='border-left: 5px solid {{::tag.get("color")}};', tg-repeat="tag in ::project.get('colorized_tags')")
+                li.list-itemtype-project(
+                    tg-bind-scope
+                    tg-repeat="project in vm.projects track by project.get('id')"
+                )
+                    .list-itemtype-project-left
+
+                        .list-itemtype-project-data-wrapper
+                            a.list-itemtype-project-image(
+                                href="#"
+                                tg-nav="project:project=project.get('slug')"
+                                title="{{ ::project.get('name') }}"
+                            )
+                                img(
+                                    tg-project-logo-src="::project"
+                                    alt="{{::project.get('name')}}"
+                                )
+                            .list-itemtype-project-data
+                                h2
+                                    a(
+                                        href="#"
+                                        tg-nav="project:project=project.get('slug')"
+                                        title="{{ ::project.get('name') }}"
+                                    ) {{project.get('name')}}
+                                    span.private(
+                                        ng-if="project.get('is_private')"
+                                        title="{{'PROJECT.PRIVATE' | translate}}"
+                                    )
+                                        include ../../../svg/lock.svg
+                                p {{ ::project.get('description') | limitTo:300 }}
+                                    span(ng-if="::project.get('description').length > 300") ...
+
+                        .list-itemtype-project-tags.tag-container(ng-if="::project.get('tags').size")
+                            span.tag(
+                                style='border-left: 5px solid {{::tag.get("color")}};'
+                                tg-repeat="tag in ::project.get('colorized_tags')"
+                            )
                                span.tag-name {{::tag.get('name')}}

                    span.drag.icon.icon-drag-v
--- a/app/modules/projects/listing/styles/profile-projects.scss
+++ b/app/modules/projects/listing/styles/profile-projects.scss
@ -4,6 +4,12 @@
        display: flex;
        justify-content: space-between;
        min-height: 10rem;
+        .project-list-single-title-wrapper {
+            display: flex;
+        }
+        .list-itemtype-project-image {
+            flex-shrink: 0;
+        }
        .list-itemtype-project-right {
            display: flex;
            flex-direction: column;
--- a/app/modules/projects/listing/styles/project-list.scss
+++ b/app/modules/projects/listing/styles/project-list.scss
@ -54,6 +54,13 @@
                opacity: 1;
            }
        }
+        .list-itemtype-project-data-wrapper {
+            display: flex;
+        }
+        .list-itemtype-project-image {
+            flex-shrink: 0;
+            margin-right: 1rem;
+        }
    }
    .drag {
        @extend %large;
--- a/app/modules/projects/project/project.jade
+++ b/app/modules/projects/project/project.jade
@ -2,51 +2,67 @@ div.wrapper
    tg-project-menu
    div.single-project.centered
        section.single-project-intro
-            div.intro-options
-                h1
-                    span.project-name {{::vm.project.get("name")}}
-                    span.private(
-                        ng-if="::vm.project.get('is_private')"
-                        title="{{'PROJECT.PRIVATE' | translate}}"
-                    )
-                        include ../../../svg/lock.svg
-
-                //- Like and wacht buttons for authenticated users
-                div.track-buttons-container(ng-if="vm.user")
-                    tg-like-project-button(project="vm.project")
-                    tg-watch-project-button(project="vm.project")
-
-                //- Like and wacht buttons for anonymous users
-                div.track-container(ng-if="!vm.user")
-                    .list-itemtype-track
-                        span.list-itemtype-track-likers(
-                            title="{{ 'PROJECT.LIKE_BUTTON.COUNTER_TITLE'|translate:{total:vm.project.get(\"total_fans\")||0}:'messageformat' }}"
-                        )
-                            span.icon
-                                include ../../../svg/like.svg
-                            span {{ ::vm.project.get('total_fans') }}
-
-                        span.list-itemtype-track-watchers(
-                            title="{{ 'PROJECT.WATCH_BUTTON.COUNTER_TITLE'|translate:{total:vm.project.get(\"total_watchers\")||0}:'messageformat' }}"
-                        )
-                            span.icon
-                                include ../../../svg/watch.svg
-                            span {{ ::vm.project.get('total_watchers') }}
-
-            p.description {{vm.project.get('description')}}
-
-            div.single-project-tags.tags-container(ng-if="::vm.project.get('tags').size")
-                span.tag(
-                    style='border-left: 5px solid {{::tag.get("color")}};',
-                    tg-repeat="tag in ::vm.project.get('colorized_tags')"
+            .project-logo(
+                href="#"
+                tg-nav="project:project=project.get('slug')"
+                title="{{::project.get('name')}}"
+            )
+                img(
+                    tg-project-logo-src="vm.project"
+                    alt="{{::vm.project.get('name')}}"
                )
-                    span.tag-name {{::tag.get('name')}}
+            .single-project-title-wrapper
+                .intro-options
+                    .intro-title
+                        h1
+                            span.project-name {{::vm.project.get("name")}}
+                        span.private(
+                            ng-if="::vm.project.get('is_private')"
+                            title="{{'PROJECT.PRIVATE' | translate}}"
+                        )
+                            include ../../../svg/lock.svg
+
+                    div.track-buttons-container(ng-if="vm.user")
+                        tg-like-project-button(project="vm.project")
+                        tg-watch-project-button(project="vm.project")
+
+                    div.track-container(ng-if="!vm.user")
+                        .list-itemtype-track
+                            span.list-itemtype-track-likers(
+                                title="{{ 'PROJECT.LIKE_BUTTON.COUNTER_TITLE'|translate:{total:vm.project.get(\"total_fans\")||0}:'messageformat' }}"
+                            )
+                                span.icon
+                                    include ../../../svg/like.svg
+                                span {{ ::vm.project.get('total_fans') }}
+
+                            span.list-itemtype-track-watchers(
+                                title="{{ 'PROJECT.WATCH_BUTTON.COUNTER_TITLE'|translate:{total:vm.project.get(\"total_watchers\")||0}:'messageformat' }}"
+                            )
+                                span.icon
+                                    include ../../../svg/watch.svg
+                                span {{ ::vm.project.get('total_watchers') }}
+
+                p.description {{vm.project.get('description')}}
+
+        div.single-project-tags.tags-container(ng-if="::vm.project.get('tags').size")
+            span.tag(
+                style='border-left: 5px solid {{::tag.get("color")}};',
+                tg-repeat="tag in ::vm.project.get('colorized_tags')"
+            )
+                span.tag-name {{::tag.get('name')}}

        div.project-data
            section.timeline(ng-if="vm.project")
                div(tg-user-timeline, projectId="vm.project.get('id')")

            section.involved-data
+                .looking-for-people(ng-if="vm.project.get('is_looking_for_people')")
+                    img(
+                        src="/#{v}/images/looking-for-people.png"
+                        title="{{'PROJECT.LOOKING_FOR_PEOPLE' | translate}}"
+                    )
+                    h3 {{'PROJECT.LOOKING_FOR_PEOPLE' | translate}}
+                    p(ng-if="vm.project.get('looking_for_people_note')") {{::vm.project.get('looking_for_people_note')}}"
                h2.title {{"PROJECT.SECTION.TEAM" | translate}}
                ul.involved-team
                    li(tg-repeat="member in vm.members")
@ -55,11 +71,3 @@ div.wrapper
                            title="{{::member.get('full_name')}}"
                        )
                            img(ng-src="{{::member.get('photo')}}", alt="{{::member.get('full_name')}}")
-            //-
-                h2.title Organizations
-                div.involved-organization
-                     a(href="", title="User Name")
-                        img(
-                             src="https://s3.amazonaws.com/uifaces/faces/twitter/dan_higham/48.jpg"
-                             alt="{{member.full_name}}"
-                        )
--- a/app/partials/admin/admin-project-profile.jade
+++ b/app/partials/admin/admin-project-profile.jade
@ -1,7 +1,10 @@
 doctype html

-div.wrapper(tg-project-profile, ng-controller="ProjectProfileController as ctrl",
-            ng-init="section='admin'; sectionName='ADMIN.PROJECT_PROFILE.PROJECT_DETAILS'")
+div.wrapper(
+    tg-project-profile
+    ng-controller="ProjectProfileController as ctrl"
+    ng-init="section='admin'; sectionName='ADMIN.PROJECT_PROFILE.PROJECT_DETAILS'"
+)
    tg-project-menu

    sidebar.menu-secondary.sidebar.settings-nav(tg-admin-navigation="project-profile")
@ -15,44 +18,137 @@ div.wrapper(tg-project-profile, ng-controller="ProjectProfileController as ctrl"
            include ../includes/components/mainTitle

        form
-            fieldset
-                label(for="project-name", translate="ADMIN.PROJECT_PROFILE.PROJECT_NAME")
-                input(type="text", name="name", placeholder="{{'ADMIN.PROJECT_PROFILE.PROJECT_NAME' | translate}}", id="project-name",
-                      ng-model="project.name", data-required="true", maxlength="45")

-            fieldset
-                label(for="project-sprints", translate="ADMIN.PROJECT_PROFILE.NUMBER_SPRINTS")
-                input(type="number", name="total_milestones", min="0", placeholder="{{'ADMIN.PROJECT_PROFILE.NUMBER_SPRINTS' | translate}}",
-                      id="project-sprints", ng-model="project.total_milestones", data-type="digits")
+            .project-details-image(tg-project-logo)
+                fieldset.image-container
+                    img.image(
+                        tg-project-logo-src="project._attrs"
+                        alt="logo"
+                    )
+                    .loading-overlay
+                        img.loading-spinner(
+                            src="/#{v}/svg/spinner-circle.svg",
+                            alt="{{'COMMON.LOADING' | translate}}"
+                        )
+                    input.hidden(
+                        type="file"
+                        id="logo-field"
+                        tg-project-logo-model="logoAttachment"
+                    )
+                p.image-help
+                    span {{ 'ADMIN.PROJECT_PROFILE.LOGO_HELP' | translate }}
+                    span.size-info.hidden(tg-bo-html="maxFileSizeMsg")

-            fieldset
-                label(for="total-story-points", translate="ADMIN.PROJECT_PROFILE.NUMBER_US_POINTS")
-                input(type="number", name="total_story_points", min="0", placeholder="{{'ADMIN.PROJECT_PROFILE.NUMBER_US_POINTS' | translate}}",
-                      id="total-story-points", ng-model="project.total_story_points",
-                      data-type="digits")
+                a.button-green.change.js-change-logo(
+                    href="#"
+                    title="{{'ADMIN.PROJECT_PROFILE.CHANGE_LOGO' | translate}}"
+                ) {{'ADMIN.PROJECT_PROFILE.CHANGE_LOGO' | translate}}

-            fieldset
-                label(for="tags", translate="ADMIN.PROJECT_PROFILE.TAGS")
-                div.tags-block(ng-if="project.id", tg-lb-tag-line, ng-model="project.tags")
+                a.use-default-image.js-use-default-logo(
+                    href="#"
+                    title="{{ 'ADMIN.PROJECT_PROFILE.ACTION_USE_DEFAULT_LOGO' | translate }}"
+                ) {{ 'ADMIN.PROJECT_PROFILE.ACTION_USE_DEFAULT_LOGO' | translate }}

-            fieldset
-                label(for="project-description", translate="ADMIN.PROJECT_PROFILE.DESCRIPTION")
-                textarea(name="description", ng-attr-placeholder="{{'ADMIN.PROJECT_PROFILE.DESCRIPTION' | translate}}", id="project-description",
-                         ng-model="project.description", data-required="true")

-            div
-                div.privacy-settings
-                    div
-                        input.privacy-project(type="radio", name="private-project", ng-model="project.is_private", ng-value="false")
-                        label.trans-button(for="public-project")
-                            span(translate="ADMIN.PROJECT_PROFILE.PUBLIC_PROJECT")
-                    div
-                        input.privacy-project(type="radio", name="private-project", ng-model="project.is_private", ng-value="true")
-                        label.trans-button(for="private-project")
-                            span(translate="ADMIN.PROJECT_PROFILE.PRIVATE_PROJECT")
+            .project-details-form-data

-            button.button-green.submit-button(type="submit", title="{{'COMMON.SAVE' | translate}}", translate="COMMON.SAVE")
-            a.delete-project(href="", title="{{'ADMIN.PROJECT_PROFILE.DELETE' | translate}}", ng-click="ctrl.openDeleteLightbox()", translate="ADMIN.PROJECT_PROFILE.DELETE")
+                fieldset
+                    label(for="project-name") {{ 'ADMIN.PROJECT_PROFILE.PROJECT_NAME' | translate }}
+                    input(
+                        type="text"
+                        name="name"
+                        placeholder="{{'ADMIN.PROJECT_PROFILE.PROJECT_NAME' | translate}}"
+                        id="project-name"
+                        ng-model="project.name"
+                        data-required="true"
+                        maxlength="45"
+                    )
+
+                fieldset
+                    label(for="project-description") {{ 'ADMIN.PROJECT_PROFILE.DESCRIPTION' | translate }}
+                    textarea(
+                        name="description"
+                        ng-attr-placeholder="{{'ADMIN.PROJECT_PROFILE.DESCRIPTION' | translate}}"
+                        id="project-description"
+                        ng-model="project.description"
+                        data-required="true"
+                    )
+
+                fieldset
+                    label(for="tags") {{ 'ADMIN.PROJECT_PROFILE.TAGS' | translate }}
+                    div.tags-block(
+                        ng-if="project.id"
+                        tg-lb-tag-line
+                        ng-model="project.tags"
+                    )
+                fieldset.looking-for-people
+                    .looking-for-people-selector
+                        span {{ 'ADMIN.PROJECT_PROFILE.RECRUITING' | translate }}
+                        span(
+                            title="{{ 'ADMIN.PROJECT_PROFILE.RECRUITING_MESSAGE' | translate }}"
+                        )
+                            include ../../svg/recruit.svg
+                        div.check
+                            input(
+                                type="checkbox",
+                                ng-model="project.is_looking_for_people"
+                            )
+                            div
+                            span.check-text.check-yes(translate="COMMON.YES")
+                            span.check-text.check-no(translate="COMMON.NO")
+
+                    .looking-for-people-reason(ng-show="project.is_looking_for_people")
+                        label {{ 'ADMIN.PROJECT_PROFILE.RECRUITING_MESSAGE' | translate }}
+                        input(
+                            type="text"
+                            maxlength="200"
+                            ng-model="project.looking_for_people_note"
+                            placeholder="{{ 'ADMIN.PROJECT_PROFILE.RECRUITING_PLACEHOLDER' | translate }}"
+                        )
+
+                fieldset
+                    .project-privacy-settings
+                        div.privacy-option
+                            input.privacy-project(
+                                type="radio"
+                                id="private-project"
+                                name="privacy-project"
+                                ng-model="project.is_private"
+                                ng-value="false"
+                            )
+                            label.trans-button(for="private-project") {{ 'ADMIN.PROJECT_PROFILE.PUBLIC_PROJECT' | translate }}
+                                span(title="{{ 'ADMIN.PROJECT_PROFILE.PUBLIC_PROJECT_DESC' | translate }}")
+                                    include ../../svg/help.svg
+                                    
+                        div.privacy-option
+                            input.privacy-project(
+                                type="radio"
+                                id="public-project"
+                                name="privacy-project"
+                                ng-model="project.is_private"
+                                ng-value="true"
+                            )
+                            label.trans-button(for="public-project") {{'ADMIN.PROJECT_PROFILE.PRIVATE_PROJECT' | translate }}
+                                span(title="{{ 'ADMIN.PROJECT_PROFILE.PRIVATE_PROJECT_DESC' | translate }}")
+                                    include ../../svg/help.svg
+
+                    a.private-or-public(
+                        href="https://taiga.io/support/whats-the-difference-between-public-and-private-projects/"
+                        target="_blank"
+                    )
+                        span(title="{{ 'ADMIN.PROJECT_PROFILE.PRIVATE_OR_PUBLIC' | translate }}")
+                            include ../../svg/help.svg
+                        span {{'ADMIN.PROJECT_PROFILE.PRIVATE_OR_PUBLIC' | translate }}
+                button.button-green.submit-button(
+                    type="submit"
+                    title="{{'COMMON.SAVE' | translate}}"
+                    translate="COMMON.SAVE"
+                )
+                a.delete-project(
+                    href=""
+                    title="{{'ADMIN.PROJECT_PROFILE.DELETE' | translate}}"
+                    ng-click="ctrl.openDeleteLightbox()"
+                ) {{ 'ADMIN.PROJECT_PROFILE.DELETE' | translate }}

 div.lightbox.lightbox-delete-project(tg-lb-delete-project)
    include ../includes/modules/lightbox-delete-project
--- a/app/partials/includes/components/mainTitle.jade
+++ b/app/partials/includes/components/mainTitle.jade
@ -1,2 +1,6 @@
 header
-    h1(tg-main-title, project-name="project.name", i18n-section-name="{{ sectionName }}")
+    h1(
+        tg-main-title
+        project-name="project.name"
+        i18n-section-name="{{ sectionName }}"
+    )
--- a/app/partials/user/mail-notifications.jade
+++ b/app/partials/user/mail-notifications.jade
@ -1,8 +1,10 @@
 doctype html

-div.wrapper(tg-user-notifications, ng-controller="UserNotificationsController as ctrl",
-                ng-init="section='mail-notifications'")
-    tg-project-menu
+div.wrapper(
+    tg-user-notifications
+    ng-controller="UserNotificationsController as ctrl",
+    ng-init="section='mail-notifications'"
+)

    sidebar.menu-secondary.sidebar.settings-nav(tg-user-settings-navigation="mail-notifications")
        include ../includes/modules/user-settings-menu
--- a/app/partials/user/user-change-password.jade
+++ b/app/partials/user/user-change-password.jade
@ -5,8 +5,6 @@ div.wrapper(
    ng-controller="UserChangePasswordController as ctrl"
    ng-init="section='user-settings'"
 )
-    tg-project-menu
-
    sidebar.menu-secondary.sidebar.settings-nav(tg-user-settings-navigation="change-password")
        include ../includes/modules/user-settings-menu

--- a/app/partials/user/user-profile.jade
+++ b/app/partials/user/user-profile.jade
@ -1,126 +1,129 @@
 doctype html

-div.wrapper(tg-user-profile, ng-controller="UserSettingsController as ctrl",
-            ng-init="section='user-settings'")
+div.wrapper(
+    tg-user-profile
+    ng-controller="UserSettingsController as ctrl"
+    ng-init="section='user-settings'"
+)

    sidebar.menu-secondary.sidebar.settings-nav(tg-user-settings-navigation="user-profile")
        include ../includes/modules/user-settings-menu

    section.main.user-profile
        header
-            h1
-                span.green {{sectionName | translate}}
+            include ../includes/components/mainTitle

        form
-            div.container
-                div.avatar-container
-                    fieldset(tg-user-avatar)
-                        .image-container
-                            img.avatar(ng-src="{{user.big_photo}}" alt="avatar")
-                            .overlay.hidden
-                                img.loading-spinner(
-                                    src="/#{v}/svg/spinner-circle.svg",
-                                    alt="{{'COMMON.LOADING' | translate}}"
-                                )
-
-                        input.hidden(
-                            type="file"
-                            id="avatar-field"
-                            tg-avatar-model="avatarAttachment"
+            .project-details-image(tg-user-avatar)
+                fieldset.image-container
+                    img.image(ng-src="{{user.big_photo}}" alt="avatar")
+                    .loading-overlay
+                        img.loading-spinner(
+                            src="/#{v}/svg/spinner-circle.svg",
+                            alt="{{'COMMON.LOADING' | translate}}"
                        )
+                    input.hidden(
+                        type="file"
+                        id="avatar-field"
+                        tg-avatar-model="avatarAttachment"
+                    )
+                p.image-help
+                    span {{ 'USER_PROFILE.IMAGE_HELP' | translate }}
+                    span.size-info.hidden(tg-bo-html="maxFileSizeMsg")

-                        p(translate="USER_PROFILE.IMAGE_HELP")
-                            span.size-info.hidden(tg-bo-html="maxFileSizeMsg")
+                a.button-green.change.js-change-avatar(
+                    href="#"
+                    title="{{'USER_PROFILE.CHANGE_PHOTO' | translate}}"
+                ) {{'USER_PROFILE.CHANGE_PHOTO' | translate}}

-                        a.button-green.change.js-change-avatar(
-                            translate="USER_PROFILE.ACTION_CHANGE_IMAGE",
-                            title="{{'USER_PROFILE.CHANGE_PHOTO' | translate}} {{maxFileSizeMsg}}"
-                        )
-                        a.use-gravatar(translate="USER_PROFILE.ACTION_USE_GRAVATAR")
+                a.use-default-image.js-use-gravatar(
+                    href="#"
+                    title="{{ 'USER_PROFILE.ACTION_USE_GRAVATAR' | translate }}"
+                ) {{ 'USER_PROFILE.ACTION_USE_GRAVATAR' | translate }}

-                div.data
-                    fieldset
-                        label(for="username", translate="USER_PROFILE.FIELD.USERNAME")
-                        input(
-                            type="text"
-                            autocorrect="off" 
-                            autocapitalize="none"
-                            name="username"
-                            id="username"
-                            ng-model="user.username"
-                            data-required="true"
-                            data-maxlength="255"
-                            data-regexp="^[\\w.-]+$"
-                            placeholder="{{'USER_PROFILE.FIELD.USERNAME' | translate}}",
-                        )
+            .project-details-form-data
+                fieldset
+                    label(for="username", translate="USER_PROFILE.FIELD.USERNAME")
+                    input(
+                        type="text"
+                        autocorrect="off"
+                        autocapitalize="none"
+                        name="username"
+                        id="username"
+                        ng-model="user.username"
+                        data-required="true"
+                        data-maxlength="255"
+                        data-regexp="^[\\w.-]+$"
+                        placeholder="{{'USER_PROFILE.FIELD.USERNAME' | translate}}",
+                    )

-                    fieldset
-                        label(for="email", translate="USER_PROFILE.FIELD.EMAIL")
-                        input(
-                            type="email"
-                            name="email"
-                            id="email"
-                            ng-model="user.email"
-                            data-type="email"
-                            data-required="true"
-                            data-maxlength="255"
-                            placeholder="{{'USER_PROFILE.FIELD.EMAIL' | translate}}"
-                        )
+                fieldset
+                    label(for="email", translate="USER_PROFILE.FIELD.EMAIL")
+                    input(
+                        type="email"
+                        name="email"
+                        id="email"
+                        ng-model="user.email"
+                        data-type="email"
+                        data-required="true"
+                        data-maxlength="255"
+                        placeholder="{{'USER_PROFILE.FIELD.EMAIL' | translate}}"
+                    )

-                    fieldset
-                        label(for="full-name", translate="USER_PROFILE.FIELD.FULL_NAME")
-                        input(
-                            type="text"
-                            name="full_name"
-                            id="full-name"
-                            ng-model="user.full_name"
-                            data-required="true"
-                            data-maxlength="256"
-                            placeholder="{{'USER_PROFILE.FIELD.PLACEHOLDER_FULL_NAME' | translate}}",
-                        )
+                fieldset
+                    label(for="full-name", translate="USER_PROFILE.FIELD.FULL_NAME")
+                    input(
+                        type="text"
+                        name="full_name"
+                        id="full-name"
+                        ng-model="user.full_name"
+                        data-required="true"
+                        data-maxlength="256"
+                        placeholder="{{'USER_PROFILE.FIELD.PLACEHOLDER_FULL_NAME' | translate}}",
+                    )

-                    fieldset
-                        label(for="lang", translate="USER_PROFILE.FIELD.LANGUAGE")
-                        select(
-                            name="lang"
-                            id="lang"
-                            ng-model="lang"
-                            ng-options="locale.code as locale.name for locale in locales"
-                        )
-                            option(value="", translate="USER_PROFILE.FIELD.LANGUAGE_DEFAULT")
+                fieldset
+                    label(for="lang", translate="USER_PROFILE.FIELD.LANGUAGE")
+                    select(
+                        name="lang"
+                        id="lang"
+                        ng-model="lang"
+                        ng-options="locale.code as locale.name for locale in locales"
+                    )
+                        option(value="", translate="USER_PROFILE.FIELD.LANGUAGE_DEFAULT")

-                     fieldset
-                        label(for="theme", translate="USER_PROFILE.FIELD.THEME")
-                        select(
-                            name="theme"
-                            id="theme"
-                            ng-model="theme"
-                            ng-options="availableTheme for availableTheme in availableThemes"
-                        )
-                            option(value="", translate="USER_PROFILE.FIELD.THEME_DEFAULT")
+                 fieldset
+                    label(for="theme", translate="USER_PROFILE.FIELD.THEME")
+                    select(
+                        name="theme"
+                        id="theme"
+                        ng-model="theme"
+                        ng-options="availableTheme for availableTheme in availableThemes"
+                    )
+                        option(value="", translate="USER_PROFILE.FIELD.THEME_DEFAULT")

-                    fieldset
-                        label(for="bio", translate="USER_PROFILE.FIELD.BIO")
-                        textarea(
-                            name="bio"
-                            id="bio"
-                            ng-model="user.bio"
-                            ng-attr-placeholder="{{'USER_PROFILE.FIELD.PLACEHOLDER_BIO' | translate}}"
-                            ng-maxlength="210"
-                            maxlength="210"
-                        )
+                fieldset
+                    label(for="bio", translate="USER_PROFILE.FIELD.BIO")
+                    textarea(
+                        name="bio"
+                        id="bio"
+                        ng-model="user.bio"
+                        ng-attr-placeholder="{{'USER_PROFILE.FIELD.PLACEHOLDER_BIO' | translate}}"
+                        ng-maxlength="210"
+                        maxlength="210"
+                    )

-            fieldset.submit
-                button.button-green.submit-button(
-                    type="submit"
-                    title="{{'COMMON.SAVE' | translate}}",
-                    translate="COMMON.SAVE"
-                )
-                a.delete-account(
-                    href=""
-                    title="{{'USER_PROFILE.ACTION_DELETE_ACCOUNT' | translate}}"
-                    ng-click="ctrl.openDeleteLightbox()"
-                    translate="USER_PROFILE.ACTION_DELETE_ACCOUNT"
-                )
+        fieldset.submit
+            button.button-green.submit-button(
+                type="submit"
+                title="{{'COMMON.SAVE' | translate}}",
+                translate="COMMON.SAVE"
+            )
+            a.delete-account(
+                href=""
+                title="{{'USER_PROFILE.ACTION_DELETE_ACCOUNT' | translate}}"
+                ng-click="ctrl.openDeleteLightbox()"
+                translate="USER_PROFILE.ACTION_DELETE_ACCOUNT"
+            )

 div.lightbox.lightbox-delete-account(tg-lb-delete-user)
--- a/app/styles/components/buttons.scss
+++ b/app/styles/components/buttons.scss
@ -4,6 +4,7 @@
    @extend %small;
    background: transparent;
    border: 0;
+    border-radius: 3px;
    color: $white;
    cursor: pointer;
    display: inline-block;
--- a/app/styles/components/list-items.scss
+++ b/app/styles/components/list-items.scss
@ -35,6 +35,17 @@
    h2 {
        @extend %large;
    }
+    .list-itemtype-project-data-wrapper {
+        display: flex;
+    }
+    .list-itemtype-project-image {
+        flex-shrink: 0;
+        margin-right: .5rem;
+        width: 3rem;
+        img {
+            width: 100%;
+        }
+    }
    .list-itemtype-project-members {
        align-self: flex-end;
        display: flex;
--- a/app/styles/components/private.scss
+++ b/app/styles/components/private.scss
@ -3,8 +3,7 @@
    margin-left: .5rem;
    width: .5rem;
    svg {
-        height: .5rem;
-        width: .5rem;
+        @include svg-size();
    }
    path {
        fill: $gray-light;
--- a/app/styles/components/tag.scss
+++ b/app/styles/components/tag.scss
@ -40,7 +40,10 @@
    input {
        margin-right: .25rem;
        padding: .4rem;
-        width: 10rem;
+        width: 14rem;
+        +.icon-floppy {
+            margin-left: .5rem;
+        }
    }
    .tag {
        @extend %small;
--- a/app/styles/core/elements.scss
+++ b/app/styles/core/elements.scss
@ -84,3 +84,11 @@ svg {
        }
    }
 }
+
+.spin {
+    img {
+        @extend %loading-spinner;
+        max-height: 2rem;
+        max-width: 2rem;
+    }
+}
--- a/app/styles/core/typography.scss
+++ b/app/styles/core/typography.scss
@ -36,14 +36,14 @@ h6 {
 }

 h1 {
-    @extend %xxlarge;
-    @extend %title;
+    @extend %xlarge;
+    @extend %light;
    line-height: 1.5;
    margin-bottom: 1rem;
    text-transform: uppercase;

    span {
-        @extend %xxlarge;
+        @extend %larger;
        margin-right: .5rem;
        overflow: hidden;
        text-overflow: ellipsis;
@ -77,8 +77,8 @@ h1 {
 }

 h2 {
-    @extend %xlarge;
-    @extend %title;
+    @extend %larger;
+    @extend %text;
    line-height: 1.2;
    margin-bottom: 1rem;
 }
--- a/app/styles/dependencies/mixins.scss
+++ b/app/styles/dependencies/mixins.scss
@ -109,7 +109,6 @@
        @extend %small;
        color: $gray-light;
        display: flex;
-        flex-basis: 150px;
        flex-shrink: 0;
        justify-content: flex-end;
        .list-itemtype-track-likers {
@ -146,4 +145,24 @@
    .in-progress {
        cursor: progress;
    }
-}
+}
+
+@mixin centered {
+    margin: 1rem auto;
+    max-width: 1200px;
+    min-width: 768px;
+    @include breakpoint(tablet) {
+        width: 90%;
+        min-width: 0;
+    }
+}
+
+@mixin svg-size($width: 1rem, $height: null) {
+    @if $height == null {
+        width: $width;
+        height: $width;
+    } @else {
+        width: $width;
+        height: $height;
+    }
+}
--- a/app/styles/dependencies/mixins/profile-form.scss
+++ b/app/styles/dependencies/mixins/profile-form.scss
@ -0,0 +1,73 @@
+@mixin profile-form {
+    form {
+        display: flex;
+    }
+    fieldset {
+        margin-bottom: 1rem;
+    }
+    label {
+        @extend %light;
+        display: block;
+        margin-bottom: .2rem;
+    }
+    .project-details-image {
+        flex-shrink: 0;
+        flex-grow: 0;
+        width: 180px;
+        margin-right: 2rem;
+        .image {
+            width: 100%;
+        }
+        .loading-spinner {
+
+        }
+    }
+
+    .image-container {
+        position: relative;
+        margin-bottom: 0;
+    }
+    .loading-overlay {
+        display: none;
+        &.active {
+            align-items: center;
+            background: rgba($blackish, .8);
+            bottom: 0;
+            display: flex;
+            left: 0;
+            position: absolute;
+            right: 0;
+            top: 0;
+            width: 100%;
+        }
+    }
+    .loading-spinner {
+        @extend %loading-spinner;
+        border: 0;
+        transform-origin: center center;
+    }
+    .image-help {
+        @extend %xsmall;
+        line-height: 1rem;
+        margin-bottom: .5rem;
+        text-align: center;
+    }
+    .use-default-image {
+        @extend %xsmall;
+        text-align: center;
+        &:hover {
+            color: $red;
+        }
+    }
+
+    .project-details-form-data {
+        flex: 1;
+        max-width: 500px;
+    }
+
+    @include breakpoint(tablet) {
+        form {
+            display: block;
+        }
+    }
+}
--- a/app/styles/dependencies/mixins/project-card.scss
+++ b/app/styles/dependencies/mixins/project-card.scss
@ -0,0 +1,75 @@
+@mixin project-card {
+    background: $white;
+    border: 1px solid $whitish;
+    margin: .5rem;
+    .tags-container {
+        display: flex;
+        height: .3rem;
+    }
+    .project-tag {
+        flex: 1;
+    }
+    .project-card-inner {
+        padding: 1rem;
+        display: flex;
+        flex-direction: column;
+    }
+    .project-card-description {
+        @extend %small;
+        @extend %light;
+        color: $gray;
+    }
+    .project-card-statistics {
+        display: flex;
+        margin-top: auto;
+        svg {
+            @include svg-size(.8rem);
+            fill: $gray-light;
+        }
+        .svg-eye-closed {
+            display: none;
+        }
+    }
+    .statistic {
+        @extend %small;
+        color: $gray-light;
+        display: inline-block;
+        margin-right: .5rem;
+        &.active {
+            color: $primary;
+            svg {
+                fill: $primary;
+            }
+        }
+    }
+    .project-card-header {
+        align-items: flex-start;
+        display: flex;
+    }
+    .project-card-logo {
+        flex-basis: 50px;
+        min-width: 50px;
+        margin-right: .5rem;
+        img {
+            width: 100%;
+        }
+    }
+    .project-card-name {
+        line-height: .9;
+        a {
+            @extend %large;
+            @extend %large;
+            color: $primary;
+            &:hover {
+                color: $primary-light;
+            }
+        }
+    }
+    .look-for-people {
+        svg {
+            @include svg-size(1rem);
+            fill: $gray-light;
+            margin: 0 .5rem;
+        }
+    }
+}
--- a/app/styles/layout/auth.scss
+++ b/app/styles/layout/auth.scss
@ -14,13 +14,11 @@
        flex-basis: 400px;
    }
    .logo-svg {
-        max-height: 140px;
-        padding: 0 33%;
        text-align: center;
        width: 100%;
        svg {
-            max-height: 100%;
-            max-width: 100%;
+            height: 8rem;
+            width: 8rem;
        }
    }
    .logo {
--- a/app/styles/layout/ticket-detail.scss
+++ b/app/styles/layout/ticket-detail.scss
@ -10,9 +10,11 @@
    .us-title {
        @extend %large;
        @extend %text;
+        align-items: center;
        background: $whitish;
+        display: flex;
        flex: 1;
-        padding: 1rem;
+        padding: .5rem;
        position: relative;
        transition: all .2s linear;
        &.blocked {
@ -64,11 +66,14 @@
            flex-grow: 1;
        }
        .us-title-text {
+            @extend %larger;
+            @extend %text;
            align-content: center;
            align-items: center;
            display: flex;
+            flex: 1;
            margin-bottom: 0;
-            max-width: 94%;
+            max-width: 92%;
        }
        .us-title-text:hover {
            .icon-edit {
@ -77,16 +82,14 @@
            }
        }
        .us-number {
-            @extend %xlarge;
-            @extend %title;
+            @extend %text;
            color: $gray-light;
            flex-shrink: 0;
            line-height: 2.2rem;
            margin-right: .5rem;
        }
        .us-name {
-            @extend %xlarge;
-            color: $grayer;
+            color: $gray;
            display: inline-block;
            line-height: 2.2rem;
            padding-right: 1rem;
--- a/app/styles/modules/admin/admin-project-profile.scss
+++ b/app/styles/modules/admin/admin-project-profile.scss
@ -1,74 +1,106 @@
+@import '../dependencies/mixins/profile-form';
+
 .project-details {
-    form {
-        max-width: 700px;
-        width: 100%;
+    @include profile-form;
+    .looking-for-people {
+        @extend %light;
+        border-bottom: 1px solid $whitish;
+        border-top: 1px solid $whitish;
+        padding: 1rem 0;
    }
-    input,
-    textarea {
-        @extend %title;
+    .looking-for-people-selector {
+        align-items: center;
+        display: flex;
+        svg {
+            @include svg-size();
+            fill: $gray-light;
+            margin-left: .5rem;
+        }
+        .check {
+            margin-left: auto;
+        }
    }
-    fieldset {
-        margin-bottom: 1rem;
+    .looking-for-people-reason {
+        display: block;
+        margin-top: 1rem;
+        &.ng-hide-remove-active {
+            animation: dropdownFade .3s;
+        }
+        &.ng-hide-add-active {
+            animation: dropdownFade .2s reverse;
+            animation-delay: .1s;
+        }
+    }
+
+    .delete-project {
+        @extend %xsmall;
+        display: block;
+        margin-top: 1rem;
+        text-align: right;
+        &:hover {
+            color: $red;
+        }
+    }
+    .private-or-public {
+        @extend %xsmall;
+        color: $gray-light;
+        margin-bottom: 2rem;
+        svg {
+            @include svg-size(1.1rem);
+            fill: $gray-light;
+            margin-right: .5rem;
+            vertical-align: middle;
+        }
+    }
+
+}
+
+.project-privacy-settings {
+    display: flex;
+    margin-bottom: .5rem;
+    .privacy-option {
+        flex: 1;
+        transition: .2 linear;
+        &:first-child {
+            margin-right: .5rem;
+        }
+    }
+    input[type="radio"] {
+        display: none;
+    }
+    input[type="text"] {
+        display: none;
    }
    label {
-        @extend %title;
-        display: block;
-        margin-bottom: .2rem;
-    }
-    textarea {
-        height: 10rem;
-    }
-    .privacy-settings {
-        display: flex;
-        margin-bottom: 2rem;
-        > div {
-            flex-basis: 0;
-            flex-grow: 1;
-            overflow: hidden;
-            position: relative;
-            &:first-child {
-                margin-right: .5rem;
+        background: $whitish;
+        color: $grayer;
+        text-align: center;
+        transition: all .2s linear;
+        &:hover {
+            background: rgba($primary-light, .4);
+            color: $grayer;
+            svg {
+                fill: $grayer;
            }
        }
-        label {
-            @extend %title;
-            border: 1px solid $gray-light;
-            cursor: not-allowed;
-            display: block;
-            text-align: center;
-            transition: all .2s linear;
-            span {
-                color: $gray-light;
-            }
+        svg {
+            @include svg-size(1.1rem);
+            fill: $grayer;
+            margin-left: .5rem;
+            vertical-align: middle;
        }
    }
-    .privacy-project {
-        cursor: pointer;
-        height: 50px;
-        left: -10px;
-        opacity: 0;
-        position: absolute;
-        top: -10px;
-        width: 500px;
-        z-index: 999;
-    }
    .privacy-project:checked {
        + label {
            background: $primary-light;
-            border: 1px solid $primary-light;
-            span {
-                color: $white;
+            color: $white;
+            svg {
+                @include svg-size(1.1rem);
+                fill: $white;
            }
        }
-    }
-    .button-green {
-        color: $white;
-        display: block;
-        text-align: center;
-    }
-    .delete-project {
-        @extend %small;
-        display: block;
-        margin-top: 1rem;
+        ~input[type="text"] {
+            display: block;
+        }
    }
 }
--- a/app/styles/modules/backlog/taskboard-table.scss
+++ b/app/styles/modules/backlog/taskboard-table.scss
@ -68,9 +68,11 @@ $column-margin: 0 10px 0 0;
        position: absolute;
    }
    .task-colum-name {
-        @extend %large;
+        @extend %medium;
+        align-items: center;
        background: $whitish;
        border-top: 3px solid $gray-light;
+        color: $gray;
        display: flex;
        flex-basis: $column-width;
        flex-grow: $column-flex;
--- a/app/styles/modules/home-project.scss
+++ b/app/styles/modules/home-project.scss
@ -1,24 +1,35 @@
 .single-project {
    .single-project-intro {
+        display: flex;
        margin-bottom: 2rem;
    }
+    .project-logo {
+        margin-right: 1rem;
+        width: 6rem;
+        img {
+            width: 100%;
+        }
+    }
+    .single-project-title-wrapper {
+        flex: 1;
+    }
    .intro-options {
        align-items: center;
        display: flex;
        justify-content: space-between;
+        margin-bottom: .5rem;
+    }
+    .intro-title {
+        align-items: center;
+        display: flex;
    }
    h1 {
        color: $primary;
        display: inline-block;
        line-height: 1.2;
        margin-bottom: 0;
-        margin-right: 3rem;
        vertical-align: middle;
    }
-    .private {
-        font-size: 1rem;
-        vertical-align: super;
-    }
    .like-watch-container {
        margin-left: auto;
    }
@ -34,6 +45,7 @@
    .description {
        @extend %light;
        @extend %medium;
+        margin: 0;
    }
    .project-data {
        display: flex;
@ -60,6 +72,18 @@
        max-width: 960px;
        width: 0;
    }
+    .looking-for-people {
+        img {
+            width: 100%;
+        }
+        h3 {
+            @extend %small;
+        }
+        p {
+            @extend %small;
+            @extend %light;
+        }
+    }
    .involved-data {
        flex-basis: 220px;
        width: 220px;
@ -70,8 +94,8 @@
        flex-wrap: wrap;
        margin-bottom: 1rem;
        li {
+            flex-basis: 24%;
            margin-right: .14rem;
-            width: 24%;
            &:nth-child(4n) {
                margin-right: 0;
            }
--- a/app/styles/modules/kanban/kanban-table.scss
+++ b/app/styles/modules/kanban/kanban-table.scss
@ -65,9 +65,11 @@ $column-margin: 0 10px 0 0;
        position: absolute;
    }
    .task-colum-name {
-        @extend %large;
+        @extend %medium;
+        align-items: center;
        background: $whitish;
        border-top: 3px solid $gray-light;
+        color: $gray;
        display: flex;
        flex-basis: $column-width;
        flex-grow: $column-flex;
--- a/app/styles/modules/user-settings/user-profile.scss
+++ b/app/styles/modules/user-settings/user-profile.scss
@ -1,81 +1,10 @@
+@import '../dependencies/mixins/profile-form';
+
 .user-profile {
-    form {
-        max-width: 700px;
+    @include profile-form;
+    max-width: 780px;
+    .submit-button {
        width: 100%;
-        .container {
-            display: flex;
-        }
-        .avatar-container {
-            flex-basis: 0;
-            flex-grow: 1;
-            margin-right: 1rem;
-            .image-container {
-                position: relative;
-            }
-            .avatar {
-                border-radius: 8%;
-                width: 100%;
-            }
-            .overlay {
-                align-items: center;
-                background: rgba($blackish, .8);
-                bottom: 0;
-                display: flex;
-                left: 0;
-                position: absolute;
-                right: 0;
-                top: 0;
-                width: 100%;
-            }
-            .loading-spinner {
-                @extend %loading-spinner;
-                border: 0;
-                min-height: 3rem;
-                min-width: 3rem;
-                transform-origin: center center;
-            }
-            p {
-                @extend %xsmall;
-                line-height: .8rem;
-                margin-bottom: .3rem;
-                text-align: center;
-            }
-            span {
-                @extend %bold;
-            }
-            .use-gravatar {
-                @extend %small;
-                cursor: pointer;
-                display: inline-block;
-                text-align: center;
-                width: 100%;
-            }
-        }
-        .data {
-            flex-basis: 0;
-            flex-grow: 3;
-        }
-    }
-    fieldset {
-        margin-bottom: 1rem;
-    }
-    .submit {
-        margin-top: 2rem;
-    }
-    label {
-        @extend %title;
-        display: block;
-        margin-bottom: .5rem;
-    }
-    textarea {
-        min-height: 7rem;
-    }
-    .button-green {
-        color: $white;
-        cursor: pointer;
-        display: block;
-        padding: 12px;
-        text-align: center;
    }
    .delete-account {
        @extend %small;
--- a/app/svg/activity.svg
+++ b/app/svg/activity.svg
@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 21.7">
+  <g transform="matrix(.55 0 0 .55 -2.17 -2.34)">
+    <path d="M32 12l4.6 4.6-9.8 9.7-8-8L4 33.3 6.8 36l12-12 8 8 12.6-12.6L44 24V12z"/>
+  </g>
+</svg>
--- a/app/svg/discover.svg
+++ b/app/svg/discover.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.009972 21.659925">
+  <path d="M9.5 21.9c-4.2-.6-7.7-3.48-9.03-7.5-.4-1.2-.56-2.34-.53-3.76.05-1.7.37-3 1.1-4.5.52-1.06 1.47-2.37 2.26-3.1C5 1.43 6.88.5 9.16.07c.62-.1 2.28-.15 2.98-.07 4.17.48 7.7 3.26 9.16 7.2.26.7.47 1.6.58 2.44.1.9.08 2.33-.07 3.2-.82 4.6-4.38 8.17-9 9-.8.14-2.52.17-3.3.06zm-.9-2.2c.16-.3.82-1.08 1-1.2l.4-.26c.3-.2.44-.4.66-1.02.3-.82.26-1.36-.07-1.56-.1-.04-.4-.14-.7-.22-.53-.14-1.05-.37-1.2-.54-.05-.05-.13-.23-.18-.4-.1-.37-.26-.48-.86-.66-.4-.12-.5-.13-1.53-.13-1.07 0-1.1 0-1.25-.1-.17-.16-.55-.7-.55-.82 0-.05-.04-.13-.08-.18-.06-.1-.13-.1-.42-.1-.2 0-.38 0-.42-.04-.17-.15 0-.74.3-1.06.17-.2.3-.2.72-.1.73.22 1 .48 1 1.04 0 .28.1.46.2.35.03-.04.1-.36.13-.73.16-1.34.24-1.58.7-2 .34-.33.63-.47.9-.43.16.02.3 0 .67-.16.65-.26 1-.46 1.3-.77.3-.3.38-.5.28-.85-.24-.82-.87-1.4-1.53-1.4-.3 0-.55.14-1.26.7-.2.17-.46.35-.58.4-.2.1-.22.1-.38.04-.23-.12-.34-.36-.35-.74 0-.36.06-.55.35-1 .4-.62.96-1.1 1.3-1.1.08 0 .23.1.38.24.3.27.46.33.95.33.3 0 .36-.02.47-.13.16-.15.16-.2 0-.53-.14-.3-.55-.7-.9-.9-.5-.3-1.27-.38-2.14-.22-.4.08-.47.1-.8.38-.22.17-.58.5-.82.76-1.3 1.36-2.1 2.94-2.46 4.83-.1.47-.16 2-.1 2.27.03.23.44.7.94 1.13.44.36.7.5 1.3.7.57.18.85.38 1 .7.13.25.14.33.14.93 0 .76.06 1 .42 1.7.22.44.42 1.04.62 1.85.05.22.06.23.68.54.63.3 1.43.6 1.6.62.06 0 .14-.07.2-.16zm8.23-1.62c1.53-1.28 2.62-3 3.1-4.92.2-.8.24-1.17.24-2.2 0-.6-.03-1.15-.07-1.4C19.75 7.6 18.95 6 17.62 4.6c-.62-.65-.8-.8-.96-.72-.15.06-.56.57-1.05 1.3-.52.78-.52.8.05 1 .44.17.55.24.48.36-.02.04-.36.36-.74.7-.4.36-.82.76-.95.9-.25.24-.36.5-.25.63.1.1 0 .2-.27.37-.42.22-.5.33-.5.64 0 .4-.22.95-.78 2.05-.5.98-.52 1-.52 1.36 0 .54.2.85.65 1.03.1.03.45.08.82.1.5.04.75.1 1 .2.6.2.7.35.96 1.44.1.4.24.88.32 1.06.07.2.18.5.23.73.15.5.2.65.27.65.04 0 .24-.14.46-.32zM11.43 5.7c.1-.06.33-.22.47-.34l.62-.5c.2-.13.55-.44.8-.67.37-.38.44-.47.72-1.05.17-.35.3-.67.3-.7 0-.1-.35-.24-.94-.4-.8-.22-1.3-.3-2.26-.32-1-.03-1.08 0-1.08.24 0 .2.1.27.46.34.27.06.3.08.33.24.02.1.05.43.07.73.03.47.02.6-.07.9-.17.54-.14 1.43.06 1.67.08.1.25.05.52-.13z"/>
+</svg>
--- a/app/svg/help.svg
+++ b/app/svg/help.svg
@ -0,0 +1,4 @@
+<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/>
+</svg>
--- a/app/svg/recruit.svg
+++ b/app/svg/recruit.svg
@ -0,0 +1,4 @@
+<svg viewBox="0 0 22 21.7" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M11 0L7.7 3l-4.3.3L3 7.6.4 10.8 3 14l.4 4.4 4.3.4 3.3 2.8 3.3-2.8 4.3-.4.3-4.3 2.7-3.2L19 7.6l-.4-4.3-4.3-.4L11 0zm0 5.3c1.5 0 2.8 1.2 2.8 2.8 0 1.6-1.3 2.8-2.8 2.8-1.5 0-2.8-1.2-2.8-2.7 0-1.5 1.3-2.7 2.8-2.7zm0 7c2 0 5.6 1 5.6 2.7v1.4H5.4V15c0-1.8 3.7-2.8 5.6-2.8z"/>
+</svg>
--- a/app/svg/search.svg
+++ b/app/svg/search.svg
@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.009972 21.659925">
+  <g transform="matrix(.02222 0 0 .02222 .316 .03)">
+    <path d="M960 832L711 583c35.4-58.2 57-125.8 57-199C768 172 596 0 384 0S0 172 0 384s172 384 384 384c73.2 0 140.8-21.6 199-57l249 249c17.5 17.5 46.5 17.4 64 0l64-64c17.5-17.5 17.5-46.5 0-64zM384 640c-141.4 0-256-114.6-256-256s114.6-256 256-256 256 114.6 256 256-114.6 256-256 256z"/>
+  </g>
+</svg>
--- a/app/svg/team.svg
+++ b/app/svg/team.svg
@ -0,0 +1,4 @@
+<svg viewBox="0 0 22 21.7" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M15 9.8c1.6 0 3-1.3 3-3 0-1.6-1.4-3-3-3-1.7 0-3 1.4-3 3 0 1.7 1.3 3 3 3zm-8 0c1.7 0 3-1.3 3-3 0-1.6-1.3-3-3-3-1.6 0-3 1.4-3 3 0 1.7 1.4 3 3 3zm0 2c-2.2 0-7 1.2-7 3.5v2.4h14v-2.4c0-2.3-4.6-3.5-7-3.5zm8 0h-1c1 1 2 2 2 3.5v2.4h6v-2.4c0-2.3-4.7-3.5-7-3.5z"/>
+</svg>
--- a/app/themes/taiga/variables.scss
+++ b/app/themes/taiga/variables.scss
@ -34,7 +34,6 @@ $yellow-pear: #bbe831;
 $tribe-primary: #98e0eb;
 $tribe-secondary: #107a8a;

-
 $top-icon-color: #11241f;
 $dropdown-color: rgba(darken($grayer, 20%), 1);