diff --git a/jirs-client/js/css/styledModal.css b/jirs-client/js/css/styledModal.css index ecc228d1..27e0f060 100644 --- a/jirs-client/js/css/styledModal.css +++ b/jirs-client/js/css/styledModal.css @@ -77,6 +77,29 @@ color: var(--primary); } -.styledModal.confirmModal { +.modal > .clickableOverlay > .styledModal.confirmModal { padding: 35px 40px 40px; } + +.modal > .clickableOverlay > .styledModal.confirmModal > .title { + padding-bottom: 25px; + font-family: var(--font-medium); + font-weight: normal; + font-size: 22px; + line-height: 1.5; +} + +.modal > .clickableOverlay > .styledModal.confirmModal > .message { + padding-bottom: 25px; + white-space: pre-wrap; + font-size: 15px +} + +.modal > .clickableOverlay > .styledModal.confirmModal > .actions { + display: flex; + padding-top: 6px; +} + +.modal > .clickableOverlay > .styledModal.confirmModal > .actions > .styledButton { + margin-right: 10px; +} diff --git a/jirs-client/src/lib.rs b/jirs-client/src/lib.rs index 1ef87994..f558efde 100644 --- a/jirs-client/src/lib.rs +++ b/jirs-client/src/lib.rs @@ -56,6 +56,7 @@ pub enum Msg { // issues IssueUpdateResult(FetchObject), + DeleteIssue(IssueId), // modals ModalOpened(ModalType), diff --git a/jirs-client/src/modal/confirm_delete_issue.rs b/jirs-client/src/modal/confirm_delete_issue.rs index 5b50de5b..46c30b39 100644 --- a/jirs-client/src/modal/confirm_delete_issue.rs +++ b/jirs-client/src/modal/confirm_delete_issue.rs @@ -1,12 +1,28 @@ use seed::{prelude::*, *}; -use crate::shared::styled_modal::StyledModal; +use crate::model::ModalType; +use crate::shared::styled_confirm_modal::StyledConfirmModal; use crate::shared::ToNode; use crate::{model, Msg}; pub fn view(model: &model::Model) -> Node { - let handle_issue_delete = mouse_ev(Ev::Click, |_| Msg::NoOp); - StyledModal::build() + let opt_id = model + .modals + .iter() + .filter_map(|modal| match modal { + ModalType::EditIssue(issue_id, _) => Some(issue_id), + _ => None, + }) + .find(|id| id.eq(id)); + + let issue_id = match opt_id { + Some(id) => *id, + _ => return empty![], + }; + + let handle_issue_delete = mouse_ev(Ev::Click, move |_| Msg::DeleteIssue(issue_id)); + + StyledConfirmModal::build() .title("Are you sure you want to delete this issue?") .message("Once you delete, it's gone for good.") .confirm_text("Delete issue") diff --git a/jirs-client/src/modal/mod.rs b/jirs-client/src/modal/mod.rs index e976f8ab..531629e5 100644 --- a/jirs-client/src/modal/mod.rs +++ b/jirs-client/src/modal/mod.rs @@ -4,7 +4,7 @@ use jirs_data::{Issue, IssueType, UpdateIssuePayload}; use crate::api::update_issue; use crate::model::{EditIssueModal, ModalType, Page}; -use crate::shared::modal::{Modal, Variant as ModalVariant}; +use crate::shared::styled_modal::{StyledModal, Variant as ModalVariant}; use crate::shared::styled_select::StyledSelectChange; use crate::shared::{find_issue, ToNode}; use crate::{model, FieldChange, FieldId, Msg}; @@ -114,14 +114,12 @@ pub fn view(model: &model::Model) -> Node { ModalType::EditIssue(issue_id, modal) => { if let Some(issue) = find_issue(model, *issue_id) { let details = issue_details::view(model, issue, &modal); - let modal = Modal { - variant: ModalVariant::Center, - width: 1040, - with_icon: false, - children: vec![details], - } - .into_node(); - modal + StyledModal::build() + .variant(ModalVariant::Center) + .width(1040) + .children(vec![details]) + .build() + .into_node() } else { empty![] } diff --git a/jirs-client/src/shared/mod.rs b/jirs-client/src/shared/mod.rs index 14c1dd9a..241b4483 100644 --- a/jirs-client/src/shared/mod.rs +++ b/jirs-client/src/shared/mod.rs @@ -7,10 +7,10 @@ use crate::model::Model; use crate::{IssueId, Msg}; pub mod aside; -pub mod modal; pub mod navbar_left; pub mod styled_avatar; pub mod styled_button; +pub mod styled_confirm_modal; pub mod styled_icon; pub mod styled_input; pub mod styled_modal; diff --git a/jirs-client/src/shared/modal.rs b/jirs-client/src/shared/modal.rs deleted file mode 100644 index cdf80545..00000000 --- a/jirs-client/src/shared/modal.rs +++ /dev/null @@ -1,83 +0,0 @@ -use seed::{prelude::*, *}; - -use crate::shared::styled_icon::{Icon, StyledIcon}; -use crate::shared::ToNode; -use crate::Msg; - -#[allow(dead_code)] -#[derive(Debug, Copy, Clone, PartialOrd, PartialEq)] -pub enum Variant { - Center, - Aside, -} - -impl Variant { - pub fn to_class_name(&self) -> &str { - match self { - Variant::Center => "center", - Variant::Aside => "aside", - } - } - - pub fn to_icon_class_name(&self) -> &str { - match self { - Variant::Center => "modalVariantCenter", - Variant::Aside => "modalVariantAside", - } - } -} - -#[derive(Debug)] -pub struct Modal { - pub variant: Variant, - pub width: usize, - pub with_icon: bool, - pub children: Vec>, -} - -impl ToNode for Modal { - fn into_node(self) -> Node { - render(self) - } -} - -pub fn render(values: Modal) -> Node { - let Modal { - variant, - width, - with_icon, - children, - } = values; - - let icon = if with_icon { - StyledIcon::build(Icon::Close) - .add_class(variant.to_icon_class_name().to_string()) - .build() - .into_node() - } else { - empty![] - }; - - let close_handler = mouse_ev(Ev::Click, |_| Msg::ModalDropped); - let body_handler = mouse_ev(Ev::Click, |ev| { - ev.stop_propagation(); - Msg::NoOp - }); - - let clickable_class = format!("clickableOverlay {}", variant.to_class_name()); - let styled_modal_class = format!("styledModal {}", variant.to_class_name()); - let styled_modal_style = format!("max-width: {width}px", width = width); - div![ - attrs![At::Class => "modal"], - div![ - attrs![At::Class => clickable_class], - close_handler, - div![ - attrs![At::Class => styled_modal_class, At::Style => styled_modal_style], - body_handler, - icon, - children - ] - ] - ] -} diff --git a/jirs-client/src/shared/styled_confirm_modal.rs b/jirs-client/src/shared/styled_confirm_modal.rs new file mode 100644 index 00000000..fac92717 --- /dev/null +++ b/jirs-client/src/shared/styled_confirm_modal.rs @@ -0,0 +1,152 @@ +use seed::EventHandler; +use seed::{prelude::*, *}; + +use crate::shared::styled_button::{StyledButton, Variant as ButtonVariant}; +use crate::shared::styled_modal::StyledModal; +use crate::shared::ToNode; +use crate::Msg; + +const TITLE: &str = "Warning"; +const MESSAGE: &str = "Are you sure you want to continue with this action?"; +const CONFIRM_TEXT: &str = "Confirm"; +const CANCEL_TEXT: &str = "Cancel"; + +#[derive(Debug)] +pub enum Variant { + Primary, +} + +#[derive(Debug)] +pub struct StyledConfirmModal { + pub variant: Variant, + pub title: String, + pub message: String, + pub confirm_text: String, + pub cancel_text: String, + pub on_confirm: Option>, +} + +impl StyledConfirmModal { + pub fn build() -> StyledConfirmModalBuilder { + StyledConfirmModalBuilder::default() + } +} + +impl ToNode for StyledConfirmModal { + fn into_node(self) -> Node { + render(self) + } +} + +#[derive(Default)] +pub struct StyledConfirmModalBuilder { + variant: Option, + title: Option, + message: Option, + confirm_text: Option, + cancel_text: Option, + on_confirm: Option>>, +} + +impl StyledConfirmModalBuilder { + pub fn variant(mut self, variant: Variant) -> Self { + self.variant = Some(variant); + self + } + + pub fn title(mut self, title: S) -> Self + where + S: Into, + { + self.title = Some(title.into()); + self + } + + pub fn message(mut self, message: S) -> Self + where + S: Into, + { + self.message = Some(message.into()); + self + } + + pub fn confirm_text(mut self, confirm_text: S) -> Self + where + S: Into, + { + self.confirm_text = Some(confirm_text.into()); + self + } + + pub fn cancel_text(mut self, cancel_text: S) -> Self + where + S: Into, + { + self.cancel_text = Some(cancel_text.into()); + self + } + + pub fn on_confirm(mut self, on_confirm: EventHandler) -> Self { + self.on_confirm = Some(Some(on_confirm)); + self + } + + pub fn build(self) -> StyledConfirmModal { + StyledConfirmModal { + variant: self.variant.unwrap_or_else(|| Variant::Primary), + title: self.title.unwrap_or_else(|| TITLE.to_string()), + message: self.message.unwrap_or_else(|| MESSAGE.to_string()), + confirm_text: self + .confirm_text + .unwrap_or_else(|| CONFIRM_TEXT.to_string()), + cancel_text: self.cancel_text.unwrap_or_else(|| CANCEL_TEXT.to_string()), + on_confirm: self.on_confirm.unwrap_or_default(), + } + } +} + +pub fn render(values: StyledConfirmModal) -> Node { + let StyledConfirmModal { + variant, + title, + message, + confirm_text, + cancel_text, + on_confirm, + } = values; + + let message_node = match message { + _ if message.is_empty() => empty![], + _ => p![attrs![At::Class => "message"], message], + }; + + let confirm_button = match on_confirm { + Some(handler) => StyledButton::build() + .text(confirm_text) + .on_click(handler) + .build() + .into_node(), + _ => StyledButton::build().text(confirm_text).build().into_node(), + }; + let cancel_button = StyledButton::build() + .text(cancel_text) + .variant(ButtonVariant::Secondary) + .on_click(mouse_ev(Ev::Click, |_| Msg::ModalDropped)) + .build() + .into_node(); + + StyledModal::build() + .width(600) + .children(vec![ + div![attrs![At::Class => "title"], title], + message_node, + div![ + attrs![At::Class => "actions"], + confirm_button, + cancel_button + ], + ]) + .add_class("confirmModal".to_string()) + .build() + .into_node() +} diff --git a/jirs-client/src/shared/styled_modal.rs b/jirs-client/src/shared/styled_modal.rs index 59a5dcd9..e12da0bc 100644 --- a/jirs-client/src/shared/styled_modal.rs +++ b/jirs-client/src/shared/styled_modal.rs @@ -1,33 +1,39 @@ -use seed::EventHandler; use seed::{prelude::*, *}; +use crate::shared::styled_icon::{Icon, StyledIcon}; use crate::shared::ToNode; use crate::Msg; -const TITLE: &str = "Warning"; -const MESSAGE: &str = "Are you sure you want to continue with this action?"; -const CONFIRM_TEXT: &str = "Confirm"; -const CANCEL_TEXT: &str = "Cancel"; - -#[derive(Debug)] +#[allow(dead_code)] +#[derive(Debug, Copy, Clone, PartialOrd, PartialEq)] pub enum Variant { - Primary, + Center, + Aside, +} + +impl Variant { + pub fn to_class_name(&self) -> &str { + match self { + Variant::Center => "center", + Variant::Aside => "aside", + } + } + + pub fn to_icon_class_name(&self) -> &str { + match self { + Variant::Center => "modalVariantCenter", + Variant::Aside => "modalVariantAside", + } + } } #[derive(Debug)] pub struct StyledModal { pub variant: Variant, - pub title: String, - pub message: String, - pub confirm_text: String, - pub cancel_text: String, - pub on_confirm: Option>, -} - -impl StyledModal { - pub fn build() -> StyledModalBuilder { - StyledModalBuilder::default() - } + pub width: usize, + pub with_icon: bool, + pub children: Vec>, + pub class_list: Vec, } impl ToNode for StyledModal { @@ -36,14 +42,19 @@ impl ToNode for StyledModal { } } +impl StyledModal { + pub fn build() -> StyledModalBuilder { + Default::default() + } +} + #[derive(Default)] pub struct StyledModalBuilder { variant: Option, - title: Option, - message: Option, - confirm_text: Option, - cancel_text: Option, - on_confirm: Option>>, + width: Option, + with_icon: Option, + children: Option>>, + class_list: Vec, } impl StyledModalBuilder { @@ -52,53 +63,33 @@ impl StyledModalBuilder { self } - pub fn title(mut self, title: S) -> Self - where - S: Into, - { - self.title = Some(title.into()); + pub fn width(mut self, width: usize) -> Self { + self.width = Some(width); self } - pub fn message(mut self, message: S) -> Self - where - S: Into, - { - self.message = Some(message.into()); + pub fn with_icon(mut self, with_icon: bool) -> Self { + self.with_icon = Some(with_icon); self } - pub fn confirm_text(mut self, confirm_text: S) -> Self - where - S: Into, - { - self.confirm_text = Some(confirm_text.into()); + pub fn children(mut self, children: Vec>) -> Self { + self.children = Some(children); self } - pub fn cancel_text(mut self, cancel_text: S) -> Self - where - S: Into, - { - self.cancel_text = Some(cancel_text.into()); - self - } - - pub fn on_confirm(mut self, on_confirm: EventHandler) -> Self { - self.on_confirm = Some(Some(on_confirm)); + pub fn add_class(mut self, name: String) -> Self { + self.class_list.push(name); self } pub fn build(self) -> StyledModal { StyledModal { - variant: self.variant.unwrap_or_else(|| Variant::Primary), - title: self.title.unwrap_or_else(|| TITLE.to_string()), - message: self.message.unwrap_or_else(|| MESSAGE.to_string()), - confirm_text: self - .confirm_text - .unwrap_or_else(|| CONFIRM_TEXT.to_string()), - cancel_text: self.cancel_text.unwrap_or_else(|| CANCEL_TEXT.to_string()), - on_confirm: None, + variant: self.variant.unwrap_or_else(|| Variant::Center), + width: self.width.unwrap_or_else(|| 130), + with_icon: self.with_icon.unwrap_or_default(), + children: self.children.unwrap_or_default(), + class_list: self.class_list, } } } @@ -106,14 +97,41 @@ impl StyledModalBuilder { pub fn render(values: StyledModal) -> Node { let StyledModal { variant, - title, - message, - confirm_text, - cancel_text, - on_confirm, + width, + with_icon, + children, + mut class_list, } = values; + + let icon = if with_icon { + StyledIcon::build(Icon::Close) + .add_class(variant.to_icon_class_name().to_string()) + .build() + .into_node() + } else { + empty![] + }; + + let close_handler = mouse_ev(Ev::Click, |_| Msg::ModalDropped); + let body_handler = mouse_ev(Ev::Click, |ev| { + ev.stop_propagation(); + Msg::NoOp + }); + + let clickable_class = format!("clickableOverlay {}", variant.to_class_name()); + class_list.push(format!("styledModal {}", variant.to_class_name())); + let styled_modal_style = format!("max-width: {width}px", width = width); div![ attrs![At::Class => "modal"], - div![attrs![At::Class => "styledModal"]] + div![ + attrs![At::Class => clickable_class], + close_handler, + div![ + attrs![At::Class => class_list.join(" "), At::Style => styled_modal_style], + body_handler, + icon, + children + ] + ] ] } diff --git a/react-client/src/App/BaseStyles.js b/react-client/src/App/BaseStyles.js index 614b38d4..e23f5220 100644 --- a/react-client/src/App/BaseStyles.js +++ b/react-client/src/App/BaseStyles.js @@ -10,11 +10,11 @@ export default createGlobalStyle` } body { - color: ${color.textDarkest}; + color: ${ color.textDarkest }; -webkit-tap-highlight-color: transparent; line-height: 1.2; font-size: 16px - ${font.regular} + ${ font.regular };font-weight: normal; } #root { @@ -27,7 +27,7 @@ export default createGlobalStyle` optgroup, select, textarea { - ${font.regular} + ${ font.regular };font-weight: normal; } *, *:after, *:before, input[type="search"] { @@ -83,17 +83,17 @@ export default createGlobalStyle` display: none; } select option { - color: ${color.textDarkest}; + color: ${ color.textDarkest }; } p { line-height: 1.4285; a { cursor: pointer; - color: ${color.textLink}; - ${font.medium} + color: ${ color.textLink }; + ${ font.medium };font-weight: normal; &:hover, &:visited, &:active { - color: ${color.textLink}; + color: ${ color.textLink }; } &:hover { text-decoration: underline; diff --git a/react-client/src/App/Toast/Styles.js b/react-client/src/App/Toast/Styles.js index d7a6a239..e9313cf7 100644 --- a/react-client/src/App/Toast/Styles.js +++ b/react-client/src/App/Toast/Styles.js @@ -1,7 +1,7 @@ import styled from 'styled-components'; import { color, font, mixin, zIndexValues } from '../../shared/utils/styles'; -import { Icon } from '../../shared/components'; +import { Icon } from '../../shared/components'; export const Container = styled.div` z-index: ${zIndexValues.modal + 1}; @@ -48,12 +48,12 @@ export const CloseIcon = styled(Icon)` export const Title = styled.div` padding-right: 22px; font-size: 15px - ${font.medium} + ${ font.medium };font-weight: normal; `; export const Message = styled.div` padding: 8px 10px 0 0; white-space: pre-wrap; font-size: 14px - ${font.medium} + ${ font.medium };font-weight: normal; `; diff --git a/react-client/src/Project/Board/Header/Styles.js b/react-client/src/Project/Board/Header/Styles.js index 488d00cb..85cc72fc 100644 --- a/react-client/src/Project/Board/Header/Styles.js +++ b/react-client/src/Project/Board/Header/Styles.js @@ -10,5 +10,5 @@ export const Header = styled.div` export const BoardName = styled.div` font-size: 24px - ${font.medium} + ${ font.medium };font-weight: normal; `; 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 9ef61242..3383c0b5 100644 --- a/react-client/src/Project/Board/IssueDetails/Comments/Comment/Styles.js +++ b/react-client/src/Project/Board/IssueDetails/Comments/Comment/Styles.js @@ -1,7 +1,7 @@ import styled from 'styled-components'; import { color, font } from '../../../../../shared/utils/styles'; -import { Avatar } from '../../../../../shared/components'; +import { Avatar } from '../../../../../shared/components'; export const Comment = styled.div` position: relative; @@ -23,8 +23,8 @@ export const Username = styled.div` display: inline-block; padding-right: 12px; padding-bottom: 10px; - color: ${color.textDark}; - ${font.medium} + color: ${ color.textDark }; + ${ font.medium };font-weight: normal; `; export const CreatedAt = styled.div` diff --git a/react-client/src/Project/Board/IssueDetails/Comments/Styles.js b/react-client/src/Project/Board/IssueDetails/Comments/Styles.js index 27b05478..968b1dfc 100644 --- a/react-client/src/Project/Board/IssueDetails/Comments/Styles.js +++ b/react-client/src/Project/Board/IssueDetails/Comments/Styles.js @@ -7,6 +7,6 @@ export const Comments = styled.div` `; export const Title = styled.div` - ${font.medium} + ${ font.medium };font-weight: normal; font-size: 15px `; diff --git a/react-client/src/Project/Board/IssueDetails/Description/Styles.js b/react-client/src/Project/Board/IssueDetails/Description/Styles.js index 36176651..fc199987 100644 --- a/react-client/src/Project/Board/IssueDetails/Description/Styles.js +++ b/react-client/src/Project/Board/IssueDetails/Description/Styles.js @@ -5,7 +5,7 @@ import { color, font } from '../../../../shared/utils/styles'; export const Title = styled.div` padding: 20px 0 6px; font-size: 15px - ${font.medium} + ${ font.medium };font-weight: normal; `; export const EmptyLabel = styled.div` diff --git a/react-client/src/Project/Board/IssueDetails/EstimateTracking/Styles.js b/react-client/src/Project/Board/IssueDetails/EstimateTracking/Styles.js index d7a0e45d..3ad2c133 100644 --- a/react-client/src/Project/Board/IssueDetails/EstimateTracking/Styles.js +++ b/react-client/src/Project/Board/IssueDetails/EstimateTracking/Styles.js @@ -19,7 +19,7 @@ export const ModalContents = styled.div` export const ModalTitle = styled.div` padding-bottom: 14px; - ${font.medium} + ${ font.medium };font-weight: normal; font-size: 20px `; @@ -35,8 +35,8 @@ export const InputCont = styled.div` export const InputLabel = styled.div` padding-bottom: 5px; - color: ${color.textMedium}; - ${font.medium}; + color: ${ color.textMedium }; + ${ font.medium };font-weight: normal;; font-size: 13px; `; diff --git a/react-client/src/Project/Board/IssueDetails/Title/Styles.js b/react-client/src/Project/Board/IssueDetails/Title/Styles.js index b4b114e8..0a21cf26 100644 --- a/react-client/src/Project/Board/IssueDetails/Title/Styles.js +++ b/react-client/src/Project/Board/IssueDetails/Title/Styles.js @@ -1,7 +1,7 @@ import styled from 'styled-components'; import { color, font } from '../../../../shared/utils/styles'; -import { Textarea } from '../../../../shared/components'; +import { Textarea } from '../../../../shared/components'; export const TitleTextarea = styled(Textarea)` margin: 18px 0 0 -8px; @@ -17,16 +17,16 @@ export const TitleTextarea = styled(Textarea)` box-shadow: 0 0 0 1px transparent; transition: background 0.1s; font-size: 24px - ${font.medium} + ${ font.medium };font-weight: normal; &:hover:not(:focus) { - background: ${color.backgroundLight}; + background: ${ color.backgroundLight }; } } `; export const ErrorText = styled.div` padding-top: 4px; - color: ${color.danger}; + color: ${ color.danger }; font-size: 13px - ${font.medium} + ${ font.medium };font-weight: normal; `; diff --git a/react-client/src/Project/IssueSearch/Styles.js b/react-client/src/Project/IssueSearch/Styles.js index adb5d21e..f632c81d 100644 --- a/react-client/src/Project/IssueSearch/Styles.js +++ b/react-client/src/Project/IssueSearch/Styles.js @@ -1,6 +1,6 @@ import styled from 'styled-components'; -import { color, font } from '../../shared/utils/styles'; +import { color, font } from '../../shared/utils/styles'; import { Icon, InputDebounced, Spinner } from '../../shared/components'; export const IssueSearch = styled.div` @@ -87,7 +87,7 @@ export const NoResults = styled.div` export const NoResultsTitle = styled.div` padding-top: 30px; - ${font.medium} + ${ font.medium };font-weight: normal; font-size: 20px `; diff --git a/react-client/src/Project/ProjectSettings/Styles.js b/react-client/src/Project/ProjectSettings/Styles.js index ea2b24fa..496c0b06 100644 --- a/react-client/src/Project/ProjectSettings/Styles.js +++ b/react-client/src/Project/ProjectSettings/Styles.js @@ -1,6 +1,6 @@ import styled from 'styled-components'; -import { font } from '../../shared/utils/styles'; +import { font } from '../../shared/utils/styles'; import { Button, Form } from '../../shared/components'; export const FormCont = styled.div` @@ -16,7 +16,7 @@ export const FormElement = styled(Form.Element)` export const FormHeading = styled.h1` padding: 6px 0 15px; font-size: 24px - ${font.medium}; font-weight: normal; + ${ font.medium };font-weight: normal;; font-weight: normal; `; export const ActionButton = styled(Button)` diff --git a/react-client/src/Project/Sidebar/Styles.js b/react-client/src/Project/Sidebar/Styles.js index 02565e10..617b915e 100644 --- a/react-client/src/Project/Sidebar/Styles.js +++ b/react-client/src/Project/Sidebar/Styles.js @@ -44,9 +44,9 @@ export const ProjectTexts = styled.div` `; export const ProjectName = styled.div` - color: ${color.textDark}; + color: ${ color.textDark }; font-size: 15px; - ${font.medium}; + ${ font.medium };font-weight: normal;; `; export const ProjectCategory = styled.div` diff --git a/react-client/src/shared/components/Avatar/Styles.js b/react-client/src/shared/components/Avatar/Styles.js index 7848c251..b2a2bad2 100644 --- a/react-client/src/shared/components/Avatar/Styles.js +++ b/react-client/src/shared/components/Avatar/Styles.js @@ -12,14 +12,14 @@ export const Image = styled.div` export const Letter = styled.div` display: inline-block; - width: ${props => props.size}px; - height: ${props => props.size}px; + width: ${ props => props.size }px; + height: ${ props => props.size }px; border-radius: 100%; text-transform: uppercase; color: #fff; - background: ${props => props.color}; - ${font.medium} - ${props => font.size(Math.round(props.size / 1.7))} + background: ${ props => props.color }; + ${ font.medium };font-weight: normal; + ${ props => font.size(Math.round(props.size / 1.7)) } & > span { display: flex; align-items: center; diff --git a/react-client/src/shared/components/Button/Styles.js b/react-client/src/shared/components/Button/Styles.js index 99291828..548b7e01 100644 --- a/react-client/src/shared/components/Button/Styles.js +++ b/react-client/src/shared/components/Button/Styles.js @@ -27,36 +27,36 @@ export const StyledButton = styled.button` const colored = css` color: #fff; - background: ${props => color[props.variant]}; - ${font.medium} + background: ${ props => color[props.variant] }; + ${ font.medium };font-weight: normal; &:not(:disabled) { &:hover { - background: ${props => mixin.lighten(color[props.variant], 0.15)}; + background: ${ props => mixin.lighten(color[props.variant], 0.15) }; } &:active { - background: ${props => mixin.darken(color[props.variant], 0.1)}; + background: ${ props => mixin.darken(color[props.variant], 0.1) }; } - ${props => - props.isActive && - css` + ${ props => + props.isActive && + css` background: ${mixin.darken(color[props.variant], 0.1)} !important; `} } `; const secondaryAndEmptyShared = css` - color: ${color.textDark}; - ${font.regular} + color: ${ color.textDark }; + ${ font.regular };font-weight: normal; &:not(:disabled) { &:hover { - background: ${color.backgroundLight}; + background: ${ color.backgroundLight }; } &:active { - color: ${color.primary}; - background: ${color.backgroundLightPrimary}; + color: ${ color.primary }; + background: ${ color.backgroundLightPrimary }; } - ${props => - props.isActive && + ${ props => + props.isActive && css` color: ${color.primary}; background: ${color.backgroundLightPrimary} !important; diff --git a/react-client/src/shared/components/ConfirmModal/Styles.js b/react-client/src/shared/components/ConfirmModal/Styles.js index 467affa7..7877bccd 100644 --- a/react-client/src/shared/components/ConfirmModal/Styles.js +++ b/react-client/src/shared/components/ConfirmModal/Styles.js @@ -1,8 +1,8 @@ import styled from 'styled-components'; import { font } from '../../../shared/utils/styles'; -import Modal from '../../../shared/components/Modal'; -import Button from '../../../shared/components/Button'; +import Modal from '../../../shared/components/Modal'; +import Button from '../../../shared/components/Button'; export const StyledConfirmModal = styled(Modal)` padding: 35px 40px 40px; @@ -10,7 +10,7 @@ export const StyledConfirmModal = styled(Modal)` export const Title = styled.div` padding-bottom: 25px; - ${font.medium} + ${ font.medium };font-weight: normal; font-size: 22px line-height: 1.5; `; diff --git a/react-client/src/shared/components/Form/Styles.js b/react-client/src/shared/components/Form/Styles.js index fb0a7ae2..da9a5750 100644 --- a/react-client/src/shared/components/Form/Styles.js +++ b/react-client/src/shared/components/Form/Styles.js @@ -9,8 +9,8 @@ export const StyledField = styled.div` export const FieldLabel = styled.label` display: block; padding-bottom: 5px; - color: ${color.textMedium}; - ${font.medium} + color: ${ color.textMedium }; + ${ font.medium };font-weight: normal; font-size: 13px `; @@ -23,7 +23,7 @@ export const FieldTip = styled.div` export const FieldError = styled.div` margin-top: 6px; line-height: 1; - color: ${color.danger}; - ${font.medium} + color: ${ color.danger }; + ${ font.medium };font-weight: normal; 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 b0fb7af3..e0b4e2bf 100644 --- a/react-client/src/shared/components/Input/Styles.js +++ b/react-client/src/shared/components/Input/Styles.js @@ -15,20 +15,20 @@ export const InputElement = styled.input` width: 100%; padding: 0 7px; border-radius: 3px; - border: 1px solid ${color.borderLightest}; - color: ${color.textDarkest}; - background: ${color.backgroundLightest}; + border: 1px solid ${ color.borderLightest }; + color: ${ color.textDarkest }; + background: ${ color.backgroundLightest }; transition: background 0.1s; - ${font.regular} + ${ font.regular };font-weight: normal; font-size: 15px - ${props => props.hasIcon && 'padding-left: 32px;'} + ${ props => props.hasIcon && 'padding-left: 32px;' } &:hover { - background: ${color.backgroundLight}; + background: ${ color.backgroundLight }; } &:focus { background: #fff; - border: 1px solid ${color.borderInputFocus}; - box-shadow: 0 0 0 1px ${color.borderInputFocus}; + border: 1px solid ${ color.borderInputFocus }; + box-shadow: 0 0 0 1px ${ color.borderInputFocus }; } ${props => props.invalid && diff --git a/react-client/src/shared/components/TextEditedContent/Styles.js b/react-client/src/shared/components/TextEditedContent/Styles.js index 489d3b02..f1e65e92 100644 --- a/react-client/src/shared/components/TextEditedContent/Styles.js +++ b/react-client/src/shared/components/TextEditedContent/Styles.js @@ -5,5 +5,5 @@ import { font } from 'shared/utils/styles'; export const Content = styled.div` padding: 0 !important; font-size: 15px - ${font.regular} + ${ font.regular };font-weight: normal; `; diff --git a/react-client/src/shared/components/TextEditor/Styles.js b/react-client/src/shared/components/TextEditor/Styles.js index 3b4048d3..9cc8e6bc 100644 --- a/react-client/src/shared/components/TextEditor/Styles.js +++ b/react-client/src/shared/components/TextEditor/Styles.js @@ -5,16 +5,16 @@ import { color, font } from 'shared/utils/styles'; export const EditorCont = styled.div` .ql-toolbar.ql-snow { border-radius: 4px 4px 0 0; - border: 1px solid ${color.borderLightest}; + border: 1px solid ${ color.borderLightest }; border-bottom: none; } .ql-container.ql-snow { border-radius: 0 0 4px 4px; - border: 1px solid ${color.borderLightest}; + border: 1px solid ${ color.borderLightest }; border-top: none; - color: ${color.textDarkest}; + color: ${ color.textDarkest }; font-size: 15px - ${font.regular} + ${ font.regular };font-weight: normal; } .ql-editor { min-height: 110px; diff --git a/react-client/src/shared/components/Textarea/Styles.js b/react-client/src/shared/components/Textarea/Styles.js index cc75c803..a584365b 100644 --- a/react-client/src/shared/components/Textarea/Styles.js +++ b/react-client/src/shared/components/Textarea/Styles.js @@ -10,19 +10,19 @@ export const StyledTextarea = styled.div` width: 100%; padding: 8px 12px 9px; border-radius: 3px; - border: 1px solid ${color.borderLightest}; - color: ${color.textDarkest}; - background: ${color.backgroundLightest}; - ${font.regular} + border: 1px solid ${ color.borderLightest }; + color: ${ color.textDarkest }; + background: ${ color.backgroundLightest }; + ${ font.regular };font-weight: normal; font-size: 15px &:focus { background: #fff; - border: 1px solid ${color.borderInputFocus}; - box-shadow: 0 0 0 1px ${color.borderInputFocus}; + border: 1px solid ${ color.borderInputFocus }; + box-shadow: 0 0 0 1px ${ color.borderInputFocus }; } - ${props => - props.invalid && - css` + ${ props => + props.invalid && + css` &, &:focus { border: 1px solid ${color.danger}; diff --git a/react-client/src/shared/utils/styles.js b/react-client/src/shared/utils/styles.js index d9971dc1..f763d9ad 100644 --- a/react-client/src/shared/utils/styles.js +++ b/react-client/src/shared/utils/styles.js @@ -1,5 +1,5 @@ import { css } from 'styled-components'; -import Color from 'color'; +import Color from 'color'; import { IssuePriority, IssueStatus, IssueType } from 'shared/constants/issues'; @@ -66,11 +66,11 @@ export const zIndexValues = { }; export const font = { - regular: 'font-family: "CircularStdBook"; font-weight: normal;', - medium: 'font-family: "CircularStdMedium"; font-weight: normal;', - bold: 'font-family: "CircularStdBold"; font-weight: normal;', - black: 'font-family: "CircularStdBlack"; font-weight: normal;', - size: size => `font-size: ${size}px;`, + regular: 'font-family: "CircularStdBook";', + medium: 'font-family: "CircularStdMedium";', + bold: 'font-family: "CircularStdBold";', + black: 'font-family: "CircularStdBlack";', + size: size => `font-size: ${ size }px;`, }; export const mixin = { @@ -155,10 +155,10 @@ export const mixin = { `, link: (colorValue = color.textLink) => css` cursor: pointer; - color: ${colorValue}; - ${font.medium} + color: ${ colorValue }; + ${ font.medium };font-weight: normal; &:hover, &:visited, &:active { - color: ${colorValue}; + color: ${ colorValue }; } &:hover { text-decoration: underline;