styled-components syntax

henck · Dec 30, 2023 · 3afdcaa · 3afdcaa
1 parent acba7a8
commit 3afdcaa
Show file tree

Hide file tree

Showing 9 changed files with 22 additions and 22 deletions.
diff --git a/src/controls/CircularProgress/CircularProgress.tsx b/src/controls/CircularProgress/CircularProgress.tsx
@@ -170,7 +170,7 @@ const CircularProgressStyled = styled(CircularProgressBase).attrs(p => ({
 /**
  * Numeric value to show in center of control.
  */
-const Value = styled('div')`
+const Value = styled.div`
   position: absolute;
   font-size: 180%;
   font-weight: 500;

diff --git a/src/controls/DataTable/Head.tsx b/src/controls/DataTable/Head.tsx
@@ -11,7 +11,7 @@ interface IHeadProps {
 // HeaderInner is used to get rid of the scrollbar in
 // the Head. It is replaced with whitespace.
 // https://stackoverflow.com/a/49278385/1266190
-const HeadInner = styled('div')`
+const HeadInner = styled.div`
   display: flex;
   margin-right: -999px;
   padding-right: 999px;

diff --git a/src/controls/DataTable/Styles.ts b/src/controls/DataTable/Styles.ts
@@ -1,16 +1,16 @@
 import styled from '../../styles/Theme';
 
-const Body = styled('div')`
+const Body = styled.div`
   flex: 1;
   overflow-y: scroll;
 `;
 
-const Table = styled('div')`
+const Table = styled.div`
   position: relative;
   flex: 1;
 `
 
-const TableInner = styled('div')`
+const TableInner = styled.div`
   display: flex;
   flex-direction: column;
   position: absolute;
@@ -20,4 +20,4 @@ const TableInner = styled('div')`
   bottom: 0;  
 `
 
-export { Body, Table, TableInner };
+export { Body, Table, TableInner }
diff --git a/src/controls/Dropdown/Body.tsx b/src/controls/Dropdown/Body.tsx
@@ -50,10 +50,10 @@ const MAX_CHILDREN_VISIBLE = 6;
  * height as other list items. This is important for opening/closing
  * the list to the correct height.
  */
-const SearchBox = styled('div')`
+const SearchBox = styled.div`
 `
 
-const BodyInner = styled('div')`
+const BodyInner = styled.div`
 `
 
 const Body = styled(BodyBase).attrs(p => ({
@@ -140,4 +140,4 @@ const Body = styled(BodyBase).attrs(p => ({
   }
 `;
 
-export { Body };
+export { Body }
diff --git a/src/controls/Input/Time/Selector.tsx b/src/controls/Input/Time/Selector.tsx
@@ -219,14 +219,14 @@ class SelectorBase extends React.Component<ISelectorProps, ISelectorState> {
   }
 }
 
-const Body = styled('div')`
+const Body = styled.div`
   position: relative;
   padding: 14px;
   text-align: center;
 `;
 
 // Footer contains Select and Cancel buttons:
-const Footer = styled('div')`
+const Footer = styled.div`
   padding: 10px;
   text-align: right;
   border-top: solid 1px ${p => p.theme.normalColor};
@@ -236,7 +236,7 @@ const Footer = styled('div')`
 `
 
 // ControlBar aligns inputs and AM/PM labels in a row:
-const ControlBar = styled('div')`
+const ControlBar = styled.div`
   display: inline-flex;
   border: solid 1px ${p => p.theme.normalColor};
   border-radius: ${p => p.theme.radius}px;
@@ -248,12 +248,12 @@ const ControlBar = styled('div')`
 
 // InputBar aligns inputs in a row. These are in a div of their
 // own so that we can do last-child on them.
-const InputBar = styled('div')`
+const InputBar = styled.div`
   display: inline-flex;
 `
 
 // Wraps an input, adding ":" after it.
-const InputHolder = styled('div')`
+const InputHolder = styled.div`
   position: relative;
   width: 59px;
   &:not(:last-child):after {
@@ -311,4 +311,4 @@ const Selector = styled(SelectorBase)`
   }
 `
 
-export { Selector };
+export { Selector }
diff --git a/src/controls/Pane/Pane.tsx b/src/controls/Pane/Pane.tsx
@@ -75,7 +75,7 @@ class PaneBase extends React.Component<IPaneProps> {
   }
 }
 
-const Iconholder = styled('div')`
+const Iconholder = styled.div`
   position: absolute;
   right: 10px;
   top: 10px;

diff --git a/src/controls/Panel/Footer.tsx b/src/controls/Panel/Footer.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import styled from '../../styles/Theme';
 
-const Footer = styled('div')`
+const Footer = styled.div`
   position: relative;
   padding: 14px;
   background: #f9f9f9;

diff --git a/src/modules/DmsInput/DmsInput.tsx b/src/modules/DmsInput/DmsInput.tsx
@@ -138,7 +138,7 @@ class DmsInputBase extends React.Component<IProps> {
   }
 }
 
-const DegreesHolder = styled('div')`
+const DegreesHolder = styled.div`
   display: inline-block;
   position: relative;
   width: 63px;
@@ -151,7 +151,7 @@ const DegreesHolder = styled('div')`
   }
 `
 
-const MinutesHolder = styled('div')`
+const MinutesHolder = styled.div`
   display: inline-block;
   position: relative;
   width: 46px;
@@ -164,7 +164,7 @@ const MinutesHolder = styled('div')`
   }
 `
 
-const SecondsHolder = styled('div')`
+const SecondsHolder = styled.div`
   display: inline-block;
   position: relative;
   width: 80px;
@@ -177,7 +177,7 @@ const SecondsHolder = styled('div')`
   }
 `
 
-const FloatHolder = styled('div')`
+const FloatHolder = styled.div`
   display: inline-block;
   width: 135px;
 `

diff --git a/src/modules/MarkdownTextarea/MarkdownTextarea.tsx b/src/modules/MarkdownTextarea/MarkdownTextarea.tsx
@@ -83,7 +83,7 @@ const Scrollable = styled(ScrollableBase)`
   overflow-x: none;
 `
 
-const Options = styled('div')`
+const Options = styled.div`
   font-size: 9px;
   a { 
     color: steelblue;