fix styles

Author: Ivan Grekov

src/ui/knobs/text/index.tsx

@@ -1,12 +1,17 @@
-import React from 'react';
-import styled from 'styled-components';
-import TextBox from '../../primitives/text-box';
-import RowPropertyPanel from '../../primitives/row-property-panel';
-import ColorPicker from '../../primitives/color-picker';
-import SingleSelect from '../../primitives/select';
-import ButtonGroup from '../../primitives/button-group';
-import { AlignLeft, AlignCenter, AlignRight, AlignJustify } from 'react-feather';
-import { Declarations, UpdateProp, RemoveProp } from '../../store';
+import React from "react";
+import styled from "styled-components";
+import TextBox from "../../primitives/text-box";
+import RowPropertyPanel from "../../primitives/row-property-panel";
+import ColorPicker from "../../primitives/color-picker";
+import SingleSelect from "../../primitives/select";
+import ButtonGroup from "../../primitives/button-group";
+import {
+  AlignLeft,
+  AlignCenter,
+  AlignRight,
+  AlignJustify
+} from "react-feather";
+import { Declarations, UpdateProp, RemoveProp } from "../../store";
 
 const Container = styled.div``;
 
@@ -17,15 +22,19 @@ interface Props {
 }
 
 const Properties = {
-  FontSize: 'font-size',
-  LineHeight: 'line-height',
-  FontWeight: 'font-weight',
-  FontColor: 'color',
-  FontFamily: 'font-family',
-  TextAlign: 'text-align',
+  FontSize: "font-size",
+  LineHeight: "line-height",
+  FontWeight: "font-weight",
+  FontColor: "color",
+  FontFamily: "font-family",
+  TextAlign: "text-align"
 };
 
-export default function TextStyles({ declarations, updateProp, removeProp }: Props) {
+export default function TextStyles({
+  declarations,
+  updateProp,
+  removeProp
+}: Props) {
   return (
     <Container>
       <RowPropertyPanel
@@ -34,19 +43,25 @@ export default function TextStyles({ declarations, updateProp, removeProp }: Pro
           removeProp(Properties.FontSize);
         }}
       >
-        <TextBox value={declarations[Properties.FontSize] || ''} onChange={value => updateProp(Properties.FontSize, value)} />
+        <TextBox
+          value={declarations[Properties.FontSize] || ""}
+          onChange={value => updateProp(Properties.FontSize, value)}
+        />
       </RowPropertyPanel>
       <RowPropertyPanel
         label="Line height"
         onClear={() => {
           removeProp(Properties.LineHeight);
         }}
       >
-        <TextBox value={declarations[Properties.LineHeight] || ''} onChange={value => updateProp(Properties.LineHeight, value)} />
+        <TextBox
+          value={declarations[Properties.LineHeight] || ""}
+          onChange={value => updateProp(Properties.LineHeight, value)}
+        />
       </RowPropertyPanel>
       <RowPropertyPanel label="Font weight">
         <SingleSelect
-          value={declarations[Properties.FontWeight] || ''}
+          value={declarations[Properties.FontWeight] || ""}
           onChange={value => {
             if (value === null) {
               removeProp(Properties.FontWeight);
@@ -56,41 +71,41 @@ export default function TextStyles({ declarations, updateProp, removeProp }: Pro
           }}
           options={[
             {
-              value: '100',
-              label: '100',
+              value: "100",
+              label: "100"
             },
             {
-              value: '200',
-              label: '200',
+              value: "200",
+              label: "200"
             },
             {
-              value: '300',
-              label: '300',
+              value: "300",
+              label: "300"
             },
             {
-              value: '400',
-              label: '400',
+              value: "400",
+              label: "400"
             },
             {
-              value: '500',
-              label: '500',
+              value: "500",
+              label: "500"
             },
             {
-              value: '600',
-              label: '600',
+              value: "600",
+              label: "600"
             },
             {
-              value: '700',
-              label: '700',
+              value: "700",
+              label: "700"
             },
             {
-              value: '800',
-              label: '800',
+              value: "800",
+              label: "800"
             },
             {
-              value: '900',
-              label: '900',
-            },
+              value: "900",
+              label: "900"
+            }
           ]}
         />
       </RowPropertyPanel>
@@ -101,7 +116,7 @@ export default function TextStyles({ declarations, updateProp, removeProp }: Pro
         }}
       >
         <ColorPicker
-          color={declarations[Properties.FontColor] || ''}
+          color={declarations[Properties.FontColor] || ""}
           onChange={color => {
             updateProp(Properties.FontColor, color);
           }}
@@ -113,7 +128,10 @@ export default function TextStyles({ declarations, updateProp, removeProp }: Pro
           removeProp(Properties.FontFamily);
         }}
       >
-        <TextBox value={declarations[Properties.FontFamily] || ''} onChange={value => updateProp(Properties.FontFamily, value)} />
+        <TextBox
+          value={declarations[Properties.FontFamily] || ""}
+          onChange={value => updateProp(Properties.FontFamily, value)}
+        />
       </RowPropertyPanel>
       <RowPropertyPanel
         label="Text align"
@@ -125,26 +143,26 @@ export default function TextStyles({ declarations, updateProp, removeProp }: Pro
           options={[
             {
               icon: <AlignLeft size="13px" />,
-              tooltip: 'Align left',
-              value: 'left',
+              tooltip: "Align left",
+              value: "left"
             },
             {
               icon: <AlignCenter size="13px" />,
-              tooltip: 'Align center',
-              value: 'center',
+              tooltip: "Align center",
+              value: "center"
             },
             {
               icon: <AlignRight size="13px" />,
-              tooltip: 'Align right',
-              value: 'right',
+              tooltip: "Align right",
+              value: "right"
             },
             {
               icon: <AlignJustify size="13px" />,
-              tooltip: 'Align justify',
-              value: 'justify',
-            },
+              tooltip: "Align justify",
+              value: "justify"
+            }
           ]}
-          value={declarations[Properties.TextAlign] || ''}
+          value={declarations[Properties.TextAlign] || ""}
           onChange={value => {
             updateProp(Properties.TextAlign, value);
           }}

src/ui/types.ts

@@ -7,8 +7,8 @@ import {
   BordersProps,
   BackgroundColorProps,
   FontSizeProps,
-  LineHeightProps,
-} from 'styled-system';
+  LineHeightProps
+} from "styled-system";
 
 export type StyleProps = FlexDirectionProps &
   SpaceProps &