From 8ee9cc8957a72561049a9caf1a7b61a735db3b83 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adrian=20Wo=C5=BAniak?= Date: Tue, 31 Mar 2020 14:28:30 +0200 Subject: [PATCH] Add some filters --- Cargo.toml | 10 ++ jirs-client/Cargo.toml | 4 + jirs-client/LICENSE | 1 + jirs-client/js/css/project.css | 116 +++++++++++++++++ jirs-client/src/lib.rs | 1 + jirs-client/src/model.rs | 10 ++ jirs-client/src/project.rs | 109 +++++++++++++++- jirs-data/Cargo.toml | 4 + jirs-data/LICENSE | 1 + jirs-data/src/lib.rs | 121 ++++++++++++++++++ jirs-server/Cargo.toml | 4 + jirs-server/LICENSE | 1 + react-client/src/App/BaseStyles.js | 2 +- react-client/src/App/Toast/Styles.js | 4 +- .../src/Project/Board/Filters/Styles.js | 8 +- .../src/Project/Board/Header/Styles.js | 2 +- .../IssueDetails/AssigneesReporter/Styles.js | 5 +- .../IssueDetails/Comments/Comment/Styles.js | 9 +- .../Comments/Create/ProTip/Styles.js | 4 +- .../IssueDetails/Comments/Create/Styles.js | 5 +- .../Board/IssueDetails/Comments/Styles.js | 2 +- .../Board/IssueDetails/Dates/Styles.js | 2 +- .../Board/IssueDetails/Description/Styles.js | 7 +- .../IssueDetails/EstimateTracking/Styles.js | 7 +- .../EstimateTracking/TrackingWidget/Styles.js | 2 +- .../Board/IssueDetails/Priority/Styles.js | 2 +- .../src/Project/Board/IssueDetails/Styles.js | 2 +- .../Board/IssueDetails/Title/Styles.js | 4 +- .../Project/Board/IssueDetails/Type/Styles.js | 4 +- .../Project/Board/Lists/List/Issue/Styles.js | 11 +- .../Project/Board/Lists/List/Issue/index.jsx | 2 +- .../src/Project/Board/Lists/List/Styles.js | 4 +- .../src/Project/Board/Lists/List/index.jsx | 22 ++-- .../src/Project/IssueSearch/Styles.js | 15 ++- react-client/src/Project/NavbarLeft/Styles.js | 8 +- .../src/Project/ProjectSettings/Styles.js | 2 +- react-client/src/Project/Sidebar/Styles.js | 11 +- .../shared/components/AboutTooltip/Styles.js | 2 +- .../shared/components/Breadcrumbs/Styles.js | 4 +- .../src/shared/components/Button/Styles.js | 5 +- .../shared/components/ConfirmModal/Styles.js | 4 +- .../shared/components/DatePicker/Styles.js | 16 ++- .../src/shared/components/Form/Styles.js | 6 +- .../src/shared/components/Input/Styles.js | 2 +- .../components/IssuePriorityIcon/Styles.js | 4 +- .../shared/components/IssueTypeIcon/Styles.js | 4 +- .../shared/components/IssueTypeIcon/index.jsx | 8 +- .../src/shared/components/Modal/Styles.js | 3 +- .../src/shared/components/PageError/Styles.js | 2 +- .../src/shared/components/Select/Styles.js | 7 +- .../components/TextEditedContent/Styles.js | 2 +- .../shared/components/TextEditor/Styles.js | 2 +- .../src/shared/components/Textarea/Styles.js | 2 +- react-client/src/shared/utils/styles.js | 2 +- 54 files changed, 496 insertions(+), 107 deletions(-) create mode 120000 jirs-client/LICENSE create mode 120000 jirs-data/LICENSE create mode 120000 jirs-server/LICENSE diff --git a/Cargo.toml b/Cargo.toml index 7927a74c..86bb25b1 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -1,3 +1,13 @@ +#[package] +#name = "jirs" +#version = "0.1.0" +#authors = ["Adrian Wozniak "] +#edition = "2018" +#description = "JIRS (Simplified JIRA in Rust)" +#repository = "https://gitlab.com/adrian.wozniak/jirs" +#license = "MPL-2.0" +#license-file = "./LICENSE" + [workspace] members = [ "./jirs-cli", diff --git a/jirs-client/Cargo.toml b/jirs-client/Cargo.toml index b8b34926..dad70828 100644 --- a/jirs-client/Cargo.toml +++ b/jirs-client/Cargo.toml @@ -3,6 +3,10 @@ name = "jirs-client" version = "0.1.0" authors = ["Adrian Wozniak "] edition = "2018" +description = "JIRS (Simplified JIRA in Rust) WASM client" +repository = "https://gitlab.com/adrian.wozniak/jirs" +license = "MPL-2.0" +#license-file = "../LICENSE" [lib] crate-type = ["cdylib", "rlib"] diff --git a/jirs-client/LICENSE b/jirs-client/LICENSE new file mode 120000 index 00000000..ea5b6064 --- /dev/null +++ b/jirs-client/LICENSE @@ -0,0 +1 @@ +../LICENSE \ No newline at end of file diff --git a/jirs-client/js/css/project.css b/jirs-client/js/css/project.css index 081a1d7e..390977f8 100644 --- a/jirs-client/js/css/project.css +++ b/jirs-client/js/css/project.css @@ -68,7 +68,123 @@ margin-left: 6px; } +#projectPage > #projectBoardFilters > #clearAllFilters { + height: 32px; + line-height: 32px; + margin-left: 15px; + padding-left: 12px; + border-left: 1px solid var(--borderLightest); + color: var(--textDark); + font-size: 14.5px; + cursor: pointer; + user-select: none; +} + +#projectPage > #projectBoardFilters > #clearAllFilters:hover { + color: var(--textMedium); +} + #projectPage > #projectBoardLists { + display: flex; + margin: 26px -5px 0; +} + +#projectPage > #projectBoardLists > .list { + display: flex; + flex-direction: column; + margin: 0 5px; + min-height: 400px; + width: 25%; + border-radius: 3px; + background: var(--backgroundLightest); +} + +#projectPage > #projectBoardLists > .list > .title { + padding: 13px 10px 17px; + text-transform: uppercase; + color: var(--textMedium); + font-size: 12.5px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +#projectPage > #projectBoardLists > .list > .title > .issuesCount { + text-transform: lowercase; + font-size: 13px; +} + +#projectPage > #projectBoardLists > .list > .issues { + height: 100%; + padding: 0 5px; +} + +#projectPage > #projectBoardLists > .list > .issues > .issueLink { + display: block; + margin-bottom: 5px; +} + +#projectPage > #projectBoardLists > .list > .issues > .issueLink > .issue { + padding: 10px; + border-radius: 3px; + background: #fff; + box-shadow: 0 1px 2px 0 rgba(9, 30, 66, 0.25); + transition: background 0.1s; + cursor: pointer; + user-select: none; +} + +#projectPage > #projectBoardLists > .list > .issues > .issueLink > .issue.isBeingDragged { + transform: rotate(3deg); + box-shadow: 5px 10px 30px 0 rgba(9, 30, 66, 0.15); +} + +@media (max-width: 1100px) { + #projectPage > #projectBoardLists > .list > .issues > .issueLink > .issue { + padding: 10px 8px; + } +} + +#projectPage > #projectBoardLists > .list > .issues > .issueLink > .issue:hover { + background: var(--backgroundLight); +} + +#projectPage > #projectBoardLists > .list > .issues > .issueLink > .issue > .title { + padding-bottom: 11px; + font-size: 15px; +} + +@media (max-width: 1100px) { + #projectPage > #projectBoardLists > .list > .issues > .issueLink > .issue > .title { + font-size: 14.5px + } +} + +#projectPage > #projectBoardLists > .list > .issues > .issueLink > .issue > .bottom { + display: flex; + justify-content: space-between; + align-items: center; +} + +#projectPage > #projectBoardLists > .list > .issues > .issueLink > .issue > .bottom > div { +} + +#projectPage > #projectBoardLists > .list > .issues > .issueLink > .issue > .bottom > div > .issueTypeIcon { +} + +#projectPage > #projectBoardLists > .list > .issues > .issueLink > .issue > .bottom > div > .issuePriorityIcon { +} + +#projectPage > #projectBoardLists > .list > .issues > .issueLink > .issue > .bottom > .assignees { + display: flex; + flex-direction: row-reverse; + margin-left: 2px; +} + +#projectPage > #projectBoardLists > .list > .issues > .issueLink > .issue > .bottom > .assignees > .assigneeAvatar, +#projectPage > #projectBoardLists > .list > .issues > .issueLink > .issue > .bottom > .assignees > .styledAvatar { + margin-left: -2px; + box-shadow: 0 0 0 2px #fff; } @media (max-width: 1100px) { diff --git a/jirs-client/src/lib.rs b/jirs-client/src/lib.rs index e50152df..9f3c4874 100644 --- a/jirs-client/src/lib.rs +++ b/jirs-client/src/lib.rs @@ -27,6 +27,7 @@ pub enum Msg { ProjectAvatarFilterChanged(UserId, AvatarFilterActive), ProjectToggleOnlyMy, ProjectToggleRecentlyUpdated, + ProjectClearFilters, } fn update(msg: Msg, model: &mut model::Model, orders: &mut impl Orders) { diff --git a/jirs-client/src/model.rs b/jirs-client/src/model.rs index ce56f209..40adf316 100644 --- a/jirs-client/src/model.rs +++ b/jirs-client/src/model.rs @@ -171,3 +171,13 @@ impl std::fmt::Display for Icon { f.write_str(code) } } + +impl From for Icon { + fn from(t: IssueType) -> Self { + match t { + IssueType::Task => Icon::Task, + IssueType::Bug => Icon::Bug, + IssueType::Story => Icon::Story, + } + } +} diff --git a/jirs-client/src/project.rs b/jirs-client/src/project.rs index 0467b81d..f30a8681 100644 --- a/jirs-client/src/project.rs +++ b/jirs-client/src/project.rs @@ -6,6 +6,7 @@ use crate::shared::styled_button::{StyledButton, Variant}; use crate::shared::styled_input::StyledInput; use crate::shared::{host_client, inner_layout, ToNode}; use crate::Msg; +use jirs_data::{FullProject, Issue, IssuePriority, IssueStatus, IssueType}; pub fn update(msg: Msg, model: &mut crate::model::Model, orders: &mut impl Orders) { match msg { @@ -44,6 +45,12 @@ pub fn update(msg: Msg, model: &mut crate::model::Model, orders: &mut impl Order model.project_page.recenlty_updated_filter = !model.project_page.recenlty_updated_filter; } + Msg::ProjectClearFilters => { + let pp = &mut model.project_page; + pp.active_avatar_filters = vec![]; + pp.recenlty_updated_filter = false; + pp.only_my_filter = false; + } _ => (), } } @@ -105,6 +112,8 @@ fn project_board_filters(model: &Model) -> Node { } .into_node(); + let project_page = &model.project_page; + let only_my = StyledButton { variant: Variant::Empty, icon_only: false, @@ -120,19 +129,32 @@ fn project_board_filters(model: &Model) -> Node { variant: Variant::Empty, icon_only: false, disabled: false, - active: model.project_page.only_my_filter, + active: model.project_page.recenlty_updated_filter, text: Some("Recently Updated".to_string()), icon: None, on_click: Some(mouse_ev(Ev::Click, |_| Msg::ProjectToggleRecentlyUpdated)), } .into_node(); + let clear_all = match project_page.only_my_filter + || project_page.recenlty_updated_filter + || !project_page.active_avatar_filters.is_empty() + { + true => button![ + id!["clearAllFilters"], + "Clear all", + mouse_ev(Ev::Click, |_| Msg::ProjectClearFilters), + ], + false => empty![], + }; + div![ id!["projectBoardFilters"], search_input, avatars_filters(model), only_my, recently_updated, + clear_all ] } @@ -169,5 +191,88 @@ fn avatars_filters(model: &Model) -> Node { } fn project_board_lists(model: &Model) -> Node { - div![id!["projectBoardLists"]] + use jirs_data::IssueStatus; + + div![ + id!["projectBoardLists"], + project_issue_list(model, IssueStatus::Backlog), + project_issue_list(model, IssueStatus::Selected), + project_issue_list(model, IssueStatus::InProgress), + project_issue_list(model, IssueStatus::Done), + ] +} + +fn project_issue_list(model: &Model, status: jirs_data::IssueStatus) -> Node { + let project = match model.project.as_ref() { + Some(p) => p, + _ => return empty![], + }; + let issues: Vec> = project + .issues + .iter() + .filter(|issue| status.match_name(issue.status.as_str())) + .map(|issue| project_issue(model, project, issue)) + .collect(); + let label = status.to_label(); + div![ + attrs![At::Class => "list"], + div![ + attrs![At::Class => "title"], + label, + div![attrs![At::Class => "issuesCount"]] + ], + div![attrs![At::Class => "issues"], issues] + ] +} + +fn project_issue(_model: &Model, project: &FullProject, issue: &Issue) -> Node { + let avatars: Vec> = project + .users + .iter() + .filter(|user| issue.user_ids.contains(&user.id)) + .map(|user| { + StyledAvatar { + avatar_url: user.avatar_url.clone(), + size: 24, + name: user.name.clone(), + on_click: None, + } + .into_node() + }) + .collect(); + let mut issue_type_icon = match issue.issue_type.parse::() { + Ok(icon) => { + let mut node = crate::shared::styled_icon(icon.into()); + node.add_style( + St::Color, + format!("var(--{issue_type})", issue_type = issue.issue_type), + ); + node + } + Err(e) => span![format!("{}", e)], + }; + let priority_icon = match issue.priority.parse::() { + Ok(IssuePriority::Low) | Ok(IssuePriority::Lowest) => { + crate::shared::styled_icon(Icon::ArrowDown) + } + Ok(_) => crate::shared::styled_icon(Icon::ArrowUp), + Err(e) => span![e.clone()], + }; + a![ + attrs![At::Class => "issueLink"], + div![ + attrs![At::Class => "issue"], + p![attrs![At::Class => "title"], issue.title,], + div![ + attrs![At::Class => "bottom"], + div![ + // + div![attrs![At::Class => "issueTypeIcon"], issue_type_icon], + // + div![attrs![At::Class => "issuePriorityIcon"], priority_icon] + ], + div![attrs![At::Class => "assignees"], avatars,], + ] + ] + ] } diff --git a/jirs-data/Cargo.toml b/jirs-data/Cargo.toml index 5c052ce5..d9ed3953 100644 --- a/jirs-data/Cargo.toml +++ b/jirs-data/Cargo.toml @@ -3,6 +3,10 @@ name = "jirs-data" version = "0.1.0" authors = ["Adrian Wozniak "] edition = "2018" +description = "JIRS (Simplified JIRA in Rust) shared data types" +repository = "https://gitlab.com/adrian.wozniak/jirs" +license = "MPL-2.0" +#license-file = "../LICENSE" [lib] name = "jirs_data" diff --git a/jirs-data/LICENSE b/jirs-data/LICENSE new file mode 120000 index 00000000..f1ed04c7 --- /dev/null +++ b/jirs-data/LICENSE @@ -0,0 +1 @@ +./LICENSE \ No newline at end of file diff --git a/jirs-data/src/lib.rs b/jirs-data/src/lib.rs index 464e8944..8323b8eb 100644 --- a/jirs-data/src/lib.rs +++ b/jirs-data/src/lib.rs @@ -1,5 +1,6 @@ use chrono::NaiveDateTime; use serde::{Deserialize, Serialize}; +use std::str::FromStr; use uuid::Uuid; pub trait ResponseData { @@ -8,6 +9,126 @@ pub trait ResponseData { fn into_response(self) -> Self::Response; } +#[derive(Clone, Deserialize, Serialize, Debug, PartialOrd, PartialEq)] +#[serde(rename_all = "lowercase")] +pub enum IssueType { + Task, + Bug, + Story, +} + +impl FromStr for IssueType { + type Err = String; + + fn from_str(s: &str) -> Result { + match s.to_lowercase().as_str() { + "task" => Ok(IssueType::Task), + "bug" => Ok(IssueType::Bug), + "story" => Ok(IssueType::Story), + _ => Err(format!("Unknown type {:?}", s)), + } + } +} + +impl ToString for IssueType { + fn to_string(&self) -> String { + match self { + IssueType::Task => "Task", + IssueType::Bug => "Bug", + IssueType::Story => "Story", + } + .to_string() + } +} + +#[derive(Clone, Deserialize, Serialize, Debug, PartialOrd, PartialEq)] +pub enum IssueStatus { + Backlog, + Selected, + InProgress, + Done, +} + +impl IssueStatus { + pub fn to_label(&self) -> &str { + match self { + IssueStatus::Backlog => "Backlog", + IssueStatus::Selected => "Selected for development", + IssueStatus::InProgress => "In Progress", + IssueStatus::Done => "Done", + } + } + + pub fn to_payload(&self) -> &str { + match self { + IssueStatus::Backlog => "backlog", + IssueStatus::Selected => "selected", + IssueStatus::InProgress => "in_progress", + IssueStatus::Done => "done", + } + } + + #[deprecated] + pub fn to_deprecated_payload(&self) -> &str { + match self { + IssueStatus::Backlog => "backlog", + IssueStatus::Selected => "selected", + IssueStatus::InProgress => "inprogress", + IssueStatus::Done => "done", + } + } + + pub fn match_name(&self, name: &str) -> bool { + self.to_payload() == name || self.to_deprecated_payload() == name + } +} + +#[derive(Clone, Deserialize, Serialize, Debug, PartialOrd, PartialEq)] +pub enum IssuePriority { + Highest, + High, + Medium, + Low, + Lowest, +} + +impl FromStr for IssuePriority { + type Err = String; + + fn from_str(s: &str) -> Result { + match s.to_lowercase().as_str() { + "highest" => Ok(IssuePriority::Highest), + "high" => Ok(IssuePriority::High), + "medium" => Ok(IssuePriority::Medium), + "low" => Ok(IssuePriority::Low), + "lowest" => Ok(IssuePriority::Lowest), + _ => Err(format!("Unknown priority {}", s)), + } + } +} + +impl IssuePriority { + pub fn to_text_value(&self) -> &str { + match self { + IssuePriority::Highest => "5", + IssuePriority::High => "4", + IssuePriority::Medium => "3", + IssuePriority::Low => "2", + IssuePriority::Lowest => "1", + } + } + + pub fn to_value(&self) -> i32 { + match self { + IssuePriority::Highest => 5, + IssuePriority::High => 4, + IssuePriority::Medium => 3, + IssuePriority::Low => 2, + IssuePriority::Lowest => 1, + } + } +} + #[derive(Clone, Serialize, Debug)] #[serde(rename_all = "camelCase")] pub struct ErrorResponse { diff --git a/jirs-server/Cargo.toml b/jirs-server/Cargo.toml index 26693004..be40da10 100644 --- a/jirs-server/Cargo.toml +++ b/jirs-server/Cargo.toml @@ -3,6 +3,10 @@ name = "jirs-server" version = "0.1.0" authors = ["Adrian Wozniak "] edition = "2018" +description = "JIRS (Simplified JIRA in Rust) Actix server" +repository = "https://gitlab.com/adrian.wozniak/jirs" +license = "MPL-2.0" +#license-file = "../LICENSE" [[bin]] name = "jirs_server" diff --git a/jirs-server/LICENSE b/jirs-server/LICENSE new file mode 120000 index 00000000..f1ed04c7 --- /dev/null +++ b/jirs-server/LICENSE @@ -0,0 +1 @@ +./LICENSE \ No newline at end of file diff --git a/react-client/src/App/BaseStyles.js b/react-client/src/App/BaseStyles.js index c49e765f..c8a084ad 100644 --- a/react-client/src/App/BaseStyles.js +++ b/react-client/src/App/BaseStyles.js @@ -13,7 +13,7 @@ export default createGlobalStyle` color: ${color.textDarkest}; -webkit-tap-highlight-color: transparent; line-height: 1.2; - ${font.size(16)} + font-size: 16px ${font.regular} } diff --git a/react-client/src/App/Toast/Styles.js b/react-client/src/App/Toast/Styles.js index 070542c7..4f0a68b9 100644 --- a/react-client/src/App/Toast/Styles.js +++ b/react-client/src/App/Toast/Styles.js @@ -47,13 +47,13 @@ export const CloseIcon = styled(Icon)` export const Title = styled.div` padding-right: 22px; - ${font.size(15)} + font-size: 15px ${font.medium} `; export const Message = styled.div` padding: 8px 10px 0 0; white-space: pre-wrap; - ${font.size(14)} + font-size: 14px ${font.medium} `; diff --git a/react-client/src/Project/Board/Filters/Styles.js b/react-client/src/Project/Board/Filters/Styles.js index b5162c62..a75381be 100644 --- a/react-client/src/Project/Board/Filters/Styles.js +++ b/react-client/src/Project/Board/Filters/Styles.js @@ -25,7 +25,8 @@ export const AvatarIsActiveBorder = styled.div` margin-left: -2px; border-radius: 50%; transition: transform 0.1s; - ${mixin.clickable}; + cursor: pointer; + user-select: none;; ${props => props.isActive && `box-shadow: 0 0 0 4px ${color.primary}`} &:hover { transform: translateY(-5px); @@ -47,8 +48,9 @@ export const ClearAll = styled.div` padding-left: 12px; border-left: 1px solid ${color.borderLightest}; color: ${color.textDark}; - ${font.size(14.5)} - ${mixin.clickable} + font-size: 14.5px + cursor: pointer; + user-select: none; &:hover { color: ${color.textMedium}; } diff --git a/react-client/src/Project/Board/Header/Styles.js b/react-client/src/Project/Board/Header/Styles.js index f0d006ad..d35fb5ca 100644 --- a/react-client/src/Project/Board/Header/Styles.js +++ b/react-client/src/Project/Board/Header/Styles.js @@ -9,6 +9,6 @@ export const Header = styled.div` `; export const BoardName = styled.div` - ${font.size(24)} + font-size: 24px ${font.medium} `; diff --git a/react-client/src/Project/Board/IssueDetails/AssigneesReporter/Styles.js b/react-client/src/Project/Board/IssueDetails/AssigneesReporter/Styles.js index 50bb2d01..15b11413 100644 --- a/react-client/src/Project/Board/IssueDetails/AssigneesReporter/Styles.js +++ b/react-client/src/Project/Board/IssueDetails/AssigneesReporter/Styles.js @@ -5,7 +5,8 @@ import { color, font, mixin } from 'shared/utils/styles'; export const User = styled.div` display: flex; align-items: center; - ${mixin.clickable} + cursor: pointer; + user-select: none; ${props => props.isSelectValue && css` @@ -22,5 +23,5 @@ export const User = styled.div` export const Username = styled.div` padding: 0 3px 0 8px; - ${font.size(14.5)} + font-size: 14.5px `; diff --git a/react-client/src/Project/Board/IssueDetails/Comments/Comment/Styles.js b/react-client/src/Project/Board/IssueDetails/Comments/Comment/Styles.js index bd8fa2af..2f64497f 100644 --- a/react-client/src/Project/Board/IssueDetails/Comments/Comment/Styles.js +++ b/react-client/src/Project/Board/IssueDetails/Comments/Comment/Styles.js @@ -6,7 +6,7 @@ import { Avatar } from 'shared/components'; export const Comment = styled.div` position: relative; margin-top: 25px; - ${font.size(15)} + font-size: 15px `; export const UserAvatar = styled(Avatar)` @@ -31,7 +31,7 @@ export const CreatedAt = styled.div` display: inline-block; padding-bottom: 10px; color: ${color.textDark}; - ${font.size(14.5)} + font-size: 14.5px `; export const Body = styled.p` @@ -43,8 +43,9 @@ const actionLinkStyles = css` display: inline-block; padding: 2px 0; color: ${color.textMedium}; - ${font.size(14.5)} - ${mixin.clickable} + font-size: 14.5px + cursor: pointer; + user-select: none; &:hover { text-decoration: underline; } diff --git a/react-client/src/Project/Board/IssueDetails/Comments/Create/ProTip/Styles.js b/react-client/src/Project/Board/IssueDetails/Comments/Create/ProTip/Styles.js index 24328817..a3039fa7 100644 --- a/react-client/src/Project/Board/IssueDetails/Comments/Create/ProTip/Styles.js +++ b/react-client/src/Project/Board/IssueDetails/Comments/Create/ProTip/Styles.js @@ -7,7 +7,7 @@ export const Tip = styled.div` align-items: center; padding-top: 8px; color: ${color.textMedium}; - ${font.size(13)} + font-size: 13px strong { padding-right: 4px; } @@ -23,5 +23,5 @@ export const TipLetter = styled.span` color: ${color.textDarkest}; background: ${color.backgroundMedium}; ${font.bold} - ${font.size(12)} + font-size: 12px `; diff --git a/react-client/src/Project/Board/IssueDetails/Comments/Create/Styles.js b/react-client/src/Project/Board/IssueDetails/Comments/Create/Styles.js index 040c636c..30983fad 100644 --- a/react-client/src/Project/Board/IssueDetails/Comments/Create/Styles.js +++ b/react-client/src/Project/Board/IssueDetails/Comments/Create/Styles.js @@ -6,7 +6,7 @@ import { Avatar } from 'shared/components'; export const Create = styled.div` position: relative; margin-top: 25px; - ${font.size(15)} + font-size: 15px `; export const UserAvatar = styled(Avatar)` @@ -24,7 +24,8 @@ export const FakeTextarea = styled.div` border-radius: 4px; border: 1px solid ${color.borderLightest}; color: ${color.textLight}; - ${mixin.clickable} + cursor: pointer; + user-select: none; &:hover { border: 1px solid ${color.borderLight}; } diff --git a/react-client/src/Project/Board/IssueDetails/Comments/Styles.js b/react-client/src/Project/Board/IssueDetails/Comments/Styles.js index a9f2b95f..3c0be4db 100644 --- a/react-client/src/Project/Board/IssueDetails/Comments/Styles.js +++ b/react-client/src/Project/Board/IssueDetails/Comments/Styles.js @@ -8,5 +8,5 @@ export const Comments = styled.div` export const Title = styled.div` ${font.medium} - ${font.size(15)} + font-size: 15px `; diff --git a/react-client/src/Project/Board/IssueDetails/Dates/Styles.js b/react-client/src/Project/Board/IssueDetails/Dates/Styles.js index 90f9c91d..0338afcc 100644 --- a/react-client/src/Project/Board/IssueDetails/Dates/Styles.js +++ b/react-client/src/Project/Board/IssueDetails/Dates/Styles.js @@ -8,5 +8,5 @@ export const Dates = styled.div` line-height: 22px; border-top: 1px solid ${color.borderLightest}; color: ${color.textMedium}; - ${font.size(13)} + font-size: 13px `; diff --git a/react-client/src/Project/Board/IssueDetails/Description/Styles.js b/react-client/src/Project/Board/IssueDetails/Description/Styles.js index bf668a37..736d961b 100644 --- a/react-client/src/Project/Board/IssueDetails/Description/Styles.js +++ b/react-client/src/Project/Board/IssueDetails/Description/Styles.js @@ -4,7 +4,7 @@ import { color, font, mixin } from 'shared/utils/styles'; export const Title = styled.div` padding: 20px 0 6px; - ${font.size(15)} + font-size: 15px ${font.medium} `; @@ -14,8 +14,9 @@ export const EmptyLabel = styled.div` border-radius: 3px; color: ${color.textMedium} transition: background 0.1s; - ${font.size(15)} - ${mixin.clickable} + font-size: 15px + cursor: pointer; + user-select: none; &:hover { background: ${color.backgroundLight}; } diff --git a/react-client/src/Project/Board/IssueDetails/EstimateTracking/Styles.js b/react-client/src/Project/Board/IssueDetails/EstimateTracking/Styles.js index 765787ef..970f88b6 100644 --- a/react-client/src/Project/Board/IssueDetails/EstimateTracking/Styles.js +++ b/react-client/src/Project/Board/IssueDetails/EstimateTracking/Styles.js @@ -6,7 +6,8 @@ export const TrackingLink = styled.div` padding: 4px 4px 2px 0; border-radius: 4px; transition: background 0.1s; - ${mixin.clickable} + cursor: pointer; + user-select: none; &:hover { background: ${color.backgroundLight}; } @@ -19,7 +20,7 @@ export const ModalContents = styled.div` export const ModalTitle = styled.div` padding-bottom: 14px; ${font.medium} - ${font.size(20)} + font-size: 20px `; export const Inputs = styled.div` @@ -36,7 +37,7 @@ export const InputLabel = styled.div` padding-bottom: 5px; color: ${color.textMedium}; ${font.medium}; - ${font.size(13)}; + font-size: 13px; `; export const Actions = styled.div` diff --git a/react-client/src/Project/Board/IssueDetails/EstimateTracking/TrackingWidget/Styles.js b/react-client/src/Project/Board/IssueDetails/EstimateTracking/TrackingWidget/Styles.js index aa22997c..a70fcc6d 100644 --- a/react-client/src/Project/Board/IssueDetails/EstimateTracking/TrackingWidget/Styles.js +++ b/react-client/src/Project/Board/IssueDetails/EstimateTracking/TrackingWidget/Styles.js @@ -35,5 +35,5 @@ export const Values = styled.div` display: flex; justify-content: space-between; padding-top: 3px; - ${font.size(14.5)}; + font-size: 14.5px; `; diff --git a/react-client/src/Project/Board/IssueDetails/Priority/Styles.js b/react-client/src/Project/Board/IssueDetails/Priority/Styles.js index d5c14349..61bbe039 100644 --- a/react-client/src/Project/Board/IssueDetails/Priority/Styles.js +++ b/react-client/src/Project/Board/IssueDetails/Priority/Styles.js @@ -19,5 +19,5 @@ export const Priority = styled.div` export const Label = styled.div` padding: 0 3px 0 8px; - ${font.size(14.5)} + font-size: 14.5px `; diff --git a/react-client/src/Project/Board/IssueDetails/Styles.js b/react-client/src/Project/Board/IssueDetails/Styles.js index 10b1174f..728616e5 100644 --- a/react-client/src/Project/Board/IssueDetails/Styles.js +++ b/react-client/src/Project/Board/IssueDetails/Styles.js @@ -35,6 +35,6 @@ export const SectionTitle = styled.div` margin: 24px 0 5px; text-transform: uppercase; color: ${color.textMedium}; - ${font.size(12.5)} + font-size: 12.5px ${font.bold} `; diff --git a/react-client/src/Project/Board/IssueDetails/Title/Styles.js b/react-client/src/Project/Board/IssueDetails/Title/Styles.js index 16a9079b..3d74da01 100644 --- a/react-client/src/Project/Board/IssueDetails/Title/Styles.js +++ b/react-client/src/Project/Board/IssueDetails/Title/Styles.js @@ -16,7 +16,7 @@ export const TitleTextarea = styled(Textarea)` border: 1px solid transparent; box-shadow: 0 0 0 1px transparent; transition: background 0.1s; - ${font.size(24)} + font-size: 24px ${font.medium} &:hover:not(:focus) { background: ${color.backgroundLight}; @@ -27,6 +27,6 @@ export const TitleTextarea = styled(Textarea)` export const ErrorText = styled.div` padding-top: 4px; color: ${color.danger}; - ${font.size(13)} + font-size: 13px ${font.medium} `; diff --git a/react-client/src/Project/Board/IssueDetails/Type/Styles.js b/react-client/src/Project/Board/IssueDetails/Type/Styles.js index 21c3d286..e5a0acae 100644 --- a/react-client/src/Project/Board/IssueDetails/Type/Styles.js +++ b/react-client/src/Project/Board/IssueDetails/Type/Styles.js @@ -7,7 +7,7 @@ export const TypeButton = styled(Button)` text-transform: uppercase; letter-spacing: 0.5px; color: ${color.textMedium}; - ${font.size(13)} + font-size: 13px `; export const Type = styled.div` @@ -17,5 +17,5 @@ export const Type = styled.div` export const TypeLabel = styled.div` padding: 0 5px 0 7px; - ${font.size(15)} + font-size: 15px `; diff --git a/react-client/src/Project/Board/Lists/List/Issue/Styles.js b/react-client/src/Project/Board/Lists/List/Issue/Styles.js index b86dd3c1..720da2f7 100644 --- a/react-client/src/Project/Board/Lists/List/Issue/Styles.js +++ b/react-client/src/Project/Board/Lists/List/Issue/Styles.js @@ -1,8 +1,8 @@ import styled, { css } from 'styled-components'; -import { Link } from 'react-router-dom'; +import { Link } from 'react-router-dom'; import { color, font, mixin } from 'shared/utils/styles'; -import { Avatar } from 'shared/components'; +import { Avatar } from 'shared/components'; export const IssueLink = styled(Link)` display: block; @@ -15,7 +15,8 @@ export const Issue = styled.div` background: #fff; box-shadow: 0px 1px 2px 0px rgba(9, 30, 66, 0.25); transition: background 0.1s; - ${mixin.clickable} + cursor: pointer; + user-select: none; @media (max-width: 1100px) { padding: 10px 8px; } @@ -32,9 +33,9 @@ export const Issue = styled.div` export const Title = styled.p` padding-bottom: 11px; - ${font.size(15)} + font-size: 15px @media (max-width: 1100px) { - ${font.size(14.5)} + font-size: 14.5px } `; diff --git a/react-client/src/Project/Board/Lists/List/Issue/index.jsx b/react-client/src/Project/Board/Lists/List/Issue/index.jsx index f326a398..7c9820a9 100644 --- a/react-client/src/Project/Board/Lists/List/Issue/index.jsx +++ b/react-client/src/Project/Board/Lists/List/Issue/index.jsx @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import { useRouteMatch } from 'react-router-dom'; import { Draggable } from 'react-beautiful-dnd'; -import { IssueTypeIcon, IssuePriorityIcon } from 'shared/components'; +import { IssueTypeIcon, IssuePriorityIcon } from '../../../../../shared/components'; import { IssueLink, Issue, Title, Bottom, Assignees, AssigneeAvatar } from './Styles'; diff --git a/react-client/src/Project/Board/Lists/List/Styles.js b/react-client/src/Project/Board/Lists/List/Styles.js index bd456fe1..5943ecf8 100644 --- a/react-client/src/Project/Board/Lists/List/Styles.js +++ b/react-client/src/Project/Board/Lists/List/Styles.js @@ -16,13 +16,13 @@ export const Title = styled.div` padding: 13px 10px 17px; text-transform: uppercase; color: ${color.textMedium}; - ${font.size(12.5)}; + font-size: 12.5px; ${mixin.truncateText} `; export const IssuesCount = styled.span` text-transform: lowercase; - ${font.size(13)}; + font-size: 13px; `; export const Issues = styled.div` diff --git a/react-client/src/Project/Board/Lists/List/index.jsx b/react-client/src/Project/Board/Lists/List/index.jsx index 5ff5baa1..9db2b3a8 100644 --- a/react-client/src/Project/Board/Lists/List/index.jsx +++ b/react-client/src/Project/Board/Lists/List/index.jsx @@ -9,17 +9,6 @@ import { IssueStatusCopy } from 'shared/constants/issues'; import Issue from './Issue'; import { List, Title, IssuesCount, Issues } from './Styles'; -const propTypes = { - status: PropTypes.string.isRequired, - project: PropTypes.object.isRequired, - filters: PropTypes.object.isRequired, - currentUserId: PropTypes.number, -}; - -const defaultProps = { - currentUserId: null, -}; - const ProjectBoardList = ({ status, project, filters, currentUserId }) => { const filteredIssues = filterIssues(project.issues, filters, currentUserId); const filteredListIssues = getSortedListIssues(filteredIssues, status); @@ -78,7 +67,14 @@ const formatIssuesCount = (allListIssues, filteredListIssues) => { return allListIssues.length; }; -ProjectBoardList.propTypes = propTypes; -ProjectBoardList.defaultProps = defaultProps; +ProjectBoardList.propTypes = { + status: PropTypes.string.isRequired, + project: PropTypes.object.isRequired, + filters: PropTypes.object.isRequired, + currentUserId: PropTypes.number, +}; +ProjectBoardList.defaultProps = { + currentUserId: null, +}; export default ProjectBoardList; diff --git a/react-client/src/Project/IssueSearch/Styles.js b/react-client/src/Project/IssueSearch/Styles.js index b15da860..2125923b 100644 --- a/react-client/src/Project/IssueSearch/Styles.js +++ b/react-client/src/Project/IssueSearch/Styles.js @@ -20,7 +20,7 @@ export const SearchInputDebounced = styled(InputDebounced)` border: none; border-bottom: 2px solid ${color.primary}; background: #fff; - ${font.size(21)} + font-size: 21px &:focus, &:hover { box-shadow: none; @@ -50,7 +50,8 @@ export const Issue = styled.div` padding: 4px 10px; border-radius: 4px; transition: background 0.1s; - ${mixin.clickable} + cursor: pointer; + user-select: none; &:hover { background: ${color.backgroundLight}; } @@ -62,13 +63,13 @@ export const IssueData = styled.div` export const IssueTitle = styled.div` color: ${color.textDark}; - ${font.size(15)} + font-size: 15px `; export const IssueTypeId = styled.div` text-transform: uppercase; color: ${color.textMedium}; - ${font.size(12.5)} + font-size: 12.5px `; export const SectionTitle = styled.div` @@ -76,7 +77,7 @@ export const SectionTitle = styled.div` text-transform: uppercase; color: ${color.textMedium}; ${font.bold} - ${font.size(11.5)} + font-size: 11.5px `; export const NoResults = styled.div` @@ -87,10 +88,10 @@ export const NoResults = styled.div` export const NoResultsTitle = styled.div` padding-top: 30px; ${font.medium} - ${font.size(20)} + font-size: 20px `; export const NoResultsTip = styled.div` padding-top: 10px; - ${font.size(15)} + font-size: 15px `; diff --git a/react-client/src/Project/NavbarLeft/Styles.js b/react-client/src/Project/NavbarLeft/Styles.js index c8ee6643..911ed0bc 100644 --- a/react-client/src/Project/NavbarLeft/Styles.js +++ b/react-client/src/Project/NavbarLeft/Styles.js @@ -33,7 +33,8 @@ export const StyledLogo = styled(Logo)` display: inline-block; margin-left: 8px; padding: 10px; - ${mixin.clickable} + cursor: pointer; + user-select: none; `; export const Bottom = styled.div` @@ -51,7 +52,8 @@ export const Item = styled.div` padding-left: 64px; color: #deebff; transition: color 0.1s; - ${mixin.clickable} + cursor: pointer; + user-select: none; &:hover { background: rgba(255, 255, 255, 0.1); } @@ -70,7 +72,7 @@ export const ItemText = styled.div` transition: all 0.1s; transition-property: right, visibility, opacity; ${font.bold} - ${font.size(12)} + font-size: 12px ${NavLeft}:hover & { right: 0; visibility: visible; diff --git a/react-client/src/Project/ProjectSettings/Styles.js b/react-client/src/Project/ProjectSettings/Styles.js index a2221969..0b66ddde 100644 --- a/react-client/src/Project/ProjectSettings/Styles.js +++ b/react-client/src/Project/ProjectSettings/Styles.js @@ -15,7 +15,7 @@ export const FormElement = styled(Form.Element)` export const FormHeading = styled.h1` padding: 6px 0 15px; - ${font.size(24)} + font-size: 24px ${font.medium} `; diff --git a/react-client/src/Project/Sidebar/Styles.js b/react-client/src/Project/Sidebar/Styles.js index dbdc28eb..62729ff5 100644 --- a/react-client/src/Project/Sidebar/Styles.js +++ b/react-client/src/Project/Sidebar/Styles.js @@ -33,13 +33,13 @@ export const ProjectTexts = styled.div` export const ProjectName = styled.div` color: ${color.textDark}; - ${font.size(15)}; + font-size: 15px; ${font.medium}; `; export const ProjectCategory = styled.div` color: ${color.textMedium}; - ${font.size(13)}; + font-size: 13px; `; export const Divider = styled.div` @@ -53,7 +53,8 @@ export const LinkItem = styled.div` display: flex; padding: 8px 12px; border-radius: 3px; - ${mixin.clickable} + cursor: pointer; + user-select: none; ${props => !props.to ? `cursor: not-allowed;` : `&:hover { background: ${color.backgroundLight}; }`} i { @@ -71,7 +72,7 @@ export const LinkItem = styled.div` export const LinkText = styled.div` padding-top: 2px; - ${font.size(14.7)}; + font-size: 14.7px; `; export const NotImplemented = styled.div` @@ -86,7 +87,7 @@ export const NotImplemented = styled.div` color: ${color.textDark}; background: ${color.backgroundMedium}; opacity: 0; - ${font.size(11.5)}; + font-size: 11.5px; ${font.bold} ${LinkItem}:hover & { opacity: 1; diff --git a/react-client/src/shared/components/AboutTooltip/Styles.js b/react-client/src/shared/components/AboutTooltip/Styles.js index 34467a03..cd3d9773 100644 --- a/react-client/src/shared/components/AboutTooltip/Styles.js +++ b/react-client/src/shared/components/AboutTooltip/Styles.js @@ -16,7 +16,7 @@ export const FeedbackImage = styled.img` export const FeedbackParagraph = styled.p` margin-bottom: 12px; - ${font.size(15)} + font-size: 15px &:last-of-type { margin-bottom: 22px; } diff --git a/react-client/src/shared/components/Breadcrumbs/Styles.js b/react-client/src/shared/components/Breadcrumbs/Styles.js index 73720a77..5817c52a 100644 --- a/react-client/src/shared/components/Breadcrumbs/Styles.js +++ b/react-client/src/shared/components/Breadcrumbs/Styles.js @@ -4,12 +4,12 @@ import { color, font } from 'shared/utils/styles'; export const Container = styled.div` color: ${color.textMedium}; - ${font.size(15)}; + font-size: 15px; `; export const Divider = styled.span` position: relative; top: 2px; margin: 0 10px; - ${font.size(18)}; + font-size: 18px; `; diff --git a/react-client/src/shared/components/Button/Styles.js b/react-client/src/shared/components/Button/Styles.js index 43a6eca0..99291828 100644 --- a/react-client/src/shared/components/Button/Styles.js +++ b/react-client/src/shared/components/Button/Styles.js @@ -15,8 +15,9 @@ export const StyledButton = styled.button` border-radius: 3px; transition: all 0.1s; appearance: none; - ${mixin.clickable} - ${font.size(14.5)} + cursor: pointer; + user-select: none; + font-size: 14.5px ${props => buttonVariants[props.variant]} &:disabled { opacity: 0.6; diff --git a/react-client/src/shared/components/ConfirmModal/Styles.js b/react-client/src/shared/components/ConfirmModal/Styles.js index 6312fe9c..ab9400bb 100644 --- a/react-client/src/shared/components/ConfirmModal/Styles.js +++ b/react-client/src/shared/components/ConfirmModal/Styles.js @@ -11,14 +11,14 @@ export const StyledConfirmModal = styled(Modal)` export const Title = styled.div` padding-bottom: 25px; ${font.medium} - ${font.size(22)} + font-size: 22px line-height: 1.5; `; export const Message = styled.p` padding-bottom: 25px; white-space: pre-wrap; - ${font.size(15)} + font-size: 15px `; export const Actions = styled.div` diff --git a/react-client/src/shared/components/DatePicker/Styles.js b/react-client/src/shared/components/DatePicker/Styles.js index e5548bf1..4f5bc245 100644 --- a/react-client/src/shared/components/DatePicker/Styles.js +++ b/react-client/src/shared/components/DatePicker/Styles.js @@ -32,14 +32,14 @@ export const SelectedMonthYear = styled.div` display: inline-block; padding-left: 7px; ${font.bold} - ${font.size(16)} + font-size: 16px `; export const YearSelect = styled.select` margin-left: 5px; width: 60px; height: 22px; - ${font.size(13)} + font-size: 13px `; export const PrevNextIcons = styled.div` @@ -50,7 +50,8 @@ export const PrevNextIcons = styled.div` padding: 7px 5px 4px; font-size: 22px; color: ${color.textLight}; - ${mixin.clickable} + cursor: pointer; + user-select: none; &:hover { color: ${color.textDarkest}; } @@ -69,7 +70,7 @@ export const DayName = styled.div` height: 30px; line-height: 30px; color: ${color.textLight}; - ${font.size(13)} + font-size: 13px `; export const Day = styled.div` @@ -77,7 +78,7 @@ export const Day = styled.div` height: 30px; line-height: 30px; border-radius: 3px; - ${font.size(15)} + font-size: 15px ${props => !props.isFiller && hoverStyles} ${props => props.isToday && font.bold} ${props => props.isSelected && selectedStyles} @@ -96,13 +97,14 @@ export const TimeSection = styled.div` export const Time = styled.div` padding: 5px 0 5px 20px; - ${font.size(14)} + font-size: 14px ${props => !props.isFiller && hoverStyles} ${props => props.isSelected && selectedStyles} `; const hoverStyles = css` - ${mixin.clickable} + cursor: pointer; + user-select: none; &:hover { background: ${color.backgroundMedium}; } diff --git a/react-client/src/shared/components/Form/Styles.js b/react-client/src/shared/components/Form/Styles.js index 113d5dfc..fb0a7ae2 100644 --- a/react-client/src/shared/components/Form/Styles.js +++ b/react-client/src/shared/components/Form/Styles.js @@ -11,13 +11,13 @@ export const FieldLabel = styled.label` padding-bottom: 5px; color: ${color.textMedium}; ${font.medium} - ${font.size(13)} + font-size: 13px `; export const FieldTip = styled.div` padding-top: 6px; color: ${color.textMedium}; - ${font.size(12.5)} + font-size: 12.5px `; export const FieldError = styled.div` @@ -25,5 +25,5 @@ export const FieldError = styled.div` line-height: 1; color: ${color.danger}; ${font.medium} - ${font.size(12.5)} + font-size: 12.5px `; diff --git a/react-client/src/shared/components/Input/Styles.js b/react-client/src/shared/components/Input/Styles.js index 1f52b266..b0fb7af3 100644 --- a/react-client/src/shared/components/Input/Styles.js +++ b/react-client/src/shared/components/Input/Styles.js @@ -20,7 +20,7 @@ export const InputElement = styled.input` background: ${color.backgroundLightest}; transition: background 0.1s; ${font.regular} - ${font.size(15)} + font-size: 15px ${props => props.hasIcon && 'padding-left: 32px;'} &:hover { background: ${color.backgroundLight}; diff --git a/react-client/src/shared/components/IssuePriorityIcon/Styles.js b/react-client/src/shared/components/IssuePriorityIcon/Styles.js index 4352e486..b135fe13 100644 --- a/react-client/src/shared/components/IssuePriorityIcon/Styles.js +++ b/react-client/src/shared/components/IssuePriorityIcon/Styles.js @@ -1,7 +1,7 @@ import styled from 'styled-components'; -import { issuePriorityColors } from 'shared/utils/styles'; -import { Icon } from 'shared/components'; +import { issuePriorityColors } from '../../../shared/utils/styles'; +import { Icon } from '../../../shared/components'; export const PriorityIcon = styled(Icon)` color: ${props => issuePriorityColors[props.color]}; diff --git a/react-client/src/shared/components/IssueTypeIcon/Styles.js b/react-client/src/shared/components/IssueTypeIcon/Styles.js index 6ec1862c..48e9f92c 100644 --- a/react-client/src/shared/components/IssueTypeIcon/Styles.js +++ b/react-client/src/shared/components/IssueTypeIcon/Styles.js @@ -1,7 +1,7 @@ import styled from 'styled-components'; -import { issueTypeColors } from 'shared/utils/styles'; -import { Icon } from 'shared/components'; +import { issueTypeColors } from '../../../shared/utils/styles'; +import { Icon } from '../../components'; export const TypeIcon = styled(Icon)` color: ${props => issueTypeColors[props.color]}; diff --git a/react-client/src/shared/components/IssueTypeIcon/index.jsx b/react-client/src/shared/components/IssueTypeIcon/index.jsx index 2d1fa151..99cc51fb 100644 --- a/react-client/src/shared/components/IssueTypeIcon/index.jsx +++ b/react-client/src/shared/components/IssueTypeIcon/index.jsx @@ -3,14 +3,12 @@ import PropTypes from 'prop-types'; import { TypeIcon } from './Styles'; -const propTypes = { - type: PropTypes.string.isRequired, -}; - const IssueTypeIcon = ({ type, ...otherProps }) => ( ); -IssueTypeIcon.propTypes = propTypes; +IssueTypeIcon.propTypes = { + type: PropTypes.string.isRequired, +}; export default IssueTypeIcon; diff --git a/react-client/src/shared/components/Modal/Styles.js b/react-client/src/shared/components/Modal/Styles.js index ad6d2640..b65b5e1d 100644 --- a/react-client/src/shared/components/Modal/Styles.js +++ b/react-client/src/shared/components/Modal/Styles.js @@ -56,7 +56,8 @@ export const CloseIcon = styled(Icon)` font-size: 25px; color: ${color.textMedium}; transition: all 0.1s; - ${mixin.clickable} + cursor: pointer; + user-select: none; ${props => closeIconStyles[props.variant]} `; diff --git a/react-client/src/shared/components/PageError/Styles.js b/react-client/src/shared/components/PageError/Styles.js index 414c517a..d59bfb5d 100644 --- a/react-client/src/shared/components/PageError/Styles.js +++ b/react-client/src/shared/components/PageError/Styles.js @@ -41,5 +41,5 @@ export const StyledIcon = styled(Icon)` export const Title = styled.h1` margin-bottom: 16px; padding-left: 42px; - ${font.size(29)} + font-size: 29px `; diff --git a/react-client/src/shared/components/Select/Styles.js b/react-client/src/shared/components/Select/Styles.js index 6729e254..10561277 100644 --- a/react-client/src/shared/components/Select/Styles.js +++ b/react-client/src/shared/components/Select/Styles.js @@ -7,7 +7,7 @@ export const StyledSelect = styled.div` position: relative; border-radius: 4px; cursor: pointer; - ${font.size(14)} + font-size: 14px ${props => props.variant === 'empty' && `display: inline-block;`} ${props => props.variant === 'normal' && @@ -80,7 +80,7 @@ export const AddMore = styled.div` display: inline-block; margin-bottom: 3px; padding: 3px 0; - ${font.size(12.5)} + font-size: 12.5px ${mixin.link()} i { margin-right: 3px; @@ -118,7 +118,8 @@ export const ClearIcon = styled(Icon)` padding: 5px; font-size: 16px; color: ${color.textMedium}; - ${mixin.clickable} + cursor: pointer; + user-select: none; `; export const Options = styled.div` diff --git a/react-client/src/shared/components/TextEditedContent/Styles.js b/react-client/src/shared/components/TextEditedContent/Styles.js index 1305ac98..489d3b02 100644 --- a/react-client/src/shared/components/TextEditedContent/Styles.js +++ b/react-client/src/shared/components/TextEditedContent/Styles.js @@ -4,6 +4,6 @@ import { font } from 'shared/utils/styles'; export const Content = styled.div` padding: 0 !important; - ${font.size(15)} + font-size: 15px ${font.regular} `; diff --git a/react-client/src/shared/components/TextEditor/Styles.js b/react-client/src/shared/components/TextEditor/Styles.js index fa5bf61d..3b4048d3 100644 --- a/react-client/src/shared/components/TextEditor/Styles.js +++ b/react-client/src/shared/components/TextEditor/Styles.js @@ -13,7 +13,7 @@ export const EditorCont = styled.div` border: 1px solid ${color.borderLightest}; border-top: none; color: ${color.textDarkest}; - ${font.size(15)} + font-size: 15px ${font.regular} } .ql-editor { diff --git a/react-client/src/shared/components/Textarea/Styles.js b/react-client/src/shared/components/Textarea/Styles.js index 5d38fbc5..cc75c803 100644 --- a/react-client/src/shared/components/Textarea/Styles.js +++ b/react-client/src/shared/components/Textarea/Styles.js @@ -14,7 +14,7 @@ export const StyledTextarea = styled.div` color: ${color.textDarkest}; background: ${color.backgroundLightest}; ${font.regular} - ${font.size(15)} + font-size: 15px &:focus { background: #fff; border: 1px solid ${color.borderInputFocus}; diff --git a/react-client/src/shared/utils/styles.js b/react-client/src/shared/utils/styles.js index 3f1d9d2b..b0ef06db 100644 --- a/react-client/src/shared/utils/styles.js +++ b/react-client/src/shared/utils/styles.js @@ -175,7 +175,7 @@ export const mixin = { color: ${colorValue}; background: ${background}; ${font.bold} - ${font.size(12)} + font-size: 12px i { margin-left: 4px; }