Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

BOX-169 BOX-154 adds theme const for autocomplete #47

Merged
merged 9 commits into from
Aug 18, 2021
Merged

BOX-169 BOX-154 adds theme const for autocomplete #47

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
df67785
fix(app): adds theme const
OlegBrony Aug 4, 2021
45d1fd0
BOX-154: Replaces some repeatable css colors with custom props (#48)
OlegBrony Aug 13, 2021
da2d27b
Merge branch 'master' into BOX-169
OlegBrony Aug 15, 2021
4c5aa59
Merge branch 'master' into BOX-169
OlegBrony Aug 15, 2021
509282e
Merge branch 'master' into BOX-169
OlegBrony Aug 15, 2021
667ae3d
Merge branch 'master' into BOX-169
OlegBrony Aug 15, 2021
4e57a49
fix(app): added color schemas from figma
OlegBrony Aug 15, 2021
b357208
fix(app): fix colors after review
OlegBrony Aug 16, 2021
2321b71
fix(app): moves theme styles to lib
OlegBrony Aug 17, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 11 additions & 11 deletions .cz-config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,25 +2,25 @@ const glob = require('glob');

// prettier-ignore
const types = [
{ value: "feat", name: "feat", description: "A new feature" },
{ value: "fix", name: "fix", description: "A bug fix" },
{ value: "docs", name: "docs", description: "Documentation only changes" },
{ value: "style", name: "style", description: "Changes that do not affect the meaning of the code", },
{ value: "chore", name: "chore", description: "Changes to the build process or auxiliary tools", },
{ value: "config", name: "config", description: "Changes in configuration files. Add new or remove old." },
{ value: "feat", name: "feat", description: "A new feature" },
{ value: "fix", name: "fix", description: "A bug fix" },
{ value: "docs", name: "docs", description: "Documentation only changes" },
{ value: "style", name: "style", description: "Changes that do not affect the meaning of the code", },
{ value: "chore", name: "chore", description: "Changes to the build process or auxiliary tools", },
{ value: "config", name: "config", description: "Changes in configuration files. Add new or remove old." },
{ value: "refactor", name: "refactor", description: "A code change that neither fixes a bug nor adds a feature", },
{ value: "perf", name: "perf", description: "A code change that improves performance" },
{ value: "test", name: "test", description: "Adding missing tests" },
{ value: "revert", name: "revert", description: "Revert to a commit" },
{ value: "wip", name: "wip", description: "Work in progress" },
{ value: "perf", name: "perf", description: "A code change that improves performance" },
{ value: "test", name: "test", description: "Adding missing tests" },
{ value: "revert", name: "revert", description: "Revert to a commit" },
{ value: "wip", name: "wip", description: "Work in progress" },
]

module.exports = {
types: types.map(beautify),
scopes: [].concat(
'app',
globMap('src/*/', (path) => path.replace(/src\//, '')).filter(
exclude(['features', 'ui', 'lib']),
exclude(['features', 'ui', 'lib', 'app']),
),
'features',
globMap('src/features/*/', (path) => path.replace('src/', '')),
Expand Down
3 changes: 1 addition & 2 deletions src/api/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import type { EditorValue } from '@cardbox/editor';
import { UserCard } from '@box/entities/user';

// Экспортируем отдельно, чтобы могли обращаться к типу, не зная, про реализацию (Editor)
export type CardContent = EditorValue;
Expand Down Expand Up @@ -31,7 +30,7 @@ export interface Question {
readonly responses: {
authors: string[];
count: number;
lastReponseAt: string;
lastResponseAt: string;
};
}
export interface Answer {
Expand Down
103 changes: 99 additions & 4 deletions src/app/application.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
import './custom-props.css';

import * as React from 'react';
import styled, { createGlobalStyle } from 'styled-components';
import { Helmet } from 'react-helmet-async';
Expand Down Expand Up @@ -29,6 +27,103 @@ const Globals = createGlobalStyle`
padding: 0;
font-family: sans-serif;
}

:root {
--wizard1000: #FFF;
--wizard950: #F6F5FF;
--wizard900: #E8E6FE;
--wizard850: #D6D2FE;
--wizard800: #C0B9FE;
--wizard750: #A59BFD;
--wizard700: #8A7DFC;
--wizard650: #6F5FFC;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

issue: Слуш, я мб проморгал сначала - но щас явно заметно, что при большом количестве css-переменных, декларирование глобальной палитры превращается в скакание между двумя слоями на разных полюсах - shared и app (и это не есть хорошо)

suggestion: Мб подумаем над вариантом, чтобы занести эту логику в shared/lib/theme?

(чтобы там же был доступ к названиям переменных, и там же можно было одной функцией получить все переменные для такой декларции - чтобы ось изменений локализоана была)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Условно, можно хранить большую мапу <cssVarName, colorValue>

И отдельно хранить те маппы к названиям, которые уже есть

И отдельно можно сделать функцию, которая бы прошлась по всем переменным из палитры и превратила бы во что-то такое

(а то кажется рили не оч, чтобы эта логика размывалась в двух настолько разных местах)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image
ну звучит вроде неплохо, хотя не до конца понял, что именно ты хочешь.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ну тебе надо просто переложить логику создания палитры в shared/lib/theme

Я предложил лишь одну из реализаций, но можешь действовать по своему усмотрению

--wizard600: #5441FB;
--wizard550: #3923FB;
--wizard500: #1E05FA;
--wizard450: #1A04DC;
--wizard400: #1604BE;
--wizard350: #1303A0;
--wizard300: #0F0382;
--wizard250: #0C0264;
--wizard200: #080146;
--wizard150: #05012D;
--wizard100: #030119;
--wizard50: #01000A;
--wizard0: #000;

--gray100: #fbfafb;

--notice1000: #FFF;
--notice950: #FEF6F7;
--notice900: #FBE9EB;
--notice850: #F9D8DB;
--notice800: #F5C2C7;
--notice750: #F1A7AF;
--notice700: #EC8D97;
--notice650: #E8737E;
--notice600: #E45866;
--notice550: #E03E4E;
--notice500: #DB2436;
--notice450: #C11F30;
--notice400: #A71B29;
--notice350: #8C1723;
--notice300: #72131C;
--notice250: #580E16;
--notice200: #3D0A0F;
--notice150: #27060A;
--notice100: #160405;
--notice50: #090102;
--notice0: #000;

--success1000: #FFF;
--success950: #F7FDF9;
--success900: #EBFAEF;
--success850: #DAF6E3;
--success800: #C6F1D3;
--success750: #ADEBC0;
--success700: #95E4AD;
--success650: #7CDE9A;
--success600: #64D887;
--success550: #4BD274;
--success500: #33CC61;
--success450: #2DB455;
--success400: #279B4A;
--success350: #21833E;
--success300: #1B6A32;
--success250: #145227;
--success200: #0E391B;
--success150: #092511;
--success100: #05140A;
--success50: #020804;
--success0: #000;

/* black and white */
--bnw1000: #FFF;
--bnw950: #FAF9FA;
--bnw900: #F1F1F3;
--bnw850: #E6E6EA;
--bnw800: #D9D8DF;
--bnw750: #C8C7D1;
--bnw700: #B8B7C3;
--bnw650: #A8A6B5;
--bnw600: #9795A7;
--bnw550: #878599;
--bnw500: #76748B;
--bnw450: #68667A;
--bnw400: #5A586A;
--bnw350: #4C4A59;
--bnw300: #3E3C48;
--bnw250: #2F2E38;
--bnw200: #212027;
--bnw150: #151519;
--bnw100: #0C0C0E;
--bnw50: #050506;
--bnw0: #000;

/* todo: in figma it presents as it is, without name of variable */
--unknown-2: #683aef;
--unknown-3: #007bff;
OlegBrony marked this conversation as resolved.
Show resolved Hide resolved
}
`;

export const Application = ({ root }: Props) => (
Expand All @@ -45,8 +140,8 @@ export const Application = ({ root }: Props) => (
<meta name="viewport" content="width=device-width, initial-scale=1" />
</Helmet>
<Globals />
{/* FIXME:
- научиться получать авторизированного пользователя и сюда прокидывать в поле user
{/* FIXME:
- научиться получать авторизированного пользователя и сюда прокидывать в поле user
- или прокидывать в виджет напрямую фичи/сущности (Logo, SearchBar, UserAvatar, NewCard)
*/}
<Searchbar
Expand Down
14 changes: 0 additions & 14 deletions src/app/custom-props.css
View file
Open in desktop

This file was deleted.

19 changes: 10 additions & 9 deletions src/entities/card/organisms/card-preview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {
} from '@box/ui';
import { Link } from 'react-router-dom';
import { navigationModel } from '@box/entities/navigation';
import { theme } from '@box/lib/theme';
import { useEvent } from 'effector-react';
import { useMouseSelection } from '@box/lib/use-mouse-selection';
import { useSearchQuery } from '@box/features/search-bar';
Expand Down Expand Up @@ -90,22 +91,22 @@ const PaperContainerStyled = styled(PaperContainer)<{
}>`
justify-content: space-between;
overflow: hidden;
box-shadow: 0px 3px 9px #faf9fa;
box-shadow: 0 3px 9px #faf9fa;

&[data-size='small'] {
height: 190px;
transition: 0.25s;

&:hover,
&:focus {
border-color: var(--wizard300);
background-color: var(--bnw0);
border-color: var(${theme.palette.wizard750});
background-color: var(${theme.palette.bnw1000});
cursor: pointer;
}
}

&[data-size='large'] {
background: #fff;
background: var(${theme.palette.bnw1000});
min-height: 190px;
}
`;
Expand Down Expand Up @@ -159,12 +160,12 @@ const TitleLink = styled(Link)`
transition: 0.25s;

&:hover {
color: var(--wizard500);
color: var(${theme.palette.wizard500});
}
`;

const ItemEditorContainer = styled.div`
--editor-color: #62616d;
--editor-color: var(${theme.palette.bnw400});
--editor-font-size: 15px;
--editor-line-height: 21px;
-webkit-line-clamp: 3;
Expand Down Expand Up @@ -224,7 +225,7 @@ const AddButtonStyled = styled(button.Icon)<{
'data-is-card-to-deck-added': boolean;
}>`
&[data-is-card-to-deck-added='true'] {
background-color: #f7f6ff;
background-color: var(${theme.palette.wizard950});

&:hover {
background-color: inherit;
Expand All @@ -242,13 +243,13 @@ const Header = styled.header`
`;

const MetaStyled = styled.div`
color: #9b99ac;
color: var(${theme.palette.bnw600});
display: flex;
align-items: center;
justify-content: space-between;
`;

const UserLink = styled(Link)`
text-decoration: none;
color: #9b99ac;
color: var(${theme.palette.bnw600});
`;
13 changes: 8 additions & 5 deletions src/entities/user/ui/user-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { Avatar } from '@box/ui/atoms';
import { Link } from 'react-router-dom';
import type { User } from '@box/api';
import { imgLogo } from '@box/shared/assets';
import { theme } from '@box/lib/theme';

import { getFullName } from '../lib';

Expand All @@ -18,6 +19,7 @@ export const UserCard: React.FC<Props> = ({ user, getUserHref }) => {
const fullName = getFullName(user);
const { avatar, work } = user;

const username = `${user.firstName} ${user.lastName}`;
return (
<Container>
<Content>
Expand All @@ -34,10 +36,10 @@ export const UserCard: React.FC<Props> = ({ user, getUserHref }) => {

const Container = styled.div`
align-items: center;
background-color: #fff;
border: 1px solid #e7e5ee;
background-color: var(${theme.palette.bnw1000});
border: 1px solid var(${theme.palette.bnw850});
border-radius: 6px;
box-shadow: 0px 6px 9px #f6f5f8;
box-shadow: 0 6px 9px var(${theme.palette.bnw950});
azinit marked this conversation as resolved.
Show resolved Hide resolved
display: flex;
justify-content: space-between;
padding: 1.0625rem 1.3125rem;
Expand All @@ -51,10 +53,11 @@ const Content = styled.div`
const Name = styled.div`
font-size: 1.3125rem;
line-height: 1.5625rem;
white-space: nowrap;
`;

const Role = styled.div`
color: #a39bb2;
color: var(${theme.palette.bnw600});
font-size: 0.8125rem;
line-height: 1rem;
`;
Expand All @@ -65,6 +68,6 @@ const TitleLink = styled(Link)`
transition: 0.25s;

&:hover {
color: var(--wizard500);
color: var(${theme.palette.wizard500});
}
`;
9 changes: 5 additions & 4 deletions src/entities/user/ui/user-preview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { Link } from 'react-router-dom';
import type { User } from '@box/api';
import { imgLogo } from '@box/shared/assets';
import { plural } from '@box/lib/plural';
import { theme } from '@box/lib/theme';
import { useSearchQuery } from '@box/features/search-bar';

interface UserPreviewProps {
Expand Down Expand Up @@ -36,7 +37,7 @@ export const UserPreview: React.FC<UserPreviewProps> = ({
const PaperContainerStyled = styled(PaperContainer)`
justify-content: space-between;
overflow: hidden;
box-shadow: 0px 3px 9px #faf9fa;
box-shadow: 0 3px 9px #faf9fa;
transition: 0.25s;
height: 190px;

Expand Down Expand Up @@ -99,7 +100,7 @@ const Meta = ({ cardsCount }: MetaProps) => {
};

const MetaStyled = styled.div`
color: #9b99ac;
color: var(${theme.palette.bnw600});
display: flex;
align-items: center;
justify-content: space-between;
Expand All @@ -114,7 +115,7 @@ const ContentStyled = styled.div`
}
`;
const ContentText = styled(Text)`
color: #62616d;
color: var(${theme.palette.bnw400});
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 3;
Expand All @@ -124,7 +125,7 @@ const ContentText = styled(Text)`

const UserLink = styled(Link)`
text-decoration: none;
color: #000000;
color: var(${theme.palette.bnw0});

&:hover {
color: blue;
Expand Down
4 changes: 2 additions & 2 deletions src/features/card/draft/ui/atoms/reset-changes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ import { useEvent } from 'effector-react/ssr';

import * as model from '../../model';

// eslint-disable-next-line prettier/prettier
const CANCEL_WARN = 'Are you sure you want to undo the changes? The action is not reversible!';
const CANCEL_WARN =
'Are you sure you want to undo the changes? The action is not reversible!';
Comment on lines +7 to +8
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thoughts: Это не просто так дизейблилось 😄

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

а зочем?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Потому что для длинных строк не имеет смысла такой перенос

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

😐
сказал сначала так, будто от этого поведение меняется. как по мне так лучше - если оно вмещается в ширину экрана (которая диктуется линтером), то всё хорошо. мне, например, очень не нравится x-scroll.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

У тебя такой перенос спасает ситуацию на ~ 5-10 символов (в зависимости от длины переменной)

А дальше? Скролла не избежать

Если только ты не додумаешься бить строку по частям - но это еще херовей

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

какое-то обречённое мнение. скрола можно и нужно избежать. там, где не получается - это скорее всего означает, что скролить не нужно (например, длинные сообщения не несущие логики)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

началось оно, кста, с того, что дизейбл линта не дизейблит притиер.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

мнение. скрола можно и нужно избежать.

что скролить не нужно (например, длинные сообщения не несущие логики)

Ты сам себе противоречишь)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

что дизейбл линта не дизейблит притиер.

Именно, но это пофиксится по тикету другому

И тут как раз пример "когда не надо скролить"


interface Props {
_name: string;
Expand Down
Loading