Draw confirm delete issue, emit valid msg on confirm

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;
+}

jirs-client/src/lib.rs

@@ -56,6 +56,7 @@ pub enum Msg {
 
     // issues
     IssueUpdateResult(FetchObject<String>),
+    DeleteIssue(IssueId),
 
     // modals
     ModalOpened(ModalType),

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<Msg> {
-    let handle_issue_delete = mouse_ev(Ev::Click, |_| Msg::NoOp);
+    let opt_id = model
-    StyledModal::build()
+        .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")

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<Msg> {
             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 {
+                    StyledModal::build()
-                        variant: ModalVariant::Center,
+                        .variant(ModalVariant::Center)
-                        width: 1040,
+                        .width(1040)
-                        with_icon: false,
+                        .children(vec![details])
-                        children: vec![details],
+                        .build()
-                    }
+                        .into_node()
-                    .into_node();
-                    modal
                 } else {
                     empty![]
                 }

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;

jirs-client/src/shared/modal.rs

@@ -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<Node<Msg>>,
-}
-
-impl ToNode for Modal {
-    fn into_node(self) -> Node<Msg> {
-        render(self)
-    }
-}
-
-pub fn render(values: Modal) -> Node<Msg> {
-    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
-            ]
-        ]
-    ]
-}

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<EventHandler<Msg>>,
+}
+
+impl StyledConfirmModal {
+    pub fn build() -> StyledConfirmModalBuilder {
+        StyledConfirmModalBuilder::default()
+    }
+}
+
+impl ToNode for StyledConfirmModal {
+    fn into_node(self) -> Node<Msg> {
+        render(self)
+    }
+}
+
+#[derive(Default)]
+pub struct StyledConfirmModalBuilder {
+    variant: Option<Variant>,
+    title: Option<String>,
+    message: Option<String>,
+    confirm_text: Option<String>,
+    cancel_text: Option<String>,
+    on_confirm: Option<Option<EventHandler<Msg>>>,
+}
+
+impl StyledConfirmModalBuilder {
+    pub fn variant(mut self, variant: Variant) -> Self {
+        self.variant = Some(variant);
+        self
+    }
+
+    pub fn title<S>(mut self, title: S) -> Self
+    where
+        S: Into<String>,
+    {
+        self.title = Some(title.into());
+        self
+    }
+
+    pub fn message<S>(mut self, message: S) -> Self
+    where
+        S: Into<String>,
+    {
+        self.message = Some(message.into());
+        self
+    }
+
+    pub fn confirm_text<S>(mut self, confirm_text: S) -> Self
+    where
+        S: Into<String>,
+    {
+        self.confirm_text = Some(confirm_text.into());
+        self
+    }
+
+    pub fn cancel_text<S>(mut self, cancel_text: S) -> Self
+    where
+        S: Into<String>,
+    {
+        self.cancel_text = Some(cancel_text.into());
+        self
+    }
+
+    pub fn on_confirm(mut self, on_confirm: EventHandler<Msg>) -> 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<Msg> {
+    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()
+}

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";
+#[allow(dead_code)]
-const MESSAGE: &str = "Are you sure you want to continue with this action?";
+#[derive(Debug, Copy, Clone, PartialOrd, PartialEq)]
-const CONFIRM_TEXT: &str = "Confirm";
-const CANCEL_TEXT: &str = "Cancel";
-
-#[derive(Debug)]
 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 width: usize,
-    pub message: String,
+    pub with_icon: bool,
-    pub confirm_text: String,
+    pub children: Vec<Node<Msg>>,
-    pub cancel_text: String,
+    pub class_list: Vec<String>,
-    pub on_confirm: Option<EventHandler<Msg>>,
-}
-
-impl StyledModal {
-    pub fn build() -> StyledModalBuilder {
-        StyledModalBuilder::default()
-    }
 }
 
 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<Variant>,
-    title: Option<String>,
+    width: Option<usize>,
-    message: Option<String>,
+    with_icon: Option<bool>,
-    confirm_text: Option<String>,
+    children: Option<Vec<Node<Msg>>>,
-    cancel_text: Option<String>,
+    class_list: Vec<String>,
-    on_confirm: Option<Option<EventHandler<Msg>>>,
 }
 
 impl StyledModalBuilder {
@@ -52,53 +63,33 @@ impl StyledModalBuilder {
         self
     }
 
-    pub fn title<S>(mut self, title: S) -> Self
+    pub fn width(mut self, width: usize) -> Self {
-    where
+        self.width = Some(width);
-        S: Into<String>,
-    {
-        self.title = Some(title.into());
         self
     }
 
-    pub fn message<S>(mut self, message: S) -> Self
+    pub fn with_icon(mut self, with_icon: bool) -> Self {
-    where
+        self.with_icon = Some(with_icon);
-        S: Into<String>,
-    {
-        self.message = Some(message.into());
         self
     }
 
-    pub fn confirm_text<S>(mut self, confirm_text: S) -> Self
+    pub fn children(mut self, children: Vec<Node<Msg>>) -> Self {
-    where
+        self.children = Some(children);
-        S: Into<String>,
-    {
-        self.confirm_text = Some(confirm_text.into());
         self
     }
 
-    pub fn cancel_text<S>(mut self, cancel_text: S) -> Self
+    pub fn add_class(mut self, name: String) -> Self {
-    where
+        self.class_list.push(name);
-        S: Into<String>,
-    {
-        self.cancel_text = Some(cancel_text.into());
-        self
-    }
-
-    pub fn on_confirm(mut self, on_confirm: EventHandler<Msg>) -> Self {
-        self.on_confirm = Some(Some(on_confirm));
         self
     }
 
     pub fn build(self) -> StyledModal {
         StyledModal {
-            variant: self.variant.unwrap_or_else(|| Variant::Primary),
+            variant: self.variant.unwrap_or_else(|| Variant::Center),
-            title: self.title.unwrap_or_else(|| TITLE.to_string()),
+            width: self.width.unwrap_or_else(|| 130),
-            message: self.message.unwrap_or_else(|| MESSAGE.to_string()),
+            with_icon: self.with_icon.unwrap_or_default(),
-            confirm_text: self
+            children: self.children.unwrap_or_default(),
-                .confirm_text
+            class_list: self.class_list,
-                .unwrap_or_else(|| CONFIRM_TEXT.to_string()),
-            cancel_text: self.cancel_text.unwrap_or_else(|| CANCEL_TEXT.to_string()),
-            on_confirm: None,
         }
     }
 }
@@ -106,14 +97,41 @@ impl StyledModalBuilder {
 pub fn render(values: StyledModal) -> Node<Msg> {
     let StyledModal {
         variant,
-        title,
+        width,
-        message,
+        with_icon,
-        confirm_text,
+        children,
-        cancel_text,
+        mut class_list,
-        on_confirm,
     } = 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
+            ]
+        ]
     ]
 }

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};
+      color: ${ color.textLink };
-      ${font.medium}
+      ${ font.medium };font-weight: normal;
       &:hover, &:visited, &:active {
-        color: ${color.textLink};
+        color: ${ color.textLink };
       }
       &:hover {
         text-decoration: underline;

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;
 `;

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;
 `;

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};
+  color: ${ color.textDark };
-  ${font.medium}
+  ${ font.medium };font-weight: normal;
 `;
 
 export const CreatedAt = styled.div`

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
 `;

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`

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};
+  color: ${ color.textMedium };
-  ${font.medium};
+  ${ font.medium };font-weight: normal;;
   font-size: 13px;
 `;
 

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;
 `;

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
 `;
 

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)`

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`

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;
+  width: ${ props => props.size }px;
-  height: ${props => props.size}px;
+  height: ${ props => props.size }px;
   border-radius: 100%;
   text-transform: uppercase;
   color: #fff;
-  background: ${props => props.color};
+  background: ${ props => props.color };
-  ${font.medium}
+  ${ font.medium };font-weight: normal;
-  ${props => font.size(Math.round(props.size / 1.7))}
+  ${ props => font.size(Math.round(props.size / 1.7)) }
   & > span {
     display: flex;
     align-items: center;

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]};
+  background: ${ props => color[props.variant] };
-  ${font.medium}
+  ${ 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 =>
-      props.isActive &&
+    props.isActive &&
-      css`
+    css`
         background: ${mixin.darken(color[props.variant], 0.1)} !important;
       `}
   }
 `;
 
 const secondaryAndEmptyShared = css`
-  color: ${color.textDark};
+  color: ${ color.textDark };
-  ${font.regular}
+  ${ font.regular };font-weight: normal;
   &:not(:disabled) {
     &:hover {
-      background: ${color.backgroundLight};
+      background: ${ color.backgroundLight };
     }
     &:active {
-      color: ${color.primary};
+      color: ${ color.primary };
-      background: ${color.backgroundLightPrimary};
+      background: ${ color.backgroundLightPrimary };
     }
-    ${props =>
+    ${ props =>
-      props.isActive &&
+    props.isActive &&
       css`
         color: ${color.primary};
         background: ${color.backgroundLightPrimary} !important;

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 Modal from '../../../shared/components/Modal';
-import Button   from '../../../shared/components/Button';
+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;
 `;

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};
+  color: ${ color.textMedium };
-  ${font.medium}
+  ${ 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};
+  color: ${ color.danger };
-  ${font.medium}
+  ${ font.medium };font-weight: normal;
   font-size: 12.5px
 `;

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};
+  border: 1px solid ${ color.borderLightest };
-  color: ${color.textDarkest};
+  color: ${ color.textDarkest };
-  background: ${color.backgroundLightest};
+  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};
+    border: 1px solid ${ color.borderInputFocus };
-    box-shadow: 0 0 0 1px ${color.borderInputFocus};
+    box-shadow: 0 0 0 1px ${ color.borderInputFocus };
   }
   ${props =>
     props.invalid &&

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;
 `;

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;

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};
+    border: 1px solid ${ color.borderLightest };
-    color: ${color.textDarkest};
+    color: ${ color.textDarkest };
-    background: ${color.backgroundLightest};
+    background: ${ color.backgroundLightest };
-    ${font.regular}
+    ${ font.regular };font-weight: normal;
     font-size: 15px
     &:focus {
       background: #fff;
-      border: 1px solid ${color.borderInputFocus};
+      border: 1px solid ${ color.borderInputFocus };
-      box-shadow: 0 0 0 1px ${color.borderInputFocus};
+      box-shadow: 0 0 0 1px ${ color.borderInputFocus };
     }
-    ${props =>
+    ${ props =>
-      props.invalid &&
+    props.invalid &&
-      css`
+    css`
         &,
         &:focus {
           border: 1px solid ${color.danger};

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;',
+  regular: 'font-family: "CircularStdBook";',
-  medium: 'font-family: "CircularStdMedium"; font-weight: normal;',
+  medium: 'font-family: "CircularStdMedium";',
-  bold: 'font-family: "CircularStdBold"; font-weight: normal;',
+  bold: 'font-family: "CircularStdBold";',
-  black: 'font-family: "CircularStdBlack"; font-weight: normal;',
+  black: 'font-family: "CircularStdBlack";',
-  size: size => `font-size: ${size}px;`,
+  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};
+    color: ${ colorValue };
-    ${font.medium}
+    ${ font.medium };font-weight: normal;
     &:hover, &:visited, &:active {
-      color: ${colorValue};
+      color: ${ colorValue };
     }
     &:hover {
       text-decoration: underline;