Properly use css prop

gravitational · Apr 27, 2022 · 5ded89c · 5ded89c
1 parent cb51f29
commit 5ded89c
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 6 deletions.
diff --git a/packages/teleterm/src/ui/TopBar/Clusters/ClusterSelector/ClusterSelector.tsx b/packages/teleterm/src/ui/TopBar/Clusters/ClusterSelector/ClusterSelector.tsx
@@ -22,7 +22,13 @@ export const ClusterSelector = forwardRef<HTMLDivElement, ClusterSelectorProps>(
         isClusterSelected={!!props.clusterName}
         title={text}
       >
-        <Text css={{ whiteSpace: 'nowrap' }}>{text}</Text>
+        <Text
+          css={`
+            white-space: nowrap;
+          `}
+        >
+          {text}
+        </Text>
         <SortIcon fontSize={12} ml={3} />
       </Container>
     );
@@ -42,7 +48,7 @@ const Container = styled.button`
   justify-content: space-between;
   align-items: center;
   padding: 0 12px;
-  opacity: ${props => props.isClusterSelected ? 1 : 0.6};
+  opacity: ${props => (props.isClusterSelected ? 1 : 0.6)};
   cursor: pointer;
 
   &:hover,

diff --git a/packages/teleterm/src/ui/TopBar/Connections/ConnectionsFilterableList/ConnectionItem.tsx b/packages/teleterm/src/ui/TopBar/Connections/ConnectionsFilterableList/ConnectionItem.tsx
@@ -43,7 +43,10 @@ export function ConnectionItem(props: ConnectionItemProps) {
     <ListItem
       onClick={props.onActivate}
       isActive={isActive}
-      css={{ padding: '6px 8px', height: 'unset' }}
+      css={`
+        padding: 6px 8px;
+        height: unset;
+      `}
     >
       <ConnectionStatusIndicator mr={3} connected={props.item.connected} />
       <Flex
@@ -59,20 +62,25 @@ export function ConnectionItem(props: ConnectionItemProps) {
             bold
             color="text.primary"
             title={props.item.title}
-            css={{ lineHeight: '16px', whiteSpace: 'normal' }}
+            css={`
+              line-height: 16px;
+              white-space: normal;
+            `}
           >
             {props.item.title}
           </Text>
           <Text
             color="text.secondary"
             typography="body2"
-            css={{ whiteSpace: 'normal' }}
+            css={`
+              white-space: normal;
+            `}
           >
             {props.item.clusterName}
           </Text>
         </Flex>
         <ButtonIcon
-          mr="-10px"
+          mr="-3px"
           color="text.placeholder"
           title={actionIcon.title}
           onClick={e => {